Javascript Resources

A collection of useful

links to Javascript  tutorials and guides


There are two essential components to “Learning Javascript”. One is concerned with how you use the language to do stuff like add up numbers, make decisions, remember information, follow instructions, carry out complex tasks and monitor what is going on in the browser. The other is concerned with how you use the language to make stuff change on your web page like making text boxes appear and disappear, menus to open and close, images to pop up, colours to change, sound and video to play.

Of course both these components are related, you are not going to get very far along one path without having to take a quick look down the other.


Fundamentals

JavaScript Essential Training by Simon Allardice on lynda.com  is a fine introduction to the language. Simon is an excellent presenter, he explains concepts so well that most of the time you can listen to these tutorials like a podcast without needing to watch the video.

Simon steps through the essential foundations of the language; creating logic,  building loops and working with data. He then focuses on working with HTML. Watch the following to kick start your understanding of how to manipulate HTML with Javascript.

Working with the Document Object Model

What is the DOM?
Working with Nodes and Elements
Accessing Dom Elements
Changing DOM Elements
Creating DOM Elements

Working with Events and Event Listeners

Introduction to JavaScript event handling
Working with onClick and onLoad events

UI Enhancement

CSS and JavaScript
Removing and applying CSS classes
Changing inline styles


Javascript Libraries

Introduction to jQuery


Rich Media Interaction and Motion

Matter.js – a 2D rigid body JavaScript physics engine

three.js – Javascript 3D library

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

Physics HTML5 Game Engines – Find Which is Right For You

WebGL & EaselJS: a Technical Intro – CreateJS Blog

 


The DOM

DOM  Tree elements and how it all works  by Todd Henderson

DOM-Tree.png

 


Cheat Sheets

JavaScript cheat sheet by Marijn Haverbeke.


Reference Guides

Dash for OS X 

caniuse

Eloquent Javascript By Marijn Haverbeke. Available online and as a paperback or e-book. Excellent resource.

cover

 


JavaScript Best Practices

Javascript Best Practices

JavaScript Performance Tips – Greg Franko

24 JavaScript Best Practices for Beginners

jQuery Anti-Patterns and Best Practices

jQuery Coding Standards and Best Practices


Add Javascript to a web page

pure JavaScript equivalent to jQuery’s $.ready() 


Working with data

Iterating Over and Reducing Data – Learn JS Data


jQuery

jQuery Cheat Sheet

W3Schools : jQuery Tutorial

W3Schools jQuery effects reference

W3Schools jQuery Animation helper methods – Hide / show

Lynda : jQuery Essential Training

14 Handy jQuery Code Snippets for Developers – Treehouse Blog

Smashing Magazine : Useful jQuery Function Demos

jQuery | Codecademy

jQuery Anti-Patterns and Best Practices

jQuery Coding Standards and Best Practices


JSON

Source: A JSON Tutorial. Getting started with JSON using JavaScript and jQuery – View Source

Source: javascript – JSON lookup by key – Code Review Stack Exchange

Source: JSON.parse() – JavaScript | MDN

Public APIs and Big Data
 Embedded or Browser APIs
External / Third Party APIs

Advanced Javascript

Source: Dependency hell – Wikipedia, the free encyclopedia

Source: Understanding Dependency Injection

Classes – JavaScript | MDN

Agile & Coding: Yeah, we got classes now (ES6). You happy, pappy?

Promises

http://stephen-young.me.uk/2013/01/20/functional-programming-with-javascript.html

 Pure functions in JavaScript | @nicoespeon

http://eloquentjavascript.net/03_functions.html

https://vimeo.com/160326750

http://www.sitepoint.com/functional-programming-pure-functions/

What You Need To Know About JavaScript Scope – Smashing Magazine

Source: JavaScript Scope

JavaScript Module Pattern: In-Depth

How Do You Structure JavaScript? The Module Pattern Edition | CSS-Tricks

Understanding javascript-modules

Modules :: Eloquent JavaScript

JavaScript Modules: A Beginner’s Guide — Free Code Camp

The Module Pattern

16. Modules

 Beginners guide to AMD and RequireJS


Functional Javascript

The Two Pillars of JavaScript — Pt 2: Functional Programming — JavaScript Scene — Medium

 


REST

REST stands for Representational State Transfer. (It is sometimes spelled “ReST”.) It relies on a stateless, client-server, cacheable communications protocol — and in virtually all cases, the HTTP protocol is used.


Animation

Web Animation Past, Present, and Future

Using requestAnimationFrame

CSS3 Animation and the JavaScript API

Let’s Talk about the Web Animations API


Javascript Graphics APIs

Of the three primary HTML5 graphics APIs,  SVG can be a good choice for 2D casual games, such as Boulder Bop.

There are three graphics APIs to choose from:


WebGL

If you’re already familiar with OpenGL (ES 2.0 in particular), you can use WebGL for a simple 2D game, like Boulder Bop. If you’re not, this API is more complex than you need for this simple game.


Canvas

Canvas is the typical choice for most HTML5 games. It’s simple and speedy, particularly for games with many objects. However, canvas has its limitations:

  • Drawn objects become part of the canvas bitmap and therefore cannot be associated with an event handler. For example, clicking a specific circle on the canvas cannot natively fire a particular event handler. You can, however, wire up an event handler for the entire canvas which allows you, using a bit of math, to calculate whether or not a given circle was clicked (but the browser doesn’t provide this behavior natively).
  • When you move an object across the canvas, you must redraw the entire canvas for each move increment.
  • Liquid (or fluid) layout is relatively difficult – the browser can’t natively adjust the canvas size based on the browser’s current window size. You can create this behavior programmatically, however, by listening for window size changes and adjusting the size of the canvas appropriately.
  • The browser can’t natively convert screen coordinates to your game’s world coordinate system. For example, the browser can’t natively convert the position of a mouse click (in screen coordinates) to a convenient game coordinate system when canvas is used. You can create transformations equations to work here – see SVG Coordinate Transformations (Windows) for more info. Note that if you choose to implement liquid canvas layout, you must update the equation coefficients each time the window size changes.

The CanvasRenderingContext2D interface provides the 2D rendering context for the drawing surface of a <canvas>element.

With the new HTML5 specification comes a whole bag of new goodies including a new tag – <canvas>. This tag is effectively like a piece of paper on your page onto which you can draw and this is what the RGraph library is based on. The drawing is done by JavaScript and there’s a whole bunch of functions available to you to draw shapes and lines with.

Because <canvas> uses a “fire and forget” methodology there is no DOM for you to get references to shapes already drawn on the canvas – so you must remember the coordinates of the shapes yourself. It’s because of this that the <canvas> tag is so fast.

W3Schools Canvas Element

Despite this though there is a Path2D object that has been added, along with other new features that have been specified by the W3C that will allow you to retain path information and test at a later time for hits etc. The Path2D object is described here and there’s more information on new canvas features (like hit regions) on the RGraph blogSo on to the information!

Added in HTML5, the HTML <canvas> element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering.

Mozilla Canvas 2D rendering context

W3C canvas 2D context spec.

This specification defines the 2d context type, whose API is implemented using the CanvasRenderingContext2D interface.


SVG

While canvas provides simplicity and speed, SVG provides flexibility. For example:

  • Each graphic object becomes part of the DOM. So, if you want, each graphic object in the game can have one or more associated event handlers. For example, by clicking a specific circle on the “canvas”, called a viewport in SVG terminology, you can natively fire an event handler. The down side is that perform can decrease with more objects in the DOM.
  • The game’s background can generally be ignored. That is, to move an SVG graphic, you change its positional (x, y) values and the browser updates the background for you. You don’t need to update all the objects in the SVG viewport (as you would with canvas).
  • The browser handles liquid layout for you, if the correct CSS is used:
    html, body {
      height: 100%;
    }
    
    

    We’ll cover this in more detail later.

  • SVG provides a current transformation matrix (or CTM). Using the CTM, you can convert screen coordinates to a convenient game coordinate system whether liquid layout is used or not. For more info, see SVG Coordinate Transformations (Windows).

Because of its convenience, ease of liquid layout, and built-in matrix methods, SVG is often a good choice for games that do not contain a large number of objects (so as not to over-bloat the DOM). For games with many objects, canvas can be a better choice because the size of DOM is not effected by the number of game objects in the canvas element. For more info, see How To Choose Between SVG and Canvas (Windows).

Animate.css

Animation through the browser can be achieved a number of ways,

Using Javascript to move or change the CSS properties of DOM elements on the page. You can write ‘vanilla’ javascript to do this, but mostly we rely on libraries like JQuery to do the heavy lifting for us.

Using the <canvas> </canvas> element and API to write either javascript or WebGL code to create pixel based graphics.

Canvas Guide on the MDN

Can I Use browser compatibility for Web GL

http://www.w3schools.com/jquery/eff_animate.asp

The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects.

https://api.jquery.com/category/effects/

Using a third party plugin – flash or unity being the most popular.

http://www.w3schools.com/tags/ref_canvas.asp

JQuery  Provides a number of methods :

http://www.w3schools.com/jquery/eff_animate.asp

Source: jQuery animate() Method

Ultra high-performance, professional-grade animation for the modern web using javascript. The new standard for HTML5 animation.

Source: GreenSock | GSAP