Things to know about DOM

DOM, Document Object Model for XML that extended to be used in HTML. In XML and HTML Document consist hierarchy of nodes with different types of data. DOM allows unprecedented control over web pages. Nodes can be added, removed, replaced and modified easily.

DOM Core was the API developed to handle XML documents, DOM HTML extended DOM Core by adding HTML specific objects and methods. DOM is not JavaScript specific, it is implemented in numerous other languages as well, where as DOM for web implemented using ECMAScript, and makes up to large part of JavaScript.

Idea behind W3C developing DOM Level 1 (1998) was to map structure of a document. Aims of DOM Level 2 was much broader including support for events, range, traversal of document, and support for CSS. Level 1 also extended to support XML namespaces.

Following new modules were introduced in DOM Level 2

DOM Event

DOM Style

DOM Views

DOM Range and Traversal

DOM 3 further extend DOM to introduces methods to Load and Save documents in uniform way, and also methods to validate DODOM, Document Object Model for XML that extended to be used in HTML. In XML and HTML Document consist hierarchy of nodes with different types of data. DOM allows unprecedented control over web pages. Nodes can be added, removed, replaced and modified easily.

DOM Core was the API developed to handle XML documents, DOM HTML extended DOM Core by adding HTML specific objects and methods. DOM is not JavaScript specific, it is implemented in numerous other languages as well, where as DOM for web implemented using ECMAScript, and makes up to large part of JavaScript.

Idea behind W3C developing DOM Level 1 (1998) was to map structure of a document. Aims of DOM Level 2 was much broader including support for events, range, traversal of document, and support for CSS. Level 1 also extended to support XML namespaces.

Following new modules were introduced in DOM Level 2

• DOM Event
• DOM Style
• DOM Views
• DOM Range and Traversal

DOM 3 further extend DOM to introduces methods to Load and Save documents in uniform way, and also methods to validate DOM

Interface with JavaScript

Interface: An interface is an blue print of a class, it specify what methods an Object should have, that way it add some kind of predictability on what you can expect from that Class. For example, a Class that implement “Comparable” interface can be assumed to be comparable with other object that implement “Comparable” interface. It allows you to group objects on the features they provide. It make sure all Classes of required feature follows same methods, hence communication between them easier. In a way it also increases code re-usage.

JavaScript doesn’t have native support for interfaces along with normal object oriented features of other languages like C++ and Java. There is no interface keyword in JavaScript, apart from this emulating interfaces feature will add some performance over head and will reduce the flexibility of JavaScript to some extent. Transition for other language codes to JavaScript may be a tedious task, if you developing completely new Class, you can make sure all implementations are at their best ability. Biggest of the problems in using interfaces with JavaScript is there is no way you can force other programmers to use the interfaces you created.

Interface: An interface is an blue print of a class, it specify what methods an Object should have, that way it add some kind of predictability on what you can expect from that Class. For example, a Class that implement “Comparable” interface can be assumed to be comparable with other object that implement “Comparable” interface. It allows you to group objects on the features they provide. It make sure all Classes of required feature follows same methods, hence communication between them easier. In a way it also increases code re-usage.

JavaScript doesn’t have native support for interfaces along with normal object oriented features of other languages like C++ and Java. There is no interface keyword in JavaScript, apart from this emulating interfaces feature will add some performance over head and will reduce the flexibility of JavaScript to some extent. Transition for other language codes to JavaScript may be a tedious task, if you developing completely new Class, you can make sure all implementations are at their best ability. Biggest of the problems in using interfaces with JavaScript is there is no way you can force other programmers to use the interfaces you created.

Examples to follow

Anonymous Functions, Closure

JavaScript is loosely typed language. You don’t define data type while you declare any variable. But it’s not like it won’t belong to any data type, depending on the value you store, variable automatically changes it’s data type.

Type Casting is possible with JavaScript. But it happens so easily that you don’t have to worry on the type casting.Primitive data types in JavaScript are

1. Number
2. String
3. Boolean
4. null
5. undefined

these are the primitive data types, there are other non-primitive data types like Array, Function etc. Primitive data types are passed by value, where as non-primitive data types passed by reference.

Anonymous Functions: A function that is defined without a name is called Anonymous Function. In JavaScript Functions are first-class objects, you can do almost any thing with functions,

• you can assign them to variables
• pass as arguments to functions
• return as result from a function
• can be constructed run-time

These are the features on JavaScript which makes this language more exiting.

here is an example of anonymous function:

/* Anonymouse Function */

(function(){

    var a=10;

    var b=20;

    alert(a+b);

})();

 

/*Anonymous Function with arguments */

(function(a,b){

    alert(a+b)

})(10,20);

 

 

/* Anonymous function that returns a value */

var sum = (function(a,b){

    return a+b;

})(10,20);

 

//sum eaual tp 30.

Most interesting use of anonymous function is closure. Closure is a protected variable space, created by using nested functions. Here is an example with closure.

var sum;

(function(){

    a=10;

    b=20;

    sum = function (){

        return a+b;

    };

})();

sum has access to a and b, even though it’s executed outside of the anonymous function.

Flexibility & JavaScript

JavaScript is the most flexible and widely used language in current era of Internet, nobody expected JavaScript to grow this fast and wide, hence I say JavaScript is kind of under-developed but over used technology. But that doesn’t take the beauty of flexibility away from JavaScript even though security remains major concern in its implementation. Every day it keeps me interesting with it’s abilities, every time I think why did I miss that part it. In all it’s the most flexible language for OO coding, here is the small example which shows how you can easily organize and maintain JavaScript code.

 

Say I have to define 2 functions walk and run. you can define them as follows.

function walk(){

    // do walking

}

 

function run(){

    // do running

}

 

If you are defining this function as part of a Man class, code looks like this

var Man=function(){

    //….

};

 

Man.prototype=function(){

    // do walking

};

 

Man.prototype.run=function(){

    // do running

};

 

/* Usage */

 

var ravi=new Man();

ravi.walk();

ravi.run();

If you want class encapsulated in one declaration you can do

 

var Man=function(){

    //….

};

Man.prototype={

    walk:function(){

        // do walking

    },

    run:function(){

        //do running

    }

}

What’s next you can add a method to Function object that can be used to declare methods.

Function.prototype.method = function(name, fn) {

    this.prototype[name] = fn;

};

var Man= function() {

    //do something

};

Man.method(‘walk’, function() {

    //do walking

});

 

Man.method(‘run’, function() {

    //do running

});

 

As we saw earlier, flexibility of JavaScript is enviable, here every thing is an object (except primitive data types) and you can add attributes and methods to these Objects at any point of time, execution. You can even add methods and attributes to Functions as well. Here is an example:

function displayError (message){

    displayError.numTimesExecuted++;

    alert(message);

}

displayError.numTimesExecuted = 0;

here is another example with prototype:

function Man(weight, height){

    this.height = height;

    this.weight = weight;

}

 

Man.prototype={

    getHeight:function(){

        return this.height;

    },

    getWeight:function(){

        return this.weight;

    }

}

 

/* Initiating the class */

 

var ravi = new Man (80,164);

var suresh = new Man (75,169);

 

/* add new method to Class */`

Man.prototype.getGreeting=function(){

    return "Hi your height and weight is " + this.getHeight() +"  and " + this.getWeight() + " respectively";

}

ravi.getGreeting();

//output "Hi your height and weight is 164 and 80 respectively"