T4.md

Série TP4 – tableaux, boucles et DOM

Exercice 1 - boucles et DOM

Commencez par créer une page HTML basique (! et Enter dans une fichier .html)

1. Créez une div vide avec createElement, ajoutez-lui un id ("résultat") et ajoutez la à la page (au body).
2. Sélectionnez la div créée à l'exercice 1.1 avec son id (getElementById). À l'aide d'une boucle, qui tourne 10 fois, écrivez les chiffres de 1 à 10 dans le .innerHTML de la div. Résultat attendu (si on avait écrit en HTML la div devrait ressembler à ceci) :

<div id="résultat">1, 2, 3, 4, 5, 6, 7, 8, 9, 10</div>

3. À l'aide d'une boucle, créez 10 div qui contiennent la valeur actuelle de la boucle. Résultat attendu (si on avait tout écrit en HTML) :

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

4. En gardant la boucle de l'exercice 1.3, changez votre code pour générer 10 divs, mais placez-y des nombres aléatoires entre 1 et 50. Résultat attendu si on avat tout écrit en HTML (les nombres sont des exemples) :

<div>12</div>
<div>23</div>
<div>1</div>
<div>46</div>
<div>33</div>
<div>42</div>
<div>28</div>
<div>49</div>
<div>50</div>
<div>9</div>

5. (Avancé) En gardant la boucle de l'exercice 1.3, créez une autre boucle qui l'englobe (donc quelque chose comme for() { for() {} }). Celle-ci tourne 2 fois et ajoute un br après que les 10 div soient créées. Résultat attendu (si on avait tout tapé en HTML, remarquons que les 10 divs sont générées 2 fois : puisque la boucle qui génère les div est à l'intérieur de la boucle qui ajoute les br, elle est executée 2 fois) :

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<br />
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<br />

6. (Avancé) Même exercice, mais cette fois-ci, vous devez générer une grille de divs de 5x5 (donc la boucle des div tourne 5 fois et la boucle des br tourne aussi 5 fois). Le contenu des div est " " (pour plus d'infos : &nbsp) Pour vous aider à visualiser votre grille de div, vous pouvez appliquer le style suivant :

div {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border: 1px solid black;
  margin: 1px;
}

Résultat attendu (si on avait tapé le HTML à la main) :

<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<br />
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<br />
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<br />
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<br />
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<br />

Exercice 2 - opération sur les tableaux

Cet exercice vous requiert d'être assez débrouille (en cherchant sur Devdocs, MDN, ou Google si vous êtes bloqué.e.s) puisqu'il s'agit de découvrir certaines fonctions qui permettent d'intéragir avec les tableaux. Toutes ces notions seront développées dans le cours de la semaine prochaine.

1. Créez une variable tab qui contient un tableau vide [].
   1. À l'aide d'une boucle qui tourne 10 fois, remplissez le tableau (voir la méthode .push()) avec des valeurs aléatoires entre 1 et 20.
   2. Parcourez le tableau (avec .forEach), créez une div pour chaque valeur du tableau qui contient la valeur en question.
2. Créez une variable notes qui contient un tableau avec les valeurs suivantes : 5, 4.5, 5, 6, 3.5.
   1. Créez une variable somme qui vaut 0. À l'aide d'une boucle, parcourez le tableau et, à chaque tour de la boucle, additionnez la valeur courante à somme. À la fin, somme devrait valoir la somme de toutes les valeur.
   2. Créez une variable somme_reduce. Même objectif que l'exercice précédent (obtenir un nouveau tableau qui contient la somme des valeurs du tableau notes) mais en utilisant la fonction .reduce().
3. Créez une variable chiffres qui contient un tableau avec les valeurs suivantes : 1, 2, 3, 4, 5.
   1. Créez une variable chiffresAuCarré qui contient un tableau vide. Parcourez le tableau chiffres, multipliez chaque valeur par elle-même et ajoutez le résultat au tableau chiffresAuCarré.
   2. Créez une variable chiffresAuCarré_map. Même objectif que l'exercice précédent (obtenir un nouveau tableau qui contient les valeur du tableau chiffres au carré) mais en utilisant la fonction .map().