~~SLIDESHOW~~
Contact Hour 11: To be discussed on Wednesday 20th February, 2013.
Lecturer: Dr Chris P. Jobling.
This lecture describes some of the client-side web programming features of JavaScript.
The slides and notes in this lecture are based on Chapter 5 of Robert W. Sebasta, Programming the World-Wide Web, 3rd Edition, Addison Wesley, 2006. and Chapter 7 of Chris Bates, Web Programming: Building Internet Applications, 3rd Edition, John Wiley, 2006.
Manipulating web documents through the Document Object Model (DOM) and the JavaScript event model.
At the end of this lecture you should be able to answer these questions:
At the end of this lecture you should be able to answer these questions:
document.write
not be used in an event handler? At the end of this lecture you should be able to answer these questions:
name
attributes. getElementById
. Window
object represents the window in which the browser displays documents Window
object provides the largest enclosing referencing environment for scriptsWindow
Window
properties:document
– a reference to the Document
object that the window displays frames
– an array of references to the frames of the document forms
– an array of references to the forms of the document Form
object has an elements
array, which has references to the form's elements Document
also has arrays for anchors
, links
, and images
<note> DOM 2 is the latest approved standard:
The HTML5 specifications are intended to be much more precise about what the DOM is and how it should react to user behaviours. </note>
<html> <head> <title> A simple document </title> </head> <body> <table> <tr> <th> Breakfast </th> <td> 0 </td> <td> 1 </td> </tr> <tr> <th> Lunch </th> <td> 1 </td> <td> 0 </td> </tr> <table> </body> </html>
Load code dom.html
For example:
<input type = "text" name = "address" />
would be represented as an input
object with two properties, type
and name
, with the values "text"
and "address"
. E.g:
input = { type: "text", name: "address" };
There are several ways to do it
Example (a document with just one form and one widget):
<form action = ""> <input type = "button" name = "pushMe" value="Push Me" /> </form>
Rendered as:
<html> <form action = “”>
<input type = "button" name = "pushMe" value="Push Me" />
</form> </html>
Load code form.html
var button = document.forms[0].elements[0]
For example if another form is added before this one, or another widget is added before the button.
name
attributes<form name = "myForm" action = ""> <input type = "button" name = "pushMe" value="Push Me" /> </form>
var button = document.forms[0].pushMe
name
attribute on form elements!getElementById
method (defined in DOM 1)<form action = ""> <input type = "button" id = "pushMe" value="Push Me" /> </form>
var button = document.getElementById("pushMe")
This is the safest method, and is the most widely adopted convention. It does require that each widget be given a unique id.
<form action = ""> <input type = "button" id = "pushMe" value="Push Me" /> </form>
var button = $("#pushMe");
As jQuery has become almost a standard part of the developer's toolbox, this way of accessing a DOM element by CSS selector is almost certain to work. You do need to include jQuery as an external library of course.
<form id = "topGroup"> <input type = "checkbox" name = "toppings" value = "olives" /> Olives</br /> <input type = "checkbox" name = "toppings" value = "tomatoes" /> Tomatoes </form>
<html>
<form id = "topGroup"> <input type = "checkbox" name = "toppings" value = "olives" /> Olives<br /> <input type = "checkbox" name = "toppings" value = "tomatoes" /> Tomatoes </form>
</html>
Load code radiobuttons.html
var numChecked = 0; var dom = document.getElementById("topGroup"); for (index = 0; index < dom.toppings.length; index++) { if (dom.toppings[index].checked) { numChecked++; } }
Mini exercise: Modify the above to generate an array of toppings.
document.write
in an event handler, because the output will probably replace the current DOMEvent | Tag Attribute | Event | Tag Attribute |
---|---|---|---|
blur | onblur | mouseout | onmouseout |
change | onchange | mouseover | onmouseover |
click | onclick | mouseup | onmouseup |
focus | onfocus | select | onselect |
load | onload | submit | onsumbit |
mousedown | onmousedown | unload | onunload |
mousemove | onmousemove |
onclick
attribute can be in <a>
and <input>
A text element gets focus in three ways:
onblur
attributeTag | Description |
---|---|
<a> | The link loses focus |
<button> | The button loses the input focus |
<input> | The input element loses the input focus |
<textarea> | The text area loses the input focus |
<select> | The selection element loses the input focus |
onchange
attributeTag | Description |
---|---|
<input> | The input element is changed and loses the input focus |
<textarea> | The text area is changed and loses the input focus |
<select> | The selection element is changed and loses the input focus |
onclick
attributeTag | Description |
---|---|
<a> | The user clicks on the link |
<input> | The input element is clicked |
onfocus
attributeTag | Description |
---|---|
<a> | The link receives the input focus |
<input> | The input element receives the input focus |
<textarea> | The text area receives the input focus |
<select> | The selection element receives the input focus |
onload
attributeTag | Description |
---|---|
<body> | The document is finished loading |
Tag | Description |
---|---|
onmousedown | The user clicks the left mouse button |
onmousemove | The user moves the mouse cursor within the element |
onmousout | The mouse cursor is moved away from being over the element |
onmouseover | The mouse curse is moved over the element |
onmouseup | The left mouse button is released |
onselect
attributeTag | Description |
---|---|
<input> | The mouse cursor is moved over the element |
<textarea> | The text is selected within the text area |
Attribute | Tag | Description |
---|---|---|
onsubmit | <form> | The Submit button is pressed |
onunload | <body> | The user exits the document (source of annoying pop-ups) |
Event handlers can be registered in two ways:
onclick = "alert('Mouse click!');" onclick = "myHandler();"
document.getElementById("myButton").onclick = myHandler;
<note warning> This script seems to make the latest version of Firefox hang completely. I'm not sure if it's a Firefox bug or some strange interaction with the extensions I have installed.
It seems to work fine in Chrome, Opera and Safari. I don't have access to Internet Explorer for testing. </note>
Example: load.html uses the load event – triggered when the loading of a document is completed
<!DOCTYPE html> <!-- template HTML file --> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Onload event</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> </head> <body onload="load_greeting();"> <div class="container"> <h1>Onload event</h1> </div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/plugins.js"></script> <!-- Any external JS loaded here --> <script> // The onload event handler var load_greeting = function () { alert("You are visiting the home page of \n" + "Pete's Pickled Peppers \n" + "WELCOME!!!"); }; </script> </body> </html>
onclick
property
<note>
If the handler is registered in the markup, the particular button that was clicked can be sent to the handler as a parameter
* e.g., if planeChoice
is the name of the handler and the value of a button is 172, use:
onclick = "planeChoice(172)"
</note>
<!DOCTYPE html> <!-- radio_click.hmtl An example of the use of the click event with radio buttons, registering the event handler by assignment to the button attributes --> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Illustrate messages for radio buttons</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> </head> <body> <div class="container"> <h1>Illustrate messages for radio buttons</h1> <h2> Cessna single-engine airplane descriptions </h2> <form id = "myForm" action = "handler"> <p> <input type = "radio" name = "planeButton" value = "152" onclick = "planeChoice(152)" /> Model 152 <br /> <input type = "radio" name = "planeButton" value = "172" onclick = "planeChoice(172)" /> Model 172 (Skyhawk) <br /> <input type = "radio" name = "planeButton" value = "182" onclick = "planeChoice(182)" /> Model 182 (Skylane) <br /> <input type = "radio" name = "planeButton" value = "210" onclick = "planeChoice(210)" /> Model 210 (Centurian) </p> </form> </div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/plugins.js"></script> <!-- Any external JS loaded here --> <script> // The event handler for a radio button collection var planeChoice = function(plane) { // Produce an alert message about the chosen airplane 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; }; } </script> </body> </html>
<!DOCTYPE html> <!-- radio_click_jquery.hmtl An example of the use of the click event with radio buttons, registering the event handler by assignment to the button attributes. This version has been don using jQuery. --> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Illustrate messages for radio buttons</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> </head> <body> <div class="container"> <h1>Illustrate messages for radio buttons</h1> <h2> Cessna single-engine airplane descriptions </h2> <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> </div> <!-- /container --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/plugins.js"></script> <!-- Any external JS loaded here --> <script> $(document).ready(function() { // The event handler for a radio button collection var planeChoice = function(plane) { // Produce an alert message about the chosen airplane 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; } }; // Register the events $('#myForm input[type="radio"]').on('click', function(event) { planeChoice($(this).val()); }); }); </script> </body> </html>
Manipulating web documents through the Document Object Model (DOM) and the JavaScript event model.
At the end of this lecture you should be able to answer these questions:
At the end of this lecture you should be able to answer these questions:
document.write
not be used in an event handler? At the end of this lecture you should be able to answer these questions:
name
attributes. getElementById
. There are a few more review questions available.
radio_click.html
example to have five radio buttons, labelled “red”, “blue”, “green”, “yellow”, and “orange”. The event handlers for these buttons must produce messages stating the chosen favourite colour. The event handler must be a function, whose name must be assigned to the onclick
attribute of the button elements. The chosen colour must be sent to the event handler as a parameter. More on the event model, using events for form validation, and the DOM 2 event model.