Complete JavaScript Programming Course

This course is for Web designers who want to learn how to use JavaScript to enhance their Web site, Webmasters who want to code and debug complex Web projects, or Web developers who need to expand beyond the limits of (X)HTML. Students should be comfortable creating web pages, writing (X)HTML, including forms, code, and proficient in using web browsers such as Internet Explorer, Firefox, Opera and Google Chrome.

Attendees should have some programming understanding, preferably some experience with any language that uses C-like syntax such as C, C++, C#, PHP, Java or Perl. Attendees should in any case have an understanding of the concepts and use of literals and variables, expressions and operators, including precedence and associativity, if/else statements and looping statements using both while and for keywords. For one organisation, for those without such experience, the initial topics can be covered at a less challenging pace.

Practical experience with PCs and desktop workstations. Knowledge of the web browser platforms is helpful. General knowledge of HTML/XHTML tags, including form tags. Basic programming knowledge is helpful, but not necessary

Topics covered on the 5 day Complete JavaScript Programming course

Introduction

• JavaScript origins and antecedents
• JavaScript and related standards
• Embedding client-side JavaScript in (X)HTML
• Script structure
• Basic output methods

Basics

• Basic syntactical structures
• Basic input methods
• Event handlers
• Errors and diagnostics
• Eval

Data types, expressions, operators

• Integers, floats, strings
• Variables and assignment
• Creating expressions using operators
• Conversions

Basic control structures

• Relational expressions
• Conditional processing: if and else
• switch
• Logical operators
• Looping: while, for

Arrays

• Defining normal arrays
• Assigning and extracting values
• Iterating across arrays
• Array dimensions
• Extending and reducing arrays
• Sorting and reversing arrays

Functions basics

• Creating your own functions
• Invoking functions
• Passing and receiving arguments
• Variable scope
• return value(s)

Object basics

• Creating objects and new keyword
• Accessing values of an object
• Constructors
• Class and instance methods
• prototype property
• with

Core built-in objects

• Number, string and boolean types
• String objects and properties
• Simple string methods
• Mathematics
• Date and time handling
• Regular expression basics
• The Prototype library

Error and exception handling

• Identifying and fixing errors
• Syntax and runtime errors
• Debugging
• Anticipating errors
• onerror
• try...catch....finally

Regular expressions

• The Regexp object
• String and Regexp methods
• Pattern matching facilities
• Replacing text

Browser and document object model

• Representing the browser
• W3C
• The DOM

Window and timer techniques

• Opening new windows
• Directing content to windows
• Accessing the status bar
• Timers and Prototype’s PeriodicalExecuter class

The DOM in practice

• Level 0 and IE4 model and events
• Dynamic content, innerHTML, etc
• Level 1 and 2 techniques

Forms and JavaScript

• Form objects and properties
• Form elements, properties and methods
• Named sets

Form validation

• onSubmit and onReset event handlers
• onblur and indivual element validation
• Form.submit() and Form.reset()
• Generic validation

Images and sound

• Rollovers
• Pre- and post-loading
• The Image object
• Image maps
• Sounds

More advanced arrays

• Slices – selecting contiguous elements
• Further sortingnotions
• Multidimensional arrays
• Processing and sorting nested data structures
• Associative arrays
• Prototype’s extra Array methods
• Prototype’s Enumerable and Hash classes

More on functions and objects

• Anonymous functions
• Adding methods to built-in and custom objects
• prototype properties
• Different ways of creating custom objects

Prototype’s language extensions

• Extra Object and Function methods
• The Class class
• String and RegExp extensions
• Template class
• Class inheritance

DOM Level 1 and 2 techniques

• Node and Element objects
• Traversing HTML documents
• Modifying the structure
• Keyboard event handling
• DOM2 event handling
• More on the Prototype library

Cross-browser issues

• Handling exceptions
• The multiplicity of browser versions
• Browser detection techniques
• Object detection
• Testing strategies
• Prototype’s $ and other methods

Pseudodatabases and JavaScript

• Internally representing large data sets
• Dynamic documents

Stylesheets and JavaScript

• Scripting in-line styles
• Computed styles
• Interacting with stylesheet classes
• Representing stylesheets
• Prototype’s $$ and other methods

Cookies

• Nature, structure and application of cookies
• Cookie duration, visibility and security
• Creating, retrieving, updating and deleting
• Cookie libraries
• Alternatives to cookies

Form handling: the Prototype library

• The $F utility
• Form and Form.Element methods
• Form.Observer and Form.Element.Observer

Embedded objects and JavaScript

• Interacting with applets
• Shockwave and Flash
• ActiveX objects

Ajax introduction

• The XMLHttpRequest object
• Making a data request
• Handling the response: XML JSON, etc
• Synchronous vs asynchronous

Ajax applications

• Third-party libraries
• An Ajax.Autocomplete example
• Ajax.InPlaceEditor
• Database access
• Validation and Ajax