Onglets Javascript - Pour l'explication de la boucle

Question

J'ai cherché partout une explication au niveau du singe et je ne l'ai trouvé nulle part. J'étudie JS et j'essayais de créer des onglets dans une page, tout va bien sauf que je ne peux pas comprendre un morceau de code dans l'exemple W3SCHOOLS.

HTML:

<div class="tab"> 
    <button class="tablinks" onclick="openCity(event, 'London')">London</button> 
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> 
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> 
</div> 

<div id="London" class="tabcontent"> 
    <h3>London</h3> 
    <p>London is the capital city of England.</p> 
</div> 

<div id="Paris" class="tabcontent"> 
    <h3>Paris</h3> 
    <p>Paris is the capital of France.</p> 
</div> 

<div id="Tokyo" class="tabcontent"> 
    <h3>Tokyo</h3> 
    <p>Tokyo is the capital of Japan.</p> 
</div> 

JS:

function openCity(evt, cityName) { 
    // Declare all variables 
    var i, tabcontent, tablinks; 

    // Get all elements with class="tabcontent" and hide them 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 

    // Get all elements with class="tablinks" and remove the class "active" 
    tablinks = document.getElementsByClassName("tablinks"); 
    for (i = 0; i < tablinks.length; i++) { 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
    } 

    // Show the current tab, and add an "active" class to the button that opened the tab 
    document.getElementById(cityName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
} 

Question:

Quel est le but de la boucle pour y? Pourquoi y a-t-il une variable "i"? Pourquoi tabcontent/links.length est utilisé dans la condition?

J'apprécierais grandement toute aide de votre part. Je vous remercie!

Answer 1

Vous utilisez des boucles lorsque vous devez répéter un ensemble d'actions un certain nombre de fois.

Dans cet exemple, vous obtenez tous les éléments avec la classe "tablinks" et les enregistrez dans une variable nommée "tablinks". Imaginez cette variable comme une boîte.

tablinks = document.getElementsByClassName("tablinks"); 

Maintenant, vous allez exécuter une action sur chacun des éléments (les liens de connexion) de la boîte. Vous déclarez d'abord une variable fictive "i", cette variable vit et meurt dans la boucle, vous initialisez la variable avec la valeur zéro (0), cela devrait être la partie "i = 0", vous utilisez cette variable itérer sur les éléments de la boîte.

Il y a N éléments dans la boîte. Pour savoir combien d'éléments vous utilisez, tablikns.length, la longueur de l'attribut vous indique le nombre de liens dans la variable tablink.

Maintenant vous avez commencé une variable i = 0 et vous devez répéter les instructions "tablink.length" fois, donc vous devez incrémenter le compteur "i" chaque fois que vous exécutez une itération, cela est fait en utilisant le "i ++" " partie.

Lorsque le compteur atteint la valeur tablinks.length, vous arrêtez d'itérer et continuez avec le reste du code. C'est la partie: "i < tablinks.length"

Enfin tout ce qui est écrit comme ça.

for (i = 0; i < tablinks.length; i++) { 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
} 

S'il y a 3 éléments dans la boîte et vous commencez à la variable i avec la valeur 0, la condition "i < tablinks.length" est vrai pour les valeurs i = 0,1 et 2. Lorsque i = 3 la condition est fausse et vous quittez la boucle, donc vous avez fait 3 itérations.

J'espère que je l'ai compris pour vous.

Cordialement.

Answer 2

Dans cet exemple spécifique, la première boucle for utilisée pour parcourir chaque élément ayant le nom de classe "tabcontent" et la seconde chaque élément avec le nom de classe "tablinks".

La variable "i" dans une boucle représente l'index, c'est juste convention d'utiliser la lettre i.

La fonction getElementsByClassName ("tabcontent") retournera une collection de tous les éléments avec le nom de classe "tabcontent". C'est la même chose pour les "tableaux". Tabcontent.length retournera 3, car il y a 3 éléments qui ont un nom de classe "tabcontent", et nous voulons les parcourir tous dans notre boucle.

tabcontent [i] accédera à cet élément, donc dans la première étape de notre boucle, lorsque i = 0, tabcontent [0] nous donnera le premier élément puisque les tableaux commencent toujours à 0.

Ainsi, dans cet exemple, la boucle sera 0, 1, 2, puis de terminer, puisque la condition i < tabscontent.length n'est pas rencontré quand i = 3.

Essayez de lire plus sur boucles For: https://www.w3schools.com/js/js_loop_for.asp

et Arrays: https://www.w3schools.com/js/js_arrays.asp