An inline script must be contained within a matching pair of <script> tags, as in the following example, which also identifies the language and version:

<script language="JavaScript1.1">
// Code lines go here...
</script>

This is the same whether it is in the head section or within the HTML itself, except where it is provided as an event handler. In such cases, the script tag is not necessary, and the language and version identifier is omitted. For example:

<input type="submit" value="Submit" onClick="document.myForm.name.style =
           'background-color:red'">

However, if it is ever used as a target in a clickable entity (anchor, link, or suchlike), a special usage is generally applied. This is to identify the target of the link as JavaScript as opposed to something else such as a Web page (prefixed with http://) or other resource.

This inline usage then becomes:

<a href="Javascript:history.go(-1)">Back</a>

These are the three ways in which JavaScript can be identified and used inline. In all cases, multiple statements could theoretically be used, but, generally speaking, the JavaScript statements for event handlers and link targets tend to be single function calls or object references.

External JavaScript documents must have the extension .js and must be specified by the Web server as a type of document that it can serve. This can require special configuration on the part of the server administrator, and in some cases, special permission to host the .js files must be sought (especially on free Web host providers’ domains).

The reason that the configuration is required is so that it can pass the correct MIME type to the browser; without it, the browser might not know how to process the included file. Again, though, as with many client side functions, as long as the browser receives the resource, it will try to figure out how to process it for itself.

    <script src="my_functions.js" type="application/x-javascript">

Sometimes it is necessary to do two things when using JavaScript, or any other scripting language, where support is optional, to prevent the browser becoming confused. The two possibilities are as follows:

The first is used to mask the script from those browsers that do not process the <script> tag at all. Because rendering HTML requires (or at least encourages) that browsers ignore tags that they do not understand, the problem is not with the script tag itself. Rather it is with the JavaScript code that is contained within it.

A browser that does not process JavaScript (or the <script> tag) will not be able to do anything more than ignore the information that it does not understand. To this end, you just put those commands in HTML comments, thus:

<script language="JavaScript1.1">
<!- - Use HTML comments to hide the code
// JavaScript commands go here. . .
// . . . this line ends the hiding here - ->
</script>

This is the first of two possible options provided for those browsers that understand the <script> tag, but whose authors have chosen not to implement script processing. The second approach is to display some other content that does not rely on scripts to be displayed by the browser.

For example:

<noscript>
Your browser does not seem to support JavaScript!<br/>

(Perhaps you need to enable it?)
</noscript>

The browser is expected to render the content contained in the <noscript> tag as if it is regular HTML. This gives the author of the page the possibility to redirect the users to a download page for an updated browser that might support scripting. It also allows the users to enable the scripting engine if they have disabled it for security reasons.

Although it is becoming less and less necessary to do either of these options, it is still polite to attempt one or the other to make sure that all users have a consistent experience. They can even be used together, and there are no hard and fast rules about which is more appropriate. As a rule of thumb, if something viable and sensible can be displayed on platforms that have no script support, the <noscript> tag can be used. Otherwise, it is best to comment out the script commands and leave it at that.

Before you go on to the first part of the language discussion, there are a few basic things that you will need to remember. These form part of the underlying rules that govern the language and must be respected at all times.

First, in your experiments, you will note that JavaScript rarely fails noisily. Often the only clue that you have that it is not correctly written is that it fails to do anything. At this point, you need to use the reporting function of your browser.

In Internet Explorer, this is indicated by a little error flag in the bottom left of the status bar. Double-clicking it will result in a dialog box containing the nature and location of the JavaScript error, as shown in Figure 5.1.

Figure 5.1. Internet Explorer error handling

In Firefox, you need to access the error console via the menu. This is shown in Figure 5.2. The console can also be used to execute simple JavaScript statements and display the result.

Figure 5.2. The Firefox JavaScript console

Many of these errors will stem from the fact that JavaScript is case-sensitive—thismodule and ThisModule are not the same. This means that if you define something as thisModule and then try to access it as ThisModule, JavaScript will assume that you are trying to create a new item called ThisModule.

You can’t put quotes inside quotes. Sometimes, however, it is necessary. This usually happens when you’re trying to use a piece of JavaScript inside an event handler (such as onClick), where the code needs to refer to the name of something. In such cases, you need to use a single quote inside the double quotes. An example of this is as follows:

<input type="button" onClick="document.src = 'new_page.html';">

All statements must end with a semicolon (;). Sometimes, programmers leave them out in cases where the statement is an obvious end to a program, or in an event handler. This is not good practice for the novice, however, and is a bad programming habit to get into.

Comments are pieces of code that are not supposed to be executed by the browser, in the same way that HTML comments are not meant to be rendered. In JavaScript, comments are usually contained after // and inside /* */, which should be very familiar to C programmers. The following is a valid comment:

2 + 2; // This will not be evaluated

The /* */ usage is for multi-line comments:

/* Nor will this
   be at all */

Bear in mind that if something is inside a comment, it will be discarded. So, everything from the /* to the */ will be ignored, even if it is, itself, a comment. This means that it is not possible to use the // single comment token to end a multi-line comment that has been opened with /*.

Names of things in JavaScript cannot start with numbers or other special characters (although they can start with underscores, _, if you so wish). If you stick with a to z and A to Z or possibly an underscore, this is the correct approach. In addition, JavaScript names cannot contain spaces; an underscore is an acceptable substitute.

JavaScript is also not type-sensitive. As far as JavaScript is concerned, the number 42 and the string “42” are identical for numerical operations. JavaScript converts values by itself based on the target type or chooses the most appropriate type for a literal provided by the programmer.

This last point might be a little confusing right now, so it is a good time to discuss variables and types.

A string is often viewed as an array of characters. Therefore, an array is a place where multiple pieces of data can be stored. You can think of it as a row of boxes that can contain individual pieces of data.

An array can contain any data type that can be defined in JavaScript, including the objects that make up an HTML page. They can also be mixed, meaning that different types of data can be stored next to each other in the array. There is a slight issue with this—as the programmer, you have to remember what order you put the data into the array so that when you take it out, it has the meaning that you expect.

Arrays that mirror the DOM are special objects in JavaScript because they follow the HTML model and give you access to parts of the HTML document. So, each element becomes a container (an array) for the elements that are logically stored inside it.

You’ll look at this in more detail later on, when you start to manipulate the Document Object Model (DOM). For now you just need to know that the paragraphs, headings, forms, and their various fields and buttons are all objects, and they can all be accessed using JavaScript arrays.

So, the document has an array of paragraphs, divisions, spans, layers, and other HTML elements inside it. A form contains an array of the controls that are used to provide the interactive content to the users.

Similarly, the document has an array of forms, and so on.

All of these objects can be referenced by their index in the page. The first form, for example, is contained at the first position of the forms array, which mirrors the DOM collection of forms inside the HTML document. This index is zero-based.

This means that an array of ten pieces of data is referenced by numbers 0 to 9. The type of the data will be assigned when the first value is stored at a referenced position inside the array. So, to access the first element in an array, you would use code such as:

myArray[0] = "element one";

An array can be declared by either filling it with values or reserving a certain number of items in advance. To set up an initially empty ten-element array, you would write:

var myArray = new Array (10);

You access an element in the array using the square bracket notation:

myArray[0] = "banana"; // This is the first element

Up until this line is executed, myArray[0] had the special value undefined as did the rest of the array. This special value can be tested for to see if an array has already been initialized. This is a technique that you’ll look at later on.

There is an easier way both to initialize and declare the array, at the same time filling it with an initial set of values. This uses the new keyword, along with the correct object type for an array, which happens to be Array. The code looks like:

var myFruits = new Array ("apple", "orange", "banana");

There are other objects that can be created in this way, such as strings, and the JavaScript short reference (the Core Objects) covers a useful subset of the objects and the various operations that they support (also called methods).

There are many such operations that can be done on an array, such as adding and removing elements from it, sorting the array, and so on. These methods are all covered at the appropriate point in the short reference section.

Before leaving the topic of arrays for the time being, note that the previous examples are of one-dimensional arrays. Multidimensional arrays are also possible and used quite frequently in JavaScript programming. For example, if you want to store a table of integer values, you would first set it up using a declaration such as:

var myTable[10][10]; // 10 × 10 array

It is only when you begin to assign elements to the array that you begin to tell JavaScript what the elements are that should go into it. For example you could write code such as:

myTable[0][1] = 3;
myTable[1][1] = "three"; // [0][1] still contains 3

So far, you have looked at a lot of data storage and manipulation without looking at the operators in any detail. This would be a good time to do that, before you start putting the pieces together.

An operator performs some kind of operation on a set of values, be they variables or literals. An operator typically takes two arguments, although there is something called the conditional operator that takes three.

One thing to remember when using operators in JavaScript is that it will automatically translate a literal or a variable (that contains a literal) into an object before operating on it. This is part of the underlying mechanisms provided by JavaScript that make it flexible and easy to program with.

x = x; // Possible
x = "42"; // Put a string literal in x
"42" = x; // odd, doesn't do much
x=x+ 1; // add 1tox,put result in x

operation=

x+=1;

x /= 2; // x = x / 2 (division)
x-=7;//x= x-7

x = = y; // will be true if x equals y

var x = 3;
var y = "3";
x = = y; // will still be true

x != 1; // will be true if x is not equal to 1
x != true; // will be true if x is false

x > y; // true if x is greater than y

x >= y; // true when x is greater than or equal to y

x < y; // true if x is less than y
x <= y; // true when x is less than or equal to y

var x = 42 + 1; // x = 43
var y = 100 - 1; // y = 99
var z=x/ y; // z= 0.43 or thereabouts

x = = y && a = = b; // statement is true if x is equal
                       // to y and a is equal to b

x = = y || a = = b; // true when x equals y or a equals b, or both

!(x = = y) || !(a = = b); // true when x != y or a != b, or both

"a " + "b"; // returns "a b"

var myString = "a ";
myString += "b"; // myString now contains "a b"

var myAddress = new String ("some text");
var myArrayOfNumbers = new Array (1, 2, 3, 4, 5);

delete (myAddress);

delete myArrayOfNumbers[0];

condition ? if_true : if_false

(y == 3) ? x = 0 :x = 1;

<form action="submit.php" onClick="validate_form(this);" method="post">

<form action="submit.php" onClick="void(validate_form(this));" method="post">

An expression is a collection of valid JavaScript literals (1, "a string", and so on), objects and their operators, or logical operators and valid values that all result in a single value. Any collection of the such objects that are combined in a single statement to be evaluated is known as an expression.

For example, all of the following are valid expressions:

x + 27; // assuming that x exists
y = x + 3; // result is assigned to y
myBoolean = (x > 42) ? true : false;

Where expressions become very important is for testing in conditions that allow the programmer to execute code conditionally (if a given expression is true, do this; otherwise do something else). You say that you are evaluating the expression.

Also, expressions are very useful in repetition statements (also called loops) where an action can be performed multiple times inside a code block. It is the evaluation of the expression that dictates when the loop can be terminated.

Functions can also be used as part of expressions, as long as they return a value that is of some use in the context of the expression being evaluated. You have not yet met functions, so now would be a good time to introduce them, as they are an integral part of client side JavaScript programming.

A function is called by name, giving any arguments in the parameter list enclosed in parentheses. For example:

myFunction ("string", 1);

The same naming conventions apply to function names as for other names in JavaScript. All the parameters are passed by value. This means that they cannot be changed, even if they are passed as variables. An example of passing variables (as opposed to the previous example, which passes two literals) is as follows:

myFunction (myString, myNumber); // myString and myNumber passed by value

The exception to this is when an object is passed (such as an array). In such cases, if the value contained in the object is modified, that modification stands even outside the function. This method of passing entities is called passing by reference instead of by value.

There are several built-in functions that can be used for a variety of tasks, which you’ll read about now.

You’ll read about these in more detail later on, because there are many different functions used for various tasks. Here is a brief summary of the most useful ones, which you need to understand in order to grasp some of the other examples in the book.

The first are the conversion functions—Number and String—which turn an expression that is not a string or number into a string or number. This is an alternative approach to allowing JavaScript to do the conversion for you.

This sounds reasonably straightforward, and it is. There is a particular example, where the String function can be used to render strange objects like a Date object into readable text. So, the following snippet can be written:

myDate = new Date (); // make a new date object, set to Today
myDateString = String (myDate); // convert to a string

Having evaluated this code, myDateString now contains:

"Sun Jan 27 2008 10:52:41 GMT+0100 (Romance Standard Time)"

Next, the eval function allows you to evaluate a string as if it were a piece of JavaScript code. The result of the eval function is, therefore, the result of the code that was executed. Clearly, this is very powerful for building expressions in a string with input from the user and then letting the JavaScript engine perform the relevant actions.

(Imagine, for example, entering a string of JavaScript into a text box in a form and having JavaScript evaluate it as if it were code.)

If the string to be evaluated contains statements or function names, eval will even call the functions and perform the statements. Some examples:

myNumber = "1 + 3"; // myNumber contains "1 + 3"
myNumber = eval (myNumber); // myNumber now contains 4

The last really useful pair of functions is escape and unescape. These are very useful in client side Web programming because they allow you to encode a URL by escaping the special characters. These characters are not allowed by the HTML standard; for example, you cannot pass characters in search strings to a search engine. For example:

mySearchString = escape("first second third");
     // mySearchString contains "first%20second%20third

You will meet these two again when you look at some client/server scripting for use in the Web environment.

The programmer can also define functions as long as they do not conflict with any functions that exist in the JavaScript namespace, and as long as they follow the aforementioned naming conventions.

It is good programming style to differentiate user-defined functions sufficiently that they do not become confused with pre-existing JavaScript functions. Although JavaScript will complain only if the functions are identical—name and parameter list—reading back the code is made much easier if there are no naming conflicts.

A user-defined function is declared as follows:

function myFunction (myParameter, myParameter) {
// My code statements
}

The code between the braces ({ and }) is executed when the function myFunction is used by name with the correct number of parameters in another code block. This is called calling the function.

You call the code between braces a code block, in this case a named code block. Other constructs for decision making and looping (repetitive statements) also use code blocks contained in between braces.

A function can also return a value, which can be used for ongoing processing. An example of a function that returns a value is as follows:

function myFunction (myParameter, myParameter) {
  // My code statements
  return myReturnValue;
}

The type of myReturnValue can be anything that JavaScript supports, even objects. It can be denoted as a variable, as in the previous example, or as a literal. So, an equally valid return statement might be:

return true;

Other functions that have been defined within the scope of the function being defined can also be called. As long as the function has been defined before it is called, it can be called from inside another function.

A function can also be defined as recursive; in other words, it can call itself. This is quite useful for processing lists (arrays) of objects in a similar fashion. If you use recursion, it is important to make sure that the exit condition is defined; otherwise, it will call itself forever.

Recursion is used in Web programming when the objects in a Web page must be traversed when looking for a specific item. The classic textbook example of a recursive function is the factorial function (for positive, non-zero numbers). It looks similar to this:

function my_fact ( n ) {
  if (n <= 1) return 1; // is n less than or equal to 1?
    else return (n * my_fact(n-1)); // if not call myself
}

The book covers conditional processing later on; for now, all that you need know is that the if clause evaluates the expression in brackets and performs a specific function—in this case, exiting the recursion—if it evaluates to true. You will probably recognize the alternative:

(n <= 1) ? return 1; return (n * my_fact(n-1));

A function can also be called with a variable number of arguments.

It is perfectly possible to define a function that does not have exactly one named parameter for each piece of information that it needs to process. Instead it has only one named parameter, and the rest are implied and can be accessed from the function code implicitly.

Parameters that are passed and not named can be accessed through the arguments property of the function. A function is, in this case, being treated as an object. The following example shows access to the parameter list, using the this object:

function myFunction (parameter_0) {
  return parameter_0 + this.arguments[1];
}

The this variable is special in JavaScript, and it refers to the current object. Inside a function, that object is the function itself. Outside functions, it can refer to the page, an HTML form, or an object inside the form (when called from a handler).

This example assumes that the function will be passed more than one argument, otherwise arguments[1] will be undefined. You can obtain the number of arguments by using the length property of the arguments collection (which is just an array of argument strings):

for (var arg = 0; arg < this.arguments.length; arg++) {
// process this.arguments[arg] here
}

This example uses a counted loop, which you’ll look at later on. Here, all that is necessary is to be aware that, inside the braces, the code is executed as many times as there are arguments, adding 1 to the arg counter each time. When the < expression evaluates to false, the loop stops.

The collection of values in the arguments array are accessed via a zero-based index, like all array processing.

JavaScript has two basic decision-making mechanisms, allowing for both binary decisions and testing for one of a set of values. These are similar to those provided by other programming languages:

The first is for use when a condition needs to be evaluated that resolves to a binary condition—yes or no, true or false. The second is used when an expression could evaluate to one of a known discrete (finite) set of values.

The simple form of the if construct is as follows:

if (a == true) { // assuming a is Boolean
// execute this code
}

If the code to be executed consists of a single statement, the braces ({ and }) can be omitted. For example:

if (a == true)
   // do this

If there is an alternative piece of code to be executed when the condition evaluates to false, the following construct can be used:

if (a == true) {
   // do this if a is true

} else {
   // do this if a is false
}

Again, braces can be omitted in cases when there is only a single line of code (a single statement, in reality) to be executed. The expression in parentheses can be any expression that is valid in JavaScript and evaluates to a single true or false value. So, for example:

if (a = = "my string " + myNumberAsString) {
   // do this if a is true
} else {
   // do this if a is false
}

In cases where one of a known set is the result of the expression, the switch construct is used. This is often preferable to a whole slew of if statements, all testing for a specific value against a predefined set.

This mechanism has two parts: the switch with an expression, and a list of case statements that test a range of values. A simple example might be as follows:

switch (colorNumber){
  case 0 :
    colorString = "#ff0000";
  break;
  case 1 :
    colorString = "#0000ff";
  break;
  default:
    colorString = "#ffffff";
}

Again, the expression in parentheses can be any valid JavaScript expression. All it needs to do is evaluate to a value that can be tested in the case statements. Unlike other languages, it can be a string as well as a numeric value.

The break keyword is used to make sure that the evaluation stops when a case has been satisfied. However, multiple case statements can be grouped if they should have the same meaning attached to them. So, for example, to group values 1 and 2:

switch (colorNumber) {
  case 0 :
    colorString = "#ff0000";
  break;
  case 1 :
  case 2 : // do the same as for 1
    colorString = "#0000ff";
  break;
  default:
    colorString = "#ffffff";
}

The default keyword indicates what should happen if none of the case statements can be satisfied. It should be the last statement in the switch block, and does not need to be followed by a break statement, as no more processing will take place after it.

A loop is a construct that allows you to execute a set of statements in a code block a specific number of times. The loop can continue either until a condition is satisfied (uncounted loop) or a set number of times (counted loop). The difference between the two is that you use a counted loop when you know in advance how many iterations there should be.

The JavaScript language uses the for loop as a counted loop. A generic form is shown here:

for (var counter = 0; counter < total_iterations; counter++) {
   // statements to execute
}

The three parts of the statement in parentheses are the initial value that is assigned to the variable that is used in the loop (counter, in this case). The second part is the condition that must be satisfied for the loop to continue (in this case less than total_iterations). The final part is the operation that should be used to change the variable—simple addition in this case.

This last is the equivalent to:

for (var counter = 0; counter < total_iterations; counter = counter + 1) {

The shorthand is known as the post-increment operator. Post-decrement is also possible, as is a loop that counts backwards. For completeness, the following is possible, but note the different condition based on the reversal of the meaning of counter:

for (var counter = total_iterations; counter > 0; counter- -) {

Any complexity of expressions can be used in these three places, as long as they satisfy the criteria, but they should be kept as simple as possible. Once the condition in the middle is satisfied, the loop exits and execution continues on the line following the closing brace.

The do . . . while loop allows you to specify that a set of code statements is executed at least once, and continually until a condition is satisfied. So you can rewrite the previous for loop code as the following:

var counter = 0;
do {
   // statements to execute
   counter++;
} while (counter < total_iterations);

The first line just sets the value for counter to 0, just as the initial setting section of the for loop example did. Everything in the braces will be executed at least once including the counter increment, which, again, is shorthand for counter = counter + 1. Apart from the syntactic differences, this new loop does exactly the same thing.

The while clause gives the expression that is evaluated at the end of each loop—in this case, counter is tested against the variable total_iterations, which you can assume has been set elsewhere in the JavaScript program. Again, this is fairly self-explanatory.

One thing to note is that the counter should be updated at the end of the code that uses it; otherwise, the initial value that is used to do the work, inside the loop, will be 1 and not 0, which is perhaps not the intended behavior.

The next kind of loop that JavaScript supports is the while loop. This kind of loop is only different from the do . . . while loop in that the loop might not execute the first time because the evaluation is carried out at the start of each iteration and not the end. Like many JavaScript tasks, this is easier to understand than it is to explain.

Rewriting the previous example, you have the following example:

var counter = 0;

while (counter < total_iterations){
  // statements to execute
  counter++;
}

Aside from the small difference noted, it is identical in function to the for loop and do . . . while loop.

var counter = 0;
while (counter < total_iterations){
  // statements to execute
  counter++;
  if (counter * 2 > target_value)
     break; // leave the loop
}

for (var counter = 0; counter < total_iterations; counter++) {
  if (counter % 2 = = 0)
     continue; // Only execute the following on odd iterations
  // statements to execute
}

The following is a list of the principal events that are of use in JavaScript programming. Those specific events that have limited application have been omitted for the sake of clarity. These are all events that are attached to specific HTML objects; sometimes multiple events apply to multiple object types.

All of the separate events are listed by Sun in its JavaScript client side reference guide (see http://docs.sun.com/app/docs/coll/S1_Javascript_13), and I have extracted and annotated them with examples of where they should be used, to make it easier to reuse the information from this book.

Generally speaking, each event that can be attached with any HTML object (usually the body, img, a, and form tags) has the general form:

<tag onEvent="code">

Where tag is the object for which the event is to occur, onEvent is the event that is being handled, and code is the JavaScript code. This code can be anything from a call to a function (recommended) to a single line of JavaScript. As mentioned, it is not recommended that you put anything more than a single command in here.

If more than a single command is required, they should be grouped in a user-defined function to be called from the handler. There are two ways to use the code section when creating event handlers:

<script>
function event_handler() {
  // function code here
}
</script>
<body onKeyPress="event_handler();">

This example will call the event handler directly, but will not have access to the event object parameters. To have access to any properties that are assigned to the event handler, you need to create an event handler and then reassign the event to it:

<body>
<script>
function event_handler(e) {
  // function has access to event properties
}
document.onKeyPress = event_handler(e);
</script>
</body>

Note that the event handler is different in each case. In the first, it is just a function, but in the second, it is an actual event handler. Both possibilities can be used with any event. However, an event handler is treated as an object with properties, so it is used only when it makes sense to pass more than just a set of values.

This book generally uses the first form, except in very specific circumstances.

<img src="myimage.gif"
          onAbort="if (!confirm('Stop loading document?')) { history.go(0); }">

<input type="text" name="keywords" onChange="updateKeyList(this.value);">

<input type="submit" value="Does Nothing" onClick="return false;">

<a onClick="this.myForm.submit();"> <img src="submit.gif" alt="Submit"></a>

var keyName = String.fromCharCode (e.which);

<body onLoad="my_function();">

<body onLoad="my_function();" onUnload="my_cleanup_function();">

<img src="out.bmp"
  onMouseOver="this.src='in.bmp';"
  onMouseOut="this.src='out.bmp';">

<form method="post" onSubmit="validate_form();" onReset="reset_form();">

The following is not an exhaustive list, but contains the most useful of the top-level objects in the hierarchy supported by JavaScript that are browser-related. Again, they are mirrors of objects in the DOM specified by the W3C.

The document object has a number of methods, some of which you’ve already seen in a few examples in the previous code snippets. The most useful parts of the object are actually the properties, although there are three very handy methods that can be used for programmatic Web page creation.

A Web page can be entirely created using the following methods of the document object:

document.open();

document.write(HTML to write)

document.close();

The .open and .close methods are superfluous for cross-platform browser development because not all browsers react in the same way. For example, the following code, when used in some browsers, will clear the currently loaded document:

<script>document.close();
document.open();
document.write();</script>

However, in most cases calls to these methods are additive. So if the document has already been rendered, all that happens is the additional text is rendered underneath it. This is useful for conditionally writing text into the HTML as the document is rendered by the browser (inserting some of the document properties).

The document object has the following arrays:

In addition, it contains the following useful properties:

The arrays are zero-based like all arrays. In addition it is possible to identify forms by their name, provided that they have been defined with a name="myForm" attribute in the HTML document.

document.forms["MyForm"]

Generally, the properties should only be read and not modified unless you really know what you are doing. Individual objects can be altered, however. For example, to change an image source in reaction to a button press:

<input type="button" value="Change Image"
onClick="document.buttons[0].src='new.gif';">

An interesting point to note is that most objects in the document model also have a visible property. This can be used to great effect, for example, by making controls in a form available (or not) depending on the options already chosen.

You will see another use for the visible property later on, when you use it to make an entire <div> appear and disappear, like a message or pop-up box.

<input type="button" value="Back" onClick="window.back();">
<input type="button" value="Home" onClick="window.home();">
<input type="button" value="Fwd" onClick="window.forward();">

Using the String object, it is possible to convert a string literal to a piece of HTML code. The result will not appear as HTML in the document, but the browser will render it as if it had been generated using straight HTML code.

These are usually used with the document.write method to generate the inline HTML. Again, however, the actual HTML is not visible when the user selects View Source, only the JavaScript that has generated the HTML will be, as it is the browser that creates the rendered paged based on the script, and not based on HTML generated by the script.

Linking is achieved using the anchor and link methods, which both turn a piece of text into a piece of text that has a hypertext reference added to it. The first creates a named anchor and the second a hyperlink to another HTML document. For example:

var myString = "anchor text";
document.write(myString.anchor("anchor_name"));

This previous example is the equivalent of the following HTML code:

<a name="anchor_name">anchor text</a>

By the same token, the link method is used as follows:

var myString = "url text";

document.write(myString.link("url"));

This is rendered by the browser as if the HTML had been:

<a href="url">url text</a>

There are also three methods used to create text of different font sizes:

The big and small methods cause rendering that is entirely arbitrary and the actual size will be relative to the default font size. These three methods could be used as follows:

document.write("Big Text".big());
document.write("Small Text".small());
document.write("Really Big Text".big(72));

Of course, string variables could have been used in these examples instead of literals. Also there are a some methods used to create fonts of different properties:

Then there are some general formatting methods that are rendered in the same way as the HTML equivalents:

These can be used at any point in the HTML document, but note that it is not possible to change the font face (besides setting fixed font) or create headings using this method. However, by using styles, this is possible.

Message boxes are a good way to communicate with your Website visitor, and JavaScript offers three possibilities—alert, confirm, and prompt.

First, the alert method displays a box alerting the user, with a custom string and a single OK button. For example:

alert("Alert! You pressed the alert button. . .");

This code snippet yields the result in Figure 5.3.

Figure 5.3. Alert box in Internet Explorer

The confirm method displays a confirmation box from which the users can select OK or Cancel. If they click OK, confirm returns true; otherwise, it returns false. For example:

theResult = confirm("Do you really want to do this?");

This snippet yields the result in Figure 5.4.

Figure 5.4. Confirmation box in Internet Explorer

The prompt method displays a box in which the users can type some text. If they then click OK, the text is returned; otherwise, null is returned. For example:

theResult = prompt("Please enter some text. . .");

The result of this snippet is shown in Figure 5.5.

Figure 5.5. Prompt box in Internet Explorer

If more complex interaction is required, you can use the window.open method to open a new window containing a form from which information can be obtained. Or, a custom div can be displayed containing the relevant HTML. This is explored later in the JavaScript examples section.

JavaScript provides the possibility to execute a function after a certain length of time has elapsed in one of two ways:

The first of these models is activated by using the setInterval method and stopped using the clearInterval method. The setInterval method can be used in one of two ways—with an expression or with a function plus an argument list. For example, the following two usages are identical:

setInterval("my_function (1, 2, 3, 4);", 25)
setInterval(my_function, 25, 1, 2, 3, 4)

In both cases, my_function is being called with four arguments. The advantage is that with the second, it is possible to execute code such as the following:

var arg1 = 1;
setInterval(my_function, 25, arg1);

Without this, it would be necessary to build the string explicitly, as follows:

setInterval ("my_function(" + arg1 + ");", 25);

The number represents the timeout value that is set in milliseconds. To have the function called every second, the value should be 1000. The call to setInterval returns a timer identifier that can be used to access it.

So, to cancel the interval timer, use the clearInterval method with the timer identifier:

clearInterval (timerID);

The timerID variable must be globally accessible, as there is no way to retrieve it once the timer has been set. A good way to do this is to make sure that it is specified in a section of the script in the head of the document.

If you want the function to be called only once rather than every so often, after a specific time has elapsed (for a timed test, for example), the setTimeout function can be used:

var myTimerID = setTimeout ("my_function ();", 1000);

This will execute my_function after 1 second. If, however, you want to clear the timer before it expires, you can use the companion function, clearTimeout. Again, the setTimeout function returns the timer identifier. The clearTimeout function is called as follows:

clearTimeout (myTimerID);

You have seen some of these before, but there are a few things to note about the values that they return.

The window.location, for example, contains the URL of the document which is in focus when the method is called. If it is set by a piece of JavaScript code, it will cause the window to refresh. Remember, though, that the window might be a frame, so it is useful for refreshing part of the document set currently loaded.

By a similar token, the window.status property contains the current status text that is displayed at the bottom of the window. This can also be set using Java-Script, as in the following example that combines both methods:

<input type="button" value="Set Status"
 onClick="window.status='Current URL : ' + window.location;">

The location.reload method causes the current page to be refreshed, which is useful in conjunction with timers. This can also be attached to a button with code such as:

<input type="button" value="Reload" onClick="location.reload();">

Finally, the history object can be used to change the current page location based on the recent history.

For example, history.go(-1) has the same effect as when the user presses the back button, history.go(0) is the same as a reload using location.reload, and history.go(1) is the same as the user moving forward in the history. These can all be used with JavaScript handler, as in these examples:

<input type="button" value="<- Back" onClick="history.go(-1);">
<input type="button" value="<- Refresh ->" onClick="history.go(0);">
<input type="button" value="Next ->" onClick="history.go(1);">

Cookies are small pieces of information that are stored as name, value, expiration tuples. A tuple is just a collection of related values—in this case, the basket of values that control the cookie.

The expiration date is optional, and the exact format of the cookie data is up to the programmer to define. JavaScript provides access to the cookies through the document.cookie property.

They need to be encoded (using the escape and unescape functions) to render unsupported characters (such as spaces) as data using their hexadecimal equivalents. For example, a space is replaced by %20 with the call to escape. This is then replaced by a space value when given to the unescape function.

So, to set a cookie, it is necessary to build a cookie string (document.cookie) with three parts—the name (not encoded), the value (encoded), and the expiry date (not encoded and also optional). This cookie string can then be set in the document properties, but is stored by the browser.

The complete solution is as follows:

document.cookie = name + escape(value) + "; expiry=" + expiry_date; + ";"

To get the expiry date, you simply convert the Date object value to a GMT string using the .toGMTString() of the Date object. For example:

now = new Date();
expiry_date = now.toGMTString();

If expiry date not required, the cookie becomes a pair with just the name and encoded value.

Reading the cookie is slightly more complex as you need to examine each one in turn and see if it matches a specific name of the cookie you want to retrieve. Luckily, the .indexOf method of the String object provides the interface to get the location of the 'Name=' substring.

Because all cookies should end with the ; character, you can also extract the end location and use these two (start and end) to extract the named cookie data from the whole cookie string.

To get the start and end positions, you could use code such as:

startIndex = document.cookie.indexOf (name);
endIndex = document.cookie.indexOf (";");

Then, the value string can be extracted using the .substring method with the start and end indexes, as follows:

value = document.cookie.substring(startIndex, endIndex);
value = unescape(value); // decode the string

Of course, in cases where startIndex is –1, there are no cookies to extract (the indexOf function was not able to find a match), and if endIndex is –1, this means that there is no trailing semicolon.

Subsequently, where endIndex is –1, but where startIndex is valid, this is the only named cookie, and so the endIndex is effectively document.cookie.length. There can be multiple cookies assigned to a given domain (or document), so be sure to check that there are not already some assigned.

Finally, document.cookie.length returns the length of the string associated with the cookies that are part of the document data, as noted. If it is zero, no cookies have been stored.

Some URLs that are the result of a form submission contain data that has been submitted and that might be useful to extract from the URL. This is a good technique to use when making multipart forms.

The location.search property accesses the portion of the URL after the ? (question mark), which is otherwise known as the query string. The value returned includes the ?, so the first operation is to discard it. For example, from a client side imagemap click that is passed back to the page, you might have the following in the URL:

?x,y

The x is x position of the cursor in the area tag used for the imagemap, and y is the y position. Using the indexOf method of the string object, it is possible to extract the values for use in the JavaScript code.

This could also be true of a form that is passed back to the same document for processing, but the query string is likely to be more complex. For example, consider the following HTML code:

<form>
<input type="text" value="" name="textfield">
<input type="Submit" value="Submit!">
</form>

This submits the form back to the source page with the URL. If you had entered Banana in the text field, the URL would look something like this:

file:///test_html?textfield=Banana

This means that you can extract the query string, break it up, and use the value on the page by checking the index of the ?. Then, the value can be extracted relative to the = sign. The whole function might look something like this:

function check_form_input(queryString) {
  if (queryString.indexOf("?") != –1) {
    var myValue =
      queryString.substring(queryString.indexOf("=")+1,
                            queryString.length);
    document.write("<b>"+myValue+"</b><br/><br/>");
  }
}

This code could be placed in the onLoad handler of the document’s body tag. This would mean, however, that the rest of the document would not be visible. This is because the document.write statement closes the document. Care must be taken, therefore, to use the document.write method only when you know that the result will look coherent. Otherwise, the .innerHTML property can be set with most CSS tags (such as <div> tags) to change their HTML content.

The Number object can contain any number and perform basic math operations on it. Advanced math functions, including trigonometric functions, are contained as methods of the Math object. However, there are two values associated with the Number object that might be of use:

Number.MAX_VALUE
Number.MIN_VALUE

The first is the largest number that the Number object can contain, the second is the smallest. Each value can only be accessed from the Number object; in other words, they are not properties of all numbers contained in variables in the JavaScript code that you create.

You should always use string literals in your JavaScript code, and never allocate a String object directly. The reason for this is that the String object sometimes works in a way that is not logical with respect to the code that you might want to write.

Specifically, when you use eval to evaluate a string expression, when it is a literal string, it is evaluated as if it were a real expression, but the String object is always evaluated as a string. This means that the following two examples do not yield the same result:

eval (" 1+1"); // returns 2
eval (new String(" 1+1"));
        // returns the string "1+1"

The JavaScript engine will substitute an object for the literal value or variable in order to perform the required operation on it. It is far more convenient to leave the variables as literals, both for understanding and manipulation.

There are several functions for extracting character sequences from strings, starting with a single character, which can be extracted by position using:

string.charAt ( n )

Next, you can extract a sequence of characters from the string using the slice method:

string.slice (start, end)

The start value indicates the character offset that the method starts at, and end indicates the last character not included in the resulting sequence. It is also possible to use a negative value for end, in which case the index is counted from the end of the string and not from the beginning.

To extract a substring using a start offset and a length of the resulting substring instead, use the substr method:

string.substr (start, length)

The length in this example is optional, in which case everything up to the end of the string (string.length) is extracted. The string can also be broken up into an array of strings using the split method:

string.split (separator, limit)

By way of demonstration, you can extract a query string in two simple steps:

var queryString = location.search.substr ( 1 );
            // everything except the ?
var queryArray = queryString.split ("&");
            // split by the & character

Then, the individual items from the resulting array can be split in a loop:

for (var arrayIndex = 0; arrayIndex < queryArray.length(); arrayIndex++)
{
  var queryPair = queryArray[arrayIndex].split ("=");
  // queryPair[0] is the item name, queryPair[1] is the value
}

To concatenate two or more strings to produce one string, use the concat method:

string.concat(string_1, string_2, . . . string_n)

So, to concatenate three strings:

var myString1 = "String1";
var myStringN = myString1.concat("2", "3");

The result of this would be "String123" in the myStringN variable.

As you saw previously, to get the index of a substring inside a string, you use the indexOf method. There is also a lastIndexOf method that can be called that searches the string from the other end. These two methods are illustrated here:

var firstThat = myString1.indexOf ("g1"); // returns 5
var lastThat = myString.lastIndexOf ("2"); // returns 7

If you want to replace a substring directly with another string inside that string, you can use the replace method. This takes a string to search for in the first parameter, and the string to replace it with in the second. The strings do not need to be the same length. For example:

var myString2 = myStringN.replace("123", "1234");

Executing this code results in String1234 in the myString2 variable.

Finally, the case of the string can be changed with the two methods:

string.toUpperCase()
string.toLowerCase()

Neither of these affect the string that is being operated on, they just return the upper- or lowercase version of the string. The original data is preserved.

An array is very similar to a string in that some of the methods feel rather familiar, even if some of the names are different.

For example, the concat method takes two arrays and returns a new one that contains a copy of each concatenated together. Different types can be combined within the arrays, for example:

var myNumbers = new Array (42, 84, 12);
var myStrings = new Array ("forty-two", "eighty-four", "twelve");
var myNewArray = myNumbers.concat(myStrings);

This example results in myNewArray containing the following:

[ 42, 84, 12, "forty-two", "eighty-four", "twelve" ]

Next, the join method is the inverse of the split method from the String object. It turns an array into a string, separated with a user-defined or default separator. The default is a comma that can be changed to anything that the programmer wants. So, to add a space after the default comma, you would need to supply code such as:

var myString = myNewArray.join(", "); // default separator is comma

This snippet, operating on the existing myNewArray object from earlier on, yields a string containing:

"42, 84, 12, forty-two, eighty-four, twelve"

To extract data from the array, use the slice method. This takes two parameters: the (zero-based) start and end indexes for which the extraction should take place:

var newArray = myNewArray.slice (0, 3);
  // newArray contains [ 42, 84, 12, "forty-two" ]

Again, the slice method does not after the array on which it operates—it returns a new array object. On the other hand, the splice method acts directly on the array, removing some elements and adding new ones. Its generic form is as follows:

array.splice (startAt, toRemove, toAdd1, toAdd2, . . . toAddN)

(The parameters in italics indicate values or variables that the programmer will supply in the actual call.)

In this definition, startAt gives the index at which to begin the splice. Similarly, toRemove gives the number of elements that should be removed. This can be 0 (indicating that no elements should be removed—they will only be added). Finally, the last parameter is the list of elements to add, in place of those that have been removed or inserted if there have been no elements deleted from the array.

Even the last parameter, giving the elements to add, is optional. This is, however, not the case if no elements are to be removed, in which case at least one to be added must be specified. This all sounds quite complex, but is easy to appreciate with some examples.

First, to simply remove the first three items, you could use the following code:

newArray.splice (0, 3);

Because this acts directly on the array, it is different from the slice example, which just returns a new, modified, array. To add three items at the beginning, you could use the following code:

var newArray = new Array ();
newArray.splice (0, 0, "1", "two", 3);

This has the effect of building the following array:

[ "1", "two", 3 ]

Next, you can combine the removal and addition operations, as follows:

newArray.splice (1, 2, "twelve", "four");

This example yields the following array:

[ "1", "twelve", "four" ]

The array is automatically resized and elements are reallocated as required.

The array elements can be reversed in order using the reverse method:

array.reverse()

This does exactly what you would expect, resulting in an array that has its elements back to front with respect to the original position. Again, it operates directly on the array.

The companion method, sort, is interesting in that the programmer can provide a compare function. This enables the default alphabetical sorting behavior of JavaScript to be overridden. If provided, the compare function must take two parameters and return one of the following values:

Allowing the programmer to specify the compare function allows JavaScript to sort arrays where the elements are not of the same type. JavaScript will deal quite happily with mixed arrays of numbers and strings, but the result might not be what the programmer actually wants.

The following is an easy numerical comparison function example:

function compare (a, b) {
  if (a < b) {
    return –1;
  }
  if (a > b) {
     return 1;
  }
  return 0;
}

The sort method can then be called using the compare function:

var myArray = new Array (1, 5, –3);
myArray.sort (compare);

The next set of functions deal with managing the array as if it were a list (or stack) of elements. In JavaScript, arrays are self-sizing, which means that you can do the following:

var myArray = new Array ();
myArray[0] = 1;
myArray[1] = 72;
myArray[3] = 27; // myArray[2] is undefined

In this code, the array will be four elements long, but the third element myArray[2] will be assigned the special value undefined. In addition to this useful feature of arrays, there are four other methods that are used to access the data contained in an array <space> and, crucially, which also change the contents of that array.

The syntax for looking at (and in this case copying to a variable) a single element in an array is as follows:

var myElement = myArray[1]; // extract the element at index 1

Given the previous code, the pop method performs a similar task, except that it returns the last element in the array and removes it from the array. So, taking myArray as an example, the following code extracts element [3] and removes it from the array:

var myElement = myArray.pop();

The inverse of the pop method is the push method, which places a value at the end of the array. Again, using myArray as an example, you can put the element back on the end with the following code:

myArray.push(myElement);

The new length of the array can then be retrieved using the following code:

var newLength = myArray.length();

This is much more reliable than testing the return value from the push method, which can return either the value that has been pushed or the new length of the array. Which one is returned depends on the version of JavaScript that the browser is using, and on the Web—you can never take anything for granted.

If you want to operate on the front of the array rather than the back, you can use the shift (pop from the front) and unshift (push to the front) methods. These work in exactly the same way as pop and push. For example:

var myArray = new Array();
myArray.unshift (3); // array contains [ 3 ]
myArray.unshift (5); // array contains [ 5, 3 ]
myArray.push (7); // array contains [ 5, 3, 7 ]
var myElement = myArray.shift(); // array contains [ 3, 7 ] , returns 5

These methods are very useful when processing data that has been submitted through forms or when building dynamic HTML pages based on user input.

The Date object allows you to manipulate date information. This section looks at the three main classes of methods that the Date object uses:

First, you can create a date in three ways. You can create a Date object with today’s date in it:

var myDate = new Date (); // now, today

Or, you can create a specific date object for a specific date:

var myDate = new Date (month day, year hh:mm:ss);

In the previous example, month must be replaced with the month name (such as January), the day with the day of the month, the year on four digits, and the time as shown, using the 24-hour clock. Finally, the previous example can be specified as numbers:

var myDate = new Date (year, month, day, hour, minutes, seconds);

The methods cannot be mixed. As before, the values in italics need to be substituted for your own values; in this case, you need numerical equivalents.

Extracting date data is very easy:

In addition, each of the GET methods also has a corresponding SET method that can be used to set the values for each of the Date object components.

The Math object is useful for performing advanced mathematical functions, including trigonometric operations. The built-in Number literal can be manipulated with all the familiar simple operators (+, -, /, *, % (modulo), and so on), but the more advanced functions have to be accessed through the Math object.

There are some properties which are useful, too, and these are accessed as follows:

There are more fixed properties, all accessed in the same way, but these are the most useful. The methods are similarly easy and self-explanatory:

In addition, there are arc versions of sin, cos, and tan (asin, acos, and atan). All the trigonometric functions return their results in radians and not degrees.

Using the PI constant from the Math object, you can use the following code:

var myDegrees = (360 / (Math.PI * 2)) * radian_value;

Then, there are some basic comparison functions:

Finally, there are some rounding and random number generation methods:

This section lists the most useful set of the Math methods, which have been fairly static since JavaScript was first devised.

JavaScript supports the if .. else statement for basic decision making:

if (a ==b) {
  // Do this
}
else {
  // Do that
}

The else clause is optional, and the expression to be tested as part of the if statement can be any supported JavaScript expression. This expression must evaluate to true or false.

For non-binary decision making, JavaScript offers the switch statement:

switch (myVariable) {
  case value :
    // do this
  break;
  default:
    // do this
  break;
}

The switch statement supports both numbers and strings. If no match is found, the default clause is executed. In addition, multiple case labels can refer to the same code to be executed.

Both counted and uncounted loops are supported in JavaScript. Counted loops are provided through the use of the for statement:

for (var myCounter = 0; myCounter < myTotal; myCounter++) {
  // processing
}

Uncounted loop support is provided through the do .. while and while statements. The difference between the two is that the do .. while loop is guaranteed to be executed at least once:

var myNumber = 9;
do {
  // This will executed at least once
  // do something to myNumber
} while (myNumber < 9);

Using a while loop, however, will mean that the code becomes unreachable:

var myNumber = 9;
while (myNumber < 9) {
  // This will never be executed
  // do something to myNumber
}

Using these three mechanisms, you can solve most programming problems requiring repetition. However, you can also use recursive functions.

Functions in JavaScript are named blocks of code, defined as follows:

function myFunction (parameters){
  return value; // optional
}

A function is called by name:

myValue = myFunction (parameters)

or

myFunction (parameters)

Functions might not have parameters, in which case the parameters can be omitted. An example of a function that takes three parameters is as follows:

function myAdd (a, b, c) {
  return a + b + c;
}

In addition, functions might not have any formal parameters, but still have access to any parameters that might be passed to the function through the parameters array. To access this array, code such as the following can be used:

function myAdd ( ) {
  var myResult = 0;
  for ( var myCounter = 0; myCounter < arguments.length;
    myCounter++ ) {myResult += arguments[myCounter];
  }
  return myResult;
}

The myAdd function can be called with as many parameters as are required.