JavaScript (without DOM)
0 likes1,018 views
This document provides an overview of the history and evolution of JavaScript. It discusses key dates and specifications including its first appearance in 1995 in Netscape Navigator 2.0 and the standardization process in the late 1990s. The document also covers JavaScript's core features like being dynamic, single-threaded, asynchronous and event-driven. It describes JavaScript's data types, objects, functions and common array methods. Overall, the document presents a comprehensive introduction to JavaScript from its origins to modern usage.
![ 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](https://image.slidesharecdn.com/javascript-130828072902-phpapp02/85/JavaScript-without-DOM-6-320.jpg)
![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);](https://image.slidesharecdn.com/javascript-130828072902-phpapp02/85/JavaScript-without-DOM-12-320.jpg)
![ 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](https://image.slidesharecdn.com/javascript-130828072902-phpapp02/85/JavaScript-without-DOM-15-320.jpg)
JavaScript (without DOM)
- 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