1. 1. March 25, 2011
2. 2. Object Number String Boolean null undefined Function Array etc
3. 3. These are all (basically) the same: x = 123 var x = 123; window.x = 123; window[x] = 123;
4. 4. These are all the same: function something() { } var something = function() { }; window.something = function() { }; window[something] = function() { };
5. 5. Function references can go in variables Invoke it with () var x = function(value) { return value + 1; }; var y = x(123);
6. 6. function doSomething(x) { return x + 1; } function somethingElse(myFunction) { return myFunction(123); } var x = somethingElse(doSomething);
7. 7. var x = (function(){ })(); 1. var x = functioncall(); 2. var x = (call that returns function)(); 3. function() { }
8. 8. Objects are basically dictionaries Objects have named properties myObject.name = tom; myObject[name] = tom; Arrays are just objects that allow you to access properties by numeric index Functions are derived from Object, so they have properties too
9. 9. No classes in JavaScript, just instances Creating an instance: var myObject = new Object(); - or - var myObject = { };
10. 10. var myObject = new Object(); myObject.prop1 = value; myObject.prop2 = 123l - or - var myObject = { prop1 : value, prop2 : 123 };
11. 11. Space saver for initializing objects Great way to pass multiple optional parameters to functions The basis for JSON
12. 12. Globals are awful Crockford Namespace pollution Easy to redefine when you dont mean to Leads to really long variable/function names Performance can suffer Too many variables to look through Everything is hanging out there No encapsulation/information hiding
13. 13. Standard JavaScript pattern Work just like in .Net Allows organization Prevents namespace pollution/collision
14. 14. JS doesnt have real namespaces We simulate them with nested objects MediQuant.Web.Controls.Grid.update(); Each level is an instance of an object MediQuant = { }; MediQuant.Web = { }; MediQuant.Web.Controls = { }; registerNamespace() does this for us You dont have to worry about declaration order
15. 15. Standard JavaScript pattern Singletons Like our pages and lightboxes Public interface Methods Properties Private members Methods Properties
16. 16. var Module = { }; Module.method = function() { }; Module.property = 0; But More to write You dont get private members
17. 17. Start with Object Literal Notation for the public interface: var Module = { method : function(){ }, property : 0 };
18. 18. Use a self-executing function: var Module = (function() { return ( { method : function(){ }, property : 0 }); })();
19. 19. var Module = (function() { var private = tom; return ( { method : function(param) { return paramt + private + this.property; }, property : 0 }); })();
20. 20. var Module = (function() { var private = tom; return ( { method : function(param) { var result = internal(param); return result + private + this.property; }, property : 0 }); function internal(value) { return value + 1; } })();
21. 21. Module after execution: var Module = { method : function(param) { var result = internal(param); return result + private + this.property; }, property : 0 };
22. 22. Public object myMethod( ) { string private = tom; return new object(); } object abc = myMethod();
23. 23. In normal languages, local variables are placed on the stack and disappear after the function exits. In JavaScript, when you define a function inside of another function, the function gets two things: The code for the function The current execution context
24. 24. This gives us a closure private and internal() are part of the execution context for method() They stick around for the life of method()