JavaScript (without DOM)

658 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
658
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript (without DOM)

  1. 1. Piyush Katariya corporate.piyush@gmail.com
  2. 2.  First appearance in Netscape Navigator 2.0 in Sept 1995  Microsoft launched JScript as alternative in Aug 1996  Request for Standardization in Nov 1996  ECMA-262 specification in June 1997  Third edition in Dec 1999  Fifth edition in Dec 2009  Sixth edition expected by mid 2015  Today – Preferred programming language of the Web  Not limited to Web Browsers – node.js, ringo.js
  3. 3.  Imperative, Object Oriented, Functional, and Prototypal  Dynamic  Single Threaded  Asynchronous, Event Driven  Sandboxed  God created the earth in 7 days. Brendan Eich created JavaScript in 10 days. 
  4. 4. UI Thread Browser DOM Work Queue JS Engine Layout Engine Operating System C P U G P U
  5. 5.  Never mind ! Everything is a var  var stringVariable = “JavaScript”  var booleanVariable = true  var intVariable = 10  var floatVariable = 10.5  Numbers are treated as float  null !== undefined  Falsy values – 0 (zero), NaN, ‘’, false, null, undefined
  6. 6.  Object is collection of key–value pairs with optional hidden link to prototype object  Instantiation  var obj = new Object()  var objShortHand = { }  var objWithInitialValue = { “property” : “value”}  var objTheUltimate = Object.create(parentObject)  Access  obj.property  obj[“property”]  obj.nestedObj.property  obj[“nestedObj”].property  Runtime Mutation  obj.newProperty = “value”  obj.nestedObj = { “property” : “value”}  obj.nestedObj[“property”] = “different value”  Deletion  delete obj.property
  7. 7.  Callable first class citizen  Linked to Function.prototype linked to Object.prototype  Can be passed and return as object  No Overloading  Definitions  var add = new Function(‘a’, ‘b’, ‘return a + b’);  var add = function (a, b) { return a + b; };  function add(a, b) { return a + b;}  Blessed with  this  arguments
  8. 8. Function invocation (Direct Invocation)  add(1, 2)  isPalindrome(‘madam’)  this bound to global object !!!
  9. 9. Method Invocation  Method => a function stored as property of object  this bound to method holder object var obj = { value : 0, //zero increment : function (inc) { this.value += typeof inc === ‘number’ ? inc : 1; } } obj.increment(1) ; // 1 obj.increment(2); // 3
  10. 10. var someClass = function (property) { this.publicProperty = property; var privateVariable = “value”; this.publicMethod = function () { //code for method definition }; var privateMethod = function () { //code for method definition }; // return this; }
  11. 11. Constructor Invocation  JS way of creating objects OO style var EmployeeClass = function (firstName, designation) { this.firstName = firstName; this.designation = designation; }; EmployeeClass.protoype.getFirstName = function () { return this.firstName;}; EmployeeClass.protoype.getDesignation = function () { return this.designation;}; var employee = new EmployeeClass(‘Piyush’, ‘Software Dev’) employee.getFirstName(); // ‘Piyush’ employee.getDesignation(); // ‘Software Dev’
  12. 12. Apply Invocation (Reflective Invocation) var argsArray = [2, 3]; var sum = add.apply( null, argsArray); // 3 //OR var sum = add.call( null, 2, 3); //3 var firstName = EmployeeClass.getFirstName.apply(empObject); //OR var firstName = EmployeeClass.getFirstName.call(empObject);
  13. 13.  Facilitates late(runtime) binding Function.prototype.bind = function (objToBind) { var self = this; return function () { var argArr = Array.prototype.slice.call(arguments); return self.apply(objToBind || null, argArr); }; }
  14. 14.  Use when some of the inputs to function are always known Function.prototype.curry = function () { var initArgs = Array.prototype.slice.call(arguments); var self = this; return function () { var args = Array.prototype.slice.call(arguments); return self.apply(null, initArgs.concat(args)) } };
  15. 15.  Never ever ever make use for loop again while operating on Arrays !  var names = [‘Piyush’, ‘James’, ‘Shwetha’, ‘Kapil’, ‘Praveen’, ‘Matt’, ‘Nag’, ‘Shabina’]  map => conversion function which get executed for every element  names.map(function(name){ return name.substring(0, 3); })  filter => logical condition function to consider only sub set of array  names.filter(function(name){ return name.indexOf(‘i’) > 0; })  reduce => compute result by considering each element with optional initial value  names.reduce(function(name1, name2) { return name1 + ‘ , ’ + name2; })  names.reduce(function(name1, name2) { return name1 + ‘ , ’ + name2; }, ‘ Madhu’)  sort => comparison function to order the element in custom fashion  names.sort()  names.sort(function(name1, name2) { return name1 < name2; })  forEach => alternative to for loop to just focus on operation  names.forEach(function(name) { console.log(name); })  every => does every element in array satisfies the logical condition  some => does at least one element in array satisfies the logical condition  reduceRight => same as reduce but iterates array from last to first index
  16. 16.  It’s a LIVE chain
  17. 17.  Avoid global variables and functions  Use parseInt(obj, 10)  eval function is evil !  ‘===’ and ‘!== ’ for comparison  Never use void, becoz its operator !  Always prefix var with variable declaration  Use semicolons everywhere at EOL  Never augment built in objects  Consider underscore.js as default choice  Use JSLint for code inspection  And of course above all, Do Meditate ! 
  18. 18. var clockOnce = setTimeout(fn, delay)  Execute function <fn> after <delay> milliseconds  Queue function <fn> to execute after <delay> milliseconds  Used to divide highly computationally complex(CPU bound) tasks  Cancellation => clearTimeout(clockOnce) var timer = setInterval(fn, delay)  Execute function <fn> after every <delay> milliseconds  Queue function <fn> to execute after every <delay> milliseconds  Cancellation => clearInterval(timer)
  19. 19. var counterModule = ( function( ) { var privateCount = 0; function changeBy(val) { return privateCount += val; } return { increment : function() { changeBy(1); }, decrement : function() { changeBy(-1); }, currentValue : function() { return privateCount; } }; } ) ( );
  20. 20. var Singleton = ( function () { var instance; function createInstance() { var object = new Object("I am the only instance"); return object; } return { getInstance : function () { if (! instance) { instance = createInstance(); } return instance; } }; })();
  21. 21.  Why ?  Higher level abstraction and constructs  Type safety  Declarative - More focus on WHAT need to be done instead of HOW  Stick to one worthy language for end to end application stack  Usage  Code in your own language  Compile it into JS (either offline or in browser itself )  Run in browser  Support debugging for original language in browser using source maps  Options  CoffeeScript  TypeScript  Dart  ScalaJS  PythonJS  ClojureScript  More at this link
  22. 22.  Process of removing all unnecessary characters and modifying source code spread over single or multiple file without changing its functionality  Advantages  Single artifact for whole application  Reduced size of code  Obfuscated code  Applicable for JS and CSS
  23. 23.  JavaScript : The Good Parts by Douglas Crockford  JavaScript Pattern by Stoyan Stefanov  Wikipedia.org
  24. 24.  jQuery - for DOM access and manipulation  Node.js – server side JS  Require.js - async module loader  Backbone.js – client side MVC  Angular.js – powerpack SPA framework
  25. 25. Thank You

×