JavaScript for Web Developers

JavaScript is a vital component of modern websites and a core skill in front-end web development. It makes websites much more dynamic and responsive by updating small parts of the page at a time. It provides high-impact visual effects and animations. It infuses sites with the 'oil' that eases the user's experience and makes your website fun and compelling to use.

This course introduces you to JavaScript and provides you with an intimate understanding of JavaScript's concepts together with practical experience in applying them in order to provide lively and useful functionality on your website.

Audience

Web developers.

Approach

This course is part lecture, part hands-on.

Prerequisites

Delegates must be familiar with writing HTML.

Duration

2 days

Objectives

On completion of this course, you will:

Course Outline

Introducing JavaScript

  • How JavaScript relates to HTML and CSS
  • Client-Side Programming
  • AJAX
  • From Websites to Web Applications
  • Browser Support

Getting Started with JavaScript

  • JavaScript in the Web Browser
  • Embedding JavaScript in HTML
  • Accessing JavaScript from an external file
  • If JavaScript isn't supported...
  • Writing your first script
  • Grabbing JavaScripts from the web

JavaScript and the Browser

  • The Window Object

The JavaScript Language - 1

  • Statements
  • Built-in Functions
  • Data Types
  • Variables
  • Comments
  • Exercise: Writing some simple scripts

The Window Object

  • Overview of the Window Object - Properties & Methods
  • Browser Location & History
  • Browser Window Geometry
  • Browser Title and Status
  • Browser Dialogs
  • Timers

The JavaScript Language - 2

  • Arrays
  • Exercise: Changing a background image
  • Exercise: An Image Slideshow

Manipulating the HTML Document

  • Overview of the DOM
  • DOM Evolution
  • The Document Object
  • How the DOM relates to the HTML Page
  • Navigating the DOM Tree
  • Exercise: Accessing the DOM
  • Changing Nodes
  • Creating and Removing Nodes
  • Traditional DOM Navigation versus using a CSS Selector Engine
  • Exercise: Using CSS Selection

Tools for Developing in JavaScript

  • Error Console
  • DOM Inspectors
  • Firebug
  • Testing with JSUnit

A Note on Development Style

  • Separation of Concerns
  • Namespaces
  • Developing 'Unobtrusive' scripts

Event Handling

  • Types of Events
  • Event Capturing and Event Bubbling
  • Registering Event Handlers - The Old Way
  • Registering Event Handlers - Modern Practices
  • The Event Object

AJAX

  • Understanding AJAX
  • Real-world AJAX Examples
  • Form Validation
  • Dynamic Content

JavaScript Frameworks

  • Benefits of a Framework
  • Choosing a Framework
  • jQuery
  • prototype
  • YUI
  • Framework examples

Introducing jQuery

  • Benefits of jQuery
  • Getting Started with jQuery
  • Animations
  • Further Effects with Plugins

Wrap-Up