Ce document explique la création de classes et d'objets en JavaScript, en soulignant ses particularités par rapport à d'autres langages orientés objet. Il couvre des concepts fondamentaux tels que la syntaxe des objets, les tableaux associatifs, et la gestion des membres publics et privés. Des exemples de code accompagnent le contenu pour illustrer ces concepts et l'application pratique du langage.

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

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

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

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

5. Références
http://www.ecmascript.org/
ECMAScript Language Specification
Standard ECMA-262 3rd Edition - December 1999
ECMA-262 5.1 Edition - June 2011
http://www.crockford.com/javascript/survey.html
http://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=1843879
http://www.adobe.com/devnet/html5/articles/javascript-object-creation.edu.html

6. L'objet global

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

8. This

9. Qui est this?
alert(this.toString());
alert(quiEstThis());
function quiEstThis(){
var sMsg = "";
for (var unePropriete in this){
sMsg += unePropriete + "n";
}
return sMsg;
}

10. La vraie nature des objets

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

12. Les objets sont des tableaux
Object 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.

13. Equivalents des concepts
de Classe

14. Constructeur
function Rebel(sNom)
{
var sMonNom = sNom;
return this;
};

15. Propriétés statiques
Rebel.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);

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

17. Variables privées (de dessert)
function Leia()
{
var sReponse = "Autant embrasser un Wookie";
function leiaRepondre()
{
return sReponse;
}
}
alert(Leia.sReponse); //undefined : variable privée
alert(Leia.leiaRepondre); //undefined : méthode privée

18. Membres publics
Memoire= function () {
var iMemoire = 0;
var fAjouter =
function(iAjout) {
iMemoire
+= iAjout;
return
iMemoire;
};
var oMethodes = {
ajouter:fAjouter
};
//création de membres publics
return oMethodes;
};
/* Code de test :
*/
oMemoire1= new Memoire();
alert(oMemoire1.ajouter(1)); // 1
alert(oMemoire1.ajouter(3)); // 4
oMemoire2= new Memoire();
alert(oMemoire2.ajouter(2)); // 2
alert(oMemoire2.ajouter(5)); // 7

19. Construisons ensemble
une calculatrice

20. 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.

21. Vrai ou faux?
Que fait ce code?

22. 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)

23. Bilan
Objectif atteint?

24. Fin

25. 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.