HTML5 Rocks - Get up to Speed

Thursday, November 6, 2014

Let's start with a quick JAVASCRIPT refresher: the ECMA Script 5 language specifications, the place to go to learn more and answer questions

IIFE or immediatley invoked function expression hides scope, wrap code in a function that is immediately invoked, this creates objects in their own scope without polluting global scope

Pass in foo variable in iife and name it bar

ES6 will have keyword let, let will attach i to for loop as opposed to var which attaches to function scope

Hoisting moves variable declarations and functions to top of scope block during compilation, an example of hoisting recursion

This keyword, every function, while executing, has a reference to its current execution context, called this

This keyword explicit binding, use dot call or dot apply at the call site, both utilities take as first parameter a this binding,

This hard-binding, this is always bound to obj, function body instructions overrides the this passed in

New keyword in front of any function call, turns function call into constructor call, a brand new empty object is created, the new object gets linked to another object, brand new object gets bound to this keyword for purpose of function call, if no return implicit insertion of return this

Closure is when a function remembers its lexical scope even when the function is executed outside that lexical scope

First set of parentheses of foo on line ten, gets the inner function back, in microsecond between first and second set of parentheses, function transported outside its lexical scope, and still able to access lexical scope, that is another example of closure

Pass function into settimeout, any kind of callback, that function is able to remember the variable, because of closure

Click handler is able to remember its lexical environment, this is because of closure

All functions have a closure over the same scope, shared scope, they all access zoo

Closures maintain entire scope, however nested and deep it is

Closure: a loop with function inside, put an iife inside loop to give each loop its own i, a new scope for each iteration

Classic module pattern, implementation of closure, outer wrapping function that gets executed, returns an inner function that has closure over inner private scope, make everything private only expose that what needs to be public

Variation on module pattern, wrap inner functions in object, return the object

Separate inputs from environment, makes for easier testability, readability and maintenance

The relationship between an object and its prototype

Let's have a look at ANGULARJS now, the official documentation to be found here

Include angularjs script, declare ng-app directive with app name, insert ng-controller directive, use angular expression to bind to world variable defined on scope in the controller, this is the genesis of an angular application

Add an input bind the scope variable in ng-model directive, update the textbox, the value gets updated everwhere referenced, the variable on scope in the controller is the single source of truth

The HTML5 doctype declaration

Some new HTML5 tags

The tags styled with some CSS, rainbow effect

The CSS for the new HTML5 tags

For obsolete browsers, such as IE to understand the new HTML5 elements, use JAVASCRIPT to create the elements, this is an html5-shiv, also called a shim, add display block to the CSS rules declarations

Modernizr allows to write conditional JAVASCRIPT and CSS rules, for obsolete browsers, such as the IE stack, apply browser feature testing

This is all that needs to be done to play audio files in native HTML5, audio element attributes are src, autobuffer, autoplay, loop and controls, without control player becomes transparent

To support audio in all browsers include the file formats for a fallback

Show video on web page using video tag, specify width and height, recommended, poster attribute to show a poster frame, text can be included within video element to allow users to download video if browser doesn't support, use control attribute to give users control

Native browser geolocation support, if browser supports geolocation show alert with latitude and longitude

Display location on a map, use google maps, show returned data in static image

The location on a map

Opacity applied to the background color of a div with a for alpha transparency of point three

Text overflow ellipsis property

Select some text on the web page, the text gets background color of blue and color yellow

Set the width and number of columns

View the columns styling on the web page

Default Success Warning Important Info Inverse
B S W I ? O