Nombres
Exemple :
Dans le dossier 3-fonctions :
Ajoutez le fichier 1-nombres.html
1
2
<html lang="fr">
3
<head>
4
<title>JS Fonctions Nombres</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 - Fonctions Nombres</h2>
19
</section>
20
</header>
21
22
<main>
23
<div class="m-3 p-3 row" >
24
<p>Remplir les variables</p>
25
<div class="col input-group mb-3">
26
<span class="input-group-text">Tableau</span>
27
<input type="text" id="tableau" class="form-control">
28
</div>
29
<div class="col input-group mb-3">
30
<span class="input-group-text">Nombre1</span>
31
<input type="text" id="nombre1" class="form-control">
32
</div>
33
<div class="col input-group mb-3">
34
<span class="input-group-text">Nombre2</span>
35
<input type="text" id="nombre2" class="form-control">
36
</div>
37
<div class="col input-group mb-3">
38
<span class="input-group-text">Nombre3</span>
39
<input type="text" id="nombre3" class="form-control">
40
</div>
41
<div class="col-auto">
42
<button type="submit" onclick="exercice()" class="btn btn-primary">Soumettre</button>
43
</div>
44
</div>
45
46
<div class="m-3 p-3 row">
47
<p>Affiche la plus grande valeur entre nombre1 et nombre2</p>
48
49
<div class="col">
50
<input type="text" id="plusGrand" class="form-control" readonly>
51
</div>
52
</div>
53
54
<div class="m-3 p-3 row">
55
<p>Affiche la table de multiplication de nombre1</p>
56
57
<div class="col">
58
<textarea type="text" id="table" class="form-control" rows="10" readonly></textarea>
59
</div>
60
</div>
61
62
<div class="m-3 p-3 row">
63
<p>Affiche la somme des nombres du tableau</p>
64
<div class="col input-group mb-3">
65
<input type="text" id="somme" class="form-control" readonly>
66
</div>
67
</div>
68
69
<div class="m-3 p-3 row">
70
<p>Affiche la somme de nombre1, nombre2 et nombre3</p>
71
<div class="col input-group mb-3">
72
<input type="text" id="somme3" class="form-control" readonly>
73
</div>
74
</div>
75
76
<div class="m-3 p-3 row">
77
<p>Affiche la somme des 3 premiers nombres du tableau</p>
78
<div class="col input-group mb-3">
79
<input type="text" id="somme3bis" class="form-control" readonly>
80
</div>
81
</div>
82
83
</main>
84
85
<footer>
86
<nav class="navbar navbar-expand-lg navbar-light bg-secondary bg-gradient">
87
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
88
<li class="nav-item">
89
<a class="nav-link" href="https://www.univ-littoral.fr/">ULCO</a>
90
</li>
91
<li class="nav-item">
92
<a class="nav-link" href="https://fcu.univ-littoral.fr/">FCU</a>
93
</li>
94
<li class="nav-item">
95
<a class="nav-link" href="https://deust-bcmm.univ-littoral.fr/">W2D</a>
96
</li>
97
</ul>
98
</nav>
99
</footer>
100
101
<script src="js/1-nombres.js"></script>
102
103
</body>
104
</html>
Dans le dossier js ajoutez le fichier 1-nombres.js
1
// retourne la plus grande valeur : 2
// plusGrand(3, 7) => 73
// plusGrand(12, 2) => 24
const plusGrand = function() {
5
return "";
6
};
7
8
// retourne une chaine de caractères avec la table du parametre :9
// table(8) => 1 * 8 = 8 ...10
// table(5) => 1 * 5 = 5 ...11
const table = function() {
12
return "";
13
};
14
15
// retourne la somme d'un tableau de nombres :16
// somme([1,2,3]) => 617
// somme([4,3,2]) => 918
const somme = function(){
19
return "";
20
};
21
22
// retourne la somme de trois nombres :23
// somme3(1, 3, 5) => 924
// somme3(...[4, 6, 2, 8]) => 1225
const somme3 = function(){
26
return "";
27
};
28
29
/**30
* Lancement des fonctions31
*/32
33
const exercice = () => {
34
const liste = document.querySelector('#tableau');
35
let tableau = liste.value.split(',').map((v) => +v);
36
let nombre1 = +document.querySelector('#nombre1').value;
37
let nombre2 = +document.querySelector('#nombre2').value;
38
let nombre3 = +document.querySelector('#nombre3').value;
39
40
// PlusGrand41
document.querySelector('#plusGrand').value = plusGrand(nombre1, nombre2);
42
43
// Table44
document.querySelector('#table').value = table(nombre1);
45
46
// Somme47
document.querySelector('#somme').value = somme(tableau);
48
49
// Somme350
document.querySelector('#somme3').value = somme3(nombre1, nombre2, nombre3);
51
document.querySelector('#somme3bis').value = somme3(tableau);
52
53
}
54
55
56
Exercice :
Complétez le fichier 1-nombres.js :
plusGrand(nb1, nb2) : retourne la plus grande valeur.
table(nb) : retourne une chaîne de caractères avec la table du paramètre.
somme(tab) : retourne la somme d'un tableau de nombres.
somme3(a, b, c) : retourne la somme de trois nombres.
Ouvrez dans votre navigateur le fichier 1-nombres.html