JavaScript for New Programmers Training Class

WestLake's JavaScript for New Programmers training class teaches you the JavaScript and programming techniques you need to develop leading-edge, interactive features for your Web site.

This course covers material similar to the JavaScript for Interactive Web Design class, but with a pace and structure more appropriate for new programmers and those who have not recently programmed in a modern language such as C or C++.

The JavaScript and programming skills you will learn in this two-day course include:

Fundamentals of Scripting with JavaScript: You will learn how to write compact, efficient JavaScript code and how to embed this code in your pages. Specifically, you will learn the JavaScript object-model and how core programming constructs such as statements, variables, conditionals, loops, and fuctions apply to JavaScript.

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 script, 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 text layout, image placement, forms, tables, and frames, either from their own experience or from WestLake's Intermediate HTML and Advanced HTML/Introduction to CGI Scripting courses. No prior programming knowledge is required, although any experience you have had prior to class will be helpful.

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, 128-page training workbook, a copy of O'Reilly & Associates' JavaScript: The Definitive Guide, and handouts.

JavaScript for New Programmers

Training Course Outline

Prerequisites: All students must have experience applying all topics covered in WestLake Internet Training's Intermediate HTML and Advanced HTML/Introduction to CGI Scripting and JavaScript courses. No prior programming experience is assumed, although students who have done some programming will find JavaScript somewhat easier to learn.

Student Objectives:

To develop an understanding of the fundamentals of programming, including statements, variables, conditionals, loops, control structures, and functions
To learn how JavaScript implements these fundamentals
To discover how to use JavaScript to build pages that dynamically respond immediately to the user's actions
To develop practical applications with JavaScript such as self-validating forms, forms that dynamically update based on user input, and pages on which the images change in response to the user's actions

Day One

9:00 Introduction

9:10 An Introduction to JavaScript

Practical applications of JavaScript

Differences between server-based and client-based interaction and their implications for web site development

Differences among Java, JavaScript, and CGI scripts

What objects are and an overview of the JavaScript model

An overview of event loops and handlers

9:40 A Basic JavaScript-enabled Color Picker

HTML buttons
The onClick event handler
How to use the document.bgcolor property to set the background color of a page

Exercise: Given a simple page with four buttons labeled red, green, blue, and white, students will embed JavaScript code that changes the color of the page's background to the appropriate color when one of the buttons is clicked

10:10 JavaScript Alerts

Using the window.alert() method to display a warning dialog

Exercise: Enhancing the page from the previous exercise to display a warning that it is about to change the color

10:30 Break

10:40 Introduction to Functions in JavaScript

How functions help eliminate redundant code and make your scripts easier to reuse
Using the <SCRIPT>...</SCRIPT> tags to enclose functions and specify in which version of JavaScript those functions are implemented
Structuring a function in JavaScript and passing it variables

Exercise: Implementing a function in the script from the previous exercise in order to eliminate redundant code and make the script more portable

11:20 Introduction to Prompts and Scalar Variables

Using the window.prompt() method to solicit a response from the user
An explanation of scalar variables (variables that hold a single value) and their applications in your scripts
Using the + (concatenation operator) to join variables and strings of text together

Exercise: Modifying the script from the previous exercise so that it pops up a prompt requesting the user's name, assigns this name to a scalar variable, and then uses the name stored in the variable to customize the alert dialog that is displayed when the user clicks a button

12:00 Lunch

1:00 Mouse Event Handling, setTimeOut(), and the window.status Property

Using onMouseOver and onMouseOut event handlers to detect mouse actions
Using the setTimeOut() function to set a timer
Printing messages to the status bar with the window.status property

Exercise: Completing a script that displays one message followed by another message in response to the user moving her mouse over a link

1:40 Creating a Timer Object and Clearing a Timer

Creating timer objects so that multiple timers can run at once
Clearing specific timers using the clearTimeOut() method

Exercise: Modifying the script from the previous exercise so that the status bar messages and their timer are cleared when the user moves his mouse off of the link

2:10 Break

2:20 Working with Forms in JavaScript

Relative and absolute object syntax for referring to form elements
How to pass an entire form to a function
The onBlur, onChange, onFocus, and onSelect event handlers
The special this object

Demonstration: A script that changes the text in a form's text field when the user clicks a button

Exercise: Completing a script that takes numbers entered into two fields in a form and displays the maximum of the two inside a third field

3:00 Emulating Events in JavaScript with the focus() and blur() Methods

Uses of the focus() and blur() methods

Exercise: Enhancing the form and script from the previous exercise so that the cursor automatically appears in the first field and so that the user cannot edit the results field

3:30 if-else if-else Conditionals

Using if-else if-else conditionals to have your script modify its behavior depending on whether a certain condition(s) are true or false

Exercise: Enhancing the form and script from the previous exercise to announce which of the two numbers entered was greater

4:00 Conclude Day One

Day Two

9:00 Working with Windows in JavaScript

The document.write() and document.writeln() methods
Creating a new window and window object using the window.open() method
Bringing the window to the foreground and outputting HTML to it
The window.closed property and window.close() method

Exercise: Opening a new window and writing HTML to it
Other useful properties of the document object

9:55 Comparison Operators, Loops, and the return Statement

Comparison operators for comparing numbers and strings
Building while and for loops
Using return to return the results of a function

Exercise: Building a script that takes the user's name, age and state of birth and generates a new window based on this information

10:40 Break

10:50 The Math and Date Objects

Using the methods of the Math object for basic calculations
Using the eval(), parseFloat(), parseInt(), and isNaN() functions
Obtaining and working with dates via the Date object

Exercise: Completing a script that dynamically counts down the time left until the end of class.

12:00 Lunch

1:00 The String Object and Form Validation

Core methods and properties of the String object
The onSubmit event handler
The confirm() method

Exercise: Performing basic validations on a form

1:45 Working with Frames in JavaScript

How frames fit into the JavaScript object hierarchy

Exercise: Completing the JavaScript code that drives a simple, frames-based expense report form

2:25 Break

2:35 The location and navigator Objects

Using the location.href property to change the browser's location
Review of two scripts that cause the browser to load a new page based on choices the user makes
Methods and properties of the navigator object

Exercise: Completing a script that takes the browser to one of two pages, depending on which browser the user is using

3:10 Working with Images in JavaScript

Controlling the .src property of an image via JavaScript
Techniques for preloading images

3:50 Conclusion

The future of JavaScript and its relationship with Dynamic HTML and Cascading Style Sheets
Suggestions for growing your skills