TantQue

Exemple

Dans le dossier 2-structures :

  • Ajoutez le fichier 2-tantQue.html

1
<!DOCTYPE html>
2
<html lang="fr">
3
    <head>
4
        <title>JS Tant Que</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 - Tant Que</h2>
19
            </section>
20
        </header>
21
22
        <main>
23
            <div class="m-3 p-3 row">
24
                <div class="col-auto">
25
                    <button type="submit" onclick="exercice()" class="btn btn-primary">Soumettre</button>
26
                </div>
27
            </div>
28
29
            <div class="m-3 p-3 row">
30
                <p>Affiche la somme des nombres entiers jusque la valeur de nombre</p>
31
                <div class="col input-group mb-3">
32
                    <span class="input-group-text">Nombre</span>
33
                    <input type="text" id="nombre" class="form-control">
34
                </div>
35
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 nombres entiers de début à fin</p>
43
                <div class="col input-group mb-3">
44
                    <span class="input-group-text">Début</span>
45
                    <input type="text" id="debut" class="form-control">
46
                </div>
47
                <div class="col input-group mb-3">
48
                    <span class="input-group-text">Fin</span>
49
                    <input type="text" id="fin" class="form-control">
50
                </div>
51
52
                <div class="col">
53
                    <input type="text" id="exo2Afficher" class="form-control" readonly>
54
                </div>
55
            </div>
56
57
            <div class="m-3 p-3 row">
58
                <p>Affiche les nombres entiers entre 1 et 50 multiple de diviseur </p>
59
                <div class="col-2">
60
                    <div class="input-group">
61
                        <span class="input-group-text">Diviseur</span>
62
                        <input type="text" id="diviseur" class="form-control">
63
                    </div>
64
                </div>
65
66
                <div class="col">
67
                    <input type="text" id="exo3Afficher" class="form-control" readonly>
68
                </div>
69
            </div>
70
71
        </main>
72
73
        <footer>
74
            <nav class="navbar navbar-expand-lg navbar-light bg-secondary bg-gradient">
75
              <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
76
                <li class="nav-item">
77
                  <a class="nav-link" href="https://www.univ-littoral.fr/">ULCO</a>
78
                </li>
79
                <li class="nav-item">
80
                  <a class="nav-link" href="https://fcu.univ-littoral.fr/">FCU</a>
81
                </li>
82
                <li class="nav-item">
83
                  <a class="nav-link" href="https://deust-bcmm.univ-littoral.fr/">W2D</a>
84
                </li>
85
              </ul>
86
            </nav>
87
        </footer>
88
89
        <script src="js/0-outils.js"></script>
90
        <script src="js/2-tantQue.js"></script>
91
    </body>
92
</html>
  • Dans le dossier js ajoutez le fichier 2-tantQue.js
1
const exercice = () => {
2
    let nombre = +document.querySelector('#nombre').value;
3
    let debut = +document.querySelector('#debut').value;
4
    let fin = +document.querySelector('#fin').value;
5
    let diviseur = +document.querySelector('#diviseur').value;
6
7
    // Exo1 //
8
9
10
    // Exo2 //
11
12
13
    // Exo3 //
14
15
16
}
Exercice :
  • Complétez le fichier 2-tantQue.js :
    • Exo1 : la balise exo1Afficher affiche la somme des nombres de 1 à nombre.
    • Exo2 : la balise exo2Afficher affiche la somme des nombres de debut à fin.
    • Exo3 : la balise exo3Afficher affiche les nombres entre 1 et 50 multiple de diviseur.
Ouvrez dans votre navigateur le fichier 2-tantQue.html