Skip to main content
COMPUTER  AND  SOFTWARE  EDUCATION   
HOME
VIEW FULL PUBLIC COURSE SCHEDULE
CONTACT US
COURSE
SEARCH
   Tel: 01275 859666
EC13 - JavaScript for Web Developers
Duration2 Days (customisation)
Availability

Course Description

This course is designed for the developer looking to further their web application development skills with JavaScript. This course teaches developers how to use JavaScript to transform static XHTML web pages into dynamic web pages that react to user input, and perform functions such as 'client-side' XHTML form validation, event handling, DOM manipulation, event handling, error handling and cookie manipulation.

Pre-requisites

The developer should be familiar with the Windows host environment. Knowledge of any programming language would be advantageous, however it is not essential. A basic knowledge of XHTML would be beneficial. This can be gained by attending course EC12.

Objectives

Whilst covering the basics of JavaScript, and how it is used, this course also aims to give an insight into JavaScript syntax.

  • Develop XHTML web pages using basic JavaScript statements
  • Understand and use JavaScript statements
  • Understand and use JavaScript Operators
  • Understand and use JavaScript Methods
  • Understand and Navigate the JavaScript Document Object Model
  • Develop and process XHTML form web pages
  • Develop and process XHTML web pages using cookies

Environment

Development will be performed using:

  • XHTML and JavaScript Source Editor
  • a text editor such as Notepad, WinEdit or TextPad

Testing Environment:

  • Internet Explorer or
  • Firefox or
  • Opera or
  • Chrome

Customisation

For on-site courses (i.e. at your premises), we are more than happy to tailor the course agenda to suit your exact requirements. In many cases, we are able to build your in-house standards and naming conventions into the delivered course.

Course Details

JAVASCRIPT INTRODUCTION
JavaScript History
JavaScript and JScript
ECMAScript
ECMAScript Dialects
JavaScript Overview
JAVASCRIPT BASICS
Core, Client-Side and Server-Side JavaScript
Core JavaScript
Server-Side JavaScript
Client-Side JavaScript
SCRIPT Tag
JavaScript Basics
External JavaScript
NOSCRIPT Tag
Commenting JavaScript
JavaScript Events
Document Object Model (DOM)
STATEMENT STRUCTURE
Case Sensitivity
Whitespace and Line Breaks
Semicolons
Comments
Reserved Words
DATA TYPES
Data Type Overview
Numbers
Integer Literals
Octal Literals
Hexadecimal Literals
Floating-point Literals
Special Numeric Values
Strings
String Literals
Escape Sequences
Boolean Values
Objects
Object Properties
Object Methods
Object Instantiation
Arrays
Creating Arrays
Null and Undefined
VARIABLES
Variables Names
Declaring and Initialising Variables
Variable Scope
Global Variables
Local Variables
VARIABLE MANIPULATION
Data Type Conversion
Numbers to Strings
toString() Method
Strings to Numbers
parseInt() Function
parseFloat() Function
Number() Function
isNaN() Function
String manipulation
charAt() Method
concat() Method
escape() and unescape() Methods
indexOf() Method
lastIndexOf() Method
slice() Method
split() Method
substring() Method
toLowerCase() Method
toUpperCase() Method
Number Constants
Numeric Manipulation
isFinite() Method
Math Functions
Rounding Numbers
Boolean Manipulation
toString() Method
OPERATORS
Expressions
Operators and Operands
Operand Data Types
Arithmetic Operators
Unary Negation
Increment and Decrement
Assignment Operators
Relational Operators
String Operators
Logical Operators
Guard Operator
Default Operator
Bitwise Operators
Conditional Operator
STATEMENTS
Statements - if/else
Statements - else if
Statements - Switch
Statements - While Loop
Statements - Do/While Loop
Statements - For Loop
Statements - Nested Loops
Statements - For/In Loop
Statements - Labels
Statements - Break
Statements - Continue
DYNAMIC HTML (DHTML)
Introduction
Dynamic HTML
The Document Object Model
DOM History
DOM Levels
Legacy DOM - DOM Level 0
Proprietary or Intermediate DOMs
DOM Standardisation
DOM Level 1
DOM Level 2
DOM Level 3
LEGACY DOM
Browser Object Model (BOM)
Web Page Components
Object Properties
Object Methods
Object Events
The Browser Object Model (BOM)
Window Object
Window Properties
Window Methods
Navigator Object
Navigator Properties
Navigator Methods
MimeType Object
Plugins Object
Screen Object
Location Object
Location Properties
History Object
History Methods
Document Object Model (DOM)
The Document Object Model
STANDARDISED DOM
DOM Level 0 - Accessing elements
Proprietary DOM - Accessing elements
Dom Level 1
DOM Level 2
DOM Level 3
DOM Hierarchy
Node Hierarchy
Specifying Nodes
Child Nodes
Parent Nodes
Sibling Nodes
Special Nodes
Node Information
Element Nodes
Element ID - getElementById()
Element Tags - getElementsByTagName()
Element Tags Names - tagName
Element Attributes
Amending the Structure of the Hierarchy
Inserting, Replacing, Cloning and Removing Nodes
Inserting Nodes
Replacing Nodes
Cloning Nodes
Removing Nodes
CSS STYLES
CSS Styles and JavaScript
Tag Styles
CSS Properties and Style Object Properties
Style Classes - className
IMAGE SWAPPING
Image Swapping
Pre-loading Images
CSS Image Swapping
WINDOW AND FRAME MANIPULATION
Window Manipulation
Windows Features
Communicating between Windows
ARRAYS
Arrays
Creating Arrays
Array Loops
Arrays in the Document Object Model
For...In Statement
Array Properties
Array Methods
ASSOCIATIVE ARRAYS
Associative Arrays
FUNCTIONS
Function Syntax
Functions with Parameters and Return Values
Timing Events
Function Arguments
FORM HANDLING
JavaScript Form Handling
Text Field Events
Form Handlers
Checkboxes
Radio Buttons
Selects
COOKIES
Cookie Overview
Name / Value Pair
Expiry date
Domain and path
Setting Cookies
Reading Cookies
Deleting Cookies
Complicated Cookie Setting
Complicated Cookie Reading
Session Cookies
Multiple Cookies
ERROR HANDLING
JavaScript Exceptions
Try / Catch Block
Error Object
Exception Types
Try / Catch / Finally Block
User Exceptions - Throw
EVENT HANDLING
JavaScript Events
Netscape Model
Modern Event Models
Browser Compatibility
Browser Detection
Events
Interface Events
Mouse Events
Form Events
Microsoft Events
Event handlers
Registering Event Handlers - Inline
this Keyword
Registering Event Handlers - Traditional
Registering Event Handlers - Advanced
Anonymous functions
Registering Event Handlers - W3C
Registering Event Handlers - Microsoft
Event accessing
Event Accessing - Cross Browser
Event properties
Event Type
Event Target
Event Key
Mouse Events
Event Handlers
Mouse / Keyboard Attributes
Other Event Attributes
JAVASCRIPT OBJECTS
JavaScript Objects
Objects
Function Objects
Object Properties
Object Methods
Arguments Variable
Prototype Property
Constructor Property
Prototype Inheritance
JavaScript Object Notation
Accessing Data In JSON
NAMESPACES
JavaScript Namespaces
Global Object
Self Invoking Functions
Closure - Variable Scope
Methods
Nested Object Namespacing

Course Format

Practical sessions make up a large part of the course, allowing delegates to demonstrate and reinforce the lectures given. During these sessions the delegate will gain experience of embedding and testing many different types of JavaScript into XHTML web pages containing features such as frames processing, window manipulation, form validation and cookie processing.

Examples are used extensively, ranging from simple code snippets to full applications with complete ‘real world’ functionality. These are supplied at the start of the course and it is encouraged that the delegates execute and ‘experiment’ with these under the instructor’s guidance as they are introduced.

These examples are available to take away, along with the delegate’s own work.

The comprehensive Student Guide supplied is fully indexed serving as a useful reference tool long after the course has finished. Delegates will also be able to access a free help-line with technical questions relating to topics covered on the course.