JavaScript JavaScript and HTML Text Chapter 4. Client-side JavaScript Defines a collection of...

JavaScript

JavaScript and HTML

Text Chapter 4

Client-side JavaScript

• Defines a collection of objects, methods and properties that allow scripts to interact with XHTML.

• This chapter covers DOM, although an understanding of DOM is not necessary to use client-side JavaScript.

• It covers techniques for accessing document elements, and the basics of events and event-handling.

DOM

• The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.[1] Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API). The history of the Document Object Model is intertwined with the history of the "browser wars" of the late 1990s between Netscape Navigator and Microsoft Internet Explorer, as well as with that of JavaScript and JScript, the first scripting languages to be widely implemented in the layout engines of web browsers.

http://en.wikipedia.org/wiki/Programming_language

http://en.wikipedia.org/wiki/HTML

http://en.wikipedia.org/wiki/XHTML

The execution environment• A browser displays an XHTML document in a window on

the computer screen. This is the JavaScript Window object.

• All variables in your script are properties of some object. The Window’s properties are visible to all scripts in the displayed document, (this includes global variables).

• There can be multiple Window objects.• The Document object is the displayed HTML document.

It is a property (the document property) of a Window object.

• The Document object has a Forms array. Each Forms array element has an elements array as a property.

• The Document object also has a property arrays for anchors, links, images and applets.

Hierarchy

Window Object

Document property Other window properties

Forms Array

A Form in the array

Elements array

Another form…etc

DOM: Document Object Model

• Under development since mid-90s.• Currently DOM 3 is the latest version• DOM1 focused on the XHTML and XML

document model.• DOM 2 includes document traversal and

an event model.

Values indicate the level of support in the most recent version of the layout engine, or (if a version number is given) in the specified version.

Value Meaning

YesIndicates that the layout engine fully supports this property/element when valid values are used.

NoIndicates that the property/element is completely ignored.

Partial

Indicates that the property/element is understood, but that not all values are supported. Supported values are implemented correctly.

IncorrectIndicates that the property/element is understood, but that it is not implemented correctly in all cases.

Experimental

Indicates that the property/element is understood, but supported under an alternate name. May be incomplete or buggy.

DroppedIndicates that the property/element is no longer supported.

Nightly build

Indicates that the property/element is supported to some extent in an experimental/nightly build. Future support is expected.

DependsIndicates that the property/element is supported only on certain platforms, or if certain settings are configured.

DOM compliance by layout engines

TridentTasman

Gecko WebKit KHTML Presto

DOM1 6.0 Yes 1.0 85 Yes 1.0

DOM2 Mostly Partial Mostly Partial Mostly Mostly

DOM3 No No Partial Partial Partial Partial

The document object<html > <head><title> onLoad event handler </title> <script type = "text/javascript">// The onload event handler function load_greeting () { alert("You are visiting the home page of \n" + "Pete's Pickled Peppers \n" + "WELCOME!!!"); } </script> </head> <body onload="load_greeting();">Some text <p /> </body></html>

The previous html rendered

The document object

document

headbody

title script

function

Some text

DOM support in JavaScript

• Elements of XHTML are objects in JavaScript, their attributes are object properties. Example,

<input type=“text” name=“address”>

• type and name are properties of the input object

Accessing objects and properties

• Addresses are needed to access objects and properties of the document from within a script.

• The address is referred to as the object’s DOM address.

Text example

<?xml version = "1.0" encoding = "utf-8"?><!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <head><title> address example </title> </head> <form name ="myform" action=""> <input type="button" name="turniton"> </form> </body></html>

Address of the button is…?

• Using the DOM address, the button is document.forms[0].elements[0]

• Using element names, the address of the button is document.myForm.turniton

• A validation issue: the XHTML 1.1 standard does not allow the use of the name attribute for a form, though the browser has no trouble with it.

• You can also use a JavaScript method, getElementById(“…”) as in

document. getElementById(“turniton”) • Any expression that evaluates to string can serve as the

parameter to getElementById

Names and ids

• Names are needed for form-processing and ids are handy for DOM addressing so often both are used.

• Buttons in a group of radiobuttons always have the same name. Buttons in a group of checkboxes may have the same name. In such cases, the names cannot be used in the DOM address. They may have an id though.

• Implicit arrays are associated with button groups, and these provide an alternative to using names or ids for these addresses. (See course ppt example).

Table 5.2 excerpt: Text shows event attributes and their tags

Attribute Tag description

onblur <a> Link loses input focus

<button> Button loses input focus

onchange <input> Input element is changed and loses input focus

onclick <a> Link acquires input focus

How to register the event handler with DOM 0 event model

• Assign the event handler script to an event tag attribute, eg.,

<input type =“button” name=“whocares” onclick=“alert(‘you clicked me’);”/>

• If the handler is more than one statement, use a function, as in,

<input type =“button” name=“whocares” onclick=“myButtonHandler();”/>

Body elements

• load and unload are the two most common body-element events.

• See text example load greeting in previous slide

Buttons

• Buttons are a good way to get input from a browser. click is the most common button event

• Example from previous slide shows how to register an event to handle button-click:

<input type =“button” name=“whocares” id=“somebutton” onclick=“myButtonHandler();”/>

Buttons

• Another way to do it would be to assign the handler to the associated event property on the button:

document.getElementById(“somebutton”).onclick= myButtonHandler;

Rb example: form in body<form id = "myForm" action = ""> <p> <input type = "radio" name = "planeButton" onclick = "planeChoice(152)" /> Model 152 <br /> <input type = "radio" name = "planeButton" onclick = "planeChoice(172)" /> Model 172 (Skyhawk) <br /> <input type = "radio" name = "planeButton" onclick = "planeChoice(182)" /> Model 182 (Skylane) <br /> <input type = "radio" name = "planeButton" onclick = "planeChoice(210)" /> Model 210 (Centurian) </p></form>

Slightly modified Radiobutton click event handlerfunction planeChoice (plane) { var plane;var s; switch (plane) { case 152: s="A small two-place-airplane for flight training"; break; case 172: s="The smaller of two four-place airplanes"; break; case 182: s="The larger of two four-place airplanes"; break; case 210: s="A six-place high-performance airplane"; break; default: s="Error in JavaScript function planeChoice"; } alert(s);}

The form

Alert from rb click

Different version of this rb example <body> <h4> Cessna single-engine airplane descriptions </h4> <form id = "myForm" action = "handler"> <p> <input type = "radio" name = "planeButton" value = "152" /> Model 152 <br /><input type = "radio" name = "planeButton" value = "172" /> Model 172 (Skyhawk) <br /> <input type = "radio" name = "planeButton" value = "182" /> Model 182 (Skylane) <br /> <input type = "radio" name = "planeButton" value = "210" /> Model 210 (Centurian) </p> </form> <script type = "text/javascript"> var dom = document.getElementById("myForm"); dom.elements[0].onclick = planeChoice; dom.elements[1].onclick = planeChoice; dom.elements[2].onclick = planeChoice; dom.elements[3].onclick = planeChoice; </script>

Different version of the same from text function planeChoice (plane) {var dom = document.getElementById("myForm");for (var index = 0; index < dom.planeButton.length; index++) { if (dom.planeButton[index].checked) { plane = dom.planeButton[index].value; break; } }switch (plane) { case "152": alert("A small two-place airplane for flight training"); break; case "172": alert("The smaller of two four-place airplanes"); break; case "182": alert("The larger of two four-place airplanes"); break; case "210": alert("A six-place high-performance airplane"); break; default:: alert("Error in JavaScript function planeChoice"); break; } }

Text box events

• Textbox creates four events: blur, focus, change, select.

An example from the text

• Text example (pg 207 nochange.html and nochange.js)

• I saved this in

• …\Higgindm\source\chapt5\coffee.html and coffee.js

The Compute cost function

function computeCost() { var french = document.getElementById("french").value; var hazlenut = document.getElementById("hazlenut").value; var columbian = document.getElementById("columbian").value;

// Compute the cost

document.getElementById("cost").value = totalCost = french * 3.49 + hazlenut * 3.95 + columbian * 4.59; } //* end of computeCost

A piece of the table to create the form

<tr> <th> Product Name </th> <th> Price </th> <th> Quantity </th> </tr>



<tr> <th> French Vanilla (1 lb.) </th> <td> $3.49 </td> <td> <input type = "text" id = "french" size ="2" /> </td> </tr> <tr>

computation of the total cost<p>

<input type = "button" value = "Total Cost"

onclick = "computeCost();" />

<input type = "text" size = "5" id = "cost"

onfocus = "this.blur();" />

</p>

Ordering coffee: user can’t alter any cost or price textbox

Validating form input

• Format, completeness (including datatypes, etc) is commonly done in JavaScript, shifting this work off the server. Besides the fact that the client usually has a lighter load, doing this data entry checking on the client saves network traffic.

• An alert indicating the error, putting the field in focus, and selecting the contents would be appropriate actions. The focus() method and select() methods on the DOM element would effect the latter two actions.

IE6 vs Moz7

• In IE6 focus and select only work if the handler is registered by assigning an event property. In Moz7 select works ok but focus does not.

Return value of data checking handler

• A handler checking form data should return false to keep the (bad) form data from being sent on to the server.Return true if the data is ok.

• The text provides an example: the user enters a password, then enters it again. We need to check that the pw was entered into the first field (it is not the empty string) and that the contents of the first pw field match the second pw field.

• If all is well the checker returns true. Otherwise it returns to the first pw field.

• The checker is called on submit, or when the second textbox loses focus, the onblur event.

Entering two different pws in mozilla

After clicking ok in the alert in IE: note focus

Function to check pwsfunction chkPasswords() { var init = document.getElementById("initial"); var sec = document.getElementById("second"); if (init.value == "") { alert("You did not enter a password \n" + "Please enter one now"); init.focus(); return false; } if (init.value != sec.value) { alert("The two passwords you entered are not the same \n" + "Please re-enter both now"); init.focus(); init.select(); return false; } else return true;}

Body & form<body><h3> Password Input </h3><form action = ""> <p> Your password <input type = "password" id = "initial" size = "10" /> <br /><br /> Verify password <input type = "password" id = "second" size = "10" /> <br /><br /> <input type = "reset" name = "reset" /> <input type = "submit" name = "submit" /> </p></form><script type = "text/javascript"></script></body>

Validator example in text

• Check a name and phone number for format errors.

Input validation: check name

Checking input: phone number

This input was accepted…. Is it ok?

Check namefunction chkName() { var myName = document.getElementById("custName");// Test the format of the input name // Allow the spaces after the commas to be optional// Allow the period after the initial to be optional var pos = myName.value.search(/\w+, ?\w+, ?\w.?/); if (pos != 0) { alert("The name you entered (" + myName.value + ") is not in the correct form. \n" + "The correct form is: " + "last-name, first-name, middle-initial \n" + "Please go back and fix your name"); myName.focus(); myName.select(); return false; } else return true;}

Check number

function chkPhone() { var myPhone = document.getElementById("phone");// Test the format of the input phone number var pos = myPhone.value.search(/^\d{3}-\d{3}-\d{4}$/); if (pos != 0) { alert("The phone number you entered (" + myPhone.value + ") is not in the correct form. \n" + "The correct form is: ddd-ddd-dddd \n" + "Please go back and fix your phone number"); myPhone.focus(); myPhone.select(); return false; } else return true;}

Form and script<form action = ""> <p> <input type = "text" id = "custName" /> Name (last name, first name, middle initial) <br /><br /> <input type = "text" id = "phone" /> Phone number (ddd-ddd-dddd) <br /><br /> <input type = "reset" id = "reset" /> <input type = "submit" id = "submit" /> </p></form><script type = "text/javascript"></script>

Validator2 from text

• Uses the DOM2 model.

• Documents can mix the Dom0 and DOM2 models.

• But DOM2 is not a superset of DOM0 and doesn’t support its model.

the DOM2 model

Module Event interface Event types

HTMLEvents Event abort, blur, change, error, focus, load,…

MouseEvents MouseEvent click,mousedown,

mousemove,

mouseup, mouseover,…

DOM2 event-handling

• much more complicated than DOM0: There are 3 phases: capture, target node execution, and bubbling

• In capture, the event object propagates down from the root to the target node looking for an enabled event-handler.

• When the event reaches the target node, any registered handler there are executed.

• In bubbling, the event travels back to the root executing enabled event-handlers for this event.

bubbling

• Not every event bubbles. • load and unload events do not bubble. • Mouseevents do bubble.• Any handler can stop further propagation using

the stopPropagation method of the event.• Bubbling came from exceptionhandling.

Exceptions in C++ and Java can be thrown and caught, so to avoid redundancy a single handler might deal with all events of a certain type.

DOM0 vs DOM2 more…

• DOM0 validating methods return false to prevent sending a form to a server.

• DOM2 has a method preventDefault which serves the same purpose.

• We saw how to register a method to handle an event in DOM0. In DOM2 it is effected by using the addEventListener method.

DOM0 vs DOM2 more…

• addEventListener takes 3 parameters, the name of the event as a string literal (eg., “mouseup”), the handler function specified as code or a function name, and finally a boolean indicates if the function is enabled for the capture phase. If not, it may be called at the target node or during bubbling.

• removeEventListener – a method which takes the same 3 parameters as addEventListener – makes it possible to remove an event handler.

DOM0, Moz7 and DOM2

• DOM0 and Moz7 treat the keyword this in an event handler as a reference to the target node.

• This is not required in DOM2 and other browsers may not support it so use of this in a handler may be non-portable.

• The alternative is to use the currentTarget property of Event which always references the object on which the handler is being executed.

Mouse

• MouseEvent inherits from Event interface. It adds several properties, most useful of which are clientX and clientY, the x and y coordinates of the mouse event in the browser window, measured from upper LH corner of the document in the browser window (not the upper left of the display).

Redo of validator in textfunction chkName(event) {// Get the target node of the event var myName = event.currentTarget;var pos = myName.value.search(/\w+, ?\w+, ?\w.?/); if (pos != 0) { alert("The name you entered (" + myName.value + ") is not in the correct form. \n" + "The correct form is: " + "last-name, first-name, middle-initial \n" + "Please go back and fix your name"); myName.focus(); myName.select(); } }

validator2 in textfunction chkPhone(event) {// Get the target node of the event var myPhone = event.currentTarget;// Test the format of the input phone number var pos = myPhone.value.search(/^\d{3}-\d{3}-\d{4}$/); if (pos != 0) { alert("The phone number you entered (" + myPhone.value + ") is not in the correct form. \n" + "The correct form is: ddd-ddd-dddd \n" + "Please go back and fix your phone number"); myPhone.focus(); myPhone.select(); } }

Body & form<body><h3> Customer Information </h3><form action = ""> <p> <input type = "text" id = "custName" /> Name (last name, first name, middle initial) <br /><br /> <input type = "text" id = "phone" /> Phone number (ddd-ddd-dddd) <br /><br /> <input type = "reset" /> <input type = "submit" /> </p></form><script type = "text/javascript"></script></body>

You can get the browser name

• appName of navigator returns the browser.

Navigate.html in text

<html><head><title> Using navigator </title><script type = "text/javascript"></script></head><body onload = "navProperties()"></body></html>

Mouse click coordinates<html> <head> <title> Drag and drop </title> <script type = "text/javascript"> </script> </head> <body> <img id = "Patricia" src = "Patricia.jpg" alt = "(Picture of Patricia)" onmousedown = "mouseFunction(event);"/> </body></html>

Picture comes up

On mousedown alert

JavaScript JavaScript and HTML Text Chapter 4. Client-side JavaScript Defines a collection of...

Documents

Transcript of JavaScript JavaScript and HTML Text Chapter 4. Client-side JavaScript Defines a collection of...