Download presentation
Presentation is loading. Please wait.
1
1 Introduction to Web Application Implement JavaScript in HTML
2
2 References http://10.89.115.100:8086/material/Jav aScriptBibleGoldEn.pdf Web Development/HTML and Dynamic HTML/DHTML Reference http://www.w3.org/DOM
3
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
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
5 Example of all Object Model <!-- function start() { alert( pText.innerText ); pText.innerText = "Thanks for coming."; } // --> Welcome to our Web page!
6
6
7
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
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:
![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:](http://images.slideplayer.com./1/275209/slides/slide_8.jpg "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
9
10
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 += " " + " "; } // -->
![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 += + ; } // -->](http://images.slideplayer.com./1/275209/slides/slide_10.jpg "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
11 <body onload = "child( document.all[ 4 ] ); myDisplay.outerHTML += elements; myDisplay.outerHTML += ' ';"> Welcome to our Web page! Elements on this Web page:
![11 <body onload = child( document.all[ 4 ] ); myDisplay.outerHTML += elements; myDisplay.outerHTML += ; > Welcome to our Web page.](http://images.slideplayer.com./1/275209/slides/slide_11.jpg "Elements on this Web page:.")
12
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
13 The Document Object Model
14
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
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
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
17 The Document Object Model The property names in JavaScript are usually just lowercase versions of the corresponding HTML attribute names
18
18 Dynamic Styles Elements style can be changed dynamically Dynamic HTML Object Model also allows you to change the class attribute
19
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
20
21
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
22
23
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
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!
![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() …..](http://images.slideplayer.com./1/275209/slides/slide_24.jpg "// --> <p id = pText style = position: absolute; left: 0; font-family: serif; color: blue > Welcome!.")
25
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
26
27
27 Using the frames Collection Referencing elements and objects in different frames by using the frames collection
28
28 Index.html Frames collection
29
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
30
31
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
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
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. 13.10DHTML Object Model.
34
34 Summary of the DHTML Object Model
35
35 Summary of the DHTML Object Model
36
36 Summary of the DHTML Object Model
37
37 Event Model
38
38 Introduction Event model –Scripts can respond to user –Content becomes more dynamic –Interfaces become more intuitive
39
39 Event onclick onClick –Invoked when user clicks the mouse on a specific item
40
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
41
42
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
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
44
45
45 Error Handling with onerror onerror event –Execute specialized error-handling code
46
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
47
48
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
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
50
51
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
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
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
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"> #000000 #0000FF #FF00FF #808080
55
55
56
56 Rollovers with onmouseover and onmouseout
57
57 Form Processing with onfocus and onblur onfocus event fires when element gains focus onblur event fires when element loses focus
58
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)" /> ….
![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) /> ….](http://images.slideplayer.com./1/275209/slides/slide_58.jpg "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
59
60
60 More Form Processing with onsubmit and onreset onsubmit and onreset are useful events for processing forms
61
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
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
63
64
64 Event Bubbling Crucial part of the event model Process whereby events fired in child elements bubble up to their parent elements
65
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
66
67
67 More DHTML Events Remaining DHTML events and their descriptions
68
68 More DHTML Events
69
69 More DHTML Events
70
70 More DHTML Events
Similar presentations
