Exercices
Exemple :
Dans le dossier 3-fonctions :
Ajoutez le fichier 3-exercices.html
1
2
<html lang="fr">
3
<head>
4
<title>JS Exercices</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 Exercices</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 de nombres</span>
27
<input type="text" id="tableauNombres" class="form-control">
28
</div>
29
<div class="col-3 input-group mb-3">
30
<span class="input-group-text">Tableau de mots</span>
31
<input type="text" id="tableauMots" class="form-control"/>
32
</div>
33
<div class="col input-group mb-3">
34
<span class="input-group-text">Nombre1</span>
35
<input type="text" id="nombre1" class="form-control"/>
36
</div>
37
<div class="col input-group mb-3">
38
<span class="input-group-text">Nombre2</span>
39
<input type="text" id="nombre2" 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 somme des nombres pairs du tableau de nombres</p>
48
49
<div class="col">
50
<input type="text" id="sommePairs" class="form-control" readonly>
51
</div>
52
</div>
53
54
<div class="m-3 p-3 row">
55
<p>Affiche le plus grand nombre impair du tableau des nombres</p>
56
57
<div class="col">
58
<input type="text" id="maxImpair" class="form-control" readonly/>
59
</div>
60
</div>
61
62
<div class="m-3 p-3 row">
63
<p>Affiche les nombres du tableau de nombres multiples de Nombre1</p>
64
<div class="col input-group mb-3">
65
<input type="text" id="multipleNombres" class="form-control" readonly/>
66
</div>
67
</div>
68
69
<div class="m-3 p-3 row">
70
<p>Affiche les nombres compris entre le rang Nombre1 et le rang Nombre2</p>
71
<div class="col input-group mb-3">
72
<input type="text" id="intervalle" class="form-control" readonly>
73
</div>
74
</div>
75
76
<div class="m-3 p-3 row">
77
<p>Affiche si un nombre du tableau de nombres est multiples de Nombre1</p>
78
<div class="col input-group mb-3">
79
<input type="text" id="multipleNb" class="form-control" readonly/>
80
</div>
81
</div>
82
83
<div class="m-3 p-3 row">
84
<p>Affiche la longueur des mots du tableau de mots</p>
85
<div class="col input-group mb-3">
86
<input type="text" id="longueurMots" class="form-control" readonly/>
87
</div>
88
</div>
89
90
<div class="m-3 p-3 row">
91
<p>Affiche les mots dans le sens inverse du tableau de mots</p>
92
<div class="col input-group mb-3">
93
<input type="text" id="envers" class="form-control" readonly/>
94
</div>
95
</div>
96
97
<div class="m-3 p-3 row">
98
<p>Affiche les mots dont la longueur est plus grande que Nombre1</p>
99
<div class="col input-group mb-3">
100
<input type="text" id="filtreMots" class="form-control" readonly/>
101
</div>
102
</div>
103
104
</main>
105
106
<footer>
107
<nav class="navbar navbar-expand-lg navbar-light bg-secondary bg-gradient">
108
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
109
<li class="nav-item">
110
<a class="nav-link" href="https://www.univ-littoral.fr/">ULCO</a>
111
</li>
112
<li class="nav-item">
113
<a class="nav-link" href="https://fcu.univ-littoral.fr/">FCU</a>
114
</li>
115
<li class="nav-item">
116
<a class="nav-link" href="https://deust-bcmm.univ-littoral.fr/">W2D</a>
117
</li>
118
</ul>
119
</nav>
120
</footer>
121
122
<script src="js/3-exercices.js"></script>
123
</body>
124
</html>
Dans le dossier js ajoutez le fichier 3-exercices.js
1
/**2
* Fonctions3
*/4
5
// retourne la somme des nombres pairs :6
// sommePairs([2, 3, 6, 5]) => 87
const sommePairs = function() {
8
return "";
9
};
10
11
// retourne le plus grand nombre impair :12
// maxImpair([2, 3, 6, 5]) => 513
const maxImpair = function() {
14
return "";
15
};
16
17
// retourne une chaine contenant les nombres multiples d'un autre nombre18
// multipleNombres([3,7,9,12,5], 3) => "3 9 12"19
const multipleNombres = function() {
20
return "";
21
};
22
23
// retourne les nombres entre les rangs debut et fin24
// intervalle([3,7,9,12,5,6,8], 2, 4) => "9 12 5"25
const intervalle = function() {
26
return "";
27
};
28
29
// retourne si un nombre du tableau est multiple de nb30
// multipleNb([7,9,12,5,6,8], 3) => true ; multipleNb([7,9,12,5,6,8], 11) => false31
const multipleNb = function() {
32
return "";
33
};
34
35
// retourne un tableau contenant les longueurs des mots36
// longueurMots(['bonjour','salut','coucou']) => [7,5,6]37
const longueurMots = function() {
38
return "";
39
};
40
41
// inverse l'ordre des mots du tableau42
// envers(['bonjour','salut','coucou']) => ['coucou','salut','bonjour']43
const envers = function() {
44
return "";
45
};
46
47
// retourne un tableau contenant les mots dont la longueur est plus grande que nb48
// filtreMots(['bonjour','salut','coucou'], 5) => ['bonjour','coucou']49
const filtreMots = function() {
50
return "";
51
};
52
53
54
/**55
* Lancement des fonctions56
*/57
58
const exercice = () => {
59
let tableauNombres = document.querySelector('#tableauNombres').value.split(',').map((v) => +v);
60
let tableauMots = document.querySelector('#tableauMots').value.split(',');
61
let nombre1 = +document.querySelector('#nombre1').value;
62
let nombre2 = +document.querySelector('#nombre2').value;
63
64
// sommePairs65
document.querySelector('#sommePairs').value = sommePairs(tableauNombres);
66
// maxImpair67
document.querySelector('#maxImpair').value = maxImpair(tableauNombres);
68
// multipleNombres69
document.querySelector('#multipleNombres').value = multipleNombres(tableauNombres, nombre1);
70
// intervalle71
document.querySelector('#intervalle').value = intervalle(tableauNombres, nombre1, nombre2);
72
// multipleNb73
document.querySelector('#multipleNb').value = multipleNb(tableauNombres, nombre1) ? 'Oui' : 'Non';
74
75
// longueurMots76
document.querySelector('#longueurMots').value = longueurMots(tableauMots).join(' ');
77
// envers78
document.querySelector('#envers').value = envers(tableauMots).join(' ');
79
// filtreMots80
document.querySelector('#filtreMots').value = filtreMots(tableauMots, nombre1).join(' ');
81
82
}
83
84
85
Exercice :
complétez le fichier 3-exercices.js :
Les instructions sur les fonctions se trouvent dans le fichier.
N'oubliez pas d'ajouter les paramètres aux fonctions.
Ouvrez dans votre navigateur le fichier 3-exercices.html