Javascript the good parts

/*

  var rm_a = /a*/.match(s);

*/

Web Technologies

JavaScript

                function Person(firstname) {

                        this.firstname=firstname;

                }

                myFather=new Person("SeethaRamaiah");

                var personObj = {

                        firstname: "John",

                }

        

        myObject.myfield = “something”;

        myObject['myfield'] = “something”;

var messageBody = document.createTextNode(messageText);

an alternative for above string that is not possible in XML DOM

isuserMessageElement.innerHTML = messageText;

Best Practices, Issues, Learnings

Object Hierarchies to Organize JavaScript Objects to Avoid Name Collision.

        var BLUEPRINTS = new Object();

        // define Cart under BLUEPRINTS

        BLUEPRINTS.Cart = function () {

                this.items = [];

        }

Use object literals as flexible function parameters

Usage of �prototype� property

Load JavaScript On Demand

Separation of content, CSS, and JavaScript        

Reduce the size of JavaScript file

        JSMin

Use of Closures

There should be no comma after last member in an object.IE is very Sensitive regarding above

The variables and functions under a function are private,cannot be accessed from other methods or objects. In case of closures the inner function is returned.

function xtz(){

        var x=0;

        function vv(){            

        }

}

x and vv are private

feba ={

        add:__ADD__.bind(this),

        objects:[]

}

In above case this refers to the object from which the add method is called.

feba ={

        add:function(){

                __ADD__.bind(this);

        },

        objects:[]

}

//In this case  this refers to feba object itself

Objects can have only member variables and member functions i.e only name value pairs

Every Reference of global object in IE should be prefixed with window

        eg:window.console etc

in json we don't have a selector as below

        Features.Feature[name='autocomplete']

For iterating over an array object ,Avoid using For..in.

For..in will loop over properties of the object.Use regular for loop.

Found the above thing while resolving below issue

Issue :

404 Errors(Resource Not Found) for certain Prototype functions.

Cause:

            Server Request  is raised for some prototype functions.

o        In cooltree.js one of the function is using For...In statement for iterating over an array type object.

?        The For...in statement loops through the elements of an array or through the properties of an object

o        Prototype.js is extending the Array ,providing certain properties.

So  now For..in statement is trying to iterate over the properties i.e. the functions which are provided by prototype.js .

o        The function in cooltree.js which  is using that For..in statement for iterating over an array is creating image and setting the src with the iterated value .It is setting the src with  properties of the Array object which are provided by prototype.js

Previous Code

------------------

arg is an array object

function pldImg(arg){

for(var i in arg){

var im=new Image();im.src=arg[i]

}

}

FIX:

Iteration is done using  regular for statement instead of For..in statement

Code after Fix

----------------

function pldImg(arg)

{                

                for(var i=0;i<arg.length;i++){

                               var im=new Image();

                               im.src=arg[i];

                }

}

Closures

---------

        local variables for a function - kept alive after the function has returned, or

        is a stack-frame which is not deallocated when the function returns. (as if a 'stack-frame'

         were malloc'ed instead of being on the stack!)

         

In JavaScript, if you use the function keyword inside another function, you are creating a closure.

There is a critical difference between a C pointer to a function, and a JavaScript reference to

a function. In JavaScript, you can think of a function reference variable as having both a

pointer to a function as well as a hidden pointer to a closure.

         

The following code returns a reference to a function:

function sayHello2(name) {

  var text = 'Hello ' + name; // local variable

  var sayAlert = function() { alert(text); }

  return sayAlert;

}

var say2 = sayHello2('Jane');

say2();

if you declare a function within another function, then the local variables can remain accessible

after returning from the function you called. This is demonstrated above,

because we call the function say2(); after we have returned from sayHello2().

The code that we call references the variable text, which was a local variable of the function

 sayHello2(). The anonymous function can reference text which holds the value 'Jane' because

  the local variables of sayHello2() are kept in a closure.

A closure in JavaScript is like keeping a copy of the all the local variables, just

 as they were when a function exited.It is probably best to think that a closure is always

  created just on entry to a function, and the local variables are added to that closure.

  A new set of local variables is kept every time a function with a closure is called

   (Given that the function contains a function declaration inside it, and a reference to that

    inside function is either returned or an external reference is kept for it in some way).

Douglas Crockford's patterns that simulate public, private, previleged attributes and methods

for an object, using closures.

Features To Be Considered While building frameworks

---------------------------------------------------

Logging                                                ---        LOG, Console, Alert

Profiling

Unit testing                                        ---        Rhino, unit testing for Ajax features using 'StubHost'

Compression                                        ---         JSMin

Obfuscation

Code Quality

Cross Browser Compatibility

Start-Stop Control mechanism

Load minimum

Support for JS and non-JS mode

FireBug

Log messages from JavaScript in your web page to the console (no need for "alert debugging")

console.log, console.debug, console.info, console.warn console.error

timing and profiling

stacktraces tracing back to event

assertion

References

  1. http://www.javapassion.com/portal/images/pdf_files/ajax/AJAXBasics.pdf
  2. http://www.javascriptkit.com/javatutors/closures.shtml
  3. http://www.crockford.com/javascript/private.html
  4. http://getfirebug.com/logging