Fonctionnement de FOR
jimInTheHood
Messages postés
4
Statut
Membre
-
ghuysmans99 Messages postés 2496 Date d'inscription Statut Contributeur Dernière intervention -
ghuysmans99 Messages postés 2496 Date d'inscription Statut Contributeur Dernière intervention -
for (var i=1;i<=5;i++) {
document.getElementById("img" + i).onclick = afficherImg;
}
for (var i=1;i<=5;i++) {
document.getElementById("img" + i).onmouseover = AfficherTest;
}
j'ai trouvé ce code, il est utilisable mais je ne comprend pas la logique derrière ce code
"for" est utilisé pour la déclaration des boutons "img1"; "img2"; "img3"; "img........
3 réponses
-
Ce code (mal écrit) définit les évènements onClick et onMouseOver pour chaque objet nommé de img1 à img5 inclus. Y'a moyen de faire plus court (par contre je sais pas si la casse des noms d'évènements est correcte) :
for (var i=1;i<=5;i++) { document.getElementById("img"+i).onClick = afficherImg; document.getElementById("img"+i).onMouseOver = AfficherTest; }
VB.NET is good ... VB6 is better ! -
C'est bien la même variable oui :
for (var i=1;i<=5;i++)
ici, on déclare une variable i à laquelle on attribut la valeur 1. Ensuite, on pose une condition : i doit toujours être inférieur ou égale à 5. Et enfin, i++ indique qu'on souhaite incrément i de 1 à chaque tour de boucle.
Donc tout ce qui est à l'intérieur de la boucle sera répété 5 fois, et à chaque tour, i aura une valeur plus grande. "img"+i correspondra donc successivement à img1;img2;img3;img4;img5.-
voici mes 5 boutons dans mon index.html :
<div id="menu_02">
<ul>
<li>
<div id="img_001" class="bt_001">image_001</div>
</li>
<li>
<div id="img_002" class="bt_001">image_002</div>
</li>
<li>
<div id="img_003" class="bt_001">image_003</div>
</li>
<li>
<div id="img_004" class="bt_001">image_004</div>
</li>
<li>
<div id="img_005" class="bt_001">image_005</div>
</li>
Appel des events avec Javascript
j'avais débuté avec:
document.getElementById("img_001").onclick = afficherVisionneuse;
document.getElementById("img_002").onclick = afficherVisionneuse;
document.getElementById("img_003").onclick = afficherVisionneuse;
document.getElementById("img_004").onclick = afficherVisionneuse;
document.getElementById("img_005").onclick = afficherVisionneuse;
j'ai optimisé mon code avec:
for (var i=1;i<=5;i++) {
document.getElementById("img_00" + i).onclick = afficherVisionneuse;
}
événement
function afficherVisionneuse() {
document.getElementById("visionneuse").src = "images/" + this.id + ".jpg";
}
ce que je ne saisi pas:
le code fonctionne à merveille, mais je me questionne sur son utilisation, je n'ai pas besoin du compteur (i++).
Le code est fonctionnel, mais pas logique c'est à ce sujet que j'aimerais avoir des éclaircissement.
Est-ce qu'il y a d'autre manière d'optimiser mon bloc d'appel sans utiliser le "for" ?
Merci
-
-
Une boucle est pour moi la solution la plus économique. L'instruction i++ dit qu'à chaque répétition du bloc entre les accolades il doit ajouter 1 à i.
