UD Logo
School of Education
Textbook Cover

Computational Thinking on the Internet

Chapter 7: JavaScript Programming and the DOM

After completing Chapter 7, you will know how to:

End of Chapter Labs

Lab Project 7.1:Inspecting Your Cookies

If you have never looked around your computer to see what cookies are stored there, you will be amazed by what this lab project will turn up. Remember that there are two kinds of cookies: (1) per-session cookies that are stored in RAM and evaporate when the user closes the browser windows, and (2) persistent cookies that survive from session to session. Persistent cookies endure even when the user reboots or powers off the computer. The reason why persistent cookies stick around is because the browser stores them in the computer's local storage. To inspect the cookies that the browser is storing locally on your computer, follow these steps:

Windows

  1. Get the Windows File Explorer running and select the root of the drive you want to search.
  2. In the search field, type the word cookie and press Enter.
  3. Wait while your computer looks for filenames containing the word cookie. One by one, your cookie files will begin to appear in the search window.
  4. Look for a folder called cookies. Right-click it and choose the option to enter that folder. Here you will probably find many more cookie files.
  5. To inspect a cookie file, right-click its filename to bring up the quick menu, choose Open, and choose the option to open the file with the Notepad. Many cookies are encrypted, so do not be disappointed if you cannot decipher the contents of these files.
  6. Reflect on how servers all over the Internet, including commercial websites, are using your computer’s persistent memory as a storage medium.

Macintosh

  1. Get Safari running.
  2. From the Safari menu, select Preferences.
  3. In the Safari preferences window, choose Privacy.
  4. Click the Details button alongside the message telling you how many cookies are on your computer.
  5. To inspect the contents of a specific cookie, use Safari to go to its website.
  6. Pull down Safari’s Develop menu and choose the Web Inspector.
  7. Choose the Storage tab and click Cookies. Many cookies are encrypted, so do not be disappointed if you cannot decipher the contents of these files.
  8. Reflect on how servers all over the Internet, including commercial websites, are using your computer’s persistent memory as a storage medium.

If your instructor asked you to hand in this Cookies lab, use your word processor to write an essay in which you report on the cookies you found and reflect on the purpose they serve. As you know from viewing this YouTube video earlier in this chapter, the Internet is stateless by design. Every time you interact with the Internet, it hangs up on you by closing the socket through which you connected. Cookies were invented to provide a way for applications to maintain state by keeping records either in per-session cookies that evaporate when the user closes the browser, or in persistent cookies that remain on your computer from session to session. There is no way for you to see the per-session cookies that evaporate. In this lab, you have seen the cookies that persist from session to session. In your essay, describe the cookies you found and write about the purpose you think they serve. Did any of the cookies keep data that surprised you? Did you find any of the cookies to be invasive of your privacy? Were some of them encrypted such that you were unable to see what they contained? If you do not like having cookies on your computer, you can use your browser settings to turn cookies off. Doing so, however, will make many of the Internet’s web services stop working on your computer. Did you find anything in your cookies that makes you wish you could turn them off?
When you hand in this essay, make sure you put your name at the top of the page, then copy it onto a disk or follow the other instructions you may have been given for submitting this assignment.

Lab Project 7.2: Dynamic HTML

Dynamic HTML is a term invented by Microsoft to refer to the animated Web pages you can create by using the DOM to combine HTML with style sheets and scripts that bring Web pages to life. Some people get confused by the term Dynamic HTML, because they think it refers to some kind of a product. Dynamic HTML is not a product; rather, it is a concept. Whenever you create dynamic effects onscreen by manipulating objects in the DOM, you are doing Dynamic HTML. In this lab, you learn how Dynamic HTML works by using JavaScript to modify the x,y location of an image onscreen. By using a timer to change the location periodically, you can make the image move across the screen. To create such an animation, follow these steps:

Dynamic HTML Code Analysis

In order to create an animation with Dynamic HTML, you need to latch on to an event that can get the animation started. The dynamic.html script does this in the <body> tag via the onload event, which is one of the intrinsic events identified earlier in this chapter in Table 7.3. Notice how the <body> start tag is programmed to fire the BeginAnimation() function when the page loads:

<body onload="BeginAnimation()">

The BeginAnimation() function is very brief.  It calls upon the setInterval() method of the JavaScript window object to set a timer that will go off after 50 milliseconds and fire the ContinueAnimation() function. You can make the animation happen faster or slower by changing the value 50 in the code below:

function BeginAnimation()
{
    timerID = window.setInterval("ContinueAnimation()",50);
}

After you get an animation started, you need to keep it going. The ContinueAnimation() function does that by computing the image’s next position and setting another timer. This process continues until the image moves past the point at which the IF statement stops the animation by calling upon the clearInterval() method to stop the timer from going off any more:

function ContinueAnimation()
{
    x += 10;
    MyPhoto.style.left = x + 'px';
    y += 4;
    MyPhoto.style.top = y + 'px';
    if (x>200)
    {
        window.clearInterval(timerID);
    }
}

In order to keep the coding straightforward, this example moved the image along a straight line. If you know your math, however, there is no limit to the patterns of movement you can create onscreen. In the ContinueAnimation function shown here, MyPhoto.style.left controls how far over the image will appear, and MyPhoto.style.top is how far down the picture will move.

Submitting the Dynamic HTML Lab

If your instructor asked you to submit this lab, do so by submitting the HTML file in which you created your Dynamic HTML example. In your script, you should use comment statements to document what your code is doing.  In JavaScript, you create a comment statement by typing // followed by the comment you want to make. Here is an example of a comment statement explaining what the code is doing:

//Stop the timer when the animation has moved 200 pixels   
if (MyPhoto.style.left>200)
{
      window.clearInterval(timerID);
}

Lab Project 7.3: Blockly, App Lab, and Your Hour of Code

In this computational thinking module, you will accomplish the following learning objectives:

If these learning objectives sound lofty and foreboding, worry not, because the learning activities you will experience in this chapter are designed in such a way that you will enjoy building your own app and reflecting on what it means to think computationally about how the world works. Follow this link for the complete text of the lab.