2 6

Welcome to our Web page!

27 Reference.html Function start displays an alert box containing the value of pText.innerText The innerText property of the object refers to the text contained in that element (Welcome to our Web page!). The innerText property of the object is dynamically changed (Thanks for coming.). The onload event calls the JavaScript start function when document loading completes."> 2 6

Welcome to our Web page!

27 Reference.html Function start displays an alert box containing the value of pText.innerText The innerText property of the object refers to the text contained in that element (Welcome to our Web page!). The innerText property of the object is dynamically changed (Thanks for coming.). The onload event calls the JavaScript start function when document loading completes.">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

Chapter 13 - Dynamic HTML: Object Model and Collections

Published bySofia Campos Salas Modified over 6 years ago

Similar presentations

Presentation on theme: "Chapter 13 - Dynamic HTML: Object Model and Collections"— Presentation transcript:

1 Chapter 13 - Dynamic HTML: Object Model and Collections
Outline Introduction Object Referencing Collections all and children Dynamic Styles Dynamic Positioning Using the frames Collection navigator Object Summary of the DHTML Object Model

2 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 13.1: reference.html --> 6 <!-- Object Model Introduction --> 7 8 <html xmlns = " <head> <title>Object Model</title> 11 <script type = "text/javascript"> <!-- function start() { alert( pText.innerText ); pText.innerText = "Thanks for coming."; } // --> </script> 21 </head> 23 <body onload = "start()"> <p id = "pText">Welcome to our Web page!</p> </body> 27 </html> Reference.html Function start displays an alert box containing the value of pText.innerText The innerText property of the object refers to the text contained in that element (Welcome to our Web page!). The innerText property of the object is dynamically changed (Thanks for coming.). The onload event calls the JavaScript start function when document loading completes.

3 The value of pText.innerText when the page is first loaded.
Program Output An alert box displaying the value of pText.innerText. The value of pText.innerText after the function start is invoked.

4 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig 13.2: all.html > 6 <!-- Using the all collection --> 7 8 <html xmlns = " <head> <title>Object Model</title> 11 <script type = "text/javascript"> <!-- var elements = ""; 15 function start() { for ( var loop = 0; loop < document.all.length; ++loop ) elements += "<br />" + document.all[ loop ].tagName; 20 pText.innerHTML += elements; alert( elements ); } // --> </script> </head> 27 <body onload = "start()"> <p id = "pText">Elements on this Web page:</p> </body> 31 </html> All.html The for loop loops through the elements of the all collection and display each element’s name. The length property of the all collection specifies the number of elements in the collection. The name of each XHTML element (given in the tagName property) in the collection is appended to elements. The all collection is a collection of all the XHTML elements in the page in the order they appear. The innerHTML property is similar to the innerText property but can also include XHTML formatting.

5 Program Output An alert dialog is displayed with all the names of the XHTML elements in the all collection. The XHTML elements are rendered on the page. Note comments are represented as !.

6 Function child uses recursion to view all elements on a page.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig 13.3: children.html --> 6 <!-- The children collection --> 7 8 <html xmlns = " <head> <title>Object Model</title> 11 <script type = "text/javascript"> <!-- var elements = "<ul>"; 15 function child( object ) { var loop = 0; 19 elements += "<li>" + object.tagName + "<ul>"; 21 for ( loop = 0; loop < object.children.length; loop++ ) { if ( object.children[ loop ].children.length ) child( object.children[ loop ] ); else elements += "<li>" + object.children[ loop ].tagName + "</li>"; } 31 elements += " </ul> "; } // --> Children.html Function child uses recursion to view all elements on a page. The script adds ul and li tags to display the elements on the page in a hierarchical manner. If an element has children function child recurses on itself with the child to print these elements out. The children collection for a specific element contains that element’s child elements.

7 Children.html Program Output
</script> </head> 37 <body onload = "child( document.all[ 4 ] ); myDisplay.outerHTML += elements;"> 40 <p>Welcome to our <strong>Web</strong> page!</p> 42 <p id = "myDisplay"> Elements on this Web page: </p> 46 </body> 48 </html> Children.html Program Output Property outerHTML is similar to property innerHTML but it includes the enclosing XHTML tags (tags <p id = "myDisplay"> and </p> in this case) as well as the content inside them. A display of all the elements in a document.

8 The input color is set as the background color.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 13.4: dynamicstyle.html --> 6 <!-- Dynamic Styles > 7 8 <html xmlns = " <head> <title>Object Model</title> 11 <script type = "text/javascript"> <!-- function start() { var inputColor = prompt( "Enter a color name for the " + "background of this page", "" ); document.body.style.backgroundColor = inputColor; } // --> </script> </head> 24 <body onload = "start()"> <p>Welcome to our Web site!</p> </body> 28 </html> Dynamicstyle.html Function start prompts the user to enter a color and then sets the background to that color. A prompt dialog box is displayed prompting the user to input a color. The color is stored in variable inputColor. The input color is set as the background color.

9 Prompt dialog asking user to enter a background color.
Program Output Initial Output Prompt dialog asking user to enter a background color. Final output with background color selected by the user set.

10 Two style classes for font are defined.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 13.5: dynamicstyle2.html --> 6 <!-- More Dynamic Styles > 7 8 <html xmlns = " <head> <title>Object Model</title> 11 <style type = "text/css"> 13 bigText { font-size: 3em; font-weight: bold } 16 smallText { font-size: .75em } 18 </style> 20 <script type = "text/javascript"> <!-- function start() { var inputClass = prompt( "Enter a className for the text " + "(bigText or smallText)", "" ); pText.className = inputClass; } // --> </script> </head> 33 Dynamicstyle2.html Two style classes for font are defined. The user is prompted to enter one of the two defined styles to be applied to the text.

11 Dynamicstyle2.html Program Output
<body onload = "start()"> <p id = "pText">Welcome to our Web site!</p> </body> 37 </html> Dynamicstyle2.html Program Output Dialog prompting user to enter a font style. Font after user decides to apply the bigText style to the text.

12 Function start is used to update the p element’s content.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 13.6: dynamicposition.html --> 6 <!-- Dynamic Positioning > 7 8 <html xmlns = " <head> <title>Dynamic Positioning</title> 11 <script type = "text/javascript"> <!-- var speed = 5; var count = 10; var direction = 1; var firstLine = "Text growing"; var fontStyle = [ "serif", "sans-serif", "monospace" ]; var fontStylecount = 0; 20 function start() { window.setInterval( "run()", 100 ); } 25 function run() { count += speed; 29 if ( ( count % 200 ) == 0 ) { speed *= -1; direction = !direction; 33 Dynamicposition.html Function start is used to update the p element’s content. Function setInternal takes in a function name and how often to run that function. Function run will reverse between increasing and decreasing font size and blue and red font color.

13 Font size and color will be selected based on the value of speed.
pText.style.color = ( speed < 0 ) ? "red" : "blue" ; firstLine = ( speed < 0 ) ? "Text shrinking" : "Text growing"; pText.style.fontFamily = fontStyle[ ++fontStylecount % 3 ]; } 41 pText.style.fontSize = count / 3; pText.style.left = count; pText.innerHTML = firstLine + "<br /> Font size: " + count + "px"; } // --> </script> </head> 50 <body onload = "start()"> <p id = "pText" style = "position: absolute; left: 0; font-family: serif; color: blue"> Welcome!</p> </body> 56 </html> Font size and color will be selected based on the value of speed. Dynamicposition.html

14 Program Output Once count reaches a multiple of 200, the size of the text font starts to shrink by one third.

15 The browser window is broken into two horizontal frames.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " 4 5 <!-- Fig. 13.7: index.html > 6 <!-- Using the frames collection --> 7 8 <html xmlns = " <head> <title>Frames collection</title> </head> 12 <frameset rows = "100, *"> <frame src = "top.html" name = "upper" /> <frame src = "" name = "lower" /> </frameset> 17 18 </html> Index.html The browser window is broken into two horizontal frames. The top frame (upper) displays file top.html. The bottom frame (lower) is initially empty.

16 The write function is used to write text to the frame in the browser.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 13.8: top.html --> 6 <!-- Cross-frame scripting --> 7 8 <html xmlns = " <head> <title>The frames collection</title> 11 <script type = "text/javascript"> <!-- function start() { var text = prompt( "What is your name?", "" ); parent.frames( "lower" ).document.write( "<h1>Hello, " + text + "</h1>" ); } // --> </script> </head> 23 <body onload = "start()"> <h1>Cross-frame scripting!</h1> </body> 27 </html> Top.html Function start takes in a user’s name and writes it in a frame in the browser. The parent frame of the current frame is first referenced following that the lower frame is referenced. The write function is used to write text to the frame in the browser.

17 Browser prior to user entering a name.
Program Output Browser prior to user entering a name. Dialog prompt for user to enter name. Browser updated with user name and Hello displayed in bottom frame.

18 The browser is Microsoft Internet Explorer.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig 13.9: navigator.html --> 6 <!-- Using the navigator object --> 7 8 <html xmlns = " <head> <title>The navigator Object</title> 11 <script type = "text/javascript"> <!-- 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"; } // --> </script> </head> 29 <body onload = "start()"> <p>Redirecting your browser to the appropriate page, please wait...</p> </body> 34 </html> Navigator.html On load function start is called to determine what browser is being used. Based on this a page specific to that browser is displayed. The browser is Microsoft Internet Explorer. The function appVersion is used to determine which version of IE is used. The browser is Netscape.

19 The document specific for the Netscape browser is displayed.
Program Output The document specific for the Microsoft Internet Explorer browser is displayed. The document specific for the Netscape browser is displayed. (Netscape Communicator browser window© 1999 Netscape Communications Corporation. Used with permission. Netscape Communications has not authorized, sponsored, endorsed, or approved this publication and is not responsible for its content.)

20 13.8 Summary of the DHTML Object Model
Fig DHTML Object Model.

21 13.8 Summary of the DHTML Object Model

22 13.8 Summary of the DHTML Object Model

Download ppt "Chapter 13 - Dynamic HTML: Object Model and Collections"

Similar presentations

1 Introduction to Web Application Implement JavaScript in HTML.

1 Introduction to Web Application Implement JavaScript in HTML.
Today CSS HTML A project.

Today CSS HTML A project.
The Document Object Model (DOM) 1 JavaScript is an object-based language—that is, it’s based on manipulating objects by changing each object’s properties.

The Document Object Model (DOM) 1 JavaScript is an object-based language—that is, it’s based on manipulating objects by changing each object’s properties.
Pemrograman Teknologi Internet W09: DOM & DHTML. 2 Objectives DOM: DOM: DOM Nodes & Trees DOM Nodes & Trees Traversing & Modifying DOM Trees Traversing.

Pemrograman Teknologi Internet W09: DOM & DHTML. 2 Objectives DOM: DOM: DOM Nodes & Trees DOM Nodes & Trees Traversing & Modifying DOM Trees Traversing.
The Web Warrior Guide to Web Design Technologies

The Web Warrior Guide to Web Design Technologies
Page 1 of 39 Javascript Chapters 13, 14 Vadim Parizher Computer Science Department California State University, Northridge Fall 2003 Slides from text Book.

Page 1 of 39 Javascript Chapters 13, 14 Vadim Parizher Computer Science Department California State University, Northridge Fall 2003 Slides from text Book.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic DHTML.

Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic DHTML.
TECH2018 Multimedia and the Internet More about CSS and Page Layouts.

TECH2018 Multimedia and the Internet More about CSS and Page Layouts.
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.

DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
4.1 JavaScript Introduction

4.1 JavaScript Introduction
 2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.

 2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.
HTML DOM.  The HTML DOM defines a standard way for accessing and manipulating HTML documents.  The DOM presents an HTML document as a tree- structure.

HTML DOM.  The HTML DOM defines a standard way for accessing and manipulating HTML documents.  The DOM presents an HTML document as a tree- structure.
Cascading Style Sheets. Defines the presentation of one or more web pages Similar to a template Can control the appearance of an entire web site giving.

Cascading Style Sheets. Defines the presentation of one or more web pages Similar to a template Can control the appearance of an entire web site giving.
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 1 DHTML & CSS Tutorial 6.

Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 1 DHTML & CSS Tutorial 6.
1 JavaScript: Objects and Object Models October 25, 2005 Slides modified from Internet & World Wide Web: How to Program. 2004 (3rd) edition. By Deitel,

1 JavaScript: Objects and Object Models October 25, 2005 Slides modified from Internet & World Wide Web: How to Program (3rd) edition. By Deitel,
Chapter 1 XHTML: Part I The Web Warrior Guide to Web Design Technologies.

Chapter 1 XHTML: Part I The Web Warrior Guide to Web Design Technologies.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.
Creating an Animated Web Page

Creating an Animated Web Page
CITS1231 Web Technologies JavaScript and Document Object Model.

CITS1231 Web Technologies JavaScript and Document Object Model.

Similar presentations

Ads by Google