google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank
Guest, register






JavaScript Concepts: Simply the Best 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


Free iPage Web Hosting for First Year NOW



If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
Try iPage for FREE First Year NOW

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.

JavaScript by day


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web