1 Introduction to Web Application Implement JavaScript in HTML
2 References aScriptBibleGoldEn.pdf Web Development/HTML and Dynamic HTML/DHTML Reference
3 Introduction Dynamic HTML Object Model –Allows Web authors to control the presentation of their pages –Gives them access to all the elements on their pages Web page –Elements, forms, frames, tables –Represented in an object hierarchy Scripting –Retrieve and modify properties and attributes
4 Object Referencing The simplest way to reference an element is by using the elements id attribute. The element is represented as an object –HTML attributes become properties that can be manipulated by scripting
5 Example of all Object Model <!-- function start() { alert( pText.innerText ); pText.innerText = "Thanks for coming."; } // --> Welcome to our Web page!
6
7 Collections all and children Collections –Arrays of related objects on a page –all all the HTML elements in a document –children Specific element contains that elements child elements
8 Object Model <!-- var elements = ""; function start() { for ( var loop = 0; loop < document.all.length; ++loop ) elements += " " + document.all[ loop ].tagName; pText.innerHTML += elements; alert( elements ); } // --> Elements on this Web page:
9
10 Object Model <!-- var elements = " "; function child( object ) { var loop = 0; elements += " " + object.tagName + " "; for ( loop = 0; loop < object.children.length; loop++ ) { if ( object.children[ loop ].children.length ) child( object.children[ loop ] ); else elements += " " + object.children[ loop ].tagName + " "; } elements += " " + " "; } // -->
11 <body onload = "child( document.all[ 4 ] ); myDisplay.outerHTML += elements; myDisplay.outerHTML += ' ';"> Welcome to our Web page! Elements on this Web page:
12 The Document Object Model The DOM is an abstract model that defines the interface between HTML documents and application programs Documents in DOM have a tree-like structure
13 The Document Object Model
14 The Document Object Model Under development by w3c since the mid- 90s DOM is a successor to DHTML DOM now has 4 levels DOM0 is designed to deal with just HTML documents DOM1 is focused on the HTML and XML document model, all modern browser has supported DOM1 –Appendix
15 The Document Object Model DOM 2 is the latest approved standard, which specifies a CSS object model and include document traversals and an event model, but none modern browser can fully support DOM2 DOM3 is under development
16 The Document Object Model It is an OO model - document elements are objects A language that supports the DOM must have a binding to the DOM constructs In the JavaScript binding, HTML elements are represented as objects and element attributes are represented as properties –e.g., would be represented as an object with two properties, type and name, with the values "text" and "address"
17 The Document Object Model The property names in JavaScript are usually just lowercase versions of the corresponding HTML attribute names
18 Dynamic Styles Elements style can be changed dynamically Dynamic HTML Object Model also allows you to change the class attribute
19 Object Model <!-- function start() { var inputColor = prompt( "Enter a color name for the " + "background of this page", "" ); document.body.style.backgroundColor = inputColor; } // --> Welcome to our Web site!
20
21 Object Model.bigText { font-size: 3em; font-weight: bold }.smallText { font-size:.75em } <!-- function start() { var inputClass = prompt( "Enter a className for the text " + "(bigText or smallText)", "" ); pText.className = inputClass; } // --> Welcome to our Web site!
22
23 Dynamic Positioning HTML elements can be positioned with scripting –Declare an elements CSS position property to be either absolute or relative –Move the element by manipulating any of the top, left, right or bottom CSS properties
24 Dynamic Positioning <!-- var speed = 5; var count = 10; var direction = 1; var firstLine = "Text growing"; var fontStyle = [ "serif", "sans-serif", "monospace" ]; var fontStylecount = 0; function start() { window.setInterval( "run()", 100 ); } function run() ….. // --> <p id = "pText" style = "position: absolute; left: 0; font-family: serif; color: blue"> Welcome!
25 function run() { count += speed; if ( ( count % 200 ) == 0 ) { speed *= -1; direction = !direction; pText.style.color = ( speed < 0 ) ? "red" : "blue" ; firstLine = ( speed < 0 ) ? "Text shrinking" : "Text growing"; pText.style.fontFamily = fontStyle[ ++fontStylecount % 3 ]; } pText.style.fontSize = count / 3; pText.style.left = count; pText.innerHTML = firstLine + " Font size: " + count + "px"; }
26
27 Using the frames Collection Referencing elements and objects in different frames by using the frames collection
28 Index.html Frames collection
29 top.html The frames collection <!-- function start() { var text = prompt( "What is your name?", "" ); parent.frames( "lower" ).document.write( " Hello, " + text + " " ); } // --> Cross-frame scripting!
30
31 navigator Object Netscape, Mozilla, Microsofts Internet Explorer –Others as well Contains information about the Web browser Allows Web authors to determine what browser the user is using
32 The navigator Object <!-- function start() { if ( navigator.appName == "Microsoft Internet Explorer" ) { if ( navigator.appVersion.substring( 1, 0 ) >= "4" ) document.location = "newIEversion.html"; else document.location = "oldIEversion.html"; } else document.location = "NSversion.html"; } // --> Redirecting your browser to the appropriate page, please wait...
33 Summary of the DHTML Object Model applets all anchors embeds forms filters images links plugins styleSheets scripts frames plugins collection body screen document history navigator location event document object window Key Fig DHTML Object Model.
34 Summary of the DHTML Object Model
35 Summary of the DHTML Object Model
36 Summary of the DHTML Object Model
37 Event Model
38 Introduction Event model –Scripts can respond to user –Content becomes more dynamic –Interfaces become more intuitive
39 Event onclick onClick –Invoked when user clicks the mouse on a specific item
40 DHTML Event Model - onclick <script type = "text/javascript" for = "para" event = "onclick"> <!-- alert( "Hi there" ); // --> Click on this text! <input type = "button" value = "Click Me!" onclick = "alert( 'Hi again' )" />
41
42 Event onload onload event –Fires when an element finishes loading –Used in the body element –Initiates a script after the page loads into the client
43 DHTML Event Model - onload <!-- var seconds = 0; function startTimer() { // 1000 milliseconds = 1 second window.setInterval( "updateTime()", 1000 ); } function updateTime() { seconds++; soFar.innerText = seconds; } // --> Seconds you have spent viewing this page so far: 0
44
45 Error Handling with onerror onerror event –Execute specialized error-handling code
46 DHTML Event Model - onerror <!-- window.onerror = handleError; function doThis() { alrrt( "hi" ); // alert misspelled, creates an error } function handleError( errType, errURL, errLineNum ) { window.status = "Error: "+errType + " on line " + errLineNum; return true; } // --> <input id = "mybutton" type = "button" value = "Click Me!" onclick = "doThis()" />
47
48 Tracking the Mouse with Event onmousemove onmousemove –Fires repeatedly when the user moves the mouse over the Web page –Gives position of the mouse
49 DHTML Event Model - onmousemove event <!-- function updateMouseCoordinates() { coordinates.innerText = event.srcElement.tagName + " (" + event.offsetX + ", " + event.offsetY + ")"; } // --> (0, 0) <img src = "deitel.gif" style = "position: absolute; top: 100; left: 100" alt = "Deitel" />
50
51 Rollovers with onmouseover and onmouseout Two more events fired by mouse movements –onmouseover Mouse cursor moves over element –Onmouseout Mouse cursor leaves element
52 DHTML Event Model - onmouseover and onmouseout <!-- captionImage1 = new Image(); captionImage1.src = "caption1.gif"; captionImage2 = new Image(); captionImage2.src = "caption2.gif"; function mOver() { if ( event.srcElement.id == "tableCaption" ) { event.srcElement.src = captionImage2.src; return; } if ( event.srcElement.id ) event.srcElement.style.color = event.srcElement.id; }
53 function mOut() { if ( event.srcElement.id == "tableCaption" ) { event.srcElement.src = captionImage1.src; return; } if ( event.srcElement.id ) event.srcElement.innerText = event.srcElement.id; } document.onmouseover = mOver; document.onmouseout = mOut; // -->
54 Guess the Hex Code's Actual Color Can you tell a color from its hexadecimal RGB code value? Look at the hex code, guess the color. To see what color it corresponds to, move the mouse over the hex code. Moving the mouse out will display the color name. <table style = "width: 50%; border-style: groove; text-align: center; font-family: monospace; font-weight: bold"> # #0000FF #FF00FF #808080
55
56 Rollovers with onmouseover and onmouseout
57 Form Processing with onfocus and onblur onfocus event fires when element gains focus onblur event fires when element loses focus
58 DHTML Event Model - onfocus and onblur <!-- var helpArray = [ … ]; function helpText( messageNum ) { myForm.helpBox.value = helpArray[ messageNum ]; } // --> Name: <input type = "text" name = "name" onfocus = "helpText(0)" onblur = "helpText(6)" /> ….
59
60 More Form Processing with onsubmit and onreset onsubmit and onreset are useful events for processing forms
61 DHTML Event Model - onsubmit and onreset events <!-- function formSubmit() { window.event.returnValue = false; if ( confirm ( "Are you sure you want to submit?" ) ) window.event.returnValue = true; } function formReset() { window.event.returnValue = false; if ( confirm( "Are you sure you want to reset?" ) ) window.event.returnValue = true; } // -->
62 <form id = "myForm" onsubmit = "formSubmit()" onreset = "formReset()" action = ""> Name: <input type = "text" name = "name" onfocus = "helpText(0)" onblur = "helpText(6)" /> <input type = "submit" value = "Submit" onfocus = "helpText(4)" onblur = "helpText(6)" /> <input type = "reset" value = "Reset" onfocus = "helpText(5)" onblur = "helpText(6)" />
63
64 Event Bubbling Crucial part of the event model Process whereby events fired in child elements bubble up to their parent elements
65 DHTML Event Model - Event Bubbling <!-- function documentClick() { alert( "You clicked in the document" ); } function paragraphClick( value ) { alert( "You clicked the text" ); if ( value ) event.cancelBubble = true; } document.onclick = documentClick; // --> Click here! Click here, too!
66
67 More DHTML Events Remaining DHTML events and their descriptions
68 More DHTML Events
69 More DHTML Events
70 More DHTML Events