[QR] Mais pourquoi faut-il toujours déclarer ses variables ?
Section : Syntaxe Javascript
Commentaires : La question est sans doute surprenante car en javascript la déclaration des variables est facultative, mais avec les exemples ci-dessous, on va comprendre l'importance de
toujours déclarer ses variables qu'elles soient locales ou globales...
surtout sous IE.
Dans les 3 exemples, on prend le cas d'
une page ayant un objet (ici un input)
ayant pour id="Test1". Puis on cherche à afficher la valeur de cet input lors du chargement de la page.
Il faut exécuter ces codes sous IE pour bien comprendre le problème.
1er exemple :
On déclare une variable locale
Test1 (
une variable qui a le même nom que l'id de l'input) dans une fonction
testvalue() :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<script type="text/javascript">
<!--
function testValue()
{
var Test1;
Test1 = parseInt(document.getElementById("Test1").value);
alert(Test1); //affiche 4
}
//-->
</script>
</head>
<body onload="testValue()">
<div>
<input id="Test1" value="4" type="text" />
</div>
</body>
</html> |
Pas de problème, le alert affiche bien la valeur de l'input c'est à dire 4.
2ème exemple :
La variable
Test1 n'est pas déclarée avec le mot-clef
var.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<script type="text/javascript">
<!--
function testValue()
{
Test1 = parseInt(document.getElementById("Test1").value);
alert(Test1); // ça plante :(
}
//-->
</script>
</head>
<body onload="testValue()">
<div>
<input id="Test1" value="4" type="text" />
</div>
</body>
</html> |
Là IE affiche un message d'erreur :
Cet objet ne gère pas cette propriété ou cette méthode
Pour les néophytes le message n'est pas très clair... L'exemple 3 va nous aider à comprendre :
3ème exemple :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<script type="text/javascript">
<!--
function testValue()
{
alert(Test1.value);
}
//-->
</script>
</head>
<body onload="testValue()">
<div>
<input id="Test1" value="4" type="text" />
</div>
</body>
</html> |
Le code contenu dans alert est
Et la boite de dialogue affiche bien la valeur de l'input c'est à dire 4.
En fait sous IE, vous pouvez accéder directement à un objet en tapant son id (sous Firefox, vous devez passer par un document.getElementById()) donc dans l'exemple 2 quand vous écrivez :
Test1 = parseInt(document.getElementById("Test1").value);
Test1 fait référence à l'objet ayant pour
id Test1 contenu dans la page, donc vous essayer d'affecter un entier à un objet (ou dit autrement vous redéfinissez votre objet input comme entier), ce qui explique le message d'erreur de IE
![:)](https://www.developpez.net/forums/images/smilies/icon_smile.gif)
.
Partager