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

Javascript objet : que fait ce code ?

Embed Size (px)

Citation preview

Page 1: Javascript objet : que fait ce code ?

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

langages objets?

Page 2: Javascript objet : que fait ce code ?

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

Page 3: Javascript objet : que fait ce code ?

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

Page 4: Javascript objet : que fait ce code ?

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

Page 5: Javascript objet : que fait ce code ?

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

Page 6: Javascript objet : que fait ce code ?

L'objet global

Page 7: Javascript objet : que fait ce code ?

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

Page 8: Javascript objet : que fait ce code ?

This

Page 9: Javascript objet : que fait ce code ?

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

function quiEstThis(){var sMsg = "";

for (var unePropriete in this){

sMsg += unePropriete + "\n";}

return sMsg;

}

Page 10: Javascript objet : que fait ce code ?

La vraie nature des objets

Page 11: Javascript objet : que fait ce code ?

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);

Page 12: Javascript objet : que fait ce code ?

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.

Page 13: Javascript objet : que fait ce code ?

Equivalents des concepts de Classe

Page 14: Javascript objet : que fait ce code ?

Constructeurfunction Rebel(sNom) {

var sMonNom = sNom;return this;};

Page 15: Javascript objet : que fait ce code ?

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);

Page 16: Javascript objet : que fait ce code ?

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);

Page 17: Javascript objet : que fait ce code ?

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

Page 18: Javascript objet : que fait ce code ?

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

Page 19: Javascript objet : que fait ce code ?

Construisons ensembleune calculatrice

Page 20: Javascript objet : que fait ce code ?

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.

Page 21: Javascript objet : que fait ce code ?

Vrai ou faux?Que fait ce code?

Page 22: Javascript objet : 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)

Page 23: Javascript objet : que fait ce code ?

BilanObjectif atteint?

Page 24: Javascript objet : que fait ce code ?

Fin

Page 25: Javascript objet : que fait ce code ?

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 à

[email protected].