HTML5 JavaScript Programming


Product Description

HTML5 Javascript Programming Training Course

You should know HTML and be on the Intro To Programming level

Intended Audience

Web Developers who needs to master the latest technology for using HTML5 Programming and JavaScript

After this course you should be able to

  • Learn how to make your pages truly interactive by using the power of the DOM.
  • Finally understand how JavaScript works and take yourself from novice to well-informed.
  • Learn how JavaScript APIs fit into the HTML5 ecosystem, and how to use any API in your web pages.
  • Use the Geolocation API to know where your users are.
  • Bring out your inner artist with Canvas, HTML5’s new 2D drawing surface.
  • Go beyond just plugging a video into your pages, and create custom video experiences.
  • Learn the secret to grabbing five megabytes of storage in every user’s browser.
  • Improve your page’s responsiveness and performance with Web workers.
  • And much more…

Further Training

How about the JavaScript Bootcamp ?

Course Material

Provided electronically

Course Contents

Day 1

  • Getting to Know HTML5
  • Writing Serious JavaScript
  • Writing Serious JavaScript Revisited…
  • Introducing JavaScript and the DOM: A Little Code
  • The Way JavaScript Works
  • Declaring a variable
  • How to name your variables
  • Getting Expressive
  • Doing things over and over…
  • Make decisions with JavaScript
  • Making more decisions… and, adding a catchall
  • How JavaScript interacts with your page
  • How to bake your very own DOM
  • You can’t mess with the DOM until the page has fully loaded
  • The Phrase-O-Matic

Day 3

  • How the Geolocation API determines your location
  • Writing the code to find the distance
  • Displaying the Map
  • Sticking a Pin in it…
  • Accuracy Test
  • Getting the app started
  • How to specify options
  • Integrating our new function
  • Talking to The Web: Extroverted Apps
  • Mighty Gumball wants a Web app
  • Move over XML, meet JSON
  • Displaying the gumball sales data
  • How to set up your own Web Server
  • Reworking our code to make use of JSON
  • Moving to the Live Server
  • What Browser Security Policy?
  • Meet JSONP
  • Let’s update the Mighty Gumball web app
  • Step 1: Taking care of the script element…
  • Step 2: Now it’s time for the timer
  • Step 3: Reimplementing JSONP
  • How to remove duplicate sales reports
  • Updating the JSON URL to include the lastreporttime

Day 5

  • Storing Things Locally: Web Storage
  • How browser storage works (1995 – 2010)
  • How HTML5 Web Storage works
  • Were Local Storage and the Array separated at birth?
  • Getting serious about stickies
  • Creating the interface
  • Now let’s add the JavaScript
  • Reworking our app to use an array
  • Converting createSticky to use an array
  • Deleting sticky notes
  • The deleteSticky function
  • How do you select a sticky to delete?
  • How to get the sticky to delete from the event
  • Delete the sticky from the DOM, too
  • Update the user interface so we can specify a color
  • JSON.stringify, it’s not just for Arrays
  • Using the new stickyObj
  • Putting JavaScript to Work: Web Workers
  • The Dreaded Slow Script
  • Adding another thread of control to help
  • How Web Workers work
  • Writing Manager.js
  • Now let’s write the worker
  • Virtual Land Grab
  • How to compute a Mandelbrot Set
  • How to use multiple workers
  • Let’s build the Fractal Explorer app
  • Fitting the canvas to the browser window
Day 2

  • Events, Handlers and All that Jazz: A Little Interaction
  • Get ready for Webville Tunes
  • But nothing happens when I click “Add Song”
  • Handling Events
  • Giving the button a click handler
  • Getting the song name
  • How do we add a song to the page?
  • How to create a new element
  • Adding an element to the DOM
  • How to add the Ready Bake Code…
  • Integrating your Ready Bake Code
  • JavaScript Functions and Objects: Serious JavaScript
  • Expanding your vocabulary
  • How to add your own functions
  • Local and Global Variables
  • The short lives of variables
  • What you can do with functions as values
  • Thinking about properties…
  • How to create an object in JavaScript
  • Let’s talk about passing objects to functions
  • Testing at the drive-in
  • Objects can have behavior too…
  • Adding the “this” keyword
  • How to create a constructor
  • A closer look at window.onload
  • Another look at the document object
  • A closer look at document.getElementById
  • Element objects

Day 4

  • How to get a canvas into your web page
  • Drawing on the Canvas
  • TweetShirt: the Big Picture
  • Now, let’s add the <form>
  • Time to get computational, with JavaScript
  • Writing the drawSquare function
  • Add the call to fillBackgroundColor
  • Drawing with Geeks
  • Breaking down the arc method
  • Writing the drawCircle function…
  • Completing the drawText function
  • Closely inspecting the video attributes…
  • What you need to know about video formats
  • I was told there would be APIs?
  • How to write the “end of video” handler
  • How the canPlayType method works
  • The setEffect and setVideo handlers
  • And here are the helper functions
  • Implementing the video controls
  • Switching test videos
  • It’s time for special effects
  • The FX plan
  • Time to get those effects buttons working
  • How video processing works
  • Implementing a scratch buffer with Canvas
  • How to position the video and canvases
  • Writing the code to process the video
  • How to process the buffer
  • Now we need to write some effects
  • How to use error events

Responsive Web Design with CSS3

Duration and pricing


1. Upon completion of this course we will issue you with attendance certificate to certify your attendance and / or completion of the prescribed minimum examples.
2. You have the option to get the competency / academic certificate if you :
hand in a project (pre-approved) covering most of the topics in the book.


On the calendar on this page below.
If your browser doesn’t display the calendar below, please click on this link or try using Google Chrome, alternatively please enquire via our ‘Contact Us’ page.


You can download the course registration form on our home page or by clicking here


To download a brochure of this page in pdf format, please click on the pdf icon at the top of this page.


Please email us

Print Friendly, PDF & Email