Just another Blog

My Technical, Professional and at times Personal Blog

Showing posts with label JavaScript. Show all posts

JavaScript Resources–FREE Videos, Books, Training and more

There has never been a better time to learn JavaScript. Whether you are a novice or an expert JavaScript Developer, there is always something to learn. Here is a reference of JavaScript videos, books and training I created for myself. If you know of any more, feel free to leave me a comment and I will add it to this list.
Happy Learning.
# Resource Name Resource Topic Resource URL
1 Javascript Fundamentals: Development for Absolute Beginners JavaScript http://channel9.msdn.com/Series/Javascript-Fundamentals-Development-for-Absolute-Beginners
2 JavaScript: The Language JavaScript http://channel9.msdn.com/events/mix/mix11/HTM06
3 JavaScript: The Developer Experience JavaScript http://channel9.msdn.com/Events/TechEd/NorthAmerica/2012/DEV308
4 Writing Maintainable JavaScript JavaScript http://channel9.msdn.com/events/mix/mix11/EXT23
5 Developing HTML5 Apps HTML5 http://channel9.msdn.com/Series/MVA-Jump-Start
6 JavaScript Core Capabilities JavaScript http://channel9.msdn.com/Series/MVA-Jump-Start/Developing-HTML5-Apps-Jump-Start-04a-JavaScript-Core-Capabilities-Part-1
7 JavaScript Core Capabilities JavaScript http://channel9.msdn.com/Series/MVA-Jump-Start/Developing-HTML5-Apps-Jump-Start-04b-JavaScript-Core-Capabilities-Part-2
8 JavaScript Gotchas JavaScript http://channel9.msdn.com/Events/aspConf/aspConf/JavaScript-Gotchas
9 Using JavaScript to Build HTML5 Applications JavaScript http://channel9.msdn.com/Events/TechEd/NorthAmerica/2011/DEV347
10 Modern JavaScript JavaScript http://channel9.msdn.com/Events/Build/2012/3-014
11 Building Metro style Apps with HTML and JavaScript JavaScript http://channel9.msdn.com/Events/TechEd/NorthAmerica/2012/DEV366
12 Interactive Panel: JavaScript JavaScript http://channel9.msdn.com/events/MIX/MIX11/RES02
13 ECMAScript 5: The New Parts JavaScript http://channel9.msdn.com/events/mix/mix11/EXT13
14 Building HTML and JavaScript Apps with KnockoutJS and MVVM JavaScript http://channel9.msdn.com/Events/TechEd/NorthAmerica/2012/DEV361
15 JavaScript Tutorials Playlist JavaScript http://www.youtube.com/course?list=EC46F0A159EC02DF82
16 jQuery Tutorials Playlist jQuery http://www.youtube.com/course?list=EC6B08BAA57B5C7810
17 Google I/O 2011: Learning to Love JavaScript JavaScript http://www.youtube.com/watch?v=seX7jYI96GE
18 John Resig: Javascript and jQuery jQuery http://www.youtube.com/watch?v=GKfHdOrR3lw
19 JavaScript Weekly Subscription JavaScript http://javascriptweekly.com/
20 32 Talks from the JS.everywhere() 2012 Conferences

JavaScript http://www.youtube.com/playlist?list=PL2PF2oGPokReHxddTOGehBS_w8-prtOBE
21 Bocoup JS Screencasts JavaScript http://training.bocoup.com/screencasts/
22 Building High-Performing JavaScript for Modern Engines JavaScript http://channel9.msdn.com/Events/Build/2012/4-000
23 JS Conf EU Videos JavaScript https://www.youtube.com/jsconfeu
24 Scripted: A JavaScript editor from VMware JavaScript http://blog.springsource.org/2012/10/11/scripted-a-javascript-editor-from-vmware/
25 Pure JavaScript JavaScript http://vimeo.com/49384334
26 Zen and the Art of TDD

JavaScript http://vimeo.com/49092644
27 Make JavaScript Testing Fun With Testem JavaScript http://www.youtube.com/watch?v=I0Py_tqCkTo&list=UUd-EhXGbXSozuzsAAdPIn3A&index=8
28 Javascript: Your New Overlord JavaScript http://www.youtube.com/watch?v=Trurfqh_6fQ
29 Douglas Crockford: The JavaScript Programming Language . JavaScript http://www.youtube.com/watch?v=v2ifWcnQs6M
30 JavaScript WTFs JavaScript http://www.youtube.com/watch?v=WkFoGp1ECGE&list=PLgyU3jNA6VjTbotteFzpoooyJiNlAMRpx
31 Free JavaScript Books JavaScript http://jsbooks.revolunet.com/
32 Learn to Code for Free at Codeacademy.com JavaScript http://www.codecademy.com/#!/exercises/0

Enhance your HTML tables with DataTables jQuery Plugin

Who doesn’t like formatted HTML tables, especially when the table is large and you wish there was an easy way to format, enhance and search the data within. Well, look no further than DataTables. DataTables is a jQuery plugin that will essentially enable you to do just that.

Test Drive the table below:


$(document).ready(function() {
You can disable features that you don’t wish to use.

$(document).ready(function() {
                $('#example').dataTable( {
                    "bPaginate": false,
                    "bLengthChange": false,
                    "bFilter": true,
                    "bSort": false,
                    "bInfo": false,
                    "bAutoWidth": false } );
            } );

The page controls which are used by default in DataTables (forward and backward buttons only) are great for most situations, but there are cases where you may wish to customize the controls presented to the end user. This is made simple by DataTables through its extensible pagination mechanism. There are two types of pagination controls built into DataTables: two_button (default) and full_numbers. To switch between these two types, use the sPaginationType initialization parameter.

$(document).ready(function() {
    $('#example').dataTable({"sPaginationType": "full_numbers"});

You can create custom search/filter for each of the columns in the table:

            var asInitVals = new Array();
            $(document).ready(function() {
                var oTable = $('#example').dataTable( {
                    "oLanguage": {
                        "sSearch": "Search all columns:"
                } );
                $("tfoot input").keyup( function () {
                    /* Filter on the column (the index) of this element */
                    oTable.fnFilter( this.value, $("tfoot input").index(this) );
                } );
                 * Support functions to provide a little bit of 'user friendlyness' to the textboxes in 
                 * the footer
                $("tfoot input").each( function (i) {
                    asInitVals[i] = this.value;
                } );
                $("tfoot input").focus( function () {
                    if ( this.className == "search_init" )
                        this.className = "";
                        this.value = "";
                } );
                $("tfoot input").blur( function (i) {
                    if ( this.value == "" )
                        this.className = "search_init";
                        this.value = asInitVals[$("tfoot input").index(this)];
                } );
            } );
These are just a few features that I have personally worked with. There is a lot more you can do with the jQuery DataTable plugin. Checkout the full range of demos here


Thinking of building some new skills this year? How about learning to code for free in 2012? Then (http://www.codecademy.com) is just the site for you. Codecademy Labs is a place for you to program in Ruby, Python, and JavaScript online without downloading a code editor or IDE. Share your programs with friends and use your knowledge from Codecademy lessons!

With developments in JavaScript gaining steam and great support by Microsoft and Google in enhancing the JavaScript engine, now is the best time to learn to JavaScript. Visual Studio 2011 now has full support for building Metro Style Apps using JavaScripts. Build dashing websites or blogs with a little JavaScript, HTML5 and CSS3.

Here is a great introduction to HTML5, JavaScript and CSS3 to whet your appetite:

Codeacademy JavaScript Console


Codeacademy Ruby Console


Codeacademy Python Console


Intro to codeacademy:

JavaScript–the language

Great presentation on JavaScript by Luke Hoban here. I took some notes from the presentation. You can download slides from here.
JavaScript Evolution:
JavaScript’s key ideas:
  1. C-style syntax
  2. Dynamic typing – there is no compile time, hence no statically typed
  3. Objects – almost everything in JavaScript is Objects. There are three types of Objects: User defined ({x:10}), host defined (document), built-in (object, array, function, regexp, string, number, date…)
  4. Functions – functions are first class
  5. Prototypal Inheritance – glue that binds lot of these ideas
JavaScript Objects
Objects are String keyed Property Bags – basically these are very flexible data structures. You can build other data structures on top of this – that is Objects are Mutable. Objects support prototypes, which allows for sharing and inheritance (parent-child relationships). Objects contain properties such as: descriptors, inspection, configuration, accessor.
   1:      <script type="text/javascript" >
   2:          var o1 = {}; //create new object
   3:          o1.x = 3; //object property assignment
   4:          o1.x = 4; //modify property
   6:          var o2 = { x: 3 }; //create object and initialize property
   8:          //property can store any javascript values
   9:          var o3 = {
  10:              first: o2,
  11:              second: function (){ return 5;}
  12:          };
  14:          //Dot (.) and Index[] are the same 
  15:          o2.x === 3;
  16:          o2["x"] === 3;
  17:          o2["the answer!"] = 42 //but index refers to full range of property
  18:      </script>

 Objects have Prototype

   1:      <script type="text/javascript">
   3:          var o1 = {};
   4:          o1.valueOf === "object Object"; // Q: where does the 'valueOf' come from? Ans: it comes from the prototype object

   6:          var o2 = { valueOf: function (){ return 10; } }
   7:          o2.valueOf() === 10; // can be overridden by hiding

   9:      </script>

Objects Inherit from other Objects

In the example below, object point3d is inherited from object point2d by using Object.Create method introduced in ES5.


Point3d is a prototype of Point2D which is a prototype of an Object:


   1:          var location = Object.create(point2d);
   2:          location.name = "Mandalay Bay";

Objects Inherit from other objects unlike class based system where types inherit from types.


The advantages of prototypes is that you can share a lot of things between different instances and just have one copy of the data in a prototype.

Objects can have data properties and accessor properties

   1:      <script type="text/javascript">
   3:          //data property can’t intercept reads/writes
   4:          var bankAccount = {
   5:              balance: 1257
   6:          };
   8:          //accessor properties can intercept reads/writes
   9:          var bankAccount2 = {
  10:              get: function (){ return this._value; },
  11:              set: function (val){ this._value = val; }
  12:          };
  14:      </script>

Objects have descriptors associated with each property

   1:       <script type="text/javascript">
   3:          //data descriptors
   4:          var obj1 = {
   5:              value: 47,
   6:              writable: false, //can the value be changed
   7:              enumerable: true, //will the property be enumerated by "for..in"?
   8:              configurable:true //can the property descriptor be changed later?
   9:          };
  11:          //accessor descriptors
  12:          var obj2 = {
  13:              get: function location(){ },
  14:              set: function location(){ },
  15:              enumerable: true,
  16:              configurable:true
  17:          };
  19:      </script>

Launch F12 tool by pressing F12 key using Internet Explorer. In the console, try the following:

   1:          var o = { hello: 5 };
   2:          Object.getOwnPropertyDescriptor(o, "hello");
   3:          Object.getOwnPropertyDescriptor(Date, "now"); 

Note that the enumerable data property is true for o.hello and false for Date.now.


Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML");

    get :  function innerHTML() {     [native code] } ,
    set :  function innerHTML() {     [native code] } ,
    enumerable : true,
    configurable : true


In JS, Functions are first-class values.

   1:      <script type="text/javascript">
   2:          function sum(x, y) { //functions can be defined with function declarations
   3:              return x + y;
   4:          }
   6:          var sum2 = function (x, y) { //anonymous function expressions. returned value is stored in a variable
   7:              return x + y;
   8:          }
  10:          var sum3 = sum; // the name of the function refers to the function value - sum
  12:          function wrap(f) { //function can be passed to other functions
  13:              return f();
  14:          }
  16:          warp(function (){ return 5;});
  18:      </script>

You can think of functions as procedures as in C or C# language. But you can also think of them as values or objects that you can pass around.

Functions are Objects

Since functions are objects, they have prototypes that are inherited from object prototypes.

   2:          function sum(x, y) { //functions can be defined with function declarations
   3:              return x + y;
   4:          }
//Note that sum function contains a length and a prototype property.

   1:  sum.length===2; //returns true
   2:  Object.getPrototypeOf(sum)===Function.prototype; //returns true

The sum function inherits from Function.prototype which inherits from Object.prototype.


Functions have special rules for this

   1:          var obj = {
   2:              sum: function (x, y){ return x + y;}
   3:          }
   5:          obj.sum(2, 3); //returns 5

Property of objects (ex: obj) can be functions (ex: sum). Calls on the receiver objects look like method calls.

   1: var obj2 = {
   2:        offset: 7,
   3:        sum: function (x, y){ return x + y + this.offset;}
   4:        }
   5:  obj2.sum(3, 4); //returns 14

   1:  However Note:
   2:  var f = obj2.sum;
   3:  f(3, 4); //returns NaN 
   4:  f.call(obj2, 3, 4); //returns 14

‘this’ operator becomes the object that is on the left-hand side of the dot (.). However if you assign a function to another object, then ‘this’ becomes the new object. In the above example f(2,3) will return NaN because this.offset is not set inside f. To avoid returning NaN, use Function.prototype.call to specify the ‘this’ parameter.

Functions have special behavior when invoked with ‘new’

   1:          function Person(firstName, lastName) {
   2:              this.firstName = firstName;
   3:              this.lastName = lastName;
   4:          }
   6:          var upen = new Person("Upendra", "Rao");
   8:          upen.firstName+ " " + upen.lastName; //returns "Upendra Rao" 

While we have inheritance of type Prototype, we also have inheritance based on ‘new’ which is somewhere in between Prototype and Class based inheritance. ‘New’ creates a fresh object with prototype set to Person’s Prototype then it calls the Person function with object as ‘this’.

   1:          Person.prototype.getFullName = function () {
   2:              return this.firstName + " " + this.lastName;
   3:          }
   5:          upen.getFullName(); //returns "Upendra Rao"

If we add a new function to a Prototype, you can call that function in every instance of the Prototype created with ‘new’ operator.

Functions have their own variable scope

   1:          (function () {
   2:              var x = 5;
   3:              x === 5;
   4:          })(); //function is defined and call immediately
   5:  x ; //x is undefined

var x is local to the function and hence undefined outside the function.

   1:      var outer = "set outside";
   2:          (function () {
   3:              outer = "set inside";
   4:          })();
   6:          outer; //returns "set inside"

Note above var outer is global to the function, so it can be changed inside the function. The scope is global for the variable.

   1:          //Isolating from changes in outer variables
   2:          var outer = "set outside";
   3:          (function (outer) {
   4:              outer = "set inside";
   5:              setInterval(function (){ alert(outer); }, 3)
   6:          })(outer);
   8:          outer = "reset outside";

If you want to isolate variables explicitly, you need to pass them to the function as shown above.

Functions Summary

Functions are just objects. They are first-class and have prototypes.

‘this’ useful for functions that are going to be used a members associated with a particular object.

Inheritance based on ‘new’ which is somewhere in between Prototype and Class based inheritance. ‘New’ creates a fresh object with prototype set to Person’s Prototype then it calls the Person function with object as ‘this’.

Useful for information hiding, scoping, isolation.

Knockout JavaScript


Awesome presentation on Knockout JavaScript library by Steve Sanderson!

Knockout.js is a Open Source JavaScript Library. Knockout.js provides rich client-side interactivity even those not solved by jQuery. It provides a MVVM patern similar to Silverlight. Knockout does the following: dependency tracking, declarative binding, integrated templating.



Using ko.observable makes it possible to update the UI automatically when the view model changes. If you declare your model properties as observables, it will notify subscribers about changes.



dependentObservable updates the view model when the dependencies change.



In the above example when firstname or lastname changes, the changes are propagated automatically to Full Name.

Tracking Friends of Bert Smith:

Create a Constructor friend – any function can act as a constructor for a class.


Create an observableArray of friends which will notify the view model of changes.


Create a jQuery template to render the data.




Add a button to add “Another” friend and bind a click function to the view model.

<button data-bind=”click: addFriend”> Add Friend</button>


use push to add an element to an array.



Let’s track changes by adding a date element


Result: every time you add a friend, it reruns the whole template as you can see the time changes for all the elements in the template.


But with Knockout, we can update the DOM in a minimum way so that the template runs only for the new elements added.


Note that we are letting Knockout control the iteration for us. $each from the template is no longer needed.



Now let’s say you want to add and remove friends and want to make names of the friends you add editable.

So we will go back to the friends template and add a remove button and assign a “Remove” function on click. Also add an input box and data-bind it with the name of the friend function. Go back to the friend function and add a remove function as shown below.




Now say you want to track your friend if they were on twitter. If they are, you want display that using a check box and an textbox for their twitter name. Add isOnTwitter and twitterName to the friend function.


Go back to the friends template and add a checkbox and textbox with data-binding properties as shown below.




Now you may want the checkbox to appear only when the checkbox is checked.




The above functionality can also be achieved using adding a {{if …}} to a template, but that would mean the rendering the whole template every time the checkbox is clicked. With Knockout JavaScript, you can do this in a minimal way – just means faster, responsive apps.

Now I’d like to know the count of the numbers of friends I have.




Now I want to disable the Add friend button if there are more than 5 friends.




Now I’d like to save the data in JSON (JavaScript Object Notation) format. I can do that by sending an AJAX request to the server. ASP.NET has got a model binding for JSON its going to parse the data automatically by writing very little code. Add a save function to the view model as shown below. Note the use of $.ajax (jQuery) function to post my data to an action method of the MVC app called Save. Convert the data to JSON format using the ko object without observables to be sent to the server.

Add a save button and data-bind it to the save method of the model.


save method:


On the server, we need a controller to handle the request coming from the view. Note that no special parsing of JSON data is needed.


The person class closely resembles the JSON data structure MVC3’s JSON object binder can automatically does the binding for us. No special parsing is needed.




JavaScript and jQuery

Good video on JavaScript and JQuery by John Resig

key learning for my future reference:
Prototype gives you basic 1:1 inheritance and lets you chain functions together.
function People(){}

function Resig(name)

Resig.Prototype=new People();
var john = new Resig("John");

john is an instanceof Resig
john is an instance of People
john is an instance of Object

function Ninja(){
  var slices=0;
  this.getSlices = function(){
     return slices;
var Ninja=new Ninja();
ninja.slice; //works
ninja.getSlices == 1; //works
ninja.slices; //does not work/exist


In the above example, if you try and access a variable external to a function, then it does not work because of the closure between that function and the variable.

In JavaScript, everything is passed as references.

Programming with DOM in JavaScript can be hard. DOM is an object representation of XML structure (in most cases an HTML document).

examples of programming with DOM:
<div> </div>

<div id="test"> </div>


..... hence the need for JavaScript Libraries like jQuery.JavaScript Libraries drastically simplifies DOM and Ajax animations.jQuery (open source) provides simplified APIs to do most of the difficult work in JavaScript by abstracting the user from the horrible cross-browser issues.


$ is a jQuery Object.

jQuery is based on the CSS concept to locate elements to take action against them.

<div id="body">
  <h2> Some Header </h2>
  <div class="contents">
     <p> ... </p>
     <p> ... </p>

$("div") ;
the above jQuery line selects all div tags.

find items by ID

find all div tags with class contents

jQuery has the best selector engine that most browsers support.Use jQuery to easily find things within the document to DO something against them.

$("div > div");
find all divs that are child of other divs.

custom selector returning all divs that have divs inside of them

After you find the element, what do you do next?
  • DOM manipulation (append, prepend, remove)
  • Events (click, hover, toggle)
  • Effects (hide, show, fadeIn, fadeOut)
  • AJAX (load, get, post)

   return false;

jQuery makes heavy use of anonymous functions.


   return false;


$("#body".load("sample.html div > h1"));

returns html:
<div id="body">
   <h1> Hello World! </h1>

$.getJSON("test.json", function(js){
   for (var name in js)
   $("ul").append("<li> + name + </li>");

Actions can be chained together in jQuery
$("div").hide(); //find.action
$("div").hide().css("color", "blue"); //find.action.action
$("div").hide().css("color", "blue").slideDown(); //find.action.action.action

Other benefits of using jQuery
  • fully documented
  • great community
  • tons of plugins
  • small size (14kb)
  • works cross-browsers

jQuery contains a lot of features from Python.Some of the other features include:

destructuring: breaking apart an object (including arrays), grabbing values out of them and transposing them.
[a, b, c]=[1, 2, 3];
is same as:

array comprehension: populate an array of values
[a for (a=1; a<10; a++)]

new way to declare variables: 
let foo=5; // declares the variable foo within a block and not a function


Google+ Followers