Javascript Crib Sheet

Arrays

Arrays are based on objects with some special features added. They however lose this specialness when extended so don't.

Removing elements

delete array[idx]; // Leaves a hole in the array at idx
array.splice( idx, 1 ); // Removes the element closing the hole

Check if a variable is an array.

For an array typeof returns "object" so it can't be used. Instead try one of these.

value.construtor === Array

value instanceof Array

DOM

DOM Reference:

Set Class & Style Values


		      node.className = ...

			  node.style.styleName = ...

Find current values

IE: node.currentStyle.stylename
Others: document.defaultView().getComputedStyle( node, "" ).getPropertyValue( stylename );

Creating Non-Table Elements

var n = document.createElement(tagName);
var t = document.createTextNode( text );

Creating Table Elements

trObj = table.insertRow( pos );
tdObj = tableRow.insertCell( pos );

Unlike node creation, these actually insert the object.

A pos of -1 inserts at the end.

Adding / Removing nodes to the tree

parent.appendChild( new );
parent.insertBefore( new, child );

parent.replaceChild( new, old );

parent.removeChild( old );

Parent can be found as child.parentNode

Events

Types

blur, change, keydown, keypress, keyup, reset, submit, focus click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup

Setting handler

Legacy: obj[ "on" + type ] = func;
IE: obj.attachEvent( "on" + type, func );
W3C: obj.addEventListener( type, f, false );

Handler template

Gets common variables in a browser compatible way

function handler(e) {
    if (!e) e = event;
    var target = e.target || e.srcElement;
    ...
}

Cancel Event (bubbling)

e.cancelBubble = true;
    if ( e.stopPropogation ) {
        e.stopPropogation();
    }

Cancel Default Action

e.returnValue = false;
if ( e.preventDefault ) {
    e.preventDefault();
}
return false;

Exceptions

An exception can be any created object with the fields name and message. When checking exceptions, the name field can be used to find the type you are interested in.

Names used with in Javascript, which can be created using new Name(msg)

Error, EvalError, RangeError, SyntaxError, TypeError, URIError

Creating your own

throw { name:"MyError", message:"Failed to ..." };

for ... in

The in variant of the for statement is very useful for going over all value on an objected. However when doing so it also returns any methods or properties from Object or any other object which it inherited from. To prevent this and only see values on the main object use the following template.

for ( name in ob ) {
    if ( ob.hasOwnProperty( name ) ) {
        ...
    }
}

Namespaces

Javascript has lousy name space support. There is alot of room for overlap in the global general name space. To alleviate this, its reccomended you create your own space and place your own variables with in it.

Creating own space

if (typeof YADDA == 'undefined') {
    YADDA = {};
}

Wrapping application its own space
Closures and annoymous functions can also be used to wrap an entire application in a function keeping its name space localized. This is similiar to the objects created and returned the same in the objects section

Greasemonkey Userscripts work using this method.
```
(function() {
// -- declare everything inside here, including sub functions and calls to them
})()
```
That last () invokes the function. I'm not sure if the ( is needed before the function declaration or not, but its there in the user scripts i've read.

Objects

Create new generic objects
```
obj = {};
obj = {
        name:'Troy',
        color:'Green',
        'class':"Physics"
      };
obj = new Object();
```
Do not put a trailing comma(,) after the last element when creating objects. This is not cross-browser compatible
Access Elements
```
obj.property
obj['property']
```
Both of these work the same and return the same element. The [] form allows access to elements named with keywords or other special characters.
Constructors
Are just functions called with the "new" keyword. By convention they begin with a capital letter.
When the constructor is executed, the this variable is a reference to the newly created object.
```
function Widget(x) {
    this.x = x;
}

var w = new Widget(1);
```
Class Methods
Can either be assigned as properties to a created object.
```
var w = new Widget();
w.show = function( ... ) { ... }
var x = {}
x.toString = function() { ... }
```
Or can be declared on the .prototype element of the object's class (constructor), in which case it will automatically be present in all instances of the object.
```
Widget.prototype.toString = function() { ... }
```
Static/Singleton declarations
If you want a class with just "static" methods, or a singleton class, it can as follows. Any variable properties can also be set.
```
var LOGGER = {
    info: function(msg) { ... },
    error: function(msg) { ... },

    prefix: ">"
};
```
If you need some internal private variables or functions, or need some initialization as part of a constructor along with this.
```
var LOGGER = function( div_id ) {

    var div_object = document.getElementById( div_id );
    function privateFunction() { .. }

    // Do something else here.

    return {
             info: function( msg ) { ... },
             error: function( msg ) { ... },

             prefix: ">"
            };
}( "debug_div" );
```
This sets LOGGER to the object returned. Which by closure has access to the div_object, div_id variables and the privateFunction function. The end of the declaration invokes the call immediately setting it passing it "debug_div"
Inheritance
Inheritance in javascript is wierd. I haven't actually done much with it, but based on some reading and watching the above mentioned Douglas Crockford videos here are some quick notes.

Objects inherit from other objects by looking at the object instance pointed to by the .prototype value.

If an property is looked for that doesn't exist in the current it is looked for in this "linked" prototype

For "classical" look, you declare
```
B.prototype = new A();
```
Then add any additional functions you need to B.prototype

For a more prototype based inheritance where any object can inherit from any other, Douglas Crockford created the following function to make a new object, inheriting from the provided existing object.
```
function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

var a = {};
a.pi = 3.14;

var b = object(a);

x = b.pi; // 3.14 found in a
```
A couple gotcha's to watch for using the this second method

A gotcha in the way this works, is that if you change b.pi to some other value, then delete b.pi to remove it, it removes it from b, but not from a, thus if you try to access it again you're once again get the original value.

Also changes in a are reflected in non-updated values of b.

typeof

Values returned from typeof operator

Variable Type	Returned
array	"object"
boolean	"boolean"
function	"function"
null	"object"
number	"number"
object	"object"
string	"string"
underfined	"undefined"

Other References