Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Thursday, December 27, 2012

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

Saturday, March 24, 2012

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() {
    $('#example').dataTable();
});​
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

Monday, January 2, 2012

Codeacademy

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

image

Codeacademy Ruby Console

image


Codeacademy Python Console

image


Intro to codeacademy:

Thursday, December 29, 2011

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:
image
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
   5:   
   6:          var o2 = { x: 3 }; //create object and initialize property
   7:   
   8:          //property can store any javascript values
   9:          var o3 = {
  10:              first: o2,
  11:              second: function (){ return 5;}
  12:          };
  13:   
  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">
   2:      
   3:          var o1 = {};
   4:          o1.valueOf === "object Object"; // Q: where does the 'valueOf' come from? Ans: it comes from the prototype object
 

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

image
 
   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.

image

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

image



   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.

image

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">
   2:   
   3:          //data property can’t intercept reads/writes
   4:          var bankAccount = {
   5:              balance: 1257
   6:          };
   7:   
   8:          //accessor properties can intercept reads/writes
   9:          var bankAccount2 = {
  10:              get: function (){ return this._value; },
  11:              set: function (val){ this._value = val; }
  12:          };
  13:   
  14:      </script>


Objects have descriptors associated with each property


   1:       <script type="text/javascript">
   2:   
   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:          };
  10:   
  11:          //accessor descriptors
  12:          var obj2 = {
  13:              get: function location(){ },
  14:              set: function location(){ },
  15:              enumerable: true,
  16:              configurable:true
  17:          };
  18:   
  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.

image


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

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

Functions

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:          }
   5:   
   6:          var sum2 = function (x, y) { //anonymous function expressions. returned value is stored in a variable
   7:              return x + y;
   8:          }
   9:   
  10:          var sum3 = sum; // the name of the function refers to the function value - sum
  11:   
  12:          function wrap(f) { //function can be passed to other functions
  13:              return f();
  14:          }
  15:   
  16:          warp(function (){ return 5;});
  17:   
  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.

image








Functions have special rules for this


   1:          var obj = {
   2:              sum: function (x, y){ return x + y;}
   3:          }
   4:   
   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:          }
   5:   
   6:          var upen = new Person("Upendra", "Rao");
   7:   
   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:          }
   4:   
   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:          })();
   5:   
   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);
   7:   
   8:          outer = "reset outside";


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

Functions Summary

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

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

new
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’.

Closures
Useful for information hiding, scoping, isolation.

Thursday, May 26, 2011

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.

image

image

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.

image

image

dependentObservable updates the view model when the dependencies change.

image

image

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.

image

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

image

Create a jQuery template to render the data.

image

Result:

image

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

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

image

use push to add an element to an array.

Result:

image

Let’s track changes by adding a date element

image

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.

image

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

image

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

Result:

image

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.

image

Result:

image

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.

image

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

image

Result":

image

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

image

Result:

image

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.

image

Result:

image

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

image

Result:

image

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.

image

save method:

image

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.

image

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.

image

Result:

image

Thursday, May 19, 2011

JavaScript and jQuery

Good video on JavaScript and JQuery by John Resig



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

function Resig(name)
{
   this.firstName=name;
}

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

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

Closure:
function Ninja(){
  var slices=0;
  this.getSlices = function(){
     return slices;
   };
  this.slice=function(){
     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>
document.getElementsByTagName("div");

<div id="test"> </div>
document.getElementsById("test");

removeChild();
appendChild();
insertBefore();

..... 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.

Example:
$("div").addClass("special");

$ is a jQuery Object.

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

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

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

$("#body");
find items by ID

$("div.contents");
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.

$("div:has(div)");
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)

$("a#open").click(function(){
   $("#menu").show();
   return false;
});

jQuery makes heavy use of anonymous functions.

Events:
$("form").submit(function(){
   if($("$input#name").val()=="")
      $("span.help".show());
});

$("a#open").click(function{
   $("#menu").show();
   return false;
});

Animations:
$("#menu".slideDown("slow"));

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

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

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

Chaining:
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:
a=1;
b=2;
c=3;

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

books:

Udemy