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 : 1/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?
Les types primitifs de Javascript

2. Objectif
A la fin de cette séance, vous serez capables de réaliser
des programmes en javascript utilisant les types primitifs
(String, Number, Boolean).
- Vous aurez expliqué les pièges de l'opérateur + ("plus")
- Vous aurez expliqué les pièges de la fonction eval()
- Vous aurez mis en oeuvre une méthode de vérification
des types manipulés, avec la fonction typeof et/ou
l'opérateur de stricte égalité.

3. Critères d'évaluation
En groupe :
- vous expliquerez les pièges de l'opérateur + ("plus")
Individuellement :
- vous expliquerez les pièges de la fonction eval()
- vous réaliserez les fonctions de base d'une calculatrice à
partir du code à trous fourni. A cette occasion, vous
mettrez en oeuvre une méthode de vérification des types
manipulés, avec la fonction typeof et/ou l'opérateur de
stricte égalité.

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

5. Références
http://www.w3.org/community/webed/wiki/Main_Page#JavaScript_core_skills
http://www.crockford.com/javascript/survey.html
http://www.peachpit.com/articles/article.aspx?p=1847297&seqNum=2
http://www.gchagnon.fr/cours/dhtml/
http://fr.wikipedia.org/wiki/Syntaxe_JavaScript
http://fr.wikibooks.org/wiki/Programmation_JavaScript/
http://www.commentcamarche.net/contents/javascript/
https://developer.mozilla.org/fr/docs/JavaScript
http://www.xul.fr/ecmascript/
http://msdn.microsoft.com/en-us/library/ie/d1et7k7c(v=vs.94).aspx
http://dev.opera.com/articles/view/javascript-best-practices/

6. Nombres et chaînes

7. Les nombres
function additionner()
{
var iResult = 0;
for(i = 0; i < arguments.length; i++)
{
iResult += arguments[i];
}
return iResult ;
}
alert(additionner(1,2,3)); // affiche "6"

8. Les chaînes de caractères
function concatener()
{
var sResult = "";
for(i = 0; i < arguments.length; i++)
{
sResult += arguments[i];
}
return sResult;
}
alert(concatener("Concaténation ","de ","chaînes."));
// Affiche "Concaténation de chaînes"

9. Opération sans douleur?
/* Que se passe-t-il maintenant?
*/
var n1 = '1', n2 = '2', n3 = '3';
alert(additionner(n1, n2, n3)); // Affiche "0123"

10. Les chaînes ont du caractère...
/* Que se passe-t-il maintenant?
*/
var s1 = 1, s2 = 2, s3 = 3;
alert(concatener(s1, s2, s3)); //affiche "123"

11. Quelles solutions?
Que proposez-vous pour remédier à ces
comportements "étranges"?

12. Explication
http://fr.wikipedia.org/wiki/Syntaxe_JavaScript
L'opérateur '+' est surchargé; il est utilisé pour la concaténation de chaîne de
caractères et l'addition ainsi que la conversion de chaînes de caractères en
nombres.
// Concatène une chaîne et un nombre
var x = 2;
alert( x + '2'); // affiche 22
// Convertit une chaîne en nombre
var z = '4'; // z est une chaîne (le caractère 4)
alert( z + x); // affiche 42
alert( +z + x); // affiche 6

13. Construisons ensemble
une calculatrice

14. Eval is evil
Créez un bouton en html (<input type="button">).
Lorsque l'utilisateur appuie sur le bouton, l'opération
mathématique est exécutée à l'aide de la fonction native
eval() et le résultat est affiché dans une fenêtre de
dialogue.
Ex.a : alert(eval(1+2));
Ex.b : eval(alert(1+2));
1- Quelles sont les différences entre ces deux exemples?
2- Quels avantages et inconvénients y-a-t-il à utiliser la
fonction eval()?

15. Code à trou : protoCalc
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function additionner()
{
var iResult = 0;
for(i = 0; i < arguments.length; i++)
{
iResult += arguments[i];
}
return iResult ;
}
</script>
</head>
<body>
<form name="frm_calcul">
<input type="button" value="1+2" name="addition" onclick="alert(additionner(1,2));" />
<input type="button" value="1+'2'" name="addition_v2" onclick="alert(additionner(1,'2'));" />
<input type="button" value="'1'+2" name="addition_v3" onclick="alert(additionner('1',2));" />
<input type="button" value="'1'+'2'" name="addition_v4" onclick="alert(additionner('1','2'));" />
</form>
</body>
</html>

16. Typeof()
Créez une fonction réalisant une des 4 opérations arithmétique de base
(addition, ou soustraction, ou multiplication, ou division).
Vérifiez les saisies utilisateur à l'aide de l'opérateur de stricte égalité (===) ou
de la la fonction typeof().
Ex : alert(typeof("1"));
Notes :
- javascript est sensible à la casse : typeof s'écrit entièrement en minuscules
- il n'existe qu'un seul type pour stocker les nombres, quels qu'ils soient
(entiers, flottants, etc.) : la classe Number.

17. Vrai ou faux?
Que fait ce code?

18. Jeu de Boole
var bTest = new Boolean(0);
if(bTest )
{
sMsg = "I'm sorry Dave."
+ " I'm afraid I Can't do that...";
alert (sMsg);
}

19. Bilan
Objectif atteint?

20. Critères d'évaluation
En groupe :
- avez-vous expliqué les pièges de l'opérateur + ("plus")?
Individuellement :
- avez-vous expliqué les pièges de la fonction eval()?
- avez-vous réalisé les fonctions de base d'une calculatrice
à partir du code à trous fourni? A cette occasion, avez-vous
mis en oeuvre une méthode de vérification des types
manipulés, avec la fonction typeof et/ou l'opérateur de
stricte égalité?

21. Fin

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