javascript notes

JavaScript Notes

By shahzad [email protected]

www.pakdata.net92-334-530773892-334-9564004

1. Basic JavaScript - Defining and invoking JavaScript functions2. JavaScript - Objects – images – rollovers - and arrays3. JS Objects - Window – document objects, innerHTML

1. Basic JavaScript

We have already introduced the notion of inline JavaScripts triggered when a mouse event occurs in an HTML element. Events can also trigger execution of user-defined JavaScript functions defined in scriptlets located in the head element of an HTML file or an external JavaScript source file. The following examples illustrate the basic ideas. ExampleSp04Form01a.html shows how a generic HTML button element can trigger execution of a built-in function (alert) when clicked. The second example (exampleSp04Form 01a1.html) illustrates a user-defined JavaScript function invoked when a submit button is clicked. The examples can be found under the link JavaScript > JavaScript Examples > JavaScript-Basic on the web site.

Example 1: Event-driven function invocation, condition=action pairs, built-in JavaScript functions, alert.

ExampleSp04Form01a.html is like example06a.html discussed in the HTML-class-notes except it contains a generic button element in place of a submit button. While a submit button triggers query data transmission to a server, a generic button, like the "click-me" button here, conditionally triggers the action identified in its condition/action pair. In this case, the trigger condition is the onclick event caused when the button is clicked. At that event, a built-in JavaScript function alert("…") pops-up a window containing the message passed as an argument by the alert and the browser then waits (or blocks) until the user clicks the OK button in the pop-up window. This can be done repeatedly. The HTML tag for the button is:

<input type = button name = "myButton" value = "click-me" onclick = "alert('Stop That!')" />

http://www.pakdata.net/

mailto:[email protected]

The format for a condition=action pair is mouseEvent="functionName (argument) ; ..." with multiple function calls separated by semi-colons which is the same format as used for the inline mouse events examined previously. However, this is not the same syntax as used for condition=action pairs in <script> tags, as illustrated in the following example. Observe no query string data is triggered in the case of this button click unlike the case of a submit button.

Example 2: JavaScript function definition, script tag, pseudo-code, qualified naming conventions, value and other attributes, if statement, equality operator, isNaN function, return statement, query data transmission, tracing, case-sensitive, error debugging in browser.

ExampleSp04Form01a1.html) demonstrates a user-defined function defined in a

<script> tag in the <head> element of an HTML page with an associated invocation condition specified in a <script> element in the body of the page. Thus, there is a:

a. Function definition - in script in HTML head b. Function invocation and condition - in script in HTML body

Conditions & Actions: The body scriptlet that specifies when the function is invoked is:

<script> document.guestForm.onsubmit = checkIt </script>

with a condition=action expression enclosed in the element. The function is identified by name only with no arguments or parentheses. The expression has the form condition=action where the condition identifies the event (document.guestForm.onsubmit) that triggers the function and the action identifies the function by name (checkIt). Here, the condition is that the submit button is clicked. The triggering condition (button) is identified by a qualified name. Qualified names identify objects on HTML pages using a hierarchical style of naming convention typical in object-oriented languages. The qualified name is obtained by successively concatenating the name or identifier of the outermost HTML element containing the object – in this case the HTML document, and continuing to the nearest HTML element containing the object. In this instance, the hierarchically qualified name derives from: the HTML page itself (document), the name of the form containing the submit button (guestForm), and finally the event that triggers the function - in this case the onsubmit condition that occurs when the submit button is clicked. Notice that in this case, the button's name mySubmit is not to be used, else an error occurs as illustrated in the Javascript debugging example below. The above syntax differs from that used for the inline condition=action pairs encountered previously, where we used:

<input …attribute/value pairs… onclick = "alert('Stop That!')" />

We can use that syntax here too, namely:

<input …attribute/value pairs… onsubmit ="checkIt ( )" />

Function Definition: The definition of the function (checkIt) referred to in the condition=action pair is given in the head element of the page. The format for a function definition is:

<script language="JavaScript"> function checkIt (list-of-arguments) {…} </script>

Remember this is a function definition or blueprint, but the function defined here is not executed here. Indeed, it may never be executed at all if none of its triggering conditions arise.

Pseudo-code Solution: The pseudo-code specification for the function is:

<script language = "JavaScript">function checkIt ( ){

1. Test and announce if name field is empty.2. Test and announce if age is valid number.

}</script>

JavaScript Instructions: The implementation uses the following JavaScript syntax.

1. An if statement - if (condition) {…} - that tests if the Name field is empty. The first if-condition is a boolean equality condition (==) that tests whether the name field value is empty – indicated by "" corresponding to a null string.

2. The JavaScript built-in function isNaN (n) returns true if n is not a valid number. It returns true if the field is null or a valid number.

3. A return statement (return false) which aborts the submit button's transmission of query data to the server if false.

4. The JavaScript built-in function alert (s) which pops-up an OK window with the string s displayed in the window.

5. The input field values accessed are captured using the qualified naming convention - document.guestForm.nameField.value – where the final .value attribute returns the value of the data entered in the named field.

Attribute values: You can retrieve other attribute values for a field using statements like:

alert ( document.guestForm.nameField.value )alert ( document.guestForm.nameField.name )alert ( document.guestForm.nameField.size )

These references announce the data value entered, the field's name, and its size, and in general the value of any attribute named by the final .attributeName qualifier. This type of information is useful in tracing the behavior of a script you are developing which can greatly

help in debugging. Even if attributes like size are not explicitly mentioned in an HTML tag, its default value can be accessed. To obtain the length of an attribute, append the .length property as in document.guestForm.nameField.name.length. A statement like:

alert (document.guestForm.mySubmit.value)

gets the value ("Send") of the "mySubmit" button. Observe that JavaScript is case-sensitive even though HTML is not, so the button must be referred to as "mySubmit" with a capital 'S' else the referred to object (the submit button) will not be recognized and instead an error message indicating a null object will occur, if browser debugging is turned on.

Browser Assisted Debugging: The browser has options that allow it to be used to detect and announce JavaScript errors. In Internet Explorer, go to Tools>Internet Options > Advanced and look for the options about JavaScript error debugging and notification. The default choices are to ignore such errors. In our case, we can reverse these choices as shown in the snapshot – see Disable script debugging and Display a notification about script errors.

With these options selected, temporarily modify the examples so the script reads:

<script> document.guestForm.mysubmit.onsubmit = checkIt; </script>

where the name of the submit button has now been included. When this is dropped in the browser, the following diagnostics window pops up.

The message indicates an error on the line (line 31) where the change was made.

Example 3: Synchronous (onLoad) versus Asynchronous (on event) JavaScripts, JavaScript statement, embedded HTML in write's, document.lastModified, JavaScript Date ( ), <meta> tag with refresh, access to variable properties (type, name, value, length), Boolean operators, parameter passing, asynchronous write's, JavaScript source files.

HTML document methods and properties:

Inline scriptlets are executed as the HTML page is loaded, as in example2.html. The scriptlet (enclosed in <script> tags) can use any JavaScript statements. If a function is used, the function is executed at that position in the display of the page where the scriptlet occurs and its result is displayed there by the browser, although the original JavaScript statements (as opposed to the results of their execution) will still appear in the source. The first alert statement in the example stalls the display in midstream, until the OK is clicked, at which point the JavaScript write statement (which is a method of the HTML document object) is executed and its output is placed at this point in the display. The write statement contains a string argument which can include HTML tags which are rendered just as if they were in the HTML page, like the <font> tag in the example. The scriptlets can of course also include built-in JavaScript functions or references to environmental values like the document.lastModified here (which is a property of the HTML document object) which returns the date/time the HTML file was last modified. The next write generates HTML which returns the current date/time on the client using the new Date ( ) construct following the usual Java object-oriented notation for objects. (In this case, the "constructor" for the object is Date ( ) and the expression new Date ( ) returns a string representing the current date and time.) The write statement also includes some HTML tags. The variation shown in example2a.html uses a <meta> tag to refresh the page every 5 seconds, naturally with the updated time given by Date ( ) at that point. The example3.html illustrates a simple JavaScript syntax error (an unterminated string constant) which is detected by the browser.

Function execution: Example50a1.html illustrates the difference between asynchronous and synchronous execution of JavaScript functions. There are a number of points worth observing as the HTML page is progressively displayed:

1. The script in the head is loaded first since it is at the top of the HTML page. This script contains both a function definition (for hithere) and an actual invocation of an alert function (alert ("Hello")). The function definition does not trigger execution of the function. However, the alert ("Hello") is executed. The execution of this alert is synchronous – that is it occurs at a predefined point independently of any triggering event.

2. The form contents are displayed next, but the hithere ("Goodbye") function associated with the onclick condition for the "Press" button is only put on record. The call is not executed until the onclick event occurs – triggering an asynchronous invocation of hithere ("Goodbye") if and when (ever) that occurs.

3. The next scriptlet in the body synchronously calls hithere ("hello again"). This pops up an alert window which delays the further display of the HTML page until that pop-up is responded to by the user.

4. After the pop-up is unblocked, the JavaScript write statement in the same scriptlet is synchronously executed.

5. At this point, this HTML page is completely displayed. This is now the first time at which the "Press" button can be clicked since the page had not yet been completely produced up until this point, and even though the "Press" button was already visible. If the "Press" button is now clicked, the hithere function is again invoked, this time asynchronously triggered and pops-up "Goodbye".

Example50a2.html is similar but uses a scriptlet with an onclick condition in a qualified name reference: document.test.pressButton.onclick = hithere, as opposed to having the condition in the HTML element, and with the notation: onclick = "hithere ('Goodbye')". Example50a3.html illustrates qualified name references again, the length property, element type and Boolean operators.

Completed HTML page: The example docWriteHead.html illustrates what happens if you use a write in an asynchronously executed function – which automatically means that the page has already been produced/completed, or else a triggering event could not have invoked the function. The write executed at that point overwrites the existing HTML page. To see the effect, load docWriteHead.html and check its source file once it's completed. Then click the "Press" button: a new page appears, with the same URL, containing only the last executed write statement. If you check its source in the browser, you will observe that it too has been changed though the original file is unaffected.

Function Parameters: Example50a6.html illustrates parameter passing in the function seeField (X). The parameter passed is the name (first) of the input text field – whose properties are then accessed in seeField. Note there are no quotes around the name else the

required input field object is not passed. The function then accesses the type, name, value, and data length of the passed field.

External JavaScript (.js) Source Files: Example50a7.html behaves identically to Example50a6.html but illustrates the use of a JavaScript source file as an alternative to including a function definition in the head element. The syntax to refer to the source is:

<script type="text/javascript" src = "see.js" > </script>

The effect is the same as if the actual source were included in the head. Naturally, the src attribute is inside the tag. Notice that the syntax is different than that when JavaScript function definitions and statements were included in the head:

<script language="JavaScript">

The external JavaScript source code has an extension .js and contains just the function definitions, etc. It does not contain any html or script tags. If you want to use both external source JavaScript files as well as functions defined in the head of the HTML file, you should include both scriptlets in the head element:

<script type="text/javascript" src = "see.js" > </script><script language="JavaScript"> functions & definitions </script>

Example 4: conversion, parseInt, parseFloat, qualified stores, readonly protection, explicit variable declaration, NaN results, onchange event, focus & select functions.

These examples can be found under the link JavaScript > JavaScript Examples > JavaScript-II on the web site.

ExampleJSII01.html illustrates a number of familiar points in the context of a slightly more complicated application: user-defined functions, onclick mouse events to trigger function execution, and qualified access to HTML element values. New ideas illustrated include: JS user-defined functions that call other JS user-defined functions, conversion of user inputs from strings to integer numbers (or decimal numbers), protecting fields using the readonly attribute, and explicit variable declarations.

The example add, subtracts, multiples or divides the numbers in the 1st two fields and stores the result in the 3rd field. It accepts signed integer input and yields integers, except possibly in the case of division where the result may be a decimal number. Bad input (non-integers) causes a NaN (Not a Number) response in the result field. The result field is readonly, which prevents the user from entering data into the field, though the results can be stored there by the JavaScript program. The numbers are generally expected to be integers. Decimal numbers are rounded - except in the case of division where decimal input is accepted. To get a true decimal-calculator you would have to replace the parseInt (x) functions in the getData ( ) function with parseFloat (x).

If the parseInt functions are omitted - so that the numbers are not converted to integers internally - the inputs are handled as strings, although the results appear to be somewhat unpredictable. The "+" operator applied to strings concatenates the operands. The

other operators should return the NaN result, but in this example return correct outputs as well. Thus, oddly, the other operators first give NaN if they are applied before the "+" is triggered. However, after the "+" is triggered for a particular input, the other operators then correctly calculate products, etc. I am not sure why.

Each calculator button triggers a button-specific function call (to add ( ), etc). Each of these functions then collects its own data from the input fields using the getData function which accesses the values using the usual qualified names for the fields (such as document.myForm.num1.value). The getData function converts the inputs to integers and places them in the globally declared variables a and b. See below for the rules on scope of variables. The function (such as add ( )) then calculates the result and stores it in the readonly field result (via document.myForm.result.value = a + b)).

JavaScript Variables – Type and Scope: JavaScript variables can be numbers, Booleans, strings, or null. Their type is dynamically determined by the interpreter from the context. Variables can be either implicitly declared - by being used without being previously declared in a var declaration statement – or explicitly declared in a var statement. The scope of a variable means the statements in an HTML document where the variable's name and value are accessible. The scope rules are simple:

Variables Declared inside a function [var x] - Local to functionVariables Declared outside a function [var x] - Global to entire page

Undeclared Variables - Global to entire page

For example, modify the declaration in ExampleJSII01.html to var a = 123 and include the scriptlet: <script language="JavaScript"> alert (a) </script> in the HTML body. Then, when the page is loaded, the variable a will be initialized to 123 and when the body is loaded, the alert(a) will correctly pop-up 123 - because a is a global variable, that is accessible to any JavaScript statement in the HTML page.

The values of global variables can be set in the script in the head of the HTML page. You can also reset such a value in an inline scriptlet in an HTML tag. For example, consider the button below which sets the value of the global variable flag declared elsewhere:

<input type="button" value="Set Flag"onclick="javascript: flag = parsetInt(document.getElementById(1).value)" />

<input type="text" id = 1 />

which uses the getElementById method (discussed later) to get the value entered in the field with id=1.

Example 5: onchange, focus and select methods, loosing focus

ExampleJSII02.html has minor variations on the previous example. The onchange condition (document.myForm.num2.onchange=getData) in both input fields triggers a function execution when it satisfies both that its value is changed and it looses focus. The functions focus ( ) and select ( ) are cognitively useful for directing the user's attention.

The onchange event can be applied to text input fields, textareas, or menus. The corresponding element can loose focus by the user left-clicking the mouse elsewhere, or by other tabbing (which moves the focus to the next field). In the example, the getData function is called on an onchange event. To clearly appreciate the behavior of the onchange event, add a few alert's to trace the values of a and b (alert (a) ; alert (b) ) at the end of the getData function after it has picked up the contents of its fields. The alert's are useful in tracing the behavior of the getData function. Also test what happens when the entered data is not changed. In that case, there is no onchange event since the data and focus must both change. Blur the focus both with clicks and tabs and use different numbers so you can tell which field data you are looking at.

Focus ( ) acts as a method of the field (document.myForm.num1.focus ( ) ) and automatically directs Keyboard input to the field. You can see this by just typing without clicking in the focused field. Observe that the input characters are entered in the focused field – actually whether it is selected or not. The method select ( ) (document.myForm.num1.select ( ) ) highlights the selected field as well as focusing in it.

Summary of JavaScript (so far) Table-I: The following table summarizes the basic JavaScript features introduced so far.

JS Syntax Remarks

<script <script language="JavaScript"> Function definitions </script> Head - for functions.<script type="text/javascript" src = "see.js" > </script> Head -import javascript

(src has no script tags )

Condition=action pairs:<input type=button name="plus" value="press" onclick = "Add( )" /> In HTML element

<script> document.mine.plus.onclick = Add </script> In Scriptlet in body<script> document.mine.B.onchange = Add </script> onchange in field B<script> document.mine.onsubmit = Add </script> onsubmit omits name

JavaScript functions, methods, properties:alert ("message") pop upisNaN(x) True if x not numberparseInt(x) Convert to integerparseFloat(x) Convert to decimaldocument.mine.num1.focus( ) KB focus to fielddocument.mine.num1.select( ) Highlight fielddocument.mine.num1.value.length Properties of objectdocument.mine.num1.name

JavaScript statements function doSomeStuff ( arg1, arg2) { body of function } Function syntaxif (document.mine.nameField.value) == "" ) { ... }return false Returns from function.

Blocks submit query.F += s Adds or pastes s to F

Boolean and arithmetic operators:== equality!= inequality&& and|| or"" Empty stringm % n Remainder on division

by n

Attribute Properties Syntax in HTML & JavaScriptHTML style = "font-size:15" Notice spelling.JS style.fontSize = "15pt" Notice spelling & units

Scope Local variables are declared using var x inside a function. All other variables are global.Debug Internet Explorer: Tools > options > advanced > script choices turn debugger on.

Netscape: Tools > web-development > JavaScript console.

2. More JavaScript: objects – images – rollovers - and arrays

This section illustrates some more advanced JavaScript capabilities. HTML elements are objects with their properties and methods accessed using the usual object-oriented dotted notation. The objects in an HTML document are organized in a tree-like hierarchy known as the Document Object Model (DOM). JavaScript provides an API (Application Program Interface) that can access and modify the elements in this model. We illustrate a few image rollover effects based on mouse events. Then we consider how JavaScript arrays work and in particular how 2-dimensional arrays can be constructed since they are not immediately declarable.

Objects:

Refer to JavaScript > JavaScript Examples > JavaScript-DOM

The combination of HTML element id's and the use of the Document Object Model ability to reference the nodes in an HTML page provides a generic way to identify and modify HTML elements.

Example 1: this notation, object-oriented notation for attributes, DOM, nodes, node's data, firstChild of a node

We begin (WorkingExample00a.html) by illustrating a uniform way to refer to the current HTML element using with JavaScript's this notation. The example has a two cell table with text in each cell. Each cell responds to an onclick event using the identical function call:

onclick = f1(this).

The notation this is an important, standard object-oriented way to refer to the current object or HTML element. In this case, the current object would be whatever table cell <td> the condition arises or occurs in. The function f1 has the format is:

function f1( obj ) { }.

f1 uses its argument obj (which in our case is always called as this) to identify attribute values of the cell where the event occurred using the dotted notation characteristic of objects:

obj.id - read as: obj's idobj.name - read as: obj's nameobj.height - read as: obj's height

the id of the cell – which could be either cell 1 or cell 2. Even though the function call is identical in each cell and the same function statements are executed, the results will differ depending on which cell is clicked.

What is interesting at this point is that we can now uniformly work with a whole

collection of elements and let the function called distinguish which element it is dealing with.

For example, consider WorkingExample00b.html where the function changes the attributes of whichever cell caused the event.

Accessing the contents of a cell is more subtle and requires using DOM (Document Object Model) notation for the cell's data. The text for the cell is considered as constituting a child "node" of the <td> cell "node". WorkingExample00c.html shows how to access it via:

obj.firstChild.data - read as: obj's first child's data

The firstChild and data references will be discussed later when we look at the DOM further.

Nodes can also be accessed using a combination of an id attribute in an HTML element and the getElementById method of the document object. The example WorkingExample00c1.html illustrates how the attributes of the elements with id's (id=1, id=2, id=3) can have their properties accessed. The following access attributes of the table (id=3) an a cell (id=1). One of the alerts in the example returns an 'undefined', but the following alerts return the expected values.

document.getElementById(1).height

document.getElementById(3).border

Example 2: rollovers, src attribute, name attribute, events on other objects

Refer to JavaScript > JavaScript Examples > JavaScript-II for the examples. RoLLOver-1.html illustrates an image used as a hyperlink and combined with mouseover and mouseout effects that alter the src for the image. The hyperlink descriptor is the us.gif image. The hyperlink responds to an onmouseover event on the <img tag which is referred to by its name. The condition=action pair is:

onmouseover ="document.imageName.src='earthris.gif' "

The <img tag has to have a name attribute in order for the condition to refer to it. Test the example to see its behavior. The src attribute of the image element essentially identifies the URL for the image.

Arrays

Example 3: readonly or constant one-dimensional arrays, initializing in list, length property, scanning via for-loop, dynamic arrays, element access, declaring two-dimensional arrays, initializing 2D arrays, access notation, ++ notation, || operator

We briefly consider how JavaScript handles arrays. Refer to JavaScript > JavaScript Examples > JavaScript-II for the examples. One-dimensional arrays readonly arrays are declared and initialized as in:

var A = ["s1", "s2", "s3" , "s4" ]

where the array A acts like a constant. The array elements can be accessed using a standard notation: A[i] to refer to the ith element of the array. The array is indexed starting at 0 (not at 1). The length of the array is given by A.length.

Arrays defined with the list notation above are static or fixed – their values cannot be changed. Dynamic arrays B are declared using the notation:

var B = new Array ( ).

The length of this array is dynamic. If an element is added beyond the current end of the array, the array just expands to allow it. We could initialize B by, for example, copying another array into it using the usual for-loop construct:

for (i = 0; i <A.length; i++) B[i] = A[i]

This copies the static array A into the dynamic array B.

Image Arrays

An interesting example of a built-in one-dimensional array which is automatically generated by the browser is the document.images array - an array of Image objects associated with the <img tags in the source document. For example, the images array for array01.html contains six elements, corresponding to the six <img tags appearing in the document. The last <img tag has a null src value but still has an entry in the images array. The example allows the user to select which image to display in the missing image position. While this array is implicitly defined by the browser, the mode of access is standard:

document.images[i].

The src attribute for an image contains the URL for the image. The src attribute must be included (document.images[i].src) to redirect the source of the initially null image in the example. Here, the replacement <img tag is identified by its id=1 attribute and is accessed with the document.getElementById (1) method. The elements of the array can be sequentially accessed using a for loop as in:

for (i = 0; i <document.images.length; i++) alert (document.images[i].src)

The loop runs from the starting index at 0 and scans the whole array.

The document.images array can be accessed in two ways. One can use either an index on 0 to 5 in this example. Alternatively, one could use a name attribute supplied via the image tags. Thus, in array02.html the images can be accessed using document.images[i] with i on 0 to 5 - or by using the image names "B" to "E". The name "A" has been intentionally omitted so reference to document.images[i] with i = "A" will cause an error.

Two-dimensional Arrays

Two dimensional arrays are not explicitly available in JavaScript, but they can be constructed out of arrays of one-dimensional arrays – which is really what a 2D array is anyway. For example, the declaration to create a 3x4 array A is as follows:

1. var A = new Array (3)

2. for (i = 0; i <3; i++) A[i] = new Array (4)

Refer to the example 2dArrays.html. Statement 1 makes A an array with 3 cells. Statement 2 then makes each cell an array of 4 cells – which act like a row of 4 cells (indexed from 0 to 3). In effect, however, we get the a 2D array. It's like thinking of a matrix as a set of rows where each row is itself an array. The notation "new Array (n)" creates an array object with n rows – indexed from 0 to n-1.) Once the array has been declared we can initialize its elements with a pair of nested loops such as:

for (i = 0; i <3; i++) { for (j=0; j <3; j++) A[i][j] = 0 }

Alternatively, you can declare and initialize an array using the following kind of notation which visibly displays the nested sub-arrays:

var A = [ [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0] ]

To access the 2D array elements we use the notation:

A [i][j] .

You can scan 2D-arrays using double-indexed for-loops like:

for (i=0, k = 0; i <3; i++ , k++) { alert (A[i][k] ) }or

for (i=0, k = 2; i <3; i++ , k--) { alert (A[i][k] ) }

The first loop simply indices both i and k in tandem, thus running through the main diagonal of the array. The second loop increments i while decrementing k, thus running through the reverse diagonal of cells that start on the top right, rather than from the top left of the array.

Math Functions and Timers

Example 3: random numbers, Math.floor, Math.round

Random number generators are handy for automatically generating unpredictable sequences of numbers. Refer to JavaScript > JavaScript Examples > JavaScript-II for exampleJSII07a.html where the picture displayed is randomly selected from a list. A one-dimensional array of images myImages is initialized in the head script:

myImages = [ "ca.gif" , "us.gif" , "earthris.gif" , "logo.gif" ]

A function pickImage () then selects an image from the list by randomly generating an index into the array and redirecting the src attribute for an <img tag in the document. The <img tag is identified by its id= "myPicture". The getElementById method is then used to alter the src just like in a rollover.:

document.getElementById ("myPicture").src = myImages[i]

The function pickImage( ) is automatically called onload and is also triggered if the pickPicture button is clicked. The random selection of the index i into the array is done by:

i = Math.round (( 4 * Math.random ( ) + .5)) - 1

This generates a random integer from 0 to 3. First, the Math function random ( ) generates a random decimal number form 0 to 1. Then, the factor 4 scales this to lie between 0 and 4. The +.5 pushes it between .5 and 4.5. The Math round function then changes the result into the nearest integer from 1 to 5. (For numbers on .5 to 1.5, the rounded result is 1; etc). The-1 moves the result to between 0 and 4 as required by the image array whose indices run from 0 to 3. Using n instead of "4" returns a result from 0 to n. Summarizing:

1. random ( ) returns random decimal on 0..12. Math.round ( (n * Math.random ( ) + .5)) returns random integer on 1...n

3. Math.round ((n * Math.random ( ) + .5)) - 1 returns random integer 0...n-1

The Math.floor function is also useful:

1. Math.floor(n) returns integer part of n.2. Math.floor(n/10) returns 10's digit of n - if n is 2-digit number3. n – 10* Math.floor(n/10) returns units digit of n - if n is 2-digit number

Timers

The function:setTimeout("f1( )", m)

calls the function f1 after m milliseconds. It does NOT block program execution or otherwise affect browser behavior. All it does is schedule f1 to be executed in m milliseconds. For example, if the code were:

setTimeout("f1( )", m) stmt1

then stmt1 would be executed before f1 was executed because the timeout does not block the progression of the JavaScript code. Be careful if there are nested quotations – for example if

f1 is just alert ( "hello"). It is probably better to define any such string arguments to f1 as a variable first (say x) and then use the x in the function call (say setTimeout("f1(x )", m) ).

A related method is the setInterval function illustrated in timer00.html. The effect of the statement;

setInterval ("F2( )", 1500)

is to call the function F2 every 1500 milliseconds. Thus, in contrast to setTimer, the effect is repeated, not just done once. To stop the repeated calls initiated by setInterval, we have to use the clearInterval method. First, capture the result of the setInterval call with:

shutdown = setInterval ( "F2( )" , 1500)

Then stop the calls with:

clearInterval (shutdown).

as in timer01.html where the user variable shutdown is global to all the functions.

The proper use of these time-dependent functions can be subtle. The example testSetInterval.html in C:\myjspapp\chapter01 illustrates the use of the methods. The function f2( ) in the example initiates the periodic calls to the function f3( ). f3 monitors the condition under which the periodic calls should be terminated and calls the method clearInterval(shutdown) to stop the calls when the condition is satisfied. In other cases, f2 performs a timed counting computation. The example newexp11d.jsp (which is a JSP file) illustrates the application of the periodically called f3 to call a 3rd function f1 when the shutdown occurs.

3. Document and Window objects - properties and methods

This section illustrates some uses of the document and window objects.Refer to JavaScript > JavaScript Examples > JavaScript-DOM docWrite00.html, etc.

Notes1. IE browser (version 6.0) does not support all of these methods. In particular, the

named open for the window object and its sizing & placement options are ignored in IE version 6, however, Netscape does support them.

2. If you trace behavior by stalling effects using alert, note that Netscape requires alert("some string") as opposed to just alert( ) – or error occurs. If you do not have browser error testing turned on, the expected effects may appear to just not be handled. To turn on error detection in Netscape, use Tools > Web development > JavaScript console.

Window object

The example doc.Write03.html illustrates the window objects open method which opens a file in a new window. One format is:

window.open(URL, "A")

where the first argument identifies the file to open in the new browser window and the second argument names the window. The example doc.Write04.html illustrates the use of a named window.

1. The first open [window.open (x, "A") ] creates the named window "A". If you enter us.gif in the input field (without quotes), the new window contains the US flag in a separate window. Move window "A" to another place on the screen before OK'ing the alert( ).

2. The second open [window.open("logo.gif", "A")] opens the logo.gif file in the same window "A" named in the first open. Notice the "A" window opens in its current position.

3. The third open [window.open("ca.gif", "") ] opens the ca.gif file in a separate window because no name has been assigned.

The example doc.Write05.html illustrates the window object's history object. This object has methods that let you move back to previous windows in the browser history. For example, history's go method [window.history.go(x)] moves back |x| windows in the browser where x is a negative integer (not a string or a positive integer). Try it after several windows have been loaded in sequence, then enter a number (like 3) to move the window 3 windows back in its history – which you can then verify has happened by using the browser "forward" arrow to move 3 windows forward to get back to the original window. Notice that the statement x = -x in this example also converts x to an integer (from a string), though parsetInt could be used directly.

The window.location object returns the current URL of the window – see doc.Write06.html. The example doc.Write07.html illustrates another format for the open method:

window.open(URL, "" , "options")

where options can include properties like the windows dimensions and position. For example, the options:

"innerwidth= 300, outerwidth =200, screenX=10, screenY=10"

set the window dimensions and position on the screen respectively.

Notice: IE browser (version 6.0) does not support these sizing & placement options and just ignores them, but Netscape does.

The reference:

window.open(url string, '', ' width=200, height=200, resizable=0 ')

opens the referenced url in a 200x200 window; the resizable=0 choice is used here to ensure the window does not get resized. Observe the single quotes because this was used inside a double-quoted string. It did work properly in IE. Other useful options include: toolbar=1 (or 0 - to control toolbar inclusion/exclusion), scrollbars = 1 (or 0), statusbar = 1 (or 0).

Document object

The document object's write method can be used to write content to the HTML page. However, this has limited applications. In particular, the document.write method should generally not be used in an event-driven function call because it will just overwrite the existing html page.

However, the write method can be useful when executed synchronously as the page is loaded. The doc.Write00.html example illustrates its use to construct the tags for a large array. The first statement just writes out the opening tags for the table and the final statement closes the table out. The nested loops construct the rows and cells. The i-loop makes the opening and closing row tags, while the k-loop nested inside it makes the cells for each row. Here the table has 10 rows with 10 cells each. Each row is given attributes as well. The id attribute depends on the i & k. The example doc.Write01.html posts the generated id values for a small-scale version. The example doc.Write02.html shows the effect of an asynchronous write – the html source is effectively over-written when the button is clicked. The file itself is not actually changed, but the source page view shows only the over-written file with just the "Goodbye" text.

The HTML of a document can be changed in place using an objects innerHTML property. The example docWrite09.html illustrates how HTML entered in a text area can be placed live in a division (<div> tag) on the page. The structure of the example is straightforward:

1. Create a division (div) and assign it an id attribute (id=2).2. Create a textarea and assign it an id (id=1).3. Get the contents of the textarea using the usual syntax: w = document.getElementById(1).value4. Change the HTML in a target element using the innerHTML property:

document.getElementById (2).innerHTML = w

The example docWrite11.html illustrates how the innerHTML can be used to conveniently change the contents of HTML tags like cells in tables. One cell calls f1(ID) and uses the id and getElementById combination to make the change:

document.getElementById(ID).innerHTML = "LUCK"

where the function receives the elements id. This changes the contents of the affected table cell. The other cell calls f2(obj) and uses the object notation directly:

obj.innerHTML = "Day"

where f2(obj) gets the identify of the object via the this parameter. Another cell uses the f3(obj) function to pass the object via this notation and then uses the firstChild notation to access the cell's data:

p.firstChild.data = "Happy".

The example docWrite09.html illustrates an alternative method for accessing the innerHTML of an element:

document.getElementsByTagName ("div").item(0).innerHTML = w

This uses the getElementsByTag method which requires the name of a tag type like div here which you can access. It then returns a list of all the elements with that tag. The successive elements can then be accessed using the item(n) method. Here we just get the first element on the list item (0).

A useful syntax feature for constructing strings that include quotes is the back slash escape character \. The back slash eliminates the need for shifting back and forth between the single and double quotes notation. For example, docWrite12.html illustrates this with the string:

s = "id = \"30\" width = \"150\" "alert(s)

which pops-up: id = "30" width = "150". One just prefaces each double quote which is internal to the encompassing outer double quotes with a back slash.

Summary Syntax Table - II

JS Syntax Remarks

functions function name ( ) { ... } Put in script in head of HTML.function invocation

onclick = "name( )"onchange = "name( )"

Place in element triggering the invocation.

function body { stmt1 ; stmt2 ; etc } Semi-colons separate statements.

if if (condition) { stmt1 ; etc }

if (condition) { stmt1 ; return } Causes return from function.if-else if (Boolean condition) { stmt1 ; etc }

else { stmt2 ; etc }{ } are not needed if there is only one statement.

for-loop for (i = 0; i <N; i++) { ... }nested for-loops for (i = 0; i <3; i++)

for (j=0; j <4; j++) { ... }

1D-array A= ["s1", "s2", "s3" , "s4" ] Indices run from 0 to 3.A.length Number of entries.var B = new Array ( ) Makes array to which elements

can be added sequentially.

2D-array var A = new Array (3) for (i = 0; i <3; i++) A[i] = new Array (4)

Creates 3 x 4 array

var A = [ [1,2,3,4], [5,6,7,8], [9,8,7,6] ] Alternative initialization.A[i][j] Accesses i, j element of A

JS functionsalert alert (string argument)parse parseInt (x) Converts to integer.

parseFloat (x) Converts to decimal.focus document.getElementById (1). focus( ) Puts focus in element with

id=1.select document.getElementById (1). select( ) Highlights element with id=1.random Math.random ( ) Makes random decimal on 0 to

1round Math.round (x ) Rounds x to nearest integer.setTimeout setTimeout ("name ( )" , N) Calls name( ) in N msec.setInterval m = setInterval ("name ( )" , N) Calls name( ) every N msec.clearInterval clearInterval ( m ) Stops setInterval calls.

DOM getElementById document.getElementById (1).value Gets value of element id=1

document.getElementById(2).innerHTML= w

Replaces id=2's HTML with w

window.open(URL, "A") Open URL in window named A.

this <input type="button" onclick = "f1(this)" />function f1( p ) { use: p.height or p.id or p.name or p.style.background = 'teal' etc }

f1(this) identifies the HTML element where onclick occurs.f1's code can then refer to the element's (p's) properties.

Construction Notes:HTML Validation sites xhtml, exampleDOM 355…358…360-375 398…

traversal algorithmMenu & radio

syntax & events - Wang – radio's events, vars --radio index 187Wang – menu selected index - apps-Wang – 341 - menuactions Menu syntax

SyntaxWhile switch || 52a (readonly), pass name – a5-2, this[?] ….50d good absolute 213visibility 222 sebesta – with onsubmit was temporary, ok with onclickchallenge: hunt's widgetsconcatenation with integers: m + "" + n – prevents the no's from being addedbecause the "" forces string concatenation instead.Timer 238 sebestaTalking calculator Speech converter – limited dictionaryhow to sequence media in javascriptPreloading images Dreamweaver rollovers

Sebesta 182 events 183199 bubble exception handling model 321239sebesta advantage of external script file

Slider - - href to scriptConverter - Multiverter – with onchange ?x = document.images.item[0]x = document.bodyx = document.titlex = document.URLdocument.getElementsByTagName("div").item(0).innerHTML = w

Documents

javascript notes