Head First JavaScript Code: Chapter 1, The Interactive Web

Chapter 1 Opening Image

Tired of thinking of the Web in terms of passive pages?

Head First JavaScript

Been there, done that. They’re called books. And they’re good for reading, learning... lots of good things. But they’re not interactive. And neither is the Web without a little help from JavaScript. Sure, you can submit a form and maybe do a trick here and there with some crafty HTML and CSS coding, but you’re really just playing Weekend at Bernie’s propping up a lifeless Web page. Real live interactivity requires a bit more smarts and a little more work... but it has a much bigger payoff.

Download the Code

Code Description and Viewing

iRock

The iRock web page is 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.

  • irock1.html - iRock web page with no JavaScript and no interactivity (page 17)
  • irock2.html - iRock web page that displays a greeting when the page first loads (page 20)
  • irock3.html - iRock web page that prompts for user input and displays a personalized greeting (page 26)
  • rock.png - Emotionless rock image that appears on the iRock web page
  • rock_happy.png - Happy rock image that appears on the iRock web page

House Finder

The House Finder web page is not a fully-functioning house searching page. It does use JavaScript to calculate the amount of house that can be afforded based upon the data entered into the form, but it does not perform a search for houses - the search results that appear on the housematches.html page are simulated.

  • house1.html - House Finder web page with no CSS or JavaScript
  • house2.html - House Finder web page with CSS but no JavaScript (page 2)
  • house3.html - House Finder web page with HTML, CSS, and JavaScript (page 4)
  • housematches.html - Matching house results from the House Finder web page
  • house.png - House image that appears on the House Finder web page