Web Programming Step by Step
Discussion Section 6: Raptor Attack
JavaScript DOM

section idea/code by Stefanie Hatcher

This section is about using JavaScript's Document Object Model (DOM). The following links may be helpful:


A raptor is on the loose! Rawr. The raptor wants to crush, kill, and eat the nearby townspeople. We will write a page to allow the raptor to eat them. The HTML and CSS are already completely written (and we shouldn't modify them); start from a skeleton of attack.html. We must add JavaScript code to make the UI respond when the user clicks the buttons. This code will heavily use the JS DOM and Prototype. Here is the page (click the image to run our sample solution, written by Stefanie Hatcher): (solution JS code attack.js)

expected output

When the page first appears, 5 boys should be visible in the town. There are currently 5 people in the HTML code, but they haven't been assigned any gender. These are stored inside the div with id of people, and are represented as divs with class person. Assign them the class boy when the page loads. (Note: The person class is still required to size and position the people, so you must add the boy class without disturbing the existing person class on these divs.)

The following are the behaviors of the buttons on the page:

You may want to review the following DOM and Prototype methods: window.onload, $, $$, document.createElement, appendChild, remove, addClassName, hasClassName, removeClassName, getStyle

Valid XHTML 1.1 Valid CSS!