JavaScript for Web Development: Hands-On

Introduction and Overview

What is JavaScript?

• Capabilities of JavaScript
• Surveying the limitations

Applications of JavaScript

• Client-side
• Server-side
• Writing compliant JavaScript for cross browser support

Fundamentals of JavaScript

The JavaScript programming model

• Formatting and coding conventions
• Embedding JavaScript in HTML

JavaScript syntax

• Declaring variables and arrays
• Statements, operators and relational expressions
• Making decisions with if and else
• Performing loops with while and for
• Defining and invoking functions

Using built-in objects

• The String object and string manipulations
• The Date object
• Dynamically updating a Web page using the document object
• Accessing Web page elements

Writing Client-Side JavaScript

Creating eye-catching animation and graphics

• Developing dynamic links
• Creating rollover graphics
• Using off-screen images for animation
• Manipulating images dynamically

Interacting with the browser

• Utilising browser objects
• Using pop-up dialog boxes and prompting users for input
• Opening, closing and writing to new browser windows
• Manipulating dates and times
• Writing to the browser status line
• Determining browser type and version

Handling browser events

• Trapping the JavaScript event handlers
• Triggering interaction with user actions
• Scheduling future tasks with timer events

Using cookies for persistence

• How cookies operate
• Creating, reading and manipulating cookies
• Implementing personalisation with cookies

JavaScript security

• Denial-of-service and spoofing attacks
• Security holes and browser policies

Creating Intelligent Forms

Client-side form validation

• Accessing and modifying form fields with JavaScript
• Checking form fields on the fly
• Validating user input with client-side scripts
• Accessing drop-down select box options
• Controlling form submission

Enhancing the user experience

• Validating forms at the earliest opportunity
• Reducing response times for incorrectly filled-out forms

Adding interactivity to forms

• Assigning JavaScript functions to form elements
• Implementing a drop-down menu for site navigation
• Performing actions based on form events
• Form validation best practices

Creating Web Pages Using Dynamic HTML

Overview of DHTML

• Using Cascading Style Sheets (CSS)
• Capabilities of DHTML
• DHTML and the Document Object Model (DOM)

Implementing DHTML

• Dynamically repositioning elements on a page
• Dynamically modifying documents
• Manipulating images
• Collapsible outlines, dynamic document reflow and inner HTML

Complementary Technologies

• Highlighting functionality of available JavaScript libraries
• Introducing unobtrusive JavaScript
• Separating JavaScript from the Web page
• Exploring the operation of Ajax