Most of beginners will found difficulties getting start with these frameworks. Main reason is traditional JS programmers do not use JS heavily in their web applications or use it in an unorganized way, without any best practice pattern. While OOP is not an easy programming method, using it in JS is also headache because of JS syntax. Many programmers use JS in procedural programming style by creating functions and hooking them up with events.

When the term Web 2.0 become a standard, JS is also become a key programming skill that a web programmer need to know. The procedural JS programming should be forget and with the coming of Prototype, jQuery or other JS framework the age of JS programming began. In this post, I want to cover the basic of JS language to build a solid based for JS programmers from where they can easily taking JS frameworks into use. JavaScript can do a lot of clever things that Java and C# can’t. Some of these can help you to write better code, and some can only help you to shoot yourself in the foot more accurately! It’s worth knowing about both, either to make use of the techniques or to avoid doing them unwittingly.

Objects in JavaScript

JavaScript doesn’t require the use of objects or even functions. It is possible to write a JavaScript program as a single stream of text that is executed directly as it is read by the interpreter. As a program gets bigger, though, functions and objects become a tremendously useful way of organizing your code, and we recommend you use both.

The simplest way to create a new JavaScript object is to invoke the built-in constructor for the Object class:

var myObject=new Object();

Let’s add a property to our simple object:

myObject.shoeSize=”12″;

In a structured OO language, we would need to define a class that declared a property shoeSize or else suffer a compiler error. Not so with JavaScript. In fact, just to emphasize the array-like nature, we can also reference properties using array syntax:

myObject['shoeSize']=”12″;

This notation is clumsy for ordinary use but has the advantage that the array index is a JavaScript expression, offering a form of runtime reflection.

We can also add a new function to our object dynamically:

myObject.speakYourShoeSize=function(){

alert("shoe size : "+this.shoeSize);

}

Or borrow a predefined function:

function sayHello(){

alert('hello, my shoeSize is '+this.shoeSize);

}

...

myObject.sayHello=sayHello;

Note that in assigning the predefined function, we omit the parentheses. If we were to write

myObject.sayHello=sayHello();

then we would execute the sayHello function and assign the return value, in this case null, to the sayHello property of myObject.

We can attach objects to other objects in order to build up complex data models and so on:

var myLibrary=new Object();

myLibrary.books=new Array();

myLibrary.books[0]=new Object();

myLibrary.books[0].title="Turnip Cultivation through the Ages";

myLibrary.books[0].authors=new Array();

var jim=new Object();

jim.name="Jim Brown";

jim.age=9;

myLibrary.books[0].authors[0]=jim;

This can quickly become tedious (often the case where turnips are involved, I’m afraid), and JavaScript offers a compact notation that we can use to assemble object graphs more quickly, known as JSON. Have a look at it now.

Making classes

JavaScript has a concept of objects and classes but no built-in concept of inheritance. In fact, every JavaScript object is really an instance of the same base class, a class that is capable of binding member fields and functions to itself at runtime.

In JavaScript, then, we can write something that looks similar to the Java declaration

var myObj=new MyObject();

but we do not define a class MyObject, but rather a function with the same name. Here is a simple constructor:

function MyObject(name,size){

this.name=name;

this.size=size;

}

We can subsequently invoke it as follows:

var myObj=new MyObject("tiddles","7.5 meters");

alert("size of "+myObj.name+" is "+myObj.size);

One common idiom is to declare the function inside the constructor:

function MyObject(name,size){

this.name=name;

this.size=size;

this.tellSize=function(){

alert("size of "+this.name+" is "+this.size);

}

}

var myObj=new Object("tiddles","7.5 meters");

myObj.tellSize();

This works, but is less than ideal in two respects. First, for every instance of MyObject that we create, we create a new function. As responsible Ajax programmers, memory leaks are never far from our minds, and if we plan on creating many such objects, we should certainly avoid this idiom.

A prototype is a property of JavaScript objects, for which no real equivalent exists in OO languages. Functions and properties can be associated with a constructor’s prototype. The prototype and new keyword will then work together, and, when a function is invoked by new, all properties and methods of the prototype for the function are attached to the resulting object. That sounds a bit strange, but it’s simple enough in action:

function MyObject(name,size){

this.name=name;

this.size=size;

}

MyObject.prototype.tellSize=function(){

alert("size of "+this.name+" is "+this.size);

}

var myObj=new MyObject("tiddles","7.5 meters");

myObj.tellSize();

First, we declare the constructor as before, and then we add functions to the prototype. When we create an instance of the object, the function is attached. The keyword this resolves to the object instance at runtime, and all is well.

Note the ordering of events here. We can refer to the prototype only after the constructor function is declared, and objects will inherit from the prototype only what has already been added to it before the constructor is invoked. The prototype can be altered between invocations to the constructor, and we can attach anything to the prototype, not just a function:

MyObject.prototype.color="red";

var obj1=new MyObject();

MyObject.prototype.color="blue";

MyObject.prototype.soundEffect="boOOOoing!!";

var obj2=new MyObject();

obj1 will be red, with no sound effect, and obj2 will be blue with an annoyingly cheerful sound effect! There is generally little value in altering prototypes on the fly in this way. It’s useful to know that such things can happen, but using the prototype to define class-like behavior for JavaScript objects is the safe and sure route.

More about declaring Class with prototype

Interestingly, the prototype of certain built-in classes (that is, those implemented by the browser and exposed through JavaScript, also known as host objects) can be extended, too. Let’s have a look at how that works now.

Extending built-in classes

Within the web browser, DOM nodes cannot be extended in the Internet Explorer browser, but other core classes work across all major browsers. Let’s take the Array class as an example and define a few useful helper functions:

Array.prototype.indexOf=function(obj){

var result=-1;

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

if (this[i]==obj){

result=i;

break;

}

}

return result;

}

This provides an extra function to the Array object that returns the numerical index of an object in a given array, or -1 if the array doesn’t contain the object. We can build on this further, writing a convenience method to check whether an array contains an object:

Array.prototype.contains=function(obj){

return (this.indexOf(obj)>=0);

}

and then add another function for appending new members after optionally checking for duplicates:

Array.prototype.append=function(obj,nodup){

if (!(nodup && this.contains(obj))){

this[this.length]=obj;

}

}

Any Array objects created after the declaration of these functions, whether by the new operator or as part of a JSON expression, will be able to use these functions:

var numbers=[1,2,3,4,5];

var got8=numbers.contains(8);

numbers.append("cheese",true);

Reflecting on JavaScript objects

In the normal course of writing code, the programmer has a clear understanding of how the objects he is dealing with are composed, that is, what their properties and methods do. In some cases, though, we need to be able to deal with completely unknown objects and discover the nature of their properties and methods before dealing with them. For example, if we are writing a logging or debugging system, we may be required to handle arbitrary objects dumped on us from the outside world. This discovery process is known as reflection, and it should be familiar to most Java and .NET programmers.

If we want to find out whether a JavaScript object supports a certain property or method, we can simply test for it:

if (MyObject.someProperty){

...

}

This will fail, however, if MyObject.someProperty has been assigned the boolean value false, or a numerical 0, or the special value null. A more rigorous test would be to write

if (typeof(MyObject.someProperty) != “undefined”){

If we are concerned about the type of the property, we can also use the instanceof operator. This recognizes a few basic built-in types:

if (myObj instanceof Array){

...

}else if (myObj instanceof Object){

...

}

as well as any class definitions that we define ourselves through constructors:

if (myObj instanceof MyObject){

...

}

If you do like using instanceof to test for custom classes, be aware of a couple of “gotchas.” First, JSON doesn’t support it-anything created with JSON is either a JavaScript Object or an Array. Second, built-in objects do support inheritance among themselves. Function and Array, for example, both inherit from Object, so the order of testing matters. If we write

function testType(myObj){

if (myObj instanceof Array){

alert("it's an array");

}else if (myObj instanceof Object){

alert("it's an object");

}

}

testType([1,2,3,4]);

and pass an Array through the code, we will be told-correctly-that we have an Array. If, on the other hand, we write

function testType(myObj){

if (myObj instanceof Object){

alert("it's an object");

}else if (myObj instanceof Array){

alert("it's an array");

}

}

testType([1,2,3,4]);

then we will be told that we have an Object, which is also technically correct but probably not what we intended.

Finally, there are times when we may want to exhaustively discover all of an object’s properties and functions. We can do this using the simple for loop:

function MyObject(){

this.color='red';

this.flavor='strawberry';

this.azimuth='45 degrees';

this.favoriteDog='collie';

}

var myObj=new MyObject();

var debug="discovering...\n";

for (var i in myObj){

debug+=i+" -> "+myObj[i]+"\n";

}

alert(debug);

This loop will execute four times, returning all the values set in the constructor. The for loop syntax works on built-in objects, too-the simple debug loop above produces very big alert boxes when pointed at DOM nodes!

Using JSON

The JavaScript Object Notation (JSON) is a core feature of the language. It provides a concise mechanism for creating arrays and object graphs. In order to understand JSON, we need to know how JavaScript arrays work, so let’s cover the basics of them first.

JavaScript has a built-in Array class that can be instantiated using the new keyword:

myLibrary.books=new Array();

Arrays can have values assigned to them by number, much like a conventional C or Java array:

myLibrary.books[4]=somePredefinedBook;

Or they can be associated with a key value, like a Java Map or Python Dictionary, or, indeed, any JavaScript Object:

myLibrary.books["BestSeller"]=somePredefinedBook;

This syntax is good for fine-tuning, but building a large array or object in the first place can be tedious. The shorthand for creating a numerically indexed array is to use square braces, with the entries being written as a comma-separated list of values, thus:

myLibrary.books=[predefinedBook1,predefinedBook2,predefinedBook3];

And to build a JavaScript Object, we use curly braces, with each value written as a key:value pair:

myLibrary.books={

bestSeller : predefinedBook1,

cookbook : predefinedBook2,

spaceFiller : predefinedBook3

};

In both notations, extra white space is ignored, allowing us to pretty-print for clarity. Keys can also have spaces in them, and can be quoted in the JSON notation, for example:

“Best Seller” : predefinedBook1,

We can nest JSON notations to create one-line definitions of complex object hierarchies (albeit rather a long line):

var myLibrary={

location : "my house",

keywords : [ "root vegetables", "turnip", "tedium" ],

books: [

{

title : "Turnip Cultivation through the Ages",

authors : [

{ name: "Jim Brown", age: 9 },

{ name: "Dick Turnip", age: 312 }

],

publicationDate : "long ago"

},

{

title : "Turnip Cultivation through the Ages, vol. 2",

authors : [

{ name: "Jim Brown", age: 35 }

],

publicationDate : new Date(1605,11,05)

}

]

};

Sharp-eyed readers will have noted that we populated the publication date for the second book using a JavaScript Date object. In assigning the value we can use any JavaScript code, in fact, even a function that we defined ourselves:

function gunpowderPlot(){

return new Date(1605,11,05);

}

var volNum=2;

var turnipVol2={

title : "Turnip Cultivation through the Ages, vol. "+volNum,

authors : [

{ name: "Jim Brown", age: 35 }

],

publicationDate : gunpowderPlot()

}

We can also define member functions for our JSON-invoked objects, which can be invoked later by the object:

var turnipVol2={

title : "Turnip Cultivation through the Ages, vol. "+volNum,

authors : [

{ name: "Jim Brown", age: 35 }

],

publicationDate : gunpowderPlot()

},

summarize:function(len){

if (!len){ len=7; }

var summary=this.title+" by " + this.authors[0].name +" and his cronies is very boring. Z";

for (var i=0;i< len;i++){

summary+="z";

}

alert(summary);

}

};

...

turnipVol2.summarize(6);

The summarize() function has all the features of a standard JavaScript function, such as parameters and a context object identified by the keyword this. Indeed, once the object is created, it is just another JavaScript object, and we can mix and match the JavaScript and JSON notations as we please. We can use JavaScript to fine-tune an object declared in JSON:

var numbers={ one:1, two:2, three:3 };

numbers.five=5;

We initially define an object using JSON syntax and then add to it using plain JavaScript. Equally, we can extend our JavaScript-created objects using JSON:

var cookbook=new Object();

cookbook.pageCount=321;

cookbook.author={

firstName: "Harry",

secondName: "Christmas",

birthdate: new Date(1900,2,29),

interests: ["cheese","whistling","history of lighthouse keeping"]

};

With the built-in JavaScript Object and Array classes and the JSON notation, we can build object hierarchies as complicated as we like, and we could get by with nothing else. JavaScript also offers a means for creating objects that provides a comforting resemblance to class definitions for OO programmers, so let’s look at this next and see what it can offer us.

JavaScript Object Notation.

According to Douglas Corckford’s website, JSON is a lightweight data-interchange format. It is easy for humans to read and write… JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others.”

Object Notation can be expressed in the following format:

var obj = {
// string
a : 'sampleValue',
// array
b : [obj1,obj2,'three',4,obj5],
// function
c : function() {
var bang = this.a;
}
}

JSON is built on two structures:

• A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
• An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

Reasons for JSON

• JSON is easy. No really. It’s so easy, it’ll make you sick.
• If you’re familiar with writing classes in PHP, then you’ll most definitely be comfortable with writing JavaScript in Object Notation
• JSON is nothing more than name : value pairs assigned within an object.
• JSON is easy to understand because if written well, it’s a self-documenting structure.
• JSON is fast!
• JSON organizes the ugly mess of procedural programming. Imagine having more than one init function.
• You can impress your friends with JSON because it’s pretty looking
• Your co-workers will love you for writing in JSON because it will most likely not conflict with their scripts that are being called within the same web documents.

JSON is like XML because:

1. They are both ’self-describing’ meaning that values are named, and thus ‘human readable’
2. Both are hierarchical. (i.e. You can have values within values.)
3. Both can be parsed and used by lots of programming languages
4. Both can be passed around using AJAX (i.e. httpWebRequest)

JSON is UNlike XML because:

1. XML uses angle brackets, with a tag name at the start and end of an element: JSON uses squiggly brackets with the name only at the beginning of the element.
2. JSON is less verbose so it’s definitely quicker for humans to write, and probably quicker for us to read.
3. JSON can be parsed trivially using the eval() procedure in JavaScript
4. JSON includes arrays {where each element doesn’t have a name of its own}
5. In XML you can use any name you want for an element, in JSON you can’t use reserved words from javascript

But Why? What’s good about it?

When you’re writing ajax stuff, if you use JSON, then you avoid hand-writing xml. This is quicker. Also, with ajax services support JSON output, you can bypass difficulties of cross-domain ajax calls.

Again, when you’re writing ajax stuff, which looks easier? the XML approach or the JSON approach:
The XML approach:

1. bring back an XML document
2. loop through it, extracting values from it
3. do something with those values, etc,

versus the JSON approach:

1. bring back a JSON string.
2. ‘eval’ the JSON

Example of using JSON in AJAX to transmit data

The example is about to submit a form to a PHP page using AJAX. To keep the example simple, no data is sent (through POST) to the PHP page. Rather, data is just retrieved from the PHP page. The JSMX javascript library is very lightweight (code-wise) and sends and retrieves our data for us. The PHP page (that we make our requests to) simply prints out the data it wants to send back in a ready-to-use javascript object format.

<img src=”http://simpletutorials.com/tutorials/javascript/simple_ajax/ajax_diagram.jpg” alt=”" />

< ?php

require_once "json/JSON.php";
$json = new Services_JSON();

//convert php object to json

$value = array('first' => 'Steven', 'last' => 'Spielberg', 'address' => '1234 Unlisted Drive');

$output = $json->encode($value);

print($output);

?>

The JSON-PHP module can convert a PHP array of key value pairs to this JSON object.

{"first":"Steven","last":"Spielberg","address":"1234 Unlisted Drive"}

HTML page

<html>
<head>

<script src="ajax.js"></script>

<script>

/**Ajax Request (Submits the form below through AJAX
*               and then calls the ajax_response function)
*/
function ajax_request() {
var submitTo = 'ajax_request.php';
//location.href = submitTo; //uncomment if you need for debugging

http('POST', submitTo, ajax_response, document.form1);
}

/**Ajax Response (Called when ajax data has been retrieved)
*
* @param   object  data   Javascript (JSON) data object received
*                         through ajax call
*/
function ajax_response(data) {
for(var key in data) {
document.form1[key].value = data[key];
}
}

</script>

</head>
<body>

<input type="button" onclick="ajax_request()" value="Do AJAX"/><br /><br />

<form name="form1">
First <input type="text" name="first"/><br />
Last  <input type="text" name="last"/><br />
Address <input type="text" name="address"/><br />

</form>

</body>
</html>

This tutorial demonstrates how to perform AJAX functionality simply and effectively, using the AJAX JSMX library, coupled with the JSON-PHP  library.