Array
Exemple :
Dans le dossier 4-objetsNoyau :
Ajoutez le fichier 1-array.html
1
2
<html lang="fr">
3
<head>
4
<title>JS Array</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 - Array</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-3 input-group mb-3">
26
<span class="input-group-text">Tableau de nombres (5,3,7...)</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 (aa,b,...)</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</p>
48
49
<div class="col">
50
<input type="text" id="sommeNombres" class="form-control" readonly>
51
</div>
52
</div>
53
54
<div class="m-3 p-3 row">
55
<p>Retourne une tranche du tableau de nombres entre nombre1 et nombre2</p>
56
57
<div class="col">
58
<input type="text" id="tableauSlice" class="form-control" readonly>
59
</div>
60
</div>
61
62
<div class="m-3 p-3 row">
63
<p>Retourne un tableau à partir du tableau de nombres. Les nombres pairs remplacés par 0, les impairs par 1</p>
64
<div class="col input-group mb-3">
65
<input type="text" id="tableau01" class="form-control" readonly>
66
</div>
67
</div>
68
69
<div class="m-3 p-3 row">
70
<p>Retourne un tableau contenant que les valeurs impaires du tableau de nombres</p>
71
<div class="col input-group mb-3">
72
<input type="text" id="tableauImpairs" class="form-control" readonly>
73
</div>
74
</div>
75
76
<div class="m-3 p-3 row">
77
<p>Retourne si le tableau contient tous les nombres inférieurs à nombre1 </p>
78
<div class="col input-group mb-3">
79
<input type="text" id="toutesInferieures" class="form-control" readonly>
80
</div>
81
</div>
82
83
<div class="m-3 p-3 row">
84
<p>Retourne si le tableau contient un nombre inférieur à nombre1 </p>
85
<div class="col input-group mb-3">
86
<input type="text" id="uneInferieure" class="form-control" readonly>
87
</div>
88
</div>
89
90
<div class="m-3 p-3 row">
91
<p>Retourne la somme des longueurs du tableau de mots</p>
92
<div class="col input-group mb-3">
93
<input type="text" id="sommeLongueurs" class="form-control" readonly>
94
</div>
95
</div>
96
97
<div class="m-3 p-3 row">
98
<p>Retourne le tableau de mots dans l'ordre des longueurs des mots</p>
99
<div class="col input-group mb-3">
100
<input type="text" id="sortMots" class="form-control" readonly>
101
</div>
102
</div>
103
104
<div class="m-3 p-3 row">
105
<p>Retourne un tableau contenant les mots de longueur nombre1</p>
106
<div class="col input-group mb-3">
107
<input type="text" id="longueurMots" class="form-control" readonly>
108
</div>
109
</div>
110
111
</main>
112
113
<footer>
114
<nav class="navbar navbar-expand-lg navbar-light bg-secondary bg-gradient">
115
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
116
<li class="nav-item">
117
<a class="nav-link" href="https://www.univ-littoral.fr/">ULCO</a>
118
</li>
119
<li class="nav-item">
120
<a class="nav-link" href="https://fcu.univ-littoral.fr/">FCU</a>
121
</li>
122
<li class="nav-item">
123
<a class="nav-link" href="https://deust-bcmm.univ-littoral.fr/">W2D</a>
124
</li>
125
</ul>
126
</nav>
127
</footer>
128
129
<script src="js/1-array.js"></script>
130
131
</body>
132
</html>
Dans le dossier js ajoutez le fichier 1-array.js
1
/**2
* Fonctions3
*/4
5
// retourne la somme des nombres d'un tableau6
// sommeNombres([5, 7, 8, 4]) => 247
const sommeNombres = () => {};
8
9
// retourne la tranche d'un tableau entre nb1 et nb2 exclu10
// tableauSlice([5, 7, 8, 4], 1, 3) => [7, 8]11
const tableauSlice = () => {};
12
13
// retourne un tableau pair = 0 impair = 114
// tableau01([5, 7, 8, 4], 1, 3) => [1, 1, 0, 0]15
const tableau01 = () => {};
16
17
// Retourne un tableau contenant que les valeurs impaires18
// tableauImpairs([5, 7, 8, 4]) => [5, 7]19
const tableauImpairs = () => {};
20
21
// Retourne si toutes les valeurs sont inférieures à nb22
// toutesInferieures([5, 7, 8, 4], 7) => false23
// toutesInferieures([5, 7, 8, 4], 10) => true24
const toutesInferieures = () => {};
25
26
// Retourne si une valeur est inférieure à nb27
// uneInferieure([5, 7, 8, 4], 7) => true28
// uneInferieure([5, 7, 8, 4], 4) => false29
const uneInferieure = () => {};
30
31
// Retourne la somme des longueurs du tableau de mots32
// sommeLongueurs(["exemples", "avec", "plusieurs", "mots"]) => 2533
const sommeLongueurs = () => {};
34
35
// Retourne le tableau des mots dans l'ordre des longueurs des mots36
// sortMots(["exemples", "avec", "plusieurs", "mots"]) => ["avec", "mots", "exemples", "plusieurs"]37
const sortMots = () => {};
38
39
// Retourne un tableau contenant les mots de longueur nb40
// longueurMots(["exemples", "avec", "plusieurs", "mots"], 4) => ["avec", "mots"]41
const longueurMots = () => {};
42
43
//44
45
/**46
* Lancement des fonctions47
*/48
49
const exercice = () => {
50
const listeNombres = document.querySelector("#tableauNombres");
51
let tableauNombres = listeNombres.value.split(",").map((v) => +v); // decoupe la liste en tableau et convertit en nombre
52
const listeMots = document.querySelector("#tableauMots");
53
let tableauMots = listeMots.value.split(",");
54
let nombre1 = +document.querySelector("#nombre1").value;
55
let nombre2 = +document.querySelector("#nombre2").value;
56
57
// somme58
document.querySelector("#sommeNombres").value = sommeNombres(tableauNombres);
59
60
// slice61
document.querySelector("#tableauSlice").value = tableauSlice(tableauNombres, nombre1, nombre2);
62
63
// tableau 0 164
document.querySelector("#tableau01").value = tableau01(tableauNombres);
65
66
// tableau impairs67
document.querySelector("#tableauImpairs").value = tableauImpairs(tableauNombres);
68
69
// Toutes Inferieures70
document.querySelector("#toutesInferieures").value = toutesInferieures(tableauNombres, nombre1);
71
72
// Une inferieure73
document.querySelector("#uneInferieure").value = uneInferieure(tableauNombres, nombre1);
74
75
// somme longueurs76
document.querySelector("#sommeLongueurs").value = sommeLongueurs(tableauMots);
77
78
// sort mots79
document.querySelector("#sortMots").value = sortMots(tableauMots);
80
81
// longueur Mots82
document.querySelector("#longueurMots").value = longueurMots(tableauMots, nombre1);
83
};
84
Exercice :
Complétez le fichier 1-array.js :
Les instructions sur les fonctions se trouvent dans le fichier
Ouvrez dans votre navigateur le fichier 1-array.html