Tableaux

Exemple

Dans le dossier 2-structures :

  • Ajoutez le fichier 4-tableaux.html

1
<!DOCTYPE html>
2
<html lang="fr">
3
    <head>
4
        <title>JS Itération Tableaux</title>
5
        <meta charset="utf-8" />
6
        <meta name="viewport" content="width=device-width, initial-scale=1" />
7
        <link
8
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
9
          rel="stylesheet"
10
          integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
11
          crossorigin="anonymous"
12
        />
13
        <style> main > div {background-color: #c5c5c5;}</style>
14
    </head>
15
    <body>
16
        <header class="p-2 bg-secondary text-light bg-gradient">
17
            <section>
18
                <h2>JS - Itération Tableaux</h2>
19
            </section>
20
        </header>
21
22
        <main>
23
            <div class="m-3 p-3 row" >
24
                <p>Saisissez les valeurs du tableau séparées par une virgule</p>
25
                <div class="col input-group mb-3">
26
                    <span class="input-group-text">Nombre</span>
27
                    <input type="text" id="tableau" class="form-control">
28
                </div>
29
                <div class="col-auto">
30
                    <button type="submit" onclick="exercice()" class="btn btn-primary">Soumettre</button>
31
                </div>
32
            </div>
33
34
            <div class="m-3 p-3 row" >
35
                <p>Affiche la somme des valeurs du tableau</p>
36
                <div class="col">
37
                    <input type="text" id="exo1Afficher" class="form-control" readonly>
38
                </div>
39
            </div>
40
41
            <div class="m-3 p-3 row" >
42
                <p>Affiche la somme des valeurs impaires du tableau</p>
43
                 <div class="col">
44
                    <input type="text" id="exo2Afficher" class="form-control" readonly>
45
                </div>
46
            </div>
47
48
            <div class="m-3 p-3 row" >
49
                <p>Affiche combien de valeurs du tableau sont paires</p>
50
                <div class="col">
51
                    <input type="text" id="exo3Afficher" class="form-control" readonly>
52
                </div>
53
            </div>
54
55
            <div class="m-3 p-3 row" >
56
                <p>Affiche combien de valeurs du tableau sont inférieures à nombre1 </p>
57
                <div class="col-2">
58
                    <div class="input-group">
59
                        <span class="input-group-text">Nombre1</span>
60
                        <input type="text" id="nombre1" class="form-control">
61
                    </div>
62
                </div>
63
                 <div class="col">
64
                    <input type="text" id="exo4Afficher" class="form-control" readonly>
65
                </div>
66
            </div>
67
68
            <div class="m-3 p-3 row" >
69
                <p>Affiche si le tableau contient un nombre pair</p>
70
                 <div class="col">
71
                    <input type="text" id="exo5Afficher" class="form-control" readonly>
72
                </div>
73
            </div>
74
75
            <div class="m-3 p-3 row" >
76
                <p>Affiche si le nombre2 est dans le tableau </p>
77
                <div class="col-2">
78
                    <div class="input-group">
79
                        <span class="input-group-text">Nombre2</span>
80
                        <input type="text" id="nombre2" class="form-control">
81
                    </div>
82
                </div>
83
                <div class="col">
84
                    <input type="text" id="exo6Afficher" class="form-control" readonly>
85
                </div>
86
            </div>
87
88
89
        </main>
90
91
        <footer>
92
            <nav class="navbar navbar-expand-lg navbar-light bg-secondary bg-gradient">
93
              <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
94
                <li class="nav-item">
95
                  <a class="nav-link" href="https://www.univ-littoral.fr/">ULCO</a>
96
                </li>
97
                <li class="nav-item">
98
                  <a class="nav-link" href="https://fcu.univ-littoral.fr/">FCU</a>
99
                </li>
100
                <li class="nav-item">
101
                  <a class="nav-link" href="https://deust-bcmm.univ-littoral.fr/">W2D</a>
102
                </li>
103
              </ul>
104
            </nav>
105
        </footer>
106
107
        <script src="js/0-outils.js"></script>
108
        <script src="js/4-tableaux.js"></script>
109
    </body>
110
</html>
  • Dans le dossier js ajoutez le fichier 4-tableaux.js
1
const exercice = () => {
2
    const liste = document.querySelector('#tableau');
3
    let tableau = liste.value.split(',').map((v) => +v);
4
    let nombre1 = +document.querySelector('#nombre1').value;
5
    let nombre2 = +document.querySelector('#nombre2').value;
6
7
    // Exo1 //
8
 
9
10
    // Exo2 //
11
12
13
    // Exo3 //
14
15
16
    // Exo4 //
17
18
19
    // Exo5 //
20
21
22
    // Exo6 //
23
24
25
26
}
27
28
29
30
liste.value.split(',') : la chaîne de caractères se trouvant dans la balise liste est découpée suivant le caractère ','. L'ensemble des chaînes découpées est retourné dans un tableau.
'4,12,8,13' => ['4', '12',' 8', '13']
.map((v) => +v) : chaque élément v du tableau est transformé en +v. C'est à dire que le tableau contient maintenant une liste de nombres.
['4', '12',' 8', '13'] => [4, 12, 8, 13]
Exercice :
  • Complétez le fichier 4-tableaux.js :
    • Exo1 : la balise exo1Afficher affiche la somme des valeurs de tableau.
    • Exo2 : la balise exo2Afficher affiche la somme des valeurs impaires de tableau.
    • Exo3 : la balise exo3Afficher affiche combien de valeurs de tableau sont paires.
    • Exo4 : la balise exo4Afficher affiche combien de valeurs de tableau sont inférieures à nombre1.
    • Exo5 : la balise exo5Afficher affiche si tableau contient un nombre pair.
    • Exo6 : la balise exo6Afficher affiche si tableau contient nombre2.
Ouvrez dans votre navigateur le fichier 4-tableaux.html