Even More Javascript

CS174

Chris Pollett

Oct. 18, 2009

Outline

DOM
Element Access in Javascript
Events and Event Handling
Validating Forms
Quiz
Moving Elements
Visibility
Dynamic Content
Timers

Execution Environment

When a browser displays an XHTML document in a window, it will set up a Javascript Window object to represent information about the window.
All Javascript variables are properties of some object. So implicitly defined globals on a page can be viewed as properties of the Window object.
You can have more than one Window object if the browser opens more than one window.
Every Window object has a property document which is the Document object representing the XHTML document it displays.
Every document objects has a forms array each element of which represents a form (Form object) on the document.
Each Form object has an elements array as a property which contains an array of form elements for the buttons , menus, etc on it.
Document objects also have property arrays for anchors, links, images, and applets.

Document Object Model

The Document Object Model is a model developed in the 90s for how the contents of an XHTML or XML document should be modeled by Javascript or other language's objects.
Typically a document is modeled as a tree with roughly one node for each element type.
DOM also described methods for getting, updating, and modifying elements.
DOM Level 3 was released in 2004. Most browsers support DOM Levels 1 and parts of Level 2 and 3.

Element Access in Javascript

The DOM 0 way of associating Javascript objects with form elements was to use the forms array of the Document Object, as well as its sub elements array.
For example, if there was only one form on a page with the following button on it:
```
<input type="button" name="turnItOn" />
```
then it could be accessed with document.forms[0].elements[0].
This is awkward if we start to add elements as this address could change. Instead, we could do document.forms[0].turnItOn
Still, having forms[0] is awkward. Another approach is to given this button an id:
```
<input type="button" id="turnItOn" name="turnItOn"/>
```

We could then look up the button using:

button = document.getElementById("turnItOn");

We need the attribute name still for the button above because that is what gets sent to the server as the name/value pair when the form is submitted.

More on Element Access

Checkboxes in a group of checkboxes often share the same name.
Radio buttons in a group of radio buttons always share the same name.
In the DOM, these object get reflected as an array rather than an element of that name.

For example suppose we had a radio button group with name vehicles. on a form with id bob. We could access this by doing

myForm = document.getElementById("bob");
numButtons = myForm.vehicles.length;
// if we want to we could cycle over this array for values.
for( i =0 ; i < numButtons; i++)
{
	 oneVehicle = myForm.vehicles[i].
     // do something
}

Events and Event Handling

In XHTML, there are a collection of attributes beginning with "on" that can be used to give a handler for different kinds of events:
- onblur -- can be used in <a>, <button>, <input>, <textarea>, <select>
- onchange -- can be used in <input>, <textarea>, <select>
- onclick -- can be used in <a>, <input>
- onfocus -- can be used in <a>, <input>, <textarea>, <select>
- onload/ onunload -- can be used in <body>
- onmousedown, onmousemove, onmouseout, onmouseover, onmouseup -- can be used in most elements.
- onselect -- can be used in <input>, <textarea>

An example, of using one of these is:

<input type = "button" id="b" name="b" onclick="alert('b tapped');" />

More on Event Handling

Besides the method of the last slide to register a handler for an event, you can also set the handler from Javascript:
```
document.getElementById("b").onclick = myNewHandler;
```
We can set the values of other form elements within Javascript and we can also generate events within Javascript.
```
<input type="text" id="cost" onfocus="this.value=10; this.blur();" />
```

Validating Forms

As we said before it useful to check that the data entered into a form is valid before sending it to the server.
We saw last class we can associate a handler with a form using a syntax-like:
```
<form ... onsubmit="return checkSubmit()" >
```
If this function returns true; the form is submitted; otherwise it is not.
Typically, if the form is not correct you want to display some message.
You could either use an alert
Or you could set the style of some element from display: none to display: inline or display:block. This would allow you to put stars by missing data:
```
phoneStar = document.getElementById("phoneStar");
phoneStar.style.display="inline";
```
One can also dynamically insert content such as an error message into div tags by setting its innerHTML attribute.

Quiz

Which of the following statements is true?

To iterate over properties of an object Javascript uses the foreach statement.
Functions in Javascript are objects.
The pattern /the{5}isoptional/ would match the string "theisoptional".

DOM 2

The DOM 2 Event model is supported by Firefox and other recent browsers but is not supported by IE6.
In this model events are split into HTMLEvents like blur and MouseEvents like click and all events beginning with mouse.

Event registration is done using addEventListener:

document.myelement.addEventListener("change", myhandler, false).

You can add multiple handlers to the same node.
There is also a removeEventListener method.
Events are targeted on some node in the doc tree. In the event capturing phase, one starts at the root node and goes down the tree toward the target calling all events whose onCapture flag is true. When the target node is reached a DOM 0 like event handling is done for handlers that are specifically attached to this target. Then a bubbling phase back up the tree happens and all listeners whose onCapture flag is false are called.

The Navigator Object

The navigator object can be used to determine browser type.
It has two useful properties, appName and appVersion

Moving Elements

We have previously talked about absolute and relative positioning.
Today we'll consider this in the context of moving elements around the screen.

Consider the following Javascript function:

function moveIt(id, newTop, newLeft)
{
   myStyle = document.getElementById(id).style;
   myStyle.top = newTop + "px"; /* notice how CSS properties are properties of the style object*/ 
   myStyle.left = newLeft + "px";
}

This could be used to move an element to a specific location on the screen.

Element Visibility, Colors and Fonts

You can control the visibility of an XHTML element using the CSS property.

<div id="test" style="visibility: hidden">hi there</div>
<input type="button" onclick='show("test")' />
<script type="text/javascript"> 
function show(id)
{
   myStyle = document.getElementById(id).style;
   myStyle.visibility = "visible";
}
</script>

In a similar fashion one can change other CSS properties in response to events. For instance, if you like you could change the color or font type or size.

Dynamic Content

It is sometimes useful to be able to give help information when a person hovers over a form element. This can be achieved as follows:

<script type="text/javascript" >
msgs = ["<p>mesg0</p>", "<p>mesg1</p>"]
function showMessage(evt, num)
{
   box = document.getElementById("adviceBox");
   box.innerHTML = msgs[num];
   myStyle =box.style;
   myStyle.position = "absolute";
   myStyle.top = evt.clientY +10 +"px"; 
   myStyle.left =  evt.clientX +10 +"px";
   myStyle.visibility = "visible";
}
function hideMessage() 
{
   myStyle = document.getElementById("adviceBox").style;
   myStyle.visibility = "hidden";
}
</script>
<div id="adviceBox" style="visibility:hidden" />
<input type="text" onmouseover="showMessage(event, 1)" onmouseout="hideMessage()" />

Timers

It is sometimes useful to update the contents of a page every so many milliseconds.
Javascript support this by using either the functions setInterval (repeating) or setTimeout (fires once).

For example,

setTimeout(myCallback, repeatTimeInMilliSec);
// myCallback is the Javascript function you would like called

To stop the timer you can use clearTimeout/clearInterval.