Javascript objet : que fait ce code ?

Post on 12-Apr-2017

311 views 0 download

Transcript of Javascript objet : que fait ce code ?

Que fait ce code?En quoi Javascript est-il différent des autres

langages objets?

ObjectifA la fin de cette séance, vous serez capables de créer des classes et des objets en javascript.

ConditionsUtilisez un éditeur en ligne tel que jsfiddle.net pour tester votre code manière interactive.

Critères d'évaluationEnsemble en cours, puis via l’application finale.

Référenceshttp://www.ecmascript.org/ECMAScript Language SpecificationStandard ECMA-262 3rd Edition - December 1999ECMA-262 5.1 Edition - June 2011

http://www.crockford.com/javascript/survey.htmlhttp://www.xul.fr/ecmascript/

http://www.javascriptkata.com/2007/03/29/how-to-use-javascript-hashes/http://jpvincent.developpez.com/tutoriels/javascript/trois-fondamentaux-javascript/http://t-templier.developpez.com/tutoriel/javascript/javascript-poo1/

http://www.peachpit.com/articles/article.aspx?p=1843879http://www.adobe.com/devnet/html5/articles/javascript-object-creation.edu.html

L'objet global

C’est ce qui lie la galaxie en un tout uni.sCoteObscur = "La peur est le chemin...";alert(window.sCoteObscur);

This

Qui est this?alert(this.toString());alert(quiEstThis());

function quiEstThis(){var sMsg = "";

for (var unePropriete in this){

sMsg += unePropriete + "\n";}

return sMsg;

}

La vraie nature des objets

Syntaxe littérale (JSON)oRebel = {

prenom:"luke",surnom:"skywalker"

};

oRebel.yoda = "Personne par la guerre, ne devient grand.";oRebel["obi-wan"] = "Ce n'est pas une lune, c'est une base sidérale";

var sTexte = "proprietes de l'objet oRebel: \n";

for (var unePropriete in oRebel) {sTexte+= unePropriete + " = " + oRebel[unePropriete] + "\n";

}alert(sTexte);

Les objets sont des tableauxObject est un hashtable (tableau associatif) : une liste non ordonnée de paires clé-valeur.Ex : monObjet = {"cle1": "valeur1", "cle2": "valeur2"};

http://www.xul.fr/ecmascript/associatif.php"Les tableaux associatifs sont des objets dynamiques que l'utilisateur redéfinit selon ses besoins. Quand on assigne des valeurs à des clés dans une variable de type Array, le tableau se transforme en objet, et il perd les attributs et méthodes de Array. L'attribut length n'est plus disponible car la variable n'a plus le type Array."

La méhode valueof() appelée sur l'objet wrapper d'un type primitif renvoie la valeur littérale stocké en mémoire.

Equivalents des concepts de Classe

Constructeurfunction Rebel(sNom) {

var sMonNom = sNom;return this;};

Propriétés statiquesRebel.yoda = "Personne par la guerre, ne devient grand.";Rebel["obi-wan"] = "Tu ne peux pas gagner...";

var sTexte = "proprietes statiques de la classe Rebel: \n";

for (var unePropriete in Rebel) {sTexte+= unePropriete + " = " + Rebel[unePropriete] + "\n";

}alert(sTexte);

Propriétés d'instances//objet (instance de classe)oLuke = new Rebel();

var sTexte = "proprietes de l'objet oLuke : \n";

for (var unePropriete in oLuke ) {sTexte+= unePropriete + " = " + oLuke [unePropriete] + "\n";

}

alert(sTexte);

Variables privées (de dessert)function Leia() { var sReponse = "Autant embrasser un Wookie";

function leiaRepondre() { return sReponse; }}

alert(Leia.sReponse); //undefined : variable privéealert(Leia.leiaRepondre); //undefined : méthode privée

Membres publicsMemoire= function () {

var iMemoire = 0;

var fAjouter = function(iAjout) {

iMemoire += iAjout;

return iMemoire;

};

var oMethodes = { ajouter:fAjouter

};

//création de membres publicsreturn oMethodes;

};

/* Code de test :*/

oMemoire1= new Memoire();alert(oMemoire1.ajouter(1)); // 1alert(oMemoire1.ajouter(3)); // 4

oMemoire2= new Memoire();alert(oMemoire2.ajouter(2)); // 2alert(oMemoire2.ajouter(5)); // 7

Construisons ensembleune calculatrice

J'ai la mémoire qui flanche...Complètez votre calculatrice en lui ajoutant une gestion de mémoire.

Créez une fonction permettant d'ajouter et de retirer à la mémoire.

Vrai ou faux?Que fait ce code?

C'est null!var o1 = null;

var o2 = new Object();

var o3 = { couleur:"rouge", prix:5 };

if(!o1 || !o2 || !o3 || !o4){

sMsg = "I'm sorry Dave."+ " I'm afraid I Can't do that...";alert (sMsg);}

//votre avis pour if(!o1 || !o2 || !o3)//votre avis pour if(!o1 || !o2)//votre avis pour if(!o1)

BilanObjectif atteint?

Fin

La série “Que fait ce code?” de Mickael Ruau

est mise à disposition selon les termes de la licence Creative Commons Attribution -

Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.

Les autorisations au-delà du champ de cette licence peuvent être obtenues à

creativecommons@ShakerTechnologies.com.