JavaScript and the XHTML page (DOM) XHTML tree XHTML tree model - - PDF document

JavaScript and the XHTML page (DOM)

Lars Larsson Lecture #9

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

1 XHTML forms 2 XHTML tree model (DOM) 3 Accessing the DOM in JavaScript 4 Modifying node attributes 5 Working with forms 6 Summary

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

XHTML Forms

On the web, we can acquire user input using different controls: text areas, radio boxes or items from drop down menus, and so

forth. Generally, one or more of these controls are placed in a

form, including a button for submitting the data to the server (where it is parsed and some action takes place). All related controls must be placed in an enclosing <form> tag. There may be several unrelated forms on one page (search box, write mail form, etc).

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

<form>

The <form> tag requires an attribute called action, which specifies the name of the resource (server side program) to which the data in the form shall be sent. For instance, if we have a page called sendEmail.jsp our form that uses it should be declared as follows: <form action="sendEmail.jsp"> ... </form> Upon submitting this form, the data is sent to the specified web page for processing. Because we do client side web programming, we only add the action to comply with the XHTML standard. We do not actually send data to a web server.

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

<input>

Many kinds of user data can be entered via the <input> tag. As the attribute type, we specify what kind of input control we want to display: button, checkbox, file, hidden, image, password, radio, reset, submit or text. The default is the text type, meaning a box where a single line of text can be entered (usually used for search boxes and the like).

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

<input> continued

One should always use the name attribute for controls, as it will be sent along with the data in the form, and we can make use

f it in JavaScript. It will therefore be easy to work with the
data. An example:

<form action="sendEmail.jsp" id="email"> <input type="text" name="email_address" /> <input type="submit" value="Send e-mail" /> </form> The code above will create a form with a single line input text field and a button with the text “Send e-mail”.

SLIDE 2

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

<fieldset>

To group related controls in a graphical box, we use the <fieldset> tag. It does not effect the data in the form, it is merely a graphical hint to your users that the controls are

related. This is good from both a design and usability

perspective, because it makes the form more clear. Use the <legend> tag in the fieldset to show a title in the frame.

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

<select>

The <select> tag creates a drop down menu, where the user can select among available choices. The choices are listed as <option> tags within the <select> tag: <select name="gender"> <option value="female">Female</option> <option value="male">Male</option> </select> We can allow for multiple selectable values by setting the attributes multiple to “multiple” and size to whatever size the list should be displayed as (note that more values than the display size can be selected).

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Accessibility: <label>

Most forms have labels in addition to the controls, and these labels should be marked up as such. Give each control a unique ID, and mark the label text with the label tag. In the label tag, specify the “for” attribute and let its value equal the chosen unique ID, as such: <label for="email">Your email addr:</label> <input type="text" name="email" id="email" /> Note that “name” does not have to equal “id”, but is the common practise.

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Form example

We will now see a rather large form example, but it should be quite easy to understand what is going on. Play with the attributes in Firebug and see what effects they have! example-form.xhtml should be your next browser destination. We will come back to forms at the end of the lecture, after having covered the basics of the XHTML tree model.

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

XHTML tree model (DOM)

You may recall the XHTML tree model from a previous lecture. The model shown was:

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

XHTML tree model (DOM)

The Document Object Model is an interface that we may use to manipulate the XHTML tree model. All elements that comprise our web page can be referenced and modified. In addition, we have the power to affect the browser itself using JavaScript! This is what is used to create popup windows, provide “back” links (simulating the brower’s Back button), and for finding information on the browser window itself. We can obtain the size of the browser window, the vendor of the browser, and much more. http://www.w3schools.com/htmldom/dom reference.asp has a reference of all objects that are at our disposal, including examples of use. We will not cover the browser-related ones here in class.

SLIDE 3

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

DOM objects

As exposed by the DOM interface, the elements of a web page are represented by DOM objects. Such objects include:

Anchor (<a> elements)
Form (<form> elements)
Table (<table> elements)
TableRow (<tr> elements)
TableData (<td> elements)
. . .

The full list is also available at the link from the previous slide.

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

DOM objects

Notably missing is a special object for lists, texts, headers, and so forth. The objects that are made available to us have attributes that are deemed useful. The division does not limit

r extend upon our capabilities, because we can modify any

element’s attributes. During the lecture, to simplify matters, we will only use the general way of reading and modifying attributes.

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Accessing the DOM in JavaScript

To access the DOM in JavaScript, we must find the correct node in the DOM tree. To do so, we use the Document

bject. Conceptually, the Document object represents the

XHTML page. The Document object grants access in three ways to different parts of the page:

1 Collections (of anchors, forms, images, and link and area

elements)

2 Properties (of the page, such as the title) 3 Methods (for accessing any element or elements)

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Document Collections

DOM collections are the following:

anchors[] — all <a> elements
forms[] — all <form> elements
images[] — all <img> elements
links[] — all <link> and <area> elements (the latter

are used for image maps, disregard!) Miniature example (shows the address pointed to by the first anchor of the page): alert(document.anchors[0].href);

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Document Properties

Document Properties give us information on the visitor and the page itself.

body — access to the <body> element
cookie — manipulates cookies (page specific information

stored in web browser for return visits)

domain — domain name for current page
lastModified — returns last modification date of the

page (if any)

title — the title of the page
URL — the URL of the page

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Document Methods

Document Methods are very powerful, and allow us to gain access to any element on the page. They are:

getElementById(id) — returns a reference to the

element with the given ID, or null if it does not exist

getElementsByName(name) — returns an Array of

elements with the given name set as their name attribute value

getElementsByTagName(tagName) — returns an Array
f elements of the given tag name
some more, related to writing content directly to the

document — this is not allowed in XHTML, so we do not cover it here.

SLIDE 4

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

DOM tree navigation

Using getElementById(), it is simple to obtain a reference to any element with an ID. We usually want to navigate from one element to another (lest we ID all elements). To do so, we use the tree structure. Elements provide us with the following navigational choices, relative to the current element:

parent — reference to the parent element
firstChild — reference to the first child element
lastChild — reference to the last child element
childNodes[] — an Array of all the child nodes

Using these navigational tools, we can navigate freely in the tree.

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Modifying node attributes

Once we have a reference to a node, we can inspect and change its attributes using getAttribute(attributeName) and setAttribute(attributeName, value), respectively. Assume that we have an element with the ID “important”. Then, we may do the following: var e = document.getElementById("important"); alert("Old class: " + e.getAttribute("class")); e.setAttribute("class", "reallyClassy");

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Milestone

CSS rules applies to the element immediately as it changes class — we now have a way of modifying our web page dynamically! We know how to:

obtain references to the node or nodes of interest, either

via ID or tag name;

navigate between nodes, using the tree structure; and
read and change attributes of nodes!

We only need to learn how to create new nodes, and modify the contents of nodes that are already present on the page to have complete control over every single aspect of the page!

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Modification example

We need to see this type of modification in action! Open example-modification.xhtml in your web browser, and play around with it.

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Working with forms

Forms were introduced earlier in this lecture. We may alter forms and the values of controls using JavaScript. Texts, text areas and hidden controls all have some text value. We can change this easily using their built-in value called

value. An example:

var e = document.getElementById("someID"); alert("Old text: " + e.value); e.value = "some new text";

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Select boxes

Select boxes that allow us to select a single value (remember that we can change them to allow for multiple selection) enable us to work with their selected value easily: var e = document.getElementById("someID"); alert("Selected value: " + e.value); However, to change which option is selected, we can either change the index for the selection (start counting from 0) or by setting the selected value to true for the relevant element: e.selectedIndex = 0; // select first var o = document.getElementById("theOption");

.selected = true;

SLIDE 5

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Check boxes

Obtaining information on whether a check box is checked or not, and altering the state, is straight forward and done via the checked value: var e = document.getElementById("someID"); alert("State: " + e.checked); e.checked = !e.checked; // toggle state

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Radio boxes

If we have direct access to a radio box or check box, we can simply query or alter the checked value. However, we generally want to avoid coming up with a unique ID for every single control on the page. As you recall, check boxes and radio boxes are grouped via the name attribute. This group may be accessed in JavaScript

easily. It is presented to us as an array, and we can iterate over

it, making it possible to look through an entire group for which

ption has been checked.

This requires a bit of code, and it’s about time we saw an example!

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Form example

Open example-dynamic-forms.xhtml in your web browser now and play with it to see what it does.

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Task for next time

As a voluntary task for next time, write a version of the “guess the number” game that uses form controls rather than the various dialogue boxes that we used last time. Store the correct value in a hidden input control, and have all the guesses wind up in a text area, along with a text such as: “The value you guessed, 50, was too high. Try again!”

JavaScript and the XHTML page (DOM) Lars Larsson Today XHTML forms XHTML tree model (DOM) Accessing the DOM in JavaScript Modifying node attributes Working with forms Summary

Summary

We have introduced XHTML forms today, and seen how we may obtain references to the elements of web pages. Once we have such a reference, we can change that element in various ways, allowing us to change attributes and states (such as selection status). Next time, we will study more about the Document Object Model, and how we can add and remove nodes to make truly dynamic pages. Together with today’s topics, this will be sufficient to solve the last assignment of the course! We will also discuss the fourth assignment, so read the specification and bring questions!