JavaScript Essentials

This courses teaches you the JavaScript programming language. It gives you a solid grounding in the language itself first with exercises to consolidate your knowledge, then it takes you into the browser, introducing the BOM, the DOM, and the browser event models. Finally, you'll explore and use AJAX from the ground up.

Audience

Web developers and programmers.

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

  • Hello World in JavaScript
  • Using JavaScript with HTML
  • Unobtrusive JavaScript

The JavaScript Language

  • Names
  • Reserved Words
  • Comments
  • Primitive Data Types
  • Objects
  • Variables
  • Declaring Variables
  • Initialising Variables
  • The `Number` Type
  • The `String` Type
  • The `Boolean` Type
  • The `Undefined` Type
  • The `Null` Type
  • The `typeof` Operator
  • Loose (Dynamic) Typing
  • Exercise: Writing some simple scripts

Operators and Conditional Statements

  • Expressions
  • Basic Assignment
  • Shorthand Assignment
  • Operator Precedence
  • if...else Statement
  • Comparison Operators
  • Avoid `==`
  • More Comparing
  • Arithmetic Operators

Strings

  • Overview
  • Joining Strings Together
  • Converting a Number to a String
  • Converting a String to a Number
  • Getting a String's length
  • Converting to UPPERCASE or lowercase
  • Splitting a String
  • Extracting a Substring
  • Getting the Index of a Substring
  • Searching for a Substring
  • Working with Regular Expressions
  • Summary of String Functions

Control FLow

  • switch Statement
  • Loops
  • while Statement
  • for Statement
  • for Statement
  • do...while Statement
  • break Statement
  • continue Statement
  • `break` and `continue` with labels

Arrays

  • Introducing Arrays
  • Declaring an Array
  • Using an Array
  • Arrays can hold Any Type
  • Arrays Grow Dynamically
  • The Array itself is One Object
  • Length of an Array
  • Convenient Array Initialisation
  • Array Literals

Functions

  • Functions
  • Example - Currency Conversion
  • Defining a Function
  • Exercise
  • Functions are 'Things'
  • Anonymous Functions
  • Comparing the Two Forms
  • Why Anonymous Functions?
  • Code Outside of any Function
  • Immediately-invoked Functions
  • Program Flow

Global Variables and Scoping

  • Scope
  • Global scope
  • The Problem with Global Variables
  • The Problem with JavaScript
  • Local Scope
  • A (Bad) Example
  • What do I do instead?
  • Variable Hoisting

Objects

  • Working with Objects
  • Object Literals
  • Setting properties
  • Retrieving values
  • Deleting properties
  • Enumerating properties
  • `for...in` caveats
  • JSON
  • Browser support
  • Converting objects into JSON
  • Parsing JSON strings

JavaScript and the Browser

  • JavaScript and the Browser
  • The Browser Object Model (BOM)
  • The `window` Object
  • The `window` Object
  • The `location` Object
  • The `history` Object
  • The `navigator` Object
  • The `screen` Object
  • The `document` Object
  • Getting more info

Manipulating the HTML Document

  • What's the DOM?
  • Changing the Page
  • Retrieving other elements
  • document.getElementById(id)
  • getElementsByTagName(tagname)
  • The `nodeList`
  • DOM nodes
  • Dealing with whitespace
  • Creating new nodes
  • Adding nodes into the document
  • Attributes
  • Using CSS Queries to Find Elements

Event Handling

  • Why Events?
  • Event Examples
  • What Events are there?
  • Handling Events
  • The Standard Event Model
  • Using the Standard Event Model
  • Aside: Some Browser History
  • DOM Level 2 events
  • Event Capture
  • Adding an Event Listener

AJAX

  • Understanding AJAX
  • Why AJAX?
  • The XMLHttpRequest object
  • Creating an XMLHttpRequest object
  • A note on IE
  • Exercise 1
  • XMLHttpRequest properties
  • readyState
  • status and statusText
  • status and statusText demo
  • responseText and responseXML
  • responseText and responseXML demo
  • Asynchronous requests
  • Exercise 2
  • XML, HTTP or JSON?
  • Security
  • XMLHttpRequest Level 2
  • AJAX and JavaScript libraries

Wrap-Up