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