Javascript is a dynamic, loosely typed scripting language with C/Java-like syntax that uses prototypical inheritance rather than classes. It supports objects, arrays, functions, numbers, strings, booleans, null, and undefined data types. Class-like structures can be created using constructor functions and prototypes. Namespacing is important to avoid cluttering the global object. Well-designed widgets separate concerns into small stateful objects and maximize collection usage. JSON is commonly used for data interchange and is faster and less verbose than XML. Popular libraries include jQuery, Prototype, MooTools and YUI for components, widgets and page enhancement.

1. Javascript Top level introduction

2. Agenda What is JavaScript? Types Class like structures Namespacing /global objects Designing widgets JSON Event handling Libraries

3. What is javascript? Dynamic loosely typed scripting language C/Java like syntax Class free, prototypical (copies of other objects) The language is good Browser implementations not so good. Good for reflective/ Introspective techniques

4. Types Object Array function (first-class, only construct with scope) Number String Immutable (like java) Missing methods (i.e. trim()) boolean null undefined ( nullpointer) Detect types using typeof

5. Class like structures Person = function (name,age) { // constructor this.name = name; //class variables this.age = age; }; Person.MALE = “male”; //static variables Person.FEMALE=“female”; Person.prototype = { //methods toString : function (){ return this.name + " " + this.age; } }; var ash = new Person("Ash",23); //instantiations

6. Global object alert(“hi”) window.alert(“hi”) window[“alert”](“hi”); window[“addSelectItemLink”+portletId](linkId,itemId);

7. Do’s and don’ts of Constructors [BAD] var cuboid = new Cuboid(11,22,11,45,11); [GOOD] var cuboid = new Cuboid({ width:11, height:22, depth:11, weight:45 });

8. Namespacing Don’t clutter the global object (window) Namespace !! VYRE = {}; VYRE.Search = {}; VYRE.Basket = {}; VYRE.Linker = function (){ };

9. Bad practices var ob = { prop1:”hi”, prop2:”hi again ” , }; for ( i = 0; i< collection.length; i++); for ( var i = 0; i< collection.length; i++); setTimeout(“performFunction()”,500); setTimeout(performFunction,500); document.write eval

10. Widgets/Complex UI Design Good UI relies on a good domain model Don’t jump straight into visuals Think carefully about event handling Seperate concerns by creating small stateful objects Maximise collection usage Arrays if index and looping is needed Maps (Associative Arrays) for lookups

11. JSON (Javascript notation) In xml <person> <firstName>Subbu</firstName> <lastName>Allamaraju</lastName> </person> JSON ({ &quot;firstName&quot; : &quot;Subbu&quot;, &quot;lastName&quot; : &quot;Allamaraju&quot; });

12. JSON cont.. Is native javascript Is defacto standard for data interchange Is faster and less verbose than xml But more descriptive. JSONstring is a utility for marshalling/unmarshalling Used in ajax framework for cookie management.

13. 3 rd Party Libraries Component based YUI ExtJs Page enhancement JQuery OOP / with visuals Prototype & scripacolous mootools

14. Debugging Firebug(firefox) console.log() profile Breakpoints Visual studio ( ie6/7/8)