JavaScript EVents and DHTML

JavaScript Events and Dynamic HTML (DHTML)

Using Dynamic HTML allows the developer to change the structure, content, and style of HTML pages already loaded, without re-loading the page. All the computation is done at the client (in the browser) without communication with the server. Some of the popular applications are creating games and performing form validation at the client. In this lesson we'll learn how to use DHTML.

Document Object Model

When an HTML page is rendered, your browser creates an in-memory representation of the page. This can be accessed through the JavaScript document object. One can dynamically change the structure, content, and style of the page, through the document properties and methods.

The document object main uses are:

Write new HTML elements to the current page being created using:
```
document.writeln(string)
document.write(string)
            
```
These methods should NOT be used after the page was loaded, as they will re-write the page.

Access current HTML elements, after the page was loaded using:


document.getElementById( "id" ) //this returns a reference to the object representation of the HTML element with the given id
document.getElementsByTagName( “name” ) //this returns an array of references to the object representation of the HTML elements with the given tag name

Access the cookies associated with the page:


            document.cookie

Access the date the page was last modified


            document.lastModified

Changing content and style with DHTML

In order to change an existing HTML element, we need to:

Find the HTML object we want to change. If the HTML element has an id attribute, the best way to get a reference to that element is using document.getElementById(id) method, but other methods exist as well. For example,


            <a id = "linkToAnimal" href="cat.html">Cat</a>
            <script>
var animalLink = document.getElementById("linkToAnimal");
or
var allLinks = document.getElementsByTagName(“a”);
            </script>

Change the object’s:

HTML properties - use reference.attributeName


                    animalLink.href = "dog.html";

HTML content - use reference.innerHTML


                animalLink.innerHTML = "Dog";

CSS properties - use reference.style.cssProperty, where the cSSProperty is the CSS property name, without a dash and with second latter capitalized, if applicable
```
	            animalLink.style.backgroundColor = "blue";
                animalLink.style.color="white";
                
```

DHTML example


    <!DOCTYPE html>

<!--  DHTML Cash Register -->

<html lang = "en">

    <head>
        <meta charset = "utf-8" />
        <title>Cash Register</title>
        <style>
            table, td {border: 1px solid black}
        </style>

        <script>
            var totalCents = 0;

function addMoney(extraCents) {
    totalCents  += extraCents;

    var domTotal = document.getElementById("moneyTotal");
    domTotal.innerHTML = "$" + totalCents / 100;

    var domLabel = document.getElementById("moneyLabel");
    if ( (totalCents % 10) == 0)
        domLabel.style.color = "red";
    else
        domLabel.style.color = "blue";
}
        </script>
    </head>

    <body>

        <table>
            <tr> <td id ="moneyLabel" > Total money: </td>
                <td colspan = "2" id="moneyTotal" style = "text-align:center"> $0.00 </td>
            </tr>
            <tr>
                <td style="background-color: red"   onclick="addMoney( 5)" > $0.05 </td>
                <td style="background-color: white" onclick="addMoney(10)" > $0.10 </td>
                <td style="background-color: blue"  onclick="addMoney(25)" > $0.25 </td>
            </tr>
        </table>

    </body>

</html>

Form validation example


    <!DOCTYPE html>

<!-- DHTML  Form Validation -->

<html lang = "en">

<head>
  <meta charset = "utf-8" />
  <title>Form Validation</title>
  <script>
         // Returns true if the number of steps is okay
         function checkAttending() {
            var number = document.getElementById("numAttend").value;
            if ( (number >= 1) && (number <= 100) )
		        return true;
            else {
		       window.alert("Attendance: Please enter a value between 1 and 100.");
		       return false;
	        }
         }

         // Asks user to confirm submission, returns true if ok
         function confirmSubmit() {
             if (!checkAttending())
                return false;
             if (window.confirm("Do you want to submit?"))
                return true;
             else
                return false;
         }
      </script>

</head>

<body>

 <form method="post" onsubmit="return confirmSubmit()"
    action="http://courses.cs.usna.edu/IT350/tools/FormChecker/submit.cgi" >
<p> <br/>Last name:
     <input type="text" name="lastname"/>
<br/>Number attending(1-100):
     <input type="text" name="numAttend" id="numAttend"
        onblur="return checkAttending()" />
<br/><input type="submit" value="Sign Up" /> </p>
</form>

</body>

</html>

Practice Problems

Change the code below to make the

element have a large font when you move the mouse over it.


<!DOCTYPE html>
<html lang = “en”>
   <head> <meta charset = “utf-8” />
      <title>Bigger</title>
      <script>








      </script>
   </head>
<body>

<p>
    Welcome to my page!
</p>

</body>
</html>

Modify so that clicking on the button changes target of element to "dog.html"


<!DOCTYPE html>
<html lang = "en"><head>
      <meta charset = "utf-8" />
      <title>Change Link</title>
      <script>







       </script>
   </head>
<body>
<p><a href="cat.html">See some animals!</a></p>

<form>
  <input type="button" value="Change animal“ />

</form>
</body> </html>

Write a form to read in a password from the user in two boxes. When they submit the form, proceed only if the passwords are the same.