View
108
Download
2
Category
Preview:
Citation preview
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/
Nombres et chaînes
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 = "";
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"
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;
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>
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);
}
Bilan
Objectif atteint?
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é?
Fin
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.
Recommended