Enhancing Web Pages with JavaScript (Second Edition)

Course description

Overview: Students will learn how to add various JavaScript enhancements to Web sites.

Prerequisites: Introduction to Programming, HTML Programming Level 1, HTML Programming Level 2, Web Development with Cascading Style Sheets, or equivalent knowledge.

Performance-based objectives

Lesson objectives help students become comfortable with the course, and also provide a means to evaluate learning. Upon successful completion of this course, students will be able to:

Recognize the types of enhancements JavaScript can make to Web pages to make them more engaging to the Web user, identify how and where JavaScript can be placed in a Web page, and use the JavaScript error-handling feature of your browser to find and correct scripting errors.

Describe the basic concepts of the JavaScript language: objects, event handling, and functions.

Work with object references and control structures.

Write the JavaScript code to swap images that respond to a mouse click, display images that correspond to the mouse rolling over a link, and automatically cycle through a series of images to create a Web page slide show.

Solve the challenge of cross-browser incompatibility by displaying a different Web page, with different enhancements, for both Navigator and Internet Explorer; and write the JavaScript code to change the style and positioning attributes of Web page elements, while a page is loaded in either browser.

Write the JavaScript code to dynamically load pages into frames, and load new pages into customized windows.

Write JavaScript applications for processing and validating user-entered data on Web page forms.

Course content

Lesson 1: JavaScript: The What, Where, and How

Investigating JavaScript Effects

Entering JavaScript into a Web Page

Handling Errors in JavaScript

Lesson 2: JavaScript Basics

JavaScript’s Built-in Objects

Event Handling

Functions and Variables

Lesson 3: Object References and Control Structures

Object References

Control Structures and Code Formatting

Web Page Navigation with the Select Object

Lesson 4: Interactive Images

Swapping Images in Response to an onClick Event

Image Rollovers

Automating Dynamic Image Swapping

Lesson 5: Dynamic Styles and Positioning

Dealing with Browser Differences

Changing Styles Dynamically

Dynamic Positioning¾Another Way

Lesson 6: Windows and Frames

Creating Frames

Changing the Contents of a Frame Using JavaScript

Loading pages into New Windows with JavaScript

Lesson 7: Form Data Verification (optional)

Processing Form Elements: An Overview

Validating Data with Functions

Calculating Numeric Values

Scripting onSubmit and onReset Events

Appendix A: Reference Documents

The Form Validation Process: A Graphical Representation