Enhancing Web Pages with JavaScript

Course length: 1 day

Course description

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

Prerequisites : In order to ensure your success, it is strongly recommended that you have previously completed the following Software Training courses:

Introduction to Programming,

HTML Programming Level 1,

HTML Programming Level 2,

Web Development with Cascading Style Sheets, or have extensive equivalent knowledge.

Delivery method: Instructor-led, group-paced, classroom-delivery learning model with structured hands-on activities.

Benefits: Students will be introduced to the JavaScript programming language and concepts by adding enhancements to a fictitious, multi-page Web site.

Target student: Students enrolling in this course should understand the basics of how the Internet works, the basics of HTML, the basics of programming concepts, and the basics of Cascading Style Sheets.

What's next: Enhancing Web pages with JavaScript is the first course in this series. JavaScript Programming, the next course in this series, teaches students the details of the JavaScript programming language. Students who want to learn advanced features can take the Software Training course, Advanced JavaScript Programming.

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 I mages 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