Javascript : que fait ce code?

Que fait ce code?
Les types primitifs de Javascript

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

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

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

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/

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"

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

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

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"

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

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

Construisons ensemble
une calculatrice

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()?

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

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.

Vrai ou faux?
Que fait ce code?

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

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é?

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.

Javascript : que fait ce code?

Contenu connexe

Tendances (20)

En vedette (20)

Similaire à Javascript : que fait ce code? (20)

Plus de Ruau Mickael (20)

Dernier (20)

Javascript : que fait ce code?

Notes de l'éditeur