Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Java script unleashed


Published on

Presentation given in Open House at ness technologies

Published in: Education
  • Login to see the comments

Java script unleashed

  1. 1. Dibyendu Shankar Tiwary Javascript Unleashed (Javascript that you need to know but might not!!)
  2. 2. <ul><li>What is Javascript ? </li></ul>Introduction
  3. 3. <ul><li>It makes the wall to talk </li></ul>Introduction
  4. 4. <ul><li>What’s behind the scene? </li></ul>Introduction
  5. 5. Equation
  6. 6. I know it all Tell me something which I don’t know
  7. 7. Why are we here? <ul><li>JavaScript as a prototype-based language </li></ul><ul><ul><li>JavaScript Objects Are Dictionaries </li></ul></ul><ul><ul><li>JavaScript Functions Are First Class </li></ul></ul><ul><ul><li>Constructor Functions but No Classes </li></ul></ul><ul><ul><li>Prototypes </li></ul></ul><ul><li>Object-oriented programming with JavaScript </li></ul><ul><ul><li>Static Properties and Methods </li></ul></ul><ul><ul><li>Closures </li></ul></ul><ul><ul><li>Simulating Private Properties </li></ul></ul><ul><ul><li>Inheriting from Classes </li></ul></ul><ul><li>Coding tricks with JavaScript </li></ul><ul><ul><li>Simulating Namespaces </li></ul></ul><ul><ul><li>Classes and Reflection </li></ul></ul><ul><li>Future of Javascript </li></ul><ul><ul><li>Should You Code JavaScript This Way? </li></ul></ul><ul><ul><li>Putting It into Perspective </li></ul></ul>
  8. 8. <ul><li>JavaScript Objects Are Dictionaries </li></ul><ul><ul><li>Code Demo </li></ul></ul><ul><li>JavaScript Functions Are First Class </li></ul><ul><ul><li>Code Demo </li></ul></ul><ul><li>Constructor Functions but No Classes </li></ul><ul><ul><li>Code Demo (Dog spot = new Dog(); ) </li></ul></ul><ul><li>Prototypes (I deserve to be a header of a slide) </li></ul><ul><ul><li>As you wish, but be sure you gonna use it. </li></ul></ul>JavaScript as a prototype-based language
  9. 9. <ul><li>Every Function’s Prototype Has a Constructor Property  </li></ul><ul><ul><li>The prototype object is a central concept in object-oriented programming with JavaScript. </li></ul></ul><ul><ul><li>Name comes from the idea that in JavaScript, an object is created as a copy of an existing example (that is, a prototype) object </li></ul></ul><ul><ul><li>every function has a property named &quot;prototype&quot; that refers to a prototype object </li></ul></ul><ul><ul><li>prototype object in turn has a property named &quot;constructor,&quot; which refers back to the function itself (Confused ??) </li></ul></ul><ul><ul><li>Code Demo : var buddy = new Dog(“Buddy“); </li></ul></ul>Prototypes (Happy  )
  10. 10. <ul><li>Objects Appear to Have Their Prototype’s Properties </li></ul><ul><ul><li>Code Demo </li></ul></ul>Prototypes (Another slide conquered)
  11. 11. <ul><li>Resolving toString() Method in the Prototype Chain </li></ul>Prototypes (Are you kinda hittin on me ??)
  12. 12. <ul><li>Inheriting from a Prototype </li></ul><ul><ul><li>Changes made to a prototype object are immediately visible to the objects that inherit from it, even after these objects are created. </li></ul></ul><ul><ul><li>If you define a property/method X in an object, a property/method of the same name will be hidden in that object’s prototype. For instance, you can override Object.prototype’s toString method by defining a toString method in Dog.prototype. </li></ul></ul><ul><ul><li>Changes only go in one direction, from prototype to its derived objects, but not vice versa. </li></ul></ul><ul><ul><li>Code Demo </li></ul></ul>Prototypes (Name the session after me)
  13. 13. <ul><li>Static Properties and Methods </li></ul><ul><ul><li>Code Demo </li></ul></ul><ul><li>Closure </li></ul><ul><ul><li>A closure is a runtime phenomenon that comes about when an inner function (or in C#, an inner anonymous method) is bound to the local variables of its outer function. </li></ul></ul><ul><ul><li>Confused?? ( Code demo is for the rescue) </li></ul></ul><ul><li>Simulating Private Properties </li></ul><ul><ul><li>A local variable in a function is normally not accessible from outside the function </li></ul></ul><ul><ul><li>However, when that local variable is captured by an inner function’s closure, it lives on. </li></ul></ul><ul><ul><li>Code Demo </li></ul></ul><ul><ul><li> </li></ul></ul><ul><li>Inheriting from Classes (Even I deserve a slide, Ok whatever!!) </li></ul>Oops in Javascript
  14. 14. <ul><li>Constructor functions and prototype objects allow you to simulate classes </li></ul><ul><li>Can simulate private members of a class using closures </li></ul><ul><li>You haven’t seen how you can derive from your class </li></ul><ul><ul><li>A local variable in a function is normally not accessible from outside the function </li></ul></ul><ul><ul><li>However, when that local variable is captured by an inner function’s closure, it lives on. </li></ul></ul><ul><ul><li>Code Demo </li></ul></ul><ul><ul><li> </li></ul></ul><ul><li>You have a base class Pet, with one derived class Dog. </li></ul><ul><ul><li>Stop talking show me the code. </li></ul></ul>Inheritance from Classes (Happy  )
  15. 15. <ul><li>Simulating Namespaces </li></ul><ul><ul><li>In C++ and C#, namespaces are used to minimize the probability of name collisions </li></ul></ul><ul><ul><li>Code Demo </li></ul></ul><ul><li>Classes and Reflection </li></ul><ul><ul><li>there is no way to know the name of a function. </li></ul></ul><ul><ul><li>it wouldn’t help us in most situations as a class constructor is typically built by assigning an anonymous function to a namespaced variable. </li></ul></ul><ul><ul><li>The reflection APIs in ASP.NET AJAX work over any type. </li></ul></ul>Coding tips and Tricks in JavaScript
  16. 16. <ul><li>Should You Code JavaScript This Way? </li></ul><ul><ul><li>Should you code in JavaScript the way you code in C# or C++? </li></ul></ul><ul><ul><li>Best practices for one language may not be the best practices for another </li></ul></ul><ul><ul><li>Maybe, as Douglas Crockford says in his article &quot; Prototypal Inheritance in JavaScript &quot;, the JavaScript way of programming is to make prototype objects, and use the simple object function below to make new objects, which inherit from that original object: </li></ul></ul><ul><ul><li>function object(o) { function F() {} F.prototype = o; return new F(); } </li></ul></ul><ul><li>Putting It into Perspective </li></ul><ul><ul><li>I have found my JavaScript journey a rewarding experience. </li></ul></ul><ul><ul><li>Although not entirely without frustration along the way </li></ul></ul><ul><ul><li>Registering Class Hierarchies and Calling Base. </li></ul></ul><ul><ul><li>It’s a journey not a destination. </li></ul></ul>Future of Javscript
  17. 17. Thank you ( If you are confused now I have done a good job, if not then an exceptional job  )