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 TA Stefanie Hatcher): (solution JS code attack.js)
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:
div with the classes of person and either boy or girl.
splat (in addition to their existing person class, but in place of their gender class such as boy or girl). The splat class will set their background image to splat.png.
top style attribute to be either 10px or 85px) and also kills 1/5 of both genders. The raptor is an img tag with an id of raptor.
enrage to the raptor and the page's top h1 heading. In addition, the raptor should be made to be 50px wider than his current width. Clicking the button again removes the class from both elements and returns the width to its previous value. The h1 has an existing CSS class that should not be removed during this process. You are guaranteed that there is exactly one h1 element on the page.
left position style is at least 300px, he should change directions and start patrolling to the left until his left position is 10px or less, at which point he stops patrolling.
You may want to review the following DOM and Prototype methods: window.onload,
$,
$$,
document.createElement,
appendChild,
remove,
addClassName,
hasClassName,
removeClassName,
getStyle
