Web Development & Design Foundations with HTML5

Skip to Content 7th Edition

Chapter 14 A Brief Look at JavaScript & jQuery

Using JavaScript, you can incorporate techniques and effects that will make your web pages come alive! JavaScript is an object-based scripting language used to manipulate objects associated with web page documents. For example, you can display an alert box containing an important message for the user, you can check the information that was entered into a form, and much more. This chapter introduces JavaScript and some of its capabilities, and provides some samples that you can build on to create your own web pages.

Resources & Chapter Links

JavaScript Tools

  • Firebug — JavaScript debugger extension for Firefox
  • Venkman — JavaScript debugger
  • JSLint — JavaScript syntax checker
  • Spket IDE — IDE for JavaScript
  • Rainbow9 — Web Based JavaScript IDE

Review Activities

Review flash card activities are available for this chapter.
Check your knowledge of chapter terms and concepts.

Chapter Updates

  • Page 589, Hands-On Practice 14.9
    A tag is missing from the code sample. Add a </h1> tag after "Using jQuery".

  • Page 596, Hands-On Practice 14.11, Step 11
    The second sentence should be:
    " The large gallery image will change when you click on an image link."

  • Page 598 Hands-On Practice 14.12, Step 4
    The location of the CSS file has changed. Configure the link tag with the following URL: http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.css

  • Page 598 Hands-On Practice 14.12, Step 6
    In addition to coding a script tag for the jquey.min.js jQuery library, you also need to code a script tag to access the fotorama library as follows:
    <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.js"></script>

  • Page 598, Hands-On Practice 14.13
    The third sentence should be:
    "For example when you configure a form control, such as an input element, with one of the class names specified in the documentation, the plugin will automatically perform the corresponding edit."

  • Page 599, Hands-On Practice 14.13
    Use the file at chapter14/formstarter.html

  • Page 600, Hands-On Practice 14.13, Step 8
    Compare your work with chapter14/jform.html in the student files.

  • JavaJam Case Study, Page 606
    #2 Replace the sentence "Add the date that the document was last modified to the bottom of the Music page (music.html)." with "Add the date that the document was last modified to the Home page (index.html) footer area."

  • Fish Creek Case Study
    • Page 609 Option 2
      In the third bullet point in Option 2, please replace "documet.lastModified" with "document.lastModified".
    • Page 610 Option 2
      The third sentence in the last paragraph should be:
      "Notice how the jQuery Validate plugin displayed error messages for all three form controls."

  • Pacific Trails Case Study, Page 613
    The third sentence in the last paragraph should be:
    "Notice how the jQuery Validate plugin displayed an error message for the e-mail form control."

  • Prime Properties Case Study, Page 614 Task 2
    Task 2 should indicate that you have the option to complete the task using two different methods. Task 2 should begin as follows:
    • Task 2: Add a Date to the Home Page. Launch a text editor and open the index.html file. You will add the date that the document was last modified to the bottom of the index.html page.
      Option 1: Using Javascript. Modify the page as follows:

Questions or Comments?

The author would like to hear from you! Send an e-mail to webdevfoundations@gmail.com