Probleme de portée de variable et boucles for avec javascript

26 août 2008 at 13 h 05 min Laisser un commentaire

il peut arriver d’avoir besoin de définir des attributs d’une balise HTML de manière programmée.
Imaginez par exemple qu’on veuille afficher le titre (attribut title) d’une centaine de balise <a> lorsqu’elle sont survolée par la souris.

Nous pourrions commencer par écrire une boucle, quelque chose dans ce style:

<html><a id="0" href="./0" title="the first"> lien n.0 </a>
<a id="1" href="./1" title="the second"> lien n.1 </a>
<a id="2" href="./2" title="the third"> lien n.2 </a>
<a id="3" href="./3" title="the fourth"> lien n.3 </a>
<a id="4" href="./4" title="the fifth"> lien n.4 </a></html>


<script>
var number_of_link = 5;
for(i=0;i<number_of_link;i++){
document.getElementById(i).onmouseover =
function(){
alert("Je suis le lien numéro "+i)
};
}
</script>

Bon début, non ? Mais essayez ce code. Vous avez vu le probleme ?

Décortiquons ce qui se passe:

Nous commençons par itérer avec une variable appeée i. Cette variable a une portée globale. Pour chaque élément trouvé, nous attachos a l'évenement onmouseover une nouvelle fonction, qui affiche le contenu de la variable globale i. Mais cette variable est passée par référence, ainsi c'est toujours la dernière valeur de la variable i qui est affichée par cette fonction! Nous voudrions qu'elle soit apssée par valeur!

Rassurez vous, la solution n'est pas très loin: il suffit d'attacher a l'évènement onmouseover un objet Function créé par le constructeur a partir d'un texte qui défnira la fonction de manière statique.

<html><a id="0" href="./0" title="the first"> lien n.0 </a>
<a id="1" href="./1" title="the second"> lien n.1 </a>
<a id="2" href="./2" title="the third"> lien n.2 </a>
<a id="3" href="./3" title="the fourth"> lien n.3 </a>
<a id="4" href="./4" title="the fifth"> lien n.4 </a></html>

<script>
var number_of_link = 5;
for(i=0;i<number_of_link;i++){
document.getElementById(i).onmouseover =
new Function("alert(\"je suis le lien numéro \"+i)");
}
</script>

Le constructeur Function permet de prendre une chaine de caractère et de la déclarer en tant que fonction. Cette astuce oblige l'interpreteur javascript a construire la chaine de caractère, et seulement après à compiler la fonction elle même. AInsi, ous arrivons à écrire un nombre dans une fonction statique, et a obtenir l'effet désiré lors du survol.

Pour plus d'informations sur l'objet Function, je vous recommande la lecture de cette page:
http://www.howtocreate.co.uk/tutorials/javascript/functions

Jetez un oeil également aux articles avec les mots clés "javascript" et " closure"
http://www.jibbering.com/faq/faq_notes/closures.html

Entry filed under: Javascript. Tags: .

Dealing with Javascript variable scope and for-loop or external function. Debian : austérité = fiabilité ? pstree et demons à l’installation…

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Trackback this post  |  Subscribe to the comments via RSS Feed