Your SlideShare is downloading. ×
JavaScript (without DOM)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript (without DOM)

335
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
335
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Piyush Katariya corporate.piyush@gmail.com
  • 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.  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. UI Thread Browser DOM Work Queue JS Engine Layout Engine Operating System C P U G P U
  • 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.  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.  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. Function invocation (Direct Invocation)  add(1, 2)  isPalindrome(‘madam’)  this bound to global object !!!
  • 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. 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. 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. 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.  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.  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.  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.  It’s a LIVE chain
  • 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. 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. 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. 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.  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.  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.  JavaScript : The Good Parts by Douglas Crockford  JavaScript Pattern by Stoyan Stefanov  Wikipedia.org
  • 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. Thank You

×