Forms are created in HTML, but JavaScript links to these objects to allow for processing and operations. An event is something that happens due to an action the viewer takes. Event handlers are the code/means for the programmer to set up the course of action according to what the viewer has changed in the form. An example would the addition of the "onclick" property to an input tag, linking to a function.
A form is an object and is given a name to differentiate it from other similar objects.
This allows the programmer to link to that specific form, making programming easier. The various parts(elements) can be named so the JavaScript code can designate exactly which element is to be accessed.
To work with what the viewer has typed in the text box or other area, the name is appended by ".value". For example document.calculator.num1.value will give the value typed in the text box named num1 on the form named calculator.
The "with" statement allows a shortened referencing by specifying a particular object in the document for a group of statementd.
function calc()
{
with(document.calculator)
{
num1.value=parseFloat(num1.value);
num2.value=parseFloat(num2.value);
result.value=num1.value+num2.value;
}
}
Methods are actions that objects can perform. These have been part of JavaScript itself. Functions are actions the programmer can create, customizing them to provide the desired action or actions according to the input from the viewer. Variables declared inside a function are local and only exist while the function runs. Variables declared outside the the function are global and can be used anywhere in the program.
The general form for a function is:|
function name() { stmt1; stmt2; etc. } |
|
elements[]=array of all the form's elements |
submit()= submit form to CGI program reset()= resets form elements to original setting |
|
|
|
|
|
Properties are according to type of form element button (name,value) checkbox (checked,name,value) radio button (checked, name, value) reset (name, value) select (name, options[], selectedIndex,value) text field (name, value) text area (name,value) |
Property of a Select menu, indexes a pulldown menu's options index= index position number in array text= text string that appears on menu for that option value=hidden value for the option |
Text boxes have a value typed into them. But checkboxes and other form elements do not. The checkbox object has a Boolean property, meaning it is either true or false (on or off). To give them a value, the "value" property can be used.
Checks to see if they are true, such as the if statements, can be written in the usual manner of if(item1.checked= =true) or they can simply be written as if(item1.checked).
Checkboxes and other inputs also have a value property. On type = button, submit, or reset; value = text displayed on the button. With checkboxes and others, value = a number or text that the programmer can access by referring to name.value. For example car2.value.
Rather than do a document.write, the output is sent to a text or textarea box, the name allowing the programmer to direct it there much as the tyarget attribute links to a name tag in handling HTML links. Since the output is NOT going directly to the document page, the usual method of putting in a line break (<br>) can not be used. Instead the code "\r" inserts a line break inside the result box.
If radio buttons have different names, they will act like checkboxes. However, if the radio buttons are all assigned the same name, then only one button can be selected. Selecting a second one will unselect the previous one. But having the same name for all of the possible radio button selections means that the document.form.name format no longer allows the programmer to differentiate as to which selection was made by the viewer. Instead, an array is used to designate the possible selections.
An array is an object that indexes a group of variables. Basically, this means that all the possible answers are gathered under one object, with each occupying a specific location in the order of presentation. Arrays can be one, two, or more dimensions. A spreadsheet is a good representation of a two dimensional array, composed of rows and columns; each cell having a set 'address' so that contents can be found using the cell designation. JavaScript works with one dimensional arrays, so think of it as a stack of boxes all bundled together.
Arrays have a name and index. The index is the position number. Square brackets ([]) are used to designate the index, which can be as actual number or a variable.
When a browser loads a web page with a form object, an elements array is automatically created to keep track of the various elements contained in the form. The index starts with zero and extends to however many buttons/elements exist in the form. Radio buttons with the same name make it necessary to use the elements array to designate which button is being addressed in the program, but the elements array can be used to address all elements in the form and skip the usage of the name feature.
Using a pulldown menu involves using a different array: the options array. Value can again be used to provide a hidden datum for inclusion in the program. "Text" will allow retrieval of the descriptive text that accompanies the particular option tag. The primitive property selectedIndex (the I is capitalized) gives the position within the options[] array.
The onchange event handler will activate a function when the pulldown menu has a selection made, and not have to wait until a different button is clicked.
. Lesson 5 of JavaScript