IF you often watch the HBO movies, then the title of this JavaScript post will be familiar to you: "Simply the Best". Yes, that's right, I want to borrow this slogan from HBO to describe the content of this post: it will provide you the very basic JavaScript concepts, and you will be able to access, understand the web programming JavaScript language easily and quickly.

This JavaScript article tutorial shows you the full-detailed practices, combined with live JavaScript example codes to try. At present, this JavaScript article tutorial us 5 parts and I'll update if there's new chapter, meanwhile, you can go through:
- Part 1: JavaScript Classes
- Part 2: JavaScript Inheritance
- Part 3: JavaScript and JSON
- Part 4: The Prototype Property
- Part 5: JavaScript Closures

Read more other JavaScript article tutorials on jsB@nk:
- JavaScript Function Declarations & JavaScript Function Expressions - Basic Concepts
- JavaScript Prototype: Some Basic Concepts
- 5 Chief JavaScript Inheritance Concepts
- Simple Concepts about Types and Objects in JavaScript OOP
- Top 10 Best JavaScript eBooks that Beginners should Learn

• Demo
• Enlarge
• Reload
• New window

Part 3: Javascript and JSON

JSON stands for Javascript Object Notation. In the first post we saw how to define a class in Javascript so that an object instance can be created. Now let’s create an object using the object literal notation. In Javascript, there is the concept of a literal notation to define an object,

// A string literal
var stringLiteral = "A string literal";

// An array literal
var arrayLiteral = [1,2,3];

Extending this concept to objects, we create an anonymous type in Javascript using an object literal,

// Create an anonymous type by using the object literal notation,
var myObjectUsingJSON = {

    // Public field – a name/value pair
    aPublicField : "This is a public field of an anonymous type",

    // Public method – another name/value pair

    aPublicMethod : function() { return this.aPublicField; }
}

// Call the anonymous type’s public field or method
alert(myObjectUsingJSON.aPublicMethod()); 

We created an instance (myObjectUsingJSON) of the the anonymous type using the object literal notation and the anonymous object has two members which are name-value pairs. This way of representing (and creating) an object is called the Javascript Object Notation or JSON. It’s just a way of creating an anonymous type using name-value pairs. For comparison, recall how we similarly create anonymous types in C#,

// Anonymous type in C#
var anonType = new { Name = "John", Age = 50 };

Now let’s create a more complicated class using this object notation,

// Create an anonymous type...
var myObjectUsingJSON = {

    // ...with a key whose value is a simple array...
    anArray : ["This", "array", "has", 5, "items"],

    // ...and another key whose value is an array with a nested object...

    anotherArray : ["This", "array", "has", 6, { X: 1 }, "items"],

    // ...and another key whose value happens to be another anonymous object...
    anObject : {
        key1 : "A string",                           /* ...with one key whose value is a string... */
        key2 : function() { return "Hello"; },       /* ...and another key whose value is a function... */

        key3 : {                                     /* ...and another key whose value happens to be another anonymous object */
            key31 : true,                            /* ...with a key whose value is a boolean... */
            key32 : function() { return { Name: "World!" }; }, /* ...and a key whose value is a function that returns an object */

            key33 : {                                          /* This key's value happens to get yet another anonymous object */
                key331 : function() { return "That’s deep!"; }
            }
        }
    }
}

// Access an array element
alert(myObjectUsingJSON.anArray[2]);

// Access the inner object
alert(myObjectUsingJSON.anotherArray[4].X);

// Get a value from a name
alert(myObjectUsingJSON.anObject.key3.key31);

// Access the object returned by the function

var funcReturn = myObjectUsingJSON.anObject.key3.key32();
alert(funcReturn.Name);

// Call the deepest function
alert(myObjectUsingJSON.anObject.key3.key33.key331());

As you can see it’s pretty easy to nest anonymous objects to create a class structure. This representation of a class is more compact than XML, in terms of raw serialized bytes sent over the wire. So, Javascript prefers using this object notation when sending/receiving data. A string can easily be eval-ed into an object,

// The JSON string
var jsonString = "{ anotherArray: ['This', 'array', 'has', 6, { X: 1 }, 'items'] }";

// Eval the JSON string into an object
var myEvaledJSONObject = eval('(' + jsonString + ')');


// Access the object
alert(myEvaledJSONObject.anotherArray[4].X);

For more information about JSON see here.

Part 4: The Prototype Property

All Javascript objects have a property called ‘prototype’ which can contain an object reference. Javascript uses this property to implement it’s inheritance hierarchy – by putting a reference to the parent object via the ‘prototype’ property. To see this try the following code,

// The base class
function Base() {
    // Public property
    this.aPublicProperty = "This is a public property of the type Base";
}

This initializes the prototype property (internally) to an empty class.

// 'prototype' is not null, it is initialized internally like this - Base.prototype = { }
alert(Base.prototype);   // [object Object]

Now we can add fields/properties to the (empty) object that the prototype refers,

// Add a new field/property
Base.prototype.newField = "This is a new field of the type Base's prototype";
Base.prototype.aPublicProperty = "This is a public property of the type Base's prototype";

Now here’s the trick that transforms this innocuous looking property into the basis of Javascript’s object oriented implementation: when you access a property on a class, if the class doesn’t have the property, Javascript will look for the property on the object the prototype refers to. Now we can see how this might lead to inheritance – the derived class (the object) can access the base class’s (the object’s prototype’s object) methods. Also if both the object and the object’s prototype referred object have the same property, the object’s property overrides the prototype referred object’s property.

var baseInstance = new Base();
alert(baseInstance.newField);        // Access the prototype's property
alert(baseInstance.constructor.prototype.aPublicProperty);  // Access the prototype's property - will see later
alert(Base.prototype.aPublicProperty);  // Access the prototype's property via Base
alert(baseInstance.aPublicProperty);    // Override the prototype's property

We are starting to see object-oriented behaviors implemented via the prototype property. The prototype property refer’s to the object’s base class. Let’s take this further,

// Derived from the base class
function Derived() { }
Derived.prototype = new Base();


// Another class derived from the base class
function AnotherDerived() { }
AnotherDerived.prototype = new Base();

// A class derived from the derived class
function DerivedDerived() { }
DerivedDerived.prototype = new Derived();

This results in a class hierarchy that looks like this,

Now that we have the class structure, let’s create some instances,

// Create some instances
var derivedInstance = new Derived();
var anotherDerivedInstance = new AnotherDerived();
var derivedDerivedInstance = new DerivedDerived();

Let’s add a new property to the Base’s prototype.

// Add a new property to the Base's prototype

Base.prototype.testInheritance = "Every object that derives from Base now has this property";
alert(derivedDerivedInstance.testInheritance);

And add a new property to the Derived’s prototype,

// Add a new property to the Derived's prototype
Derived.prototype.testInheritance = "Every object that derives from Derived now has this property";
// Does that mean the Base now has the property? No.
alert(baseInstance.testInheritance); // undefined
alert(derivedDerivedInstance.testInheritance);

For more information about Javascript prototypes see here.

• Code
• Print

• Comment (3)
• Write

by mua sam vui, 28/05/2011 09:05 PM
Javascript is ... Reply

is so complicated ! learning it make me exhausted

by Cao Phong, 28/05/2011 10:05 PM
Reply

but I think this post is very simple & easy to learn, let try it NOW

by mua sam vui, 29/05/2011 08:05 PM
Jquery instead of javascript ... @ Cao Phong Reply

the best thing i can do now is start with Jquery ! all the library is so easy to do . ! Just look through and U wl think like me !

For example : Javascript:
document.style.color = "red"; --> so complicated to remember

Jquery:

$(div).css ("color","red"); ->is that okey for coding ????

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New