Modifying Pages with Javascript

Markup languages are static. Algorithms are dynamic. We consider the ways in which we might write algortihms relating to Web pages.

Getting Started

Make sure that your sample Web page is open. It's at http://www.cs.grinnell.edu/~username/ (substitute your own username)
In your Web browser, open the Javascript console by type Shift-Ctrl-J. That is, press down the shift key and the control key and the J key.

Type the following and observe the effect.

document.getElementById("ubw101").innerHTML = "Underwater Basket Weaving";

Type the following and observe the effect.

document.getElementById("ubw101").style["color"] = "blue";

You can also find the current contents of any element by id. Instead of writing the equals sign, you stop with the innerHTML. Type the following and observe what happens.
```
document.getElementById("volunteer").innerHTML
```
But what if you want to work with a part of the page that doesn't have an identifier? You can get all of the elements with a particular class or tag. Try each of the following (the numbers in brackets tell the Javascript interpreter which of the elements with the same tag to change; we start numbering at 0).
```
document.getElementsByTagName("h2").length
document.getElementsByTagName("h2")[1].innerHTML = "** Pwned **";
document.getElementsByTagName("h2")[2].innerHTML = "****";
```
You've now learned two ways to reference elements: by id or by tag and index. You've also learned two things you can change about each element: you can change the contents or you can change the appearance. Try writing a few more commands to change parts of the page.

Making Pages Interactive

It is clearly possible to write instructions that manipulate an existing Web page. (In fact, you can do that to any Web page you find, as long as you can identify the parts.) However, as page authors and designers, we should really be providing the interactivity, rather than hoping someone will type something. That is, we need to put instructions for interacting with the page inside the code for the page.

Traditionally, we make pages interactive with "handlers". Handlers take the form "When the user does this to this element, do this." The way we write handlers can be a bit odd. We'll use an example, and hope you can figure out how to generalize it.

    document.getElementById("ubw101").onmouseenter = function() {
       document.getElementById("ubw101").innerHTML = "Underwater Basket Weaving";
       document.getElementById("ubw101").style["color"] = "blue";
    }

These instruction explain what the browser should do when someone moves the mouse over the element with id "ubw101".

Add this text to the end of the document (index.html), between the <script> tag and the </script> tag.
Reload the document.
Move the mouse over the portion of the page that reads "Mentor, UBW 101" and observe what happens.

As you may have noted, once we've changed the text, it doesn't change back. We might want to make it change back after we move away. We'll use a similar technique, replacing onmouseenter with onmouseleave.

    document.getElementById("ubw101").onmouseleave = function() {
       document.getElementById("ubw101").innerHTML = "Mentor, UBW 101";
       document.getElementById("ubw101").style["color"] = "black";
    }

Add this text to the end of the document, between the <script> tag and the </script> tag.
Reload the document.
Move the mouse over the portion of the page that reads "Mentor, UBW 101" and observe what happens.

Earlier in the lab, we made the résumé a bit better by fixing formatting. Now we'll make it a bit more "interesting" (better for some, worse for others) by making some of the headings change. Consider the following instructions.

    document.getElementById("education").onmouseenter = function() {
      document.getElementById("education").innerHTML = "Things I Learned";
    }
    document.getElementById("education").onmouseleave = function() {
      document.getElementById("education").innerHTML = "Education";
    }

    document.getElementById("experience").onmouseenter = function() {
      document.getElementById("experience").innerHTML = "Things I Did For Money";
    }
    document.getElementById("experience").onmouseleave = function() {
      document.getElementById("experience").innerHTML = "Experience";
    }

    document.getElementById("volunteer").onmouseenter = function() {
      document.getElementById("volunteer").innerHTML = "Things I Did For Love";
    }
    document.getElementById("volunteer").onmouseleave = function() {
      document.getElementById("volunteer").innerHTML = "Volunteer Work";
    }

What effect do you expect these instructions to have?
Check your answer by adding the text to the end of the document and reloading the page.

All of these examples make an element change itself. But what if you want to change another element? Amazingly, the code isn't all that much different. Consider the following instructions.

   document.getElementById("stupid").onmouseenter = function() {
     document.getElementById("interests").style["text-align"] = "left";
     document.getElementById("interests").innerHTML = "AI";
   }
   document.getElementById("stupid").onmouseleave = function() {
     document.getElementById("interests").style["text-align"] = "right";
     document.getElementById("interests").innerHTML = "Additional Interests";
   }

What effect do you expect these instructions to have?
Check your answer by adding the text to the end of the document, reloading the page, and moving the mouse over the "Stupid Javascript tricks" text near the end of the page.

You've now seen a variety of similar changes. Let's go beyond them.

Make a list of at least three useful interactive features that you might add to the page. (Right now, you should assume that you can only react to the mouse enter and mouse leave actions.)
Implement one of them.