Head First JavaScript Code: Chapter 8, Wrangling the Page

Chapter 8 Opening Image

Taking control of Web page content with JavaScript is a lot like baking.

Head First JavaScript

Well, without the mess... and unfortunately, also without the edible reward afterward. However; you get full access to the HTML ingredients that go into a Web page, and more importantly, you have the ability to alter the recipe of the page. So JavaScript makes it possible to manipulate the HTML code within a Web page to your heart’s desire, which opens up all kinds of interesting opportunities all made possible by a collection of standard objects called the DOM (Document Object Model).

Download the Code

Code Description and Viewing

Stick Figure Adventure

The Stick Figure Adventure web page from Chapter 4 is continued here, and built incrementally throughout the chapter. Each numbered HTML file corresponds to an incremental version of the web page. When a page number appears beside a file, it is either the page where the file's contents are presented or the exercise (solution) corresponding to the file.

  • sfa5.html - Stick Figure Adventure web page with dynamic scene description thanks to innerHTML (page 351)
  • sfa6.html - Stick Figure Adventure web page reworked to use the DOM instead of innerHTML (page 364)
  • sfa7.html - Stick Figure Adventure web page with dynamic decision "buttons" and the replaceNodeText() function (page 370)
  • sfa8.htmll - Stick Figure Adventure web page with decision "buttons" that highlight (page 374)
  • sfa9.html - Stick Figure Adventure web page that intelligently hides the second decision "button" (page 378)
  • sfa10.html - Stick Figure Adventure web page with the decision history feature (page 386)
  • scene0.png - Scene 0 image that appears on the Stick Figure Adventure web page
  • scene1.png - Scene 1 image that appears on the Stick Figure Adventure web page
  • scene2.png - Scene 2 image that appears on the Stick Figure Adventure web page
  • scene3.png - Scene 3 image that appears on the Stick Figure Adventure web page
  • scene4.png - Scene 4 image that appears on the Stick Figure Adventure web page
  • scene5.png - Scene 5 image that appears on the Stick Figure Adventure web page
  • scene6.png - Scene 6 image that appears on the Stick Figure Adventure web page
  • scene7.png - Scene 7 image that appears on the Stick Figure Adventure web page
  • scene8.png - Scene 8 image that appears on the Stick Figure Adventure web page
  • scene9.png - Scene 9 image that appears on the Stick Figure Adventure web page