Chapter 13 Dynamic HTML Object Model and Collections
Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13. 1 13. 2 13. 3 13. 4 13. 5 13. 6 13. 7 13. 8 Introduction Object Referencing Collections all and children Dynamic Styles Dynamic Positioning Using the frames Collection navigator Object Summary of the DHTML Object Model 2001 Prentice Hall, Inc. All rights reserved. 1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> Outline <!-- Fig. 13. 1: reference. html --> <!-- Object Model Introduction --> <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> <title>Object Model</title> Function start displays an alert box containing the value of p. Text. inner. Text <script type = "text/javascript"> <!-function start() { alert( p. Text. inner. Text ); p. Text. inner. Text = "Thanks for coming. "; } // --> </script> The inner. Text property of the object refers to the text contained in that element (Welcome to our Web page!). Reference. html </head> <body onload = "start()"> <p id = "p. Text">Welcome to our Web page! </p> </body> </html> The inner. Text property of the object is dynamically changed (Thanks for coming. ). The onload event calls the Java. Script start function when document loading completes. 2001 Prentice Hall, Inc. All rights reserved. 2
Outline The value of p. Text. inner. Text when the page is first loaded. An alert box displaying the value of p. Text. inner. Text. Program Output The value of p. Text. inner. Text after the function start is invoked. 2001 Prentice Hall, Inc. All rights reserved. 3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Outline <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <!-- Fig 13. 2: all. html --> <!-- Using the all collection --> The for loops through the elements of the collection and display each element’s name. <html xmlns = "http: //www. w 3. org/1999/ xhtml"> all <head> <title>Object Model</title> <script type = "text/javascript"> <!-var elements = ""; The length property of the all collection specifies the number of elements in the collection. function start() { for ( var loop = 0; loop < document. all. length; ++loop ) elements += " " + document. all[ loop ]. tag. Name; p. Text. inner. HTML += elements; alert( elements ); } // --> </script> </head> All. html The name of each XHTML element (given in the tag. Name 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. <body onload = "start()"> <p id = "p. Text">Elements on this Web page: </p> </body> </html> The inner. HTML property is similar to the inner. Text property but can also include XHTML formatting. 2001 Prentice Hall, Inc. All rights reserved. 4
Outline Program Output The XHTML elements are rendered on the page. Note comments are represented as !. An alert dialog is displayed with all the names of the XHTML elements in the all collection. 2001 Prentice Hall, Inc. All rights reserved. 5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> Outline <!-- Fig 13. 3: children. html --> <!-- The children collection --> <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> <title>Object Model</title> <script type = "text/javascript"> <!-var elements = "<ul>"; function child( object ) { var loop = 0; 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. Children. html elements += "<li>" + object. tag. Name + "<ul>"; for ( loop = 0; loop < object. children. length; loop++ ) { If an element has children if ( object. children[ loop ]. children. length ) child( object. children[ loop ] ); function child recurses on else itself with the child to print elements += "<li>" + these elements out. object. children[ loop ]. tag. Name + "</li>"; } elements += " </ul> "; } // --> The children collection for a specific element contains that element’s child elements. 2001 Prentice Hall, Inc. All rights reserved. 6
35 36 37 38 39 40 41 42 43 44 45 46 47 48 Outline </script> </head> <body onload = "child( document. all[ 4 ] ); my. Display. outer. HTML += elements; "> <p>Welcome to our <strong>Web</strong> page!</p> <p id = "my. Display"> Elements on this Web page: </p> </body> </html> Property outer. HTML is similar to property inner. HTML but it includes the enclosing XHTML Children. html tags (tags <p id = "my. Display"> and </p> in this case) as well as the content inside them. Program Output A display of all the elements in a document. 2001 Prentice Hall, Inc. All rights reserved. 7
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> Outline <!-- Fig. 13. 4: dynamicstyle. html --> <!-- Dynamic Styles --> <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> <title>Object Model</title> Function start prompts the user to enter a color and then sets the background to that color. <script type = "text/javascript"> <!-function start() A prompt dialog box is displayed prompting the user to { input a color. The color is stored in variable input. Color. var input. Color = prompt( "Enter a color name for the " + "background of this page" , "" ); Dynamicstyle. html document. body. style. background. Color = input. Color; } The input color is set as // --> the background color. </script> </head> <body onload = "start()"> <p>Welcome to our Web site! </p> </body> </html> 2001 Prentice Hall, Inc. All rights reserved. 8
Outline Initial Output Prompt dialog asking user to enter a Program background color. Output Final output with background color selected by the user set. 2001 Prentice Hall, Inc. All rights reserved. 9
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> Outline 10 <!-- Fig. 13. 5: dynamicstyle 2. html --> <!-- More Dynamic Styles --> <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> <title>Object Model</title> <style type = "text/css">. big. Text Two style classes for font are defined. { font-size: 3 em; font-weight: bold } . small. Text { font-size: . 75 em } Dynamicstyle 2. html </style> <script type = "text/javascript"> <!-function start() { var input. Class = prompt( "Enter a class. Name for the text " "(big. Text or small. Text)", "" ); p. Text. class. Name = input. Class; } // --> </script> </head> The user is prompted to enter one of the two defined styles to be applied to the text. + 2001 Prentice Hall, Inc. All rights reserved.
34 35 36 37 <body onload = "start()"> <p id = "p. Text">Welcome to our Web site! </p> </body> </html> Outline 11 Dynamicstyle 2. ht Dialog mlprompting user to enter a font style. Program Output Font after user decides to apply the big. Text style to the text. 2001 Prentice Hall, Inc. All rights reserved.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> Outline 12 <!-- Fig. 13. 6: dynamicposition. html --> <!-- Dynamic Positioning --> <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> <title>Dynamic Positioning</title> <script type = "text/javascript"> Function start is used to update <!-var speed = 5; the p element’s content. var count = 10; var direction = 1; var first. Line = "Text growing"; Dynamicposition. var font. Style = [ "serif", "sans-serif", "monospace" ]; var font. Stylecount = 0; html function start() { window. set. Interval( "run()", 100 ); } function run() { count += speed; if ( ( count % 200 ) == 0 ) { speed *= -1; direction = !direction; Function set. Internal 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. 2001 Prentice Hall, Inc. All rights reserved.
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 p. Text. style. color = ( speed < 0 ) ? "red" : "blue" ; first. Line = ( speed < 0 ) ? "Text shrinking" : "Text growing"; p. Text. style. font. Family = font. Style[ ++font. Stylecount % 3 ]; Outline 13 } Font size and color will be selected on the value of speed. p. Text. style. font. Size = count / 3; based p. Text. style. left = count; p. Text. inner. HTML = first. Line + " Font size: " + count + "px"; } // --> </script> </head> <body onload = "start()"> <p id = "p. Text" style = "position: absolute; left: 0; font-family: serif; color: blue" > Welcome!</p> </body> </html> Dynamicposition. html 2001 Prentice Hall, Inc. All rights reserved.
Outline Once count reaches a multiple of 200, the size of the text font starts to shrink by one third. Program Output 2001 Prentice Hall, Inc. All rights reserved. 14
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Frameset//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -frameset. dtd"> Outline <!-- Fig. 13. 7: index. html --> <!-- Using the frames collection --> <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> <title>Frames collection</title> </head> The browser window is broken into two horizontal frames. <frameset rows = "100, *"> <frame src = "top. html" name = "upper" /> <frame src = "" name = "lower" /> </frameset> </html> Index. html The top frame (upper) displays file top. html. The bottom frame (lower) is initially empty. 2001 Prentice Hall, Inc. All rights reserved. 15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> Outline <!-- Fig. 13. 8: top. html --> <!-- Cross-frame scripting --> <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> <title>The frames collection</title> Function start takes in a user’s name and writes it in a frame in the browser. <script type = "text/javascript"> <!-function start() { var text = prompt( "What is your name? ", "" ); parent. frames( "lower" ). document. write( "<h 1>Hello, " + text + "</h 1>" ); } // --> </script> The write function </head> <body onload = "start()"> <h 1>Cross-frame scripting!</h 1> </body> </html> Top. html is used to write text to the frame in the browser. The parent frame of the current frame is first referenced following that the lower frame is referenced. 2001 Prentice Hall, Inc. All rights reserved. 16
Outline Browser prior to user entering a name. Dialog prompt for user to enter name. Program Output Browser updated with user name and Hello displayed in bottom frame. 2001 Prentice Hall, Inc. All rights reserved. 17
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 Outline <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <!-- Fig 13. 9: navigator. html --> <!-- Using the navigator object --> <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> <title>The navigator Object</title> On load function start is called to determine what browser is being used. Based on this a page specific to that browser is displayed. <script type = "text/javascript"> <!-function start() { if (navigator. app. Name=="Microsoft Internet Explorer" ) { if ( navigator. app. Version. substring( 1, 0 ) >= "4" ) Navigator. html document. location = "new. IEversion. html"; else The browser is Microsoft document. location = "old. IEversion. html"; Internet Explorer. } else document. location = "NSversion. html"; } // --> The function app. Version is </script> The browser is Netscape. used to determine which version </head> of IE is used. <body onload = "start()"> <p>Redirecting your browser to the appropriate page, please wait. . . </p> </body> </html> 2001 Prentice Hall, Inc. All rights reserved. 18
Outline The document specific for the Microsoft Internet Explorer browser is displayed. Program Output 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. ) 2001 Prentice Hall, Inc. All rights reserved. 19
20 13. 8 Summary of the DHTML Object Model Fig. 13. 10 DHTML Object Model. 2001 Prentice Hall, Inc. All rights reserved.
21 13. 8 Summary of the DHTML Object Model 2001 Prentice Hall, Inc. All rights reserved.
22 13. 8 Summary of the DHTML Object Model 2001 Prentice Hall, Inc. All rights reserved.
- Slides: 22