Si vous avez souvent regarder les films de HBO , puis le titre de ce post JavaScript vous ?tre familier : Oui , c'est vrai , je veux emprunter ce slogan de HBO pour d?crire le contenu de ce post : il vous fournira les concepts de base JavaScript , et vous serez en mesure d' acc?der , de comprendre la programmation web langage JavaScript facilement et rapidement
Exemple, les codes JavaScript pour essayer ? l'heure actuelle , cet article JavaScript tutorial nous 5 pi?ces et je mettrai ? jour s'il ya nouveau chapitre , en attendant , vous pouvez passer par :

? D?clarations de fonctions JavaScript et des expressions de fonction JavaScript - Concepts de base

? JavaScript Prototype : Quelques concepts de base

? 5 Chef Concepts H?ritage JavaScript

? Concepts simples sur les types et les objets en JavaScript POO

? Top 10 Meilleurs livres JavaScript que les d?butants devraient apprendre

• Demo
• Agrandir
• Recharger
• 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
• Imprimer

• Commentaire (3)
• �crire

par mua sam vui, 28/05/2011 09:05 PM
Javascript is ... R�ponse

is so complicated ! learning it make me exhausted

par Cao Phong, 28/05/2011 10:05 PM
R�ponse

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

par mua sam vui, 29/05/2011 08:05 PM
Jquery instead of javascript ... @ Cao Phong R�ponse

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 ????

par Avant-premi�re

Annuler r�ponse

�crivez votre commentaire

Commentaires du client sera publi� avant previwed
Donnez votre email r�el pour obtenir des r�ponses notification ou commentaire sera supprim�

Votre nom *
Votre e-mail^g *
Votre site

Comment's Titre

J'assure � 100% je suis humain r�el
Je le r�p�te, je ne suis pas bot

• Sent (0)
• Nouveau