| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Get control of your email attachments. Connect all your Gmail accounts and in less than 2 minutes, Dokkio will automatically organize your file attachments. You can also connect Dokkio to Drive, Dropbox, and Slack. Sign up for free.

View
 

Dynamic HTML Objects and Collections

Page history last edited by Dr. Ron Eaglin 8 years, 9 months ago

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>


 

 

 

 

 

 

Comments (0)

You don't have permission to comment on this page.