Dynamic HTML Objects and Collections


Dynamic HTML - Objects and Collections

 


 

Below is all code that goes along with the video on Dynamic HTML - this is worthwhile to try these on your browser. Simply save them with notepad as html files and load them into your browser to see them in action.

 

Video

 

To view the video lecture Click Here.

 

reference.html

    <?xml version = "1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <!-- Fig. 13.1: reference.html  -->
    <!-- Object Model Introduction -->
    
    <html xmlns = "http://www.w3.org/1999/xhtml">
       <head>
         <title>Object Model</title>
   
         <script type = "text/javascript">

            function start()
            {
               alert( pText.innerText );
               pText.innerText = "Thanks for coming.";
            }

         </script>
   
      </head>
   
      <body onload = "start()">
         <p id = "pText">Welcome to our Web page!</p>
      </body>
   </html>

 

 

all.html

    <?xml version = "1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <!-- Fig 13.2: all.html       -->
    <!-- Using the all collection -->
    
    <html xmlns = "http://www.w3.org/1999/xhtml">
       <head>
         <title>Object Model</title>
   
         <script type = "text/javascript">

            var elements = "";
         
            function start()
            {
               for ( var loop = 0; loop < document.all.length; ++loop )
                  elements += "<br />" + document.all[ loop ].tagName;
         
               pText.innerHTML += elements;
               alert( elements );
            }

         </script>
      </head>
   
      <body onload = "start()">
         <p id = "pText">Elements on this Web page:</p>
      </body>
   </html>

 

 

children.html

    <?xml version = "1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <!-- Fig 13.3: children.html -->
    <!-- The children collection -->
    
    <html xmlns = "http://www.w3.org/1999/xhtml">
       <head>
         <title>Object Model</title>
   
         <script type = "text/javascript">

            var elements = "<ul>";
   
            function child( object )
            {   
               var loop = 0;

               elements += "<li>" + object.tagName + "<ul>";
   
               for ( loop = 0; loop < object.children.length; loop++ )
               {
                  if ( object.children[loop].children.length > 0)
                     child( object.children[loop] );          
                  else
                     elements += "<li>" +
                        object.children[loop].tagName +
                        "</li>";
               }
   
               elements += "</ul>" + "</li>";
            }

         </script>
      </head>   

      <body onload = "child( document.all[3]);
                      myDisplay.outerHTML += elements;        
                      myDisplay.outerHTML += '</ul>';">       
   
         <p>Welcome to our <strong>Web</strong> page!</p>
   
         <p id = "myDisplay">
            Elements on this Web page:
         </p>
   
      </body>
   </html>


 

 

dynamicposition.html

    <?xml version = "1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <!-- Fig. 13.6: dynamicposition.html -->
    <!-- Dynamic Positioning             -->
    
    <html xmlns = "http://www.w3.org/1999/xhtml">
       <head>
         <title>Dynamic Positioning</title>
   
         <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;
   
            function start()
            {
               window.setInterval( "run()", 100 );
            }
   
            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 + "<br /> Font size: " +
                                 count + "px";                     
            }

         </script>
      </head>
   
      <body onload = "start()">
            <p id = "pText" style = "position: absolute; left: 0;      
                                     font-family: serif; color: blue">
            Welcome!</p>
      </body>
   </html>

 

 

dynamicstyle.html

    <?xml version = "1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <!-- Fig. 13.4: dynamicstyle.html -->
    <!-- Dynamic Styles               -->
    
    <html xmlns = "http://www.w3.org/1999/xhtml">
       <head>
         <title>Object Model</title>
   
         <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>
   
      <body onload = "start()">
         <p>Welcome to our Web site!</p>
      </body>
   </html>