Tutorial Javascript - Forms & Functions

Changing The Value Of A Text Box

Before you can manipulate text boxes you must first know how to create a form and how to create a text box in HTML. I will quickly explain this.

Forms for JavaScript are slightly different to standard ones as they do not require any information or script to handle them. You can do everything by just giving the form a name (although later you may want to add the other information so that you can also have the form submitted):

In this form you can place a text box using:



Once you have this you can create your first JavaScript to refer to a form:

Move the mouse over here to add some text to the box

This is done very easily using the onMouseOver property of the link. It can refer to the text box as follows:

window.document.example1.first_text.value='Hi there';

This tells the browser to put 'Hi there!' into the value of the item called 'first_text' in the form called 'example1'.

You can also do this with multiline text boxes. You can use
/n
to start a new line.

In this section, you have learnt the most important part of this lesson, how to refer to an item in a form.

Events

Just like links, you can set events for items in a form. They are:

onBlur - Happens when the cursor is moved out of the field
onFocus - Happens when the cursor is moved into the field
onChange - Happens when the field is changed and the cursor moves out of it

These are placed into the code as part of the form's item for example:



JavaScript Functions

JavaScript functions are very useful, and this seems an appropriate place to introduce them. They are pieces of JavaScript which can be declared at the top of your page and can then be referred to again and again in your code. You can even pass parameters to them and make them do different things.

Functions take the following form:

function functionname(parameters)
{

}

For a very basic function you need no parameters and it would be constructed like this (in the of the document):

function sayhi()
{
alert(Hi there!);
}

Then, anywhere in the text you could place this:

Say Hi

Which would display the alert whenever the mosuse passed over it. Unless you are repeating something many times, though, this will not seem particularly useful. This is where parameters become useful.

Parameters

Parameters are a very useful part of functions. They allow you to pass data to the function when it is called. Here is an example:

function say(what)
{
alert(what);
}

in the head, then:

Say Hi
Say Bye

What this is doing is the information in the brackets is passed to the function. In the brackets of the function is the word 'what'. This is telling the JavaScript to assign the information in the brackets to the variable what (the same as var what='something';). You can even do this with multiple pieces of information by separating th
em by commas.

As you can see functions and parameters are very useful.
Sumber: Look