JavaScript for Interactive Web Design Training Class

The JavaScript for Interactive Web Design training class teaches you the JavaScript programming techniques you need to develop leading-edge, interactive features for your Web site and to prepare for learning Java. The JavaScript skills you will learn in this course include:

JavaScript Commands and Program Structure: You will learn how to write compact, efficient JavaScript applications. Topics covered include variables, statements, functions, objects, methods, and properties, as well as techniques for properly embedding JavaScript code into your HTML files.

Dynamic Data Processing: Prior to JavaScript, data entered into an on-line form was not processed until the Submit button was pressed, transmitting the data to a CGI script on the server. Now, with JavaScript, you can have this processing occur automatically at any time, without interaction with the server. This enables you to create lightning-fast, real-world applications such as on-line spreadsheets and calculators, color selection tools, and more!

Form Validation: Are users entering invalid or incomplete data into your on-line forms? A JavaScript application, embedded into the page containing the form, could immediately warn them if they skip a field, enter an invalid two-letter state code, omit a digit from their credit card number, or make some other error.

Creating New Windows: JavaScript enables you to open precisely sized windows to display information. For example, when the user moves her mouse over a word on your site, you could have a 400x300 pixel window open to display a definition, then close 10 seconds later or upon the user's request.

Manipulating Image Sources: Have you seen button bars on the Web where each button lights up as you move the mouse over it? JavaScript can be used to produce this special effect and many others.

All students should have a strong knowledge of HTML, including forms, tables, and basic CGI scripting, either from their own study or from WestLake's Advanced HTML/Introduction to CGI Scripting course. In addition, all students should be familiar with C, C++, Pascal, or another high-level programming language.

JavaScript examples, as well as a more deatiled explanation of the language, are available on our FAQ page. A more detailed outline of the course is available, as is a comprehensive listing of JavaScript resources. For course dates and prices, visit the registration form.

This course includes a fully-illustrated, 80-page training workbook, a copy of O'Reilly & Associates' JavaScript: The Definitive Guide, and handouts.

Course Outline

Prerequisites: All students should have a strong knowledge of HTML forms and tables and of CGI scripting, either from their own study or from WestLake's Advanced HTML/Introduction to CGI Scripting and JavaScript course. In addition, students must be familiar with at least one high-level programming language such as Pascal, C, or C++.

Student Objectives:

To understand the potential advantages of client-based, interactive programs created in JavaScript over server-based programs such as CGI scripts
To understand the distinction between CGI, Java, and JavaScript, and the applications for which each is best suited
To gain a comprehensive foundation in the basics of JavaScript programming, including objects, methods, statements, functions, and variables
To gain hands-on experience in developing JavaScript programs for practical applications such as dynamic processing of data, form validation, and writing messages to the Status Bar

9:00 An Introduction to JavaScript (30 min. discussion and demos)

Practical applications of JavaScript
Differences between server-based and client-based interaction and their implications for web site development
Differences among Java, JavaScript, HotJava, and CGI

9:30 The JavaScript Environment

(30 min. discussion, 45 min. hands-on)
JavaScript Functions, Variables, and Statements
JavaScript Objects, Methods, and Properties
3 demonstration programs that illustrate how to call functions to perform specified tasks, such as creating a window in response to input from the user
Exercise: Develop a JavaScript program that uses functions to open a new window in response to data entered by the user. This can be used to perform calculations dynamically and then send the formatted results to a newly-created window.

10:45 Break

10:55 JavaScript Programs for Dynamic Data Processing (30 min. discussion, 60 min. hands-on)

Using JavaScript to perform calculations in response to user input
Analysis of demonstration programs that perform dynamic calculations, such as calculators and color selectors. One demo program will convert physical quantities from one set of units to another; the other will change the background color in response to the user's selection from a color panel.
Exercise: Develop a JavaScript application that calculates the area of a geometric shape. The script will read the geometry of the shape from numeric data entered into text fields, call functions to perform dynamic calculations, and display the result.

12:30 Lunch

1:30 Form Validation (30 min. discussion, 50 min. hands-on)

An overview of ways in which JavaScript can verify user input in forms
Analysis of a demonstration program that validates a class registration form
Exercise: Develop an application to validate a subscription form. This validation checks whether important fields in the form have been filled in by the user and verifies that the fields have been filled with the proper type of data.

2:50 Break

3:10 The Status Bar (15 min. discussion, 30 min. hands-on)

Methods for writing messages to the Status Bar
Analysis of a demonstration program that writes customized messages to the Status Bar when the user moves her mouse over a link.
Exercise: Develop a script that prints a customized message of your choice to the Status Bar

3:55 Handling Multiple Frames, Forms, and Anchors in JavaScript (10 min. discussion)

4:05 Dynamic Image "Flipping" (10 min. discussion, 20 min. hands-on)

Enhancements to JavaScript incorporated in Netscape Navigator 3.0 enable images to be dynamically changed on screen in response to a user's actions.

Using JavaScript's images array and the src property to dynamically change images
Exercise: Automatically changing an image in one frame as the user moves her mouse across different links in another frame

4:35 Cookies (15 min. discussion)

"Cookies" enable information about a user's visit to your site to be stored on their hard drive and later retrieved. For example, your site may have a 90-page on-line book. A user visits and reads the first 45 pages. Later, when he returns, you could use cookies to automatically have page 46 loaded.

4:50 Conclusion