global DOM objects Walking the DOM unobtrusive JavaScript more event driven progra mming

global DOM objectsWalking the DOM unobtrusive JavaScriptmore event driven programming chapters 9 and 11 DOM Tutorial at http://www.w3schools.com/htmldom/dom_intro.asp

HTML DOM • The HTML DOM defines a standard for accessing and manipulating HTML documents. • The DOM is a W3C (World Wide Web Consortium) standard. "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document” • In the DOM, everything in an HTML document is a node. • The entire document is a document node • Every HTML element is an element node • The text in the HTML elements are text nodes • Every HTML attribute is an attribute node • Comments are comment nodes

The six global DOM objects • Every Javascript program can refer to the following global objects: • document, history, location, navigator, screen are properties of window object. • You can optionally refer to them by their full names: window.document

The window object • technically, all global code and variables become part of the window object 4 4

document Object • Each HTML document loaded into a browser window becomes a document object. • The elements of a page are nested into a tree-like structure of objects • the DOM has properties and methods for updating and traversingthis tree from within a script 5

Types of DOM nodes <p> This is a paragraph of text with a <a href="/path/to/another/page.html">link</a>. </p> • element nodes (HTML tag) : can have children and/or attributes • text node (inline text in a block element) • it always occurs as a child in an element node • attribute nodes (attribute/value pair inside an element’s • opening tag) • not usually shown when drawing the DOM tree • attributes are children in an element node • they cannot have children or attributes

Traversing the DOM tree • every node's DOM object has the following properties: • complete list of DOM node properties • browser incompatiblity information (IE6 sucks) 7

Traversing the DOM tree <p> This is a paragraph of text with a <a href="/path/to/another/page.html">link</a>. </p> 8

Element vs. text nodes • <div id="foo"> • <p> • This is a paragraph of text with a • <a href="page.html">link</a>. • </p> • <div> • Q: How many children does the div above have? • A: 3 • a text noderepresenting "\n\t" (before the paragraph) • an element node representing the <p> • a text noderepresenting "\n" (after the paragraph) • Technically div also has an attribute node representing the id attribute. (attribute nodes don’t show up in childNodes) • It is tedious to use the tree link properties such as firstChild and nextSibling because of these subtle bugs. 9

Selecting groups of DOM objects • We have seen and used getElementById(id): • Returns DOM node that has the ID attribute with the specified id value • methods in document and other DOM objects for accessing descendent nodes: 10

Example: Getting all elements of a certain type <html> <head> <script type="text/javascript"> function myFunction(){ var list=document.getElementsByTagName("LI"); list[0].innerHTML="Milk"; list[1].innerHTML="Juice"; }; </script> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> </ul> <p id="demo">Click the button to change the text of a list item.</p> <button onclick="myFunction()">Try it</button> </body> </html> 11

Combining with getElementById <html> <head> <script type="text/javascript"> function myFunction() { varaddr = document.getElementById("address"); varaddrParas = addr.getElementsByTagName("p"); for (vari = 0; i < addrParas.length; i++) { addrParas[i].style.backgroundColor = "yellow"; } } </script> </head> <body onload = "myFunction()"> <p>This won't be returned!</p> <div id="address"> <p>1234 Street</p> <p>Atlanta, GA</p> </div> </body> </html> 12

Document Object-creating new nodes • document.createElement("tag") : creates and returns a new empty DOM node representing an element of that type (Does not insert the element on the page). • Example: create a button • varbtn=document.createElement("BUTTON"); • will result in • document.createTextNode("text") : creates and returns a new text node containing the given text • Example: create a text node • varbtn=document.createTextNode("Hello World"); • will result in Hello World 13

Modifying the DOM tree • Every DOM element object has these methods: 14

Modifying the DOM tree • Every DOM element object has these methods: • HTML elements often consists of both an element node and a text node. • To create a header (H1), you must create both an "H1" element and a text node var h=document.createElement("H1") vart=document.createTextNode("Hello World"); h.appendChild(t); • Will result in • merely creating a node does not add it to the page • you must add the new node as a child of an existing element on the page 15

Example <html> <head> <script type="text/javascript"> function myFunction() { varbtn=document.createElement("BUTTON"); vart=document.createTextNode("CLICK ME"); btn.appendChild(t); document.body.appendChild(btn); } </script> </head> <body > <p id="demo">Click the button to make a BUTTON element with text.</p> <button onclick="myFunction()">Try it</button> </body> </html> 16

Example: add to or remove from a list addrem.js function remove() { var list=document.getElementsByTagName("LI"); var index=document.getElementById("index"); vari = parseInt(index.value); list[i-1].parentNode.removeChild(list[i-1]); } function add() { varlist=document.getElementById("myList"); vartext=document.getElementById("add").value; varmyItem=document.createElement("LI"); varmyItemValue=document.createTextNode(text); myItem.appendChild(myItemValue); list.appendChild(myItem); } addrem.htm <script src= "addrem.js" type="text/javascript"></script> </head> <body > <ol id="myList"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <div> <p> Enter a list item index to remove then click remove button </p> <input id="index" type="text" value="0" /> <button onclick="remove()">remove</button> <p> Enter a list item to add then click add button </p> <input id="add" type="text" value="item" /> <button onclick="add()">add</button> </div> </body > 17

HTML5 methods for selection group of DOM objects • methods in document and other DOM objects (* = HTML5): • highlight all paragraphs in the document: <body> <p>This is the first paragraph</p> <p>This is the second paragraph</p> <p>You get the idea...</p> </body> varallParas = document.querySelectorAll("p"); for (var i = 0; i < allParas.length; i++) { allParas[i].style.backgroundColor = "yellow"; } • highlight all paragraphs inside of the section with ID "address": <p> This won't be returned! </p> <div id="address"> <p>1234 Street</p> <p>Atlanta, GA</p> </div> // document.getElementById("address").getElementsByTagName("p") varaddrParas = document.querySelectorAll("#address p"); for (var i = 0; i < addrParas.length; i++) { addrParas[i].style.backgroundColor = "yellow"; } • returns a list of all div elements within the document with a class of either "note" or "alert" document.querySelectorAll("div.note, div.alert"); 18

Unobtrusive JavaScript • JavaScript event code seen previously was obtrusive, in the HTML; <button id= "clickMe" onclick="myFunction();">Click me!</button> // called when Click me button is clicked function clickMeFunc() { alert("booyah"); } • this is bad style because HTML is cluttered with JS code • goal: remove all JavaScript code from the HTML body • now we'll see how to write unobtrusive JavaScript code • HTML with minimal JavaScript inside • uses the DOM to attach and execute all JavaScript functions • allows separation of web site into 3 major categories: • content (HTML) - what is it? • presentation (CSS) - how does it look? • behavior (JavaScript) - how does it respond to user interaction? 19

Attaching an event handler in JavaScript code // where element is a DOM element object element.event = function; varclickMeButton = document.getElementById("clickMe"); clickMeButton.onclick = clickMeFunc; • it is legal to attach event handlers to elements' DOM objects in JavaScript code • this is better style than attaching them in the XHTML • notice that you do not put parentheses after the function's name • Where should we put the above code? <head> <script src="myFile.js" type="text/javascript"></script> </head> <body> <div><button id="clickMe">Click me!</button></div> MyFile.html MyFile.js // global code varclickMeButton = document.getElementById("clickMe"); clickMeButton.onclick = clickMeFunc; // error: clickMeButton is undefined // called when Click me button is clicked function clickMeFunc() { alert("booyah"); } • problem: global JS code runs the moment the script is loaded 20

When does my code run? <head> <script src="myfile.js" type="text/javascript"></script> </head> <body> <div><button id="clickMe">Click me!</button></div> // global code varclickMeButton = document.getElementById("clickMe "); clickMeButton.onclick = clickMeFunc; // error: clickMeButtonis undefined // called when Click me button is clicked function clickMeFunc() { alert("booyah"); } • your file's JS code runs the moment the browser loads the script tag • script in head is processed before page's body has loaded • any variables are declared immediately • any functions are declared but not called, unless your global code explicitly calls them • at this point in time, the browser has not yet read your page's body • none of the DOM objects for tags on the page have been created yet • we need a way to attach the handler after the page has loaded... 21

The window.onloadevent // this will run once the page has finished loading function functionName() { element.event = functionName; element.event = functionName; ... } window.onload = functionName; // global code • we want to attach our event handlers right after the page is done loading • there is a global event called window.onload event that occurs at that moment • in window.onload handler we attach all the other handlers to run when events occur html <div><button id="clickMe">Click me!</button></div> window.onload = pageLoad; // global code // called when page loads; sets up event handlers function pageLoad() { varclickMeButton = document.getElementById("clickMe "); clickMeButton.onclick = clickMeFunc; } // called when Click me button is clicked function clickMeFunc() { alert("booyah"); } js

Common unobtrusive JS errors • many students mistakenly write when attaching the handler window.onload = pageLoad(); window.onload = pageLoad; okButton.onclick = okayClick(); okButton.onclick = okayClick; • event names are all lowercase, not capitalized like most variables window.onLoad = pageLoad; window.onload = pageLoad;

Anonymous functions function(parameters) { statements; } • JavaScript allows you to declare anonymous functions • quickly creates a function without giving it a name • generally immediately assign it as an event handler, or pass it as a parameter, or store it as a variable, etc. window.onload = function() { varclickMeButton = document.getElementById("clickMe "); clickMeButton.onclick = clickMeFunc; }; // called when Click me button is clicked function clickMeFunc() { alert("booyah"); } • Notice that you should still place a semicolon after the anonymous function’s closing brace as the end of the window.onload = … statement • the following is also legal (though harder to read and bad style): window.onload = function() { varclickMeButton = document.getElementById("clickMe "); clickMeButton.onclick = function () { alert("booyah"); }; };

The keyword this window.onload = pageLoad; function pageLoad() { varclickMeButton = document.getElementById("clickMe "); clickMeButton.onclick = clickMeFunc; // bound to clickMeButton here } function clickMeFunc() { // clickMeFunc knows what DOM object this.innerHTML = "booyah"; // it was called on } • event handlers attached unobtrusively are bound to the element • inside the handler, the element can refer to itself as this • also useful when the same handler is shared on multiple elements • this always refers to the element to which the event handler is attached. • whereas the target/srcElement(seen later ) property will refer to the element that fired the event (the element that was clicked) • this keyword enablesone event handler to apply a change to one of many DOM elements, depending on which one received the event

The keyword this <script src="tip.js" type="text/javascript"></script> … <h1>Tip Calculator</h1> <div> $<input id="subtotal" type="text" size="5" /> subtotal <br /> <button id="tenpercent">10%</button> <button id="fifteenpercent">15%</button> <button id="eighteenpercent">18%</button> <span id="total"></span> </div> • Event handlers do not accept function with parameters, therefore if we don’t use this we will have to write three event handlers one for each button window.onload = function() { document.getElementById("tenpercent").onclick = computeTip10; document.getElementById("fifteenpercent").onclick = computeTip15; document.getElementById("eighteenpercent").onclick = computeTip18; }; function computeTip10() { var subtotal = parseFloat(document.getElementById("subtotal").value); vartipAmount = subtotal * 10 / 100.0; document.getElementById("total").innerHTML = "Tip: $" + tipAmount; } function computeTip15() { var subtotal = parseFloat(document.getElementById("subtotal").value); vartipAmount = subtotal * 15 / 100.0; document.getElementById("total").innerHTML = "Tip: $" + tipAmount; } function computeTip18() { var subtotal = parseFloat(document.getElementById("subtotal").value); vartipAmount = subtotal * 18 / 100.0; document.getElementById("total").innerHTML = "Tip: $" + tipAmount; }

The keyword this <script src="tip.js" type="text/javascript"></script> … <h1>Tip Calculator</h1> <div> $<input id="subtotal" type="text" size="5" /> subtotal <br /> <button id="tenpercent">10%</button> <button id="fifteenpercent">15%</button> <button id="eighteenpercent">18%</button> <span id="total"></span> </div> • With this we write one event handler function, that will behave according to the object that receives the event. window.onload = function() { document.getElementById("tenpercent").onclick = computeTip; document.getElementById("fifteenpercent").onclick = computeTip; document.getElementById("eighteenpercent").onclick = computeTip; }; // Computes proper tip amount based on the subtotal and tip percentage. function computeTip() { var subtotal = parseFloat(document.getElementById("subtotal").value); vartipPercent = parseInt(this.innerHTML); vartipAmount = subtotal * tipPercent / 100.0; document.getElementById("total").innerHTML = "Tip: $" + tipAmount; }

Unobtrusive styling function okayClick() { this.style.color = "red"; this.className = "highlighted"; } .highlighted { color: red; } • well-written JavaScript code should contain as little CSS as possible • use JS to set CSS classes/IDs on elements • define the styles of those classes/IDs in your CSS file

Global DOM objects : The window object • Some of the window object methods (we are going to revisit some later on) 29 29 29

Global DOM objects : The window object 30 30 30

Example timer.js varseconds = 0; window.onload= startTimer; // called when the page loads to begin the timer function startTimer() { // 1000 milliseconds = 1 second window.setInterval( "updateTime()", 1000 ); } // end function startTimer // called every 1000 ms to update the timer function updateTime(){ ++seconds; document.getElementById( "soFar" ).innerHTML = seconds; } // end function updateTime … <title>timer</title> <script type = "text/javascript"></script> </head> <body> <p>Seconds you have spent viewing this page so far: <strong id = "soFar">0</strong></p> </body> timer.HTML

Example 2 imageSlideShow.js varinterval = null; // keeps track of the interval varcount = 1; varphotos = ["photo1.jpg", "photo2.jpg", "photo3.jpg", "photo4.jpg", photo5.jpg"]; window.onload= display; // called repeatedly to animate the book cover function display( ) { interval = window.setInterval( "run()", 2000 ); // animate } function run() { if ( count >photos.length-1 ) { window.clearInterval( interval ); return; } varbigImage = document.getElementById( "bigimg" ); bigImage.src = photos[count]; count++; } // end function run imageslideshow.HTML <body> <div> <img id = "bigimg" src = "photo1.jpg“ alt = "Full image" /> </div> </body>

window object: manipulating browser windows • Some properties • Some methods

Example-WindowPrototype.html (document.getElementById was replaced by $) <body> <h1>Hello, this is the main window</h1> <p>Please check the features to enable for the child window<br/> <input id = "toolBarCheckBox" type = "checkbox" value = "" checked = "checked" /> <label>Tool Bar</label> <input id = "menuBarCheckBox" type = "checkbox" value = "" checked = "checked" /> <label>Menu Bar</label> <input id = "scrollBarsCheckBox" type = "checkbox" value = "" checked = "checked" /> <label>Scroll Bars</label></p> <p>Please enter the text that you would like to display in the child window<br/> <input id = "textForChild" type = "text" value = "<h1>Hello, I am a child window.</h1> " /> <button id = "createButton" > Create Child Window </button> <button id = "modifyButton" disabled = "disabled"> Modify Child Window </button> <button id = "closeButton" disabled = "disabled"> Close Child Window </button> </p> <p>The other window's URL is: <br/> <input id = "myChildURL" type = "text" value = "./" /> <button id = "setURLButton" disabled = "disabled"> Set Child URL</button> </p> </body>

window.onload = function(){ $("createButton").onclick = createChildWindow; $("modifyButton").onclick = modifyChildWindow; $("closeButton").onclick = closeChildWindow; $("setURLButton").onclick = setChildWindowURL; }; varchildWindow; // variable to control the child window function createChildWindow(){ vartoolBar; // these variables all contain either "yes" or "no" varmenuBar; // to enable or disable a feature in the child window varscrollBars; // determine whether the Tool Bar checkbox is checked if ( $("toolBarCheckBox").checked ) toolBar = "yes"; else toolBar = "no"; // determine whether the Menu Bar checkbox is checked if ( $("menuBarCheckBox").checked ) menuBar = "yes"; else menuBar = "no"; // determine whether the Scroll Bar checkbox is checked if ( $("scrollBarsCheckBox" ).checked ) scrollBars = "yes"; else scrollBars = "no"; //display window with selected features childWindow = window.open( "", "", ",toolbar = " + toolBar + ",menubar = " + menuBar + ",scrollbars = " + scrollBars ); // disable buttons $("closeButton").disabled = false; $("modifyButton").disabled = false; $("setURLButton").disabled = false; childWindow.opener.focus(); //focus on the parent }// end function createChildWindow Example

Example // insert text from the textbox in the child window function modifyChildWindow(){ if ( childWindow.closed) alert( "You attempted to interact with a closed window" ); else childWindow.document.body.innerHTML = $( "textForChild" ).value; childWindow.focus(); //focus on the child }// end function modifyChildWindow // close the child window function closeChildWindow() { if ( childWindow.closed ) alert( "You attempted to interact with a closed window" ); else childWindow.close(); $("closeButton").disabled = true; $("modifyButton").disabled = true; $("setURLButton").disabled = true; }// end function closeChildWindow // set the URL of the child window to the URL in the parent window's myChildURL function setChildWindowURL() { if ( childWindow.closed ) alert( "You attempted to interact with a closed window" ); else childWindow.location = $( "myChildURL" ).value; }// end function setChildWindowURL

Global DOM objects : navigator object (information about the web browser application) document.writeln("Browser CodeName : " + navigator.appCodeName); document.writeln("<br/> Browser Name: " + navigator.appName); document.writeln("<br/> Browser version : " + navigator.appVersion); document.writeln("<br/> OS : " + navigator.platform); document.writeln("<br/> user-agent header " + navigator.userAgent);

Global DOM objects : history object (the list of sites the browser has visited in this window ) window.onload= function (){ document.getElementById("back").onclick=goBack; document.getElementById("forward").onclick=goForward; document.getElementById("back2").onclick=goBack2; }; function goBack() { window.history.back() } function goForward() { window.history.forward() } function goBack2(){ window.history.go(-2) } <input id="back" type= "button" value="Back" /> <input id="forward" type="button" value="Forward" /> <input id="back2" type="button" value="Back 2 pages" />

Global DOM objects : location object (the URL of the current web page) http://localhost/example/location.htm?name=marty document.write("hash: " + location.hash); document.write("<br/> host: " +location.host); document.write("<br/> hostname: " + location.hostname); document.write("<br/> pathname: " + location.pathname); document.write("<br/> href: " + location.href); document.write("<br/> port: " + location.port); document.write("<br/> protocol: " + location.protocol); document.write("<br/> search: " + location.search);

Global DOM objects : screen object (information about the client's display screen) document.write("Available Height: " + screen.availHeight); document.write("<br/>Available Width: " + screen.availWidth); document.write("<br/>Color resolution: " + screen.pixelDepth); document.write("<br/>Color Depth: " + screen.colorDepth); document.write("<br/>Total width: " + screen.width); document.write("<br/>Total height: " + screen.height);

Mouse/form events and event Object

Event object and more events • event object stores information about the event that called the event-handler (that fired the event). IE and Firefox implement different event models • IE stores the event object in the event property of the windowobject • Firefox passes the event object as an argument to the event-handling function • IE usessrcElementproperty to get the element that fired the event (does not work in Firefox). • Firefox uses the target property to get the element that fired the event (Firefox only). • Remark: this operator always refers to the element to which the event handler is attached.

Example <body > <table id = "canvas" class = "canvas"> <tbodyid = "tablebody"> <tr> <thclass = "key" colspan = "100"> Hold <tt>ctrl</tt> to draw blue. Hold <tt>shift</tt> to draw red. </th> </tr> </tbody> </table> </body> canvas.html canvas.css #canvas { width: 400px; border: 1px solid #999999; border-collapse: collapse } td { width: 4px; height: 4px } th.key { font-family: arial, helvetica, sans-serif; font-size: 12px; border-bottom: 1px solid #999999 }

Example canvas.js window.onload = createCanvas; //initialization function to insert cells into the table function createCanvas() { var side = 100; vartbody = document.getElementById( "tablebody" ); for ( vari = 0; i < side; i++ ) { var row = document.createElement( "tr" ); for ( var j = 0; j < side; j++ ) { var cell = document.createElement( "td" ); cell.onmousemove = processMouseMove; row.appendChild( cell ); } // end for tbody.appendChild( row ); } // end for }// end function createCanvas // processes the onmousemove event function processMouseMove( e ) { // get the event object from IE if ( !e ) var e = window.event; // turn the cell blue if the Ctrl key is pressed if ( e.ctrlKey) this.style.backgroundColor = "blue"; // turn the cell red if the Shift key is pressed if ( e.shiftKey ) this.style.backgroundColor = "red"; }// end function processMouseMove

Rollovers with onmouseover and onmouseout • When the mouse cursor enters an element, an onmouseoverevent occurs for that element • When the mouse cursor leaves the element, an onmouseoutevent occurs for that element • Creating an Image object and setting its src property preloads the image

body { background-color: wheat } table { border-style: groove; text-align: center; font-family: monospace; font-weight: bold } td { width: 6em } Example Onmouseoverout.css Onmouseoverout.html <body> <h1><imgsrc = "heading1.gif" id = "heading" alt = "Heading Image" /></h1> <p>Canyou tell a color from its hexadecimal RGB code value? Look at the hex code, guess its color. To see what color it corresponds to, move the mouse over the hex code. Moving the mouse out of the hex code's table cell will display the color name. </p> <table> <tr> <td id = "Black">#000000</td> <td id = "Blue">#0000FF</td> <td id = "Magenta">#FF00FF</td> <td id = "Gray">#808080</td> </tr> <tr> <td id = "Green">#008000</td> <td id = "Lime">#00FF00</td> <td id = "Maroon">#800000</td> <td id = "Navy">#000080</td> </tr> <tr> <td id = "Olive">#808000</td> <td id = "Purple">#800080</td> <td id = "Red">#FF0000</td> <td id = "Silver">#C0C0C0</td> </tr> <tr> <td id = "Cyan">#00FFFF</td> <td id = "Teal">#008080</td> <td id = "Yellow">#FFFF00</td> <td id = "White">#FFFFFF</td> </tr> </table> </body>

Example (Onmouseoverout.js) var image1 = new Image(); image1.src = "heading1.gif"; var image2 = new Image(); image2.src = "heading2.gif"; function mouseOver( e ){ if ( !e ) var e = window.event; var target = getTarget( e ); // swap the image when the mouse moves over it if ( target.id == "heading" ) { target.src = image2.src; return; } // end if // if an element's id is defined, assign the id to its color to turn hex code to the corresponding color if ( target.id ) target.style.color = target.id; }// end function mouseOver function mouseOut( e ){ if ( !e ) var e = window.event; var target = getTarget( e ); // put the original image back when the mouse moves away if ( target.id == "heading" ) { target.src = image1.src; return; } // end if // if an element's id is defined, assign id to innerHTML to display the color name if ( target.id ) target.innerHTML = target.id; }// end function mouseOut // return either e.srcElement or e.target, whichever exists function getTarget( e ){ if ( e.srcElement ) return e.srcElement; else return e.target; }// end function getTarget document.onmouseover =mouseOver; document.onmouseout =mouseOut;

Form Processing Events • onfocusevent fires when an element gains focus • i.e., when the user clicks a form field or uses the Tab key to move between form elements • onblurfires when an element loses focus • i.e., when another control gains the focus • onsubmitand onresetevents fire when a form is submitted or reset, respectively formEvents.html <body > <form id = "myForm" action = ""> <div> Name: <input id="name" type = "text" name = "0" /><br /> E-mail: <input id="email" type = "text" name = "1" /><br /> Click here if you like this site <input id="like" type = "checkbox" name = "2" /><br /> <hr /> Any comments?<br /> <textareaid="comments" name = "3" rows = "5" cols = "45"> </textarea> <br /> <input id="submit" type = "submit" value = "Submit" name= "4" /> <input id="reset" type = "reset" value = "Reset" name= "5"/> </div> </form> <div id = "tip" class = "tip"></div> </body>

Form Processing Events varhelpArray = [ "Enter your name in this input box.", "Enter your e-mail address in this input box, in the format user@domain.", "Check this box if you liked our site.", "In this box, enter any comments you would like us to read.", "This button submits the form to the server-side script.", "This button clears the form." ]; window.onload = function(){ document.getElementById("name").onfocus = helpText; document.getElementById("name").onblur = removeText; document.getElementById("email").onfocus = helpText; document.getElementById("email").onblur = removeText; document.getElementById("like").onmouseover = helpText; document.getElementById("like").onmouseout= removeText; document.getElementById("comments").onfocus= helpText; document.getElementById("comments").onblur = removeText; document.getElementById("submit").onmouseover= helpText; document.getElementById("submit").onmouseout= removeText; document.getElementById("reset").onmouseover= helpText; document.getElementById("reset").onmouseout= removeText; document.getElementById( "myForm" ).onsubmit = function() { return confirm( "Are you sure you want to submit?" ); };// end anonymous function document.getElementById( "myForm" ).onreset = function() { return confirm( "Are you sure you want to reset?" ); }; // end anonymous function }; // end anonymous function function helpText() { document.getElementById("tip").innerHTML =helpArray[parseInt(this.name)]; } // end function helpText function removeText() { document.getElementById( "tip" ).innerHTML = ""; } // end function removeText

global DOM objects Walking the DOM unobtrusive JavaScript more event driven progra mming