Programming with Javascript

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.

Difficulty
Rating
5days
Duration
3560,00 
+ VAT
Dates:
Location:
Register before
Spoken language: English

We are sorry, but the course is already full, please try with another date or location.

Agenda

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.

Target Audience:

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

Outline

Module 1 – Introduction to Javascript

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

Module 2 – Types

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

Module 3 – Flow of Control

  • If statements
  • Ternary If
  • Switch statements
  • Loops

Module 4 – Functions, Arrays and Objects

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

Module 5 – Error Handling and Debugging

  • 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

Module 6 – The DOM

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

Module 7 – CSS

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

Module 8 – The Browser Object Model

  • 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

Module 9 – Event Handling

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

Module 10 – Forms and Regular Expressions

  • 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

Module 11 – Timers and Asynchronous programing

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

Module 12 – Functions and Closures

  • 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

Module 13 – Object Orientated Javascript

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

Module 14 – AJAX and JSON

  • 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

Module 15 – Cross Browser Development

  • 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

Module 16 – Introducing jQuery

  • 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

Module 17 – Modern Web Development

  • 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

Module 18 – Introducing AngularJS

  • 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

Module 19 – ECMAScript2015: Variables and Types

  • Introducting the new keywords
  • The 7th data type

Module 20 – ECMAScript2015: Strings, Objects and Arrays

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

Module 21 – ECMAScript2015: Classes and Functions

  • 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 (www.qa.com/QAEFFWEB).
  • Some familiarity with programming would be beneficial and we recommend Programming Foundations (www.qa.com/QAPROGFOU) to new developers.

Agenda

Places left:
No participant limit
-
3560,00  + VAT