Sujet Précédent Sujet Suivant

Fonctionnement de FOR

Fermé
jimInTheHood Messages postés 3 Date d'inscription vendredi 7 mai 2010 Statut Membre Dernière intervention 8 mai 2010 - 7 mai 2010 à 20:58
ghuysmans99 Messages postés 2496 Date d'inscription jeudi 14 juillet 2005 Statut Contributeur Dernière intervention 5 juin 2016 - 8 mai 2010 à 23:50


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........
A voir également:

3 réponses

Réponse 1 / 3
ghuysmans99 Messages postés 2496 Date d'inscription jeudi 14 juillet 2005 Statut Contributeur Dernière intervention 5 juin 2016 338
Modifié par ghuysmans99 le 8/05/2010 à 00:22
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 !
0
jimInTheHood Messages postés 3 Date d'inscription vendredi 7 mai 2010 Statut Membre Dernière intervention 8 mai 2010
8 mai 2010 à 09:31
Merci pour l'optimisation du code

est-ce que le "i" dans le "for" est la même variable que celle dans ("img" + i)
0
Réponse 2 / 3
Utilisateur anonyme
8 mai 2010 à 09:45
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.
0
jimInTheHood Messages postés 3 Date d'inscription vendredi 7 mai 2010 Statut Membre Dernière intervention 8 mai 2010
8 mai 2010 à 18:32
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
0
Réponse 3 / 3
ghuysmans99 Messages postés 2496 Date d'inscription jeudi 14 juillet 2005 Statut Contributeur Dernière intervention 5 juin 2016 338
8 mai 2010 à 23:50
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.
0

Discussions similaires

Durée de fonctionnement
mohmed950 -
Haldriel -

3 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses