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.

Javascript Ks

780 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Javascript Ks

  1. 1. Javascript Top level introduction
  2. 2. Agenda <ul><li>What is JavaScript? </li></ul><ul><li>Types </li></ul><ul><li>Class like structures </li></ul><ul><li>Namespacing /global objects </li></ul><ul><li>Designing widgets </li></ul><ul><li>JSON </li></ul><ul><li>Event handling </li></ul><ul><li>Libraries </li></ul>
  3. 3. What is javascript? <ul><li>Dynamic loosely typed scripting language </li></ul><ul><li>C/Java like syntax </li></ul><ul><li>Class free, prototypical (copies of other objects) </li></ul><ul><li>The language is good </li></ul><ul><li>Browser implementations not so good. </li></ul><ul><li>Good for reflective/ Introspective techniques </li></ul>
  4. 4. Types <ul><li>Object </li></ul><ul><ul><li>Array </li></ul></ul><ul><ul><li>function (first-class, only construct with scope) </li></ul></ul><ul><li>Number </li></ul><ul><li>String </li></ul><ul><ul><li>Immutable (like java) </li></ul></ul><ul><ul><li>Missing methods (i.e. trim()) </li></ul></ul><ul><li>boolean </li></ul><ul><li>null </li></ul><ul><li>undefined ( nullpointer) </li></ul><ul><li>Detect types using typeof </li></ul>
  5. 5. Class like structures <ul><li>Person = function (name,age) { // constructor </li></ul><ul><li>this.name = name; //class variables </li></ul><ul><li>this.age = age; </li></ul><ul><li>}; </li></ul><ul><li>Person.MALE = “male”; //static variables </li></ul><ul><li>Person.FEMALE=“female”; </li></ul><ul><li>Person.prototype = { </li></ul><ul><li>//methods </li></ul><ul><li>toString : function (){ </li></ul><ul><li>return this.name + &quot; &quot; + this.age; </li></ul><ul><li>} </li></ul><ul><li>}; </li></ul><ul><li>var ash = new Person(&quot;Ash&quot;,23); //instantiations </li></ul>
  6. 6. Global object <ul><li>alert(“hi”) </li></ul><ul><ul><li>window.alert(“hi”) </li></ul></ul><ul><ul><li>window[“alert”](“hi”); </li></ul></ul><ul><li>window[“addSelectItemLink”+portletId](linkId,itemId); </li></ul>
  7. 7. Do’s and don’ts of Constructors <ul><li>[BAD] </li></ul><ul><ul><li>var cuboid = new Cuboid(11,22,11,45,11); </li></ul></ul><ul><li>[GOOD] </li></ul><ul><ul><li>var cuboid = new Cuboid({ </li></ul></ul><ul><ul><li>width:11, height:22, depth:11, weight:45 </li></ul></ul><ul><ul><li>}); </li></ul></ul>
  8. 8. Namespacing <ul><li>Don’t clutter the global object (window) </li></ul><ul><li>Namespace !! </li></ul><ul><ul><li>VYRE = {}; </li></ul></ul><ul><ul><li>VYRE.Search = {}; </li></ul></ul><ul><ul><li>VYRE.Basket = {}; </li></ul></ul><ul><ul><li>VYRE.Linker = function (){ }; </li></ul></ul>
  9. 9. Bad practices <ul><li>var ob = { </li></ul><ul><li> prop1:”hi”, </li></ul><ul><li>prop2:”hi again ” , }; </li></ul><ul><li>for ( i = 0; i< collection.length; i++); </li></ul><ul><ul><li>for ( var i = 0; i< collection.length; i++); </li></ul></ul><ul><li>setTimeout(“performFunction()”,500); </li></ul><ul><ul><li>setTimeout(performFunction,500); </li></ul></ul><ul><li>document.write </li></ul><ul><li>eval </li></ul>
  10. 10. Widgets/Complex UI Design <ul><li>Good UI relies on a good domain model </li></ul><ul><li>Don’t jump straight into visuals </li></ul><ul><li>Think carefully about event handling </li></ul><ul><li>Seperate concerns by creating small stateful objects </li></ul><ul><li>Maximise collection usage </li></ul><ul><ul><li>Arrays if index and looping is needed </li></ul></ul><ul><ul><li>Maps (Associative Arrays) for lookups </li></ul></ul>
  11. 11. JSON (Javascript notation) <ul><li>In xml </li></ul><ul><li><person> </li></ul><ul><li><firstName>Subbu</firstName> </li></ul><ul><li><lastName>Allamaraju</lastName> </li></ul><ul><li></person> </li></ul><ul><li>JSON </li></ul><ul><li>({ </li></ul><ul><li>&quot;firstName&quot; : &quot;Subbu&quot;, </li></ul><ul><li>&quot;lastName&quot; : &quot;Allamaraju&quot; </li></ul><ul><li>}); </li></ul>
  12. 12. JSON cont.. <ul><li>Is native javascript </li></ul><ul><li>Is defacto standard for data interchange </li></ul><ul><li>Is faster and less verbose than xml </li></ul><ul><li>But more descriptive. </li></ul><ul><li>JSONstring is a utility for marshalling/unmarshalling </li></ul><ul><li>Used in ajax framework for cookie management. </li></ul>
  13. 13. 3 rd Party Libraries <ul><li>Component based </li></ul><ul><ul><li>YUI </li></ul></ul><ul><ul><li>ExtJs </li></ul></ul><ul><li>Page enhancement </li></ul><ul><ul><li>JQuery </li></ul></ul><ul><li>OOP / with visuals </li></ul><ul><ul><li>Prototype & scripacolous </li></ul></ul><ul><ul><li>mootools </li></ul></ul>
  14. 14. Debugging <ul><li>Firebug(firefox) </li></ul><ul><ul><li>console.log() </li></ul></ul><ul><ul><li>profile </li></ul></ul><ul><ul><li>Breakpoints </li></ul></ul><ul><li>Visual studio ( ie6/7/8) </li></ul>

×