Pour
Exemple :
Dans le dossier 2-structures :
Ajoutez le fichier 3-pour.html
1
2
<html lang="fr">
3
<head>
4
<title>JS Pour</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 - Pour</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
<div class="m-3 p-3 row">
29
<p>Affiche la somme des nombres entiers de 1 à 10</p>
30
31
<div class="col">
32
<input type="text" id="exo1Afficher" class="form-control" readonly>
33
</div>
34
</div>
35
36
<div class="m-3 p-3 row">
37
<p>Affiche la somme des nombres entiers de début à fin</p>
38
<div class="col-2">
39
<div class="input-group mb-3">
40
<span class="input-group-text">Début</span>
41
<input type="text" id="debut1" class="form-control">
42
</div>
43
</div>
44
<div class="col-2">
45
<div class="input-group mb-3">
46
<span class="input-group-text">Fin</span>
47
<input type="text" id="fin1" class="form-control">
48
</div>
49
</div>
50
51
<div class="col">
52
<input type="text" id="exo2Afficher" class="form-control" readonly>
53
</div>
54
</div>
55
56
<div class="m-3 p-3 row">
57
<p>Affiche la somme des nombres pairs entre debut et fin </p>
58
59
<div class="col-2">
60
<div class="input-group mb-3">
61
<span class="input-group-text">Début</span>
62
<input type="text" id="debut2" class="form-control">
63
</div>
64
</div>
65
<div class="col-2">
66
<div class="col input-group mb-3">
67
<span class="input-group-text">Fin</span>
68
<input type="text" id="fin2" class="form-control">
69
</div>
70
</div>
71
72
<div class="col">
73
<input type="text" id="exo3Afficher" class="form-control" readonly>
74
</div>
75
</div>
76
77
</main>
78
79
<footer>
80
<nav class="navbar navbar-expand-lg navbar-light bg-secondary bg-gradient">
81
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
82
<li class="nav-item">
83
<a class="nav-link" href="https://www.univ-littoral.fr/">ULCO</a>
84
</li>
85
<li class="nav-item">
86
<a class="nav-link" href="https://fcu.univ-littoral.fr/">FCU</a>
87
</li>
88
<li class="nav-item">
89
<a class="nav-link" href="https://deust-bcmm.univ-littoral.fr/">W2D</a>
90
</li>
91
</ul>
92
</nav>
93
</footer>
94
95
<script src="js/0-outils.js"></script>
96
<script src="js/3-pour.js"></script>
97
</body>
98
</html>
Dans le dossier js ajoutez le fichier 3-pour.js
1
const exercice = () => {
2
let debut1 = +document.querySelector('#debut1').value;
3
let fin1 = +document.querySelector('#fin1').value;
4
let debut2 = +document.querySelector('#debut2').value;
5
let fin2 = +document.querySelector('#fin2').value;
6
7
// Exo1 //8
9
10
// Exo2 //11
12
13
// Exo3 //14
15
16
}
17
18
19
Exercice :
Complétez le fichier 3-pour.js :
Exo1 : la balise exo1Afficher affiche la somme des nombres de 1 à 10.
Exo2 : la balise exo2Afficher affiche la somme des nombres de debut1 à fin1.
Exo3 : la balise exo3Afficher affiche la somme des nombres pairs entre debut2 et fin2.
Ouvrez dans votre navigateur le fichier 3-pour.html