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