Programming with JavaScript

5 Day Course
Hands On
Code QAJAVSC

Book Now - 1 Delivery Method Available:

Classroom Virtual Classroom Private Group - Virtual Self-Paced Online

Overview

From the simplest webpage to complex Enterprise scale web applications Javascript is an essential skill for any developer or designer. This course takes an in-depth look, from first principals in how to effectively program javascript through to best practices for large scale reusable code libraries.

Whether you are new to programing and need to learn how to wrangle the powerful and flexible language or you are an experienced Object Orientated programmer, who needs to understand the why and how of Javascript you will find this course an essential skill.

Objectives

At the end of this course you will be able to:

  • Manage JavaScript types effectively
  • Program using flow of control
  • Understand functions, object and arrays
  • Create new HTML content using the DOM
  • Understand the BOM
  • Hook up events
  • Work with forms and regular expressions
  • Understand closures and self-executing functions
  • Work with AJAX and JSON
  • Work with javascript libraries such as jQuery and AngularJS
  • Start using ECMAScript2015 today

Training Partners

We work with the following best of breed training partners using our bulk buying power to bring you a wider range of dates, locations and prices.

Modules

Collapse all

Introduction to Javascript (3 topics)

  • What is javascript
  • How to place script in a web page
  • Developer tools

Types (6 topics)

  • Understanding javascript types
  • Primitive types
  • Reference types
  • Learning to check for type
  • Defending against Type mutation
  • Operators

Flow of Control (4 topics)

  • If statements
  • Ternary If
  • Switch statements
  • Loops

Functions, Arrays and Objects (10 topics)

  • Arrays
  • Creating Arrays
  • Accessing Arrays
  • Functions
  • Creating functions
  • Calling functions
  • Functions and scope
  • Objects
  • Creating Objects
  • Accessing Objects

Error Handling and Debugging (9 topics)

  • Understanding the Error object
  • The Inbuilt Error types
  • Creating resilient code using try/catch statements
  • Throwing Errors
  • In Browser Debugging
  • Browser developer tools
  • Console Debugging
  • Logging to the console
  • Breakpoints

The DOM (5 topics)

  • Why the DOM
  • Using the DOM
  • Selecting elements
  • CSS Selector patterns
  • Generating new content

CSS (5 topics)

  • Understanding the style object
  • Reading and setting CSS properties
  • CSS Classes and Javascript
  • The calculated style of an object
  • Adding and removing classes

The Browser Object Model (12 topics)

  • What is the BOM
  • Cross-browser issues
  • The 'core' BOM
  • The window object
  • Other BOM objects
  • The location object
  • The history object
  • Document methods
  • Cookies
  • The Screen object
  • The viewport
  • Window objects

Event Handling (10 topics)

  • Understanding javascript events
  • Subscription models
  • Inline
  • Programmatic
  • Event listeners
  • Debugging events
  • Event bubbling and capturing
  • The Event object
  • The 'this' keyword
  • Legacy browsers

Forms and Regular Expressions (12 topics)

  • Understanding forms
  • What are forms
  • HTML hierarchy
  • Selecting form elements
  • Accessing form elements
  • Form methods and events
  • Input element events
  • Form and field validation
  • Regular expressions
  • What is RegEx
  • Using RegEx to analyse data
  • HTML5 forms overview

Timers and Asynchronous programing (7 topics)

  • What are timers
  • Timer types
  • setInterval
  • setTimeout
  • Common timer issues
  • requestAnimationFrame
  • cancelAnimationFrame

Functions and Closures (7 topics)

  • Advanced function design
  • Closures
  • What are closures and how do they work?
  • Using closures to simplify development
  • Self-executing functions
  • Parameterised self-executing functions
  • Strict mode

Object Orientated Javascript (8 topics)

  • Objects revisited
  • Creating your own objects
  • Constructors
  • Prototypes
  • Chaining objects
  • Overloading and overriding
  • With statements
  • Sealing objects

AJAX and JSON (10 topics)

  • What is Ajax?
  • Ajax enabling technologies
  • XMLHttpRequest object
  • Client and Server architecture
  • XMLHttpRequest - Requests
  • XMLHttpRequest - Responses
  • JavaScript Object Notation (JSON)
  • JSON Structures
  • ECMAScript5 JSON object
  • Deserializing JSON

Cross Browser Development (7 topics)

  • The cross browsers issue
  • Choosing what browsers to support
  • Browser grading
  • Progressive enhancement vs. graceful degradation
  • Browser vs. feature detection
  • Conditional scripts in IE
  • Handling legacy addEvent patterns in IE

Introducing jQuery (9 topics)

  • What is jQuery?
  • Adding jQuery
  • Using jQuery via a CDN
  • jQuery UI/Plugins/Mobile
  • Selecting elements with jQuery
  • jQuery chaining
  • Manipulating properties with jQuery
  • Events with jQuery
  • jQueryUI datepickers/tabs/dialogs/accordions

Modern Web Development (9 topics)

  • The open web
  • Git and software development
  • Bower, Grunt, Yeoman and Gulp
  • Understanding NPM and packaged components
  • Initialising applications and working package.json
  • Exploring task runners and generators such as Grunt and Gulp
  • Using Gulp to build an automated task runner and compiler
  • Introducing continuous integration and development
  • Building a CI/CD Gulp task runner

Introducing AngularJS (4 topics)

  • Installing and working with the AngularJS framework
  • Creating and running Angular Apps using Generator
  • Understanding Single-Page Applications and MVC: AngularJS Views; AngularJS Models; AngularJS Controllers
  • Understanding Dependency Injection and Code Reuse

ECMAScript2015: Variables and Types (2 topics)

  • Introducting the new keywords
  • The 7th data type

ECMAScript2015: Strings, Objects and Arrays (5 topics)

  • The new string literal syntax
  • Enahnced Object Literals
  • New methods for Strings, Objects and Arrays
  • The for...of loop
  • Destructuring

ECMAScript2015: Classes and Functions (3 topics)

  • Using the new class syntax to write slicker OO code
  • Clearer code using arrow functions
  • Introducing default values and rest parameters

Prerequisites

  • Delegates must be familiar with HTML and CSS with around six months experience and a skillset equivalent to 'Building an Effective Web Site'.
  • Some familiarity with programming would be beneficial and we recommend 'Programming Foundations' to new developers.

Please note: Before attending this class delegates must have a Microsoft account (signing up one is free). The instructions on how to set up a Microsoft account can be found here.

Additional Learning

The courses below may help you meet the knowledge level required to take this course.

  • Programming Foundations

    This 3-day course provides a basic understanding of how computer systems work from a programmer's perespective and how to use this knowledge to produce good code.

    3 Day Course Hands On Training Course Code QAPROGFOU
    Classroom Virtual Classroom Private Group - Virtual Self-Paced Online

Course PDF

Print

Share this Course

Share

Recommend this Course

Sections