Ce document a été conçu et utilisé sur plusieurs sessions de formation professionnelles pour développeurs logiciels. Il présente la syntaxe du langage javascript à usage d'un public de développeurs maîtrisant déjà un langage de développement (langage C, Java, C Sharp, PHP...). Niveau : débutant. Séance numéro : 4/10. Temps nécessaire à la séance : environ 1h. Cette séance fait partie d'une série de 10 séances présentant le langage javascript (niveau débutant à confirmé). Le niveau débutant de la série se réalise en 2 jours. La niveau confirmé se réalise en 3 jours. Ce programme est conforme aux titres du ministère du travail : - Développeur Logiciel - Concepteur Développeur Informatique Il permet de valider les modules correspondants de ces titres RNCP (compétences développement de pages web). La méthode utilisée mélange les approches interrogatives et actives : - à partir d'exemples de code, faire raisonner les stagiaires par raisonnement hypothético-déductif ("que fait ce code?") - à partir de code "à trous", faire découvrir et appliquer des éléments de syntaxe (travaux pratiques "construisons ensemble") - à partir des problèmes rencontrés, faire rechercher des solutions possibles aux problèmes soulevés par le code "énigme" ("quelles solutions?") - à partir de code "énigme", faire vérifier l'assimilation des connaissances ("vrai ou faux?") Inclus : - code à trou - grille d'évaluation Ce document powerpoint est également disponible en marque blanche. Nous contacter via notre compte twitter @forgelogicielle.

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.