Javascript - Element Access, Form Processing, Positioning

CS174

Chris Pollett

Apr 17, 2017

Outline

Element Access in Javascript
Events and Event Handling
Validating Forms
Quiz
DOM 2
Element Positioning
Moving Elements
Element Visibility

Execution Environment

When a browser displays an HTML 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 variable object. So implicitly defined globals on a page can be viewed as properties of the window variable 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 HTML 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 HTML, 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 1 was the first standardization which occurred in 1998. (I'll call stuff prior to this Level 0). IE 5 was the first browser to partially support it.
- DOM Level 2 in 2000 added getElementById and a new event model, which we will describe in a moment.
- DOM Level 3 in 2004 added XPath, keyboard event handling, and serialization support.
- DOM Level 4 has 2012 draft. It seeks to incorporate stuff from HTML 5 that makes more sense as part of DOM. Also, new work is being done to simplify the specification of the event model.
Most browsers support DOM Levels 1 and 2 and parts of Level 3 and 4.

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 HTML/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');" />

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? (Don't consider newer than ES5)

Javascript supports variable interpolation for string literals delimited with double quotes.
The module pattern we showed last day made use of an IIFE.
Javascript uses the extends keyword to indicate the class being defined is a subclass of another.

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:

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 ot 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

Element Positioning

Positioning of elements can be done using styles.

It come in a few types absolute, fixed, relative, etc:

<p style="position: absolute; left:100px; top: 200px">some text
</p>
<p style="position: relative; left:10px; top: -20px; width: 50">some other text
</p>

Both positionings can be used to set text on top of other text.
Since you can change the style property of an element in Javascript, you can use positioning to move objects around on the screen dynamically.

Moving Elements

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.