Alternative

Exemple

Dans le dossier 2-structures :

  • Ajoutez le fichier 1-altenative.html

1
<!DOCTYPE html>
2
<html lang="fr">
3
    <head>
4
        <title>JS Alternative</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 - Alternative</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 un prix avec une remise de 10% si supérieur à 1000€</p>
31
                <div class="col input-group mb-3">
32
                    <span class="input-group-text">Prix1</span>
33
                    <input type="text" id="prix1" 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 valeur absolue d'un nombre</p>
43
                <div class="col input-group mb-3">
44
                    <span class="input-group-text">Nombre</span>
45
                    <input type="text" id="nombre" class="form-control">
46
                </div>
47
                <div class="col">
48
                    <input type="text" id="exo2Afficher" class="form-control" readonly>
49
                </div>
50
            </div>
51
52
            <div class="m-3 p-3 row">
53
                <p>Le prix d'entrée à un spectacle est de 4,50€ par personne. Si le nombre de personnes est supérieur à
54
                    10, le prix par personne, est de 3 €.</p>
55
                <div class="col input-group mb-3">
56
                    <span class="input-group-text">Place(s)</span>
57
                    <input type="text" id="place" class="form-control">
58
                </div>
59
60
                <div class="col">
61
                    <input type="text" id="exo3Afficher" class="form-control" readonly>
62
                </div>
63
            </div>
64
65
            <div class="m-3 p-3 row">
66
                <p>Affiche si l'année est bissextile.</p>
67
                <div class="col input-group mb-3">
68
                    <span class="input-group-text">Année</span>
69
                    <input type="text" id="annee" class="form-control">
70
                </div>
71
72
                <div class="col">
73
                    <input type="text" id="exo4Afficher" class="form-control" readonly>
74
                </div>
75
            </div>
76
77
            <div class="m-3 p-3 row">
78
                <p>Affiche le prix remisé : >1000 10%, >1500 15%, >2000 20%</p>
79
                <div class="col input-group mb-3">
80
                    <span class="input-group-text">Prix2</span>
81
                    <input type="text" id="prix2" class="form-control">
82
                </div>
83
84
                <div class="col">
85
                    <input type="text" id="exo5Afficher" class="form-control" readonly>
86
                </div>
87
            </div>
88
89
            <div class="m-3 p-3 row">
90
                <p>Le prix d'entrée à un spectacle est de 4,50€ pour les adultes et de 3€ pour les enfants.</p>
91
                <p>Si le nombre d'enfants est supérieur à 3, le prix par enfant est de 2€.</p>
92
                <p>Si le nombre de personnes est supérieur à 10 le prix par adulte est de 3 € et le prix par enfant est
93
                    de 2€.</p>
94
                <p>Affiche le prix du spectacle.</p>
95
                <div class="col input-group mb-3">
96
                    <span class="input-group-text">Adulte(s)</span>
97
                    <input type="text" id="adulte" class="form-control">
98
                </div>
99
                <div class="col input-group mb-3">
100
                    <span class="input-group-text">Enfant(s)</span>
101
                    <input type="text" id="enfant" class="form-control">
102
                </div>
103
104
                <div class="col">
105
                    <input type="text" id="exo6Afficher" class="form-control" readonly>
106
                </div>
107
            </div>
108
109
            <div class="m-3 p-3 row">
110
                <p>Équation du second degré</p>
111
                <p>aX² + bX + c = 0</p>
112
                <div class="col input-group mb-3">
113
                    <span class="input-group-text">a</span>
114
                    <input type="text" id="a" class="form-control">
115
                </div>
116
                <div class="col input-group mb-3">
117
                    <span class="input-group-text">b</span>
118
                    <input type="text" id="b" class="form-control">
119
                </div>
120
                <div class="col input-group mb-3">
121
                    <span class="input-group-text">c</span>
122
                    <input type="text" id="c" class="form-control">
123
                </div>
124
125
                <div class="col">
126
                    <input type="text" id="exo7Afficher" class="form-control" readonly>
127
                </div>
128
            </div>
129
130
131
        </main>
132
133
        <footer>
134
            <nav class="navbar navbar-expand-lg navbar-light bg-secondary bg-gradient">
135
              <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
136
                <li class="nav-item">
137
                  <a class="nav-link" href="https://www.univ-littoral.fr/">ULCO</a>
138
                </li>
139
                <li class="nav-item">
140
                  <a class="nav-link" href="https://fcu.univ-littoral.fr/">FCU</a>
141
                </li>
142
                <li class="nav-item">
143
                  <a class="nav-link" href="https://deust-bcmm.univ-littoral.fr/">W2D</a>
144
                </li>
145
              </ul>
146
            </nav>
147
        </footer>
148
149
        <script src="js/0-outils.js"></script>
150
        <script src="js/1-alternative.js"></script>
151
    </body>
152
</html>
153
  • Dans le dossier js ajoutez le fichier 1-alternative.js
1
const exercice = () => {
2
    let prix1 = +document.querySelector('#prix1').value;
3
    let prix2 = +document.querySelector('#prix2').value;
4
    let nombre = +document.querySelector('#nombre').value;
5
    let place = +document.querySelector('#place').value;
6
    let annee = +document.querySelector('#annee').value;
7
    let adulte = +document.querySelector('#adulte').value;
8
    let enfant = +document.querySelector('#enfant').value;
9
    let a = +document.querySelector('#a').value;
10
    let b = +document.querySelector('#b').value;
11
    let c = +document.querySelector('#c').value;
12
13
    // Exo1 //
14
15
16
    // Exo2 //
17
18
19
    // Exo3 //
20
21
22
    // Exo4 //
23
24
    
25
    // Exo5 //
26
27
28
    // Exo6 //
29
30
31
    // Exo7 //
32
 // aX² + bX + c
33
 // delta = b² - 4ac
34
 // X1 = (-b + sqrt(delta))/2a
35
 // X2 = (-b - sqrt(delta))/2a
36
    
37
38
    
39
}
40
41
42
const exercice = () => {...} : exercice est une fonction qui se déclenche quand vous cliquez sur le bouton Soumettre.
1
<button type="submit" onclick="exercice()" class="btn btn-primary">Soumettre</button>
+document.querySelector('#prix1').value : récupère le contenu de la balise d'identifiant prix1. Le + permet de convertir la chaîne de caractères contenant des chiffres en nombre.
Exercice :
  • Complétez le fichier 1-alternative.js :
    • Exo1 : la balise exo1Afficher affiche prix1 avec une remise de 10% si supérieur à 1000€ sinon prix1 sans remise.
    • Exo2 : la balise exo2Afficher affiche la valeur absolue de nombre.
    • Exo3 : la balise exo3Afficher affiche le prix d'un spectacle en fonction du nombre de place. prix 4,50€ par place, si place supérieur à 10 alors 3€ par place.
    • Exo4 : la balise exo4Afficher affiche si annee est bissextile. les années doivent être divisibles par 4, les années séculaires doivent être divisible par 400.
    • Exo5 : la balise exo5Afficher affiche prix2 avec les remises : >1000 10%, >1500 15%, >2000 20%.
    • Exo6 : la balise exo6Afficher affiche le prix d'un spectacle en fonction du nombre d'enfants et du nombre d'adultes.
      • 4,50€ par adulte et 3€ par enfant
      • Si enfant supérieur à 3 : 2€ par enfant
      • Si le nombre de personnes est supérieur à 10 : 3€ adulte, 2€ enfant.
    • Exo7 : la balise exo7Afficher affiche les solutions de l'équation du second degré. aX² + bX + c = 0
Ouvrez dans votre navigateur le fichier 1-alternative.html