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 : 2/10. Temps nécessaire à la séance : environ 1h. Cette séance est issue 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?
Les tableaux en javascript

2. Objectif
A la fin de cette séance, vous serez capables de manipuler
les tableaux indicés de javascript dans les règles de l'art.
- Vous aurez assimilé la syntaxe d'assignation par littéral
- Vous aurez compris et mis en oeuvre la différence entre
assignation par référence et assignation par copie.

3. Conditions
Utilisez :
- un IDE (Netbeans, Apatana)
- et un navigateur avec des outils de développement (ex :
Firefox avec Firebug).

4. Critères d'évaluation
Vous réaliserez une calculatrice à partir du code à trous
fourni.

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

6. Que va-t-il sortir du chapeau?
var tCaisseMagique = ["colombe", "foulard", "billet"];
var tChapeau = tCaisseMagique ;
tCaisseMagique [3] = "lapin!";
console.log(tChapeau);

7. Assignation par valeur ou référence
Les tableaux sont manipulés par référence. Autrement dit, si on modifie le
tableau issu de l'assignation, le tableau original est modifié.
Ex : nous avons assigné la référence de tCaisseMagique à la variable
tChapeau. Les deux variables tCaisseMagique et tChapeau utilisent la même
référence : elles pointent sur la même adresse mémoire.
Toute modification de l'une ou l'autre de ces variables modifie le contenu de cet
espace mémoire commun.
Si l'on veut dédoubler un tableau on utilise la méthode slice qui retourne
une copie du tableau (et non la référence à ce tableau) :
var tChiffres = ["un", "deux", "trois"];
var tNombresPremiers = tChiffres.slice();
tChiffres[3] = "quatre";
alert(tNombresPremiers);

8. Je ne suis pas (qu'un) objet!
tFruits = new Array("Poires");
alert(tFruits[0]);
tFruits.unshift("Pommes");
alert(tFruits[0]);
alert(tFruits);
tFruits[10] = "Ananas";
alert(tFruits);
var oDernierElement = tFruits[tFruits.length-1];
alert(oDernierElement);

9. Je ne suis pas (qu'un) objet! (suite)
var oAuteur = new Object();
oAuteur["Melody Nelson"] = "Gainsbourg";
oAuteur["Pet Sounds"] = "Wilson";
alert(oAuteur["Pet Sounds"]);
alert(oAuteur);

10. Iterateurs
var oAuteurs = new Object();
oAuteurs["Melody Nelson"] = "Gainsbourg";
oAuteurs["Pet Sounds"] = "Wilson";
console.log("Liste des clés (les morceaux) : ");
for(var uneClef in oAuteurs){
console.log(uneClef);
}
console.log("Liste des valeurs associées à ces clés (les auteurs) : ");
for(var uneClef in oAuteurs){
console.log(oAuteurs[uneClef]);
}

11. Iterateurs (suite)
var oAuteurs = new Object();
oAuteurs["Melody Nelson"] = "Gainsbourg";
oAuteurs["Pet Sounds"] = "Wilson";
for(var iAuteur= 0; iAuteur < oAuteurs.length; iAuteurs++)
{
console.log(oAuteurs[iAuteur]);
}

12. Conclusion?
Quelle conclusion en tirez-vous sur la
relation entre tableaux et objets en
Javascript?

13. 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"};

14. In the mix
http://jacques-guizol.developpez.com/javascript/Tableaux/Tableaux.php
t = [false];
console.log(t);
t.concat("ko");
console.log(t);
t = t.concat(1);
console.logt(t);
t = t.concat("ii");
t = t.concat(pi=3.14);
t = t.concat([4,5]);
t = t.concat([6,["vii","viii"]]);
t = t.concat("ix",new Array(10,11), 12);
console.log(t); console.log(t[7]); console.log(t[9]); console.log(t[7][0]);

15. On enchaîne!
s = t.join(" <> ");
alert(s);
s = "c h e b a m";
t = s.split(" ");
alert(t);
s[0] = "ko";
alert(s);

16. Conclusion?
Quelle conclusion en tirez-vous sur la
relation entre tableaux et chaînes en
Javascript?

17. Construisons ensemble
une calculatrice

18. Code à trous
Complétez le code source fourni ("minicalc").
Lorsque l'utilisateur appuie sur le bouton d'un opérateur
arithmétique:
la valeur saisie ou l'opérateur choisi est mémorisé
Lorsque l'utilisateur appuie sur le bouton "=", l'opération est
exécutée et le résultat est affiché dans le champ de saisie.
(Cette calculatrice ne sait réaliser qu'une opération simple à la fois).

19. Vrai ou faux?
Que fait ce code?

20. Le côté obscur ...
var t1 = [];
if(t1 || !t2)
{
sMsg = "Non, n'essaie pas ! "
+ "Fais-le, ou ne le fais pas!";
alert (sMsg);
}

21. Bilan
Objectif atteint?

22. Fin

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