[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() :
Code xhtml : Sélectionner tout - Visualiser dans une fenêtre à part
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.
Code xhtml : Sélectionner tout - Visualiser dans une fenêtre à part
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 :
Code xhtml : Sélectionner tout - Visualiser dans une fenêtre à part
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
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
Test1.value
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 :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
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 .