Contrôles

Exemple

Dans le dossier 3-fonctions :

  • Ajoutez le fichier controle-2020.html

1
<!DOCTYPE html>
2
<html lang="fr">
3
    <head>
4
        <title>JS Fonctions Contrôle</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 - Contrôle</h2>
19
            </section>
20
        </header>
21
22
        <main>
23
            <div class="m-3 p-3 row">
24
                <p>Saisir les variables</p>
25
                <div class="col input-group mb-3">
26
                    <span class="input-group-text">Tableau de nombres</span>
27
                    <input class="form-control" id="tableauNombres" type="text">
28
                </div>
29
                <div class="col input-group mb-3">
30
                    <span class="input-group-text">Tableau de mots</span>
31
                    <input class="form-control" id="tableauMots" type="text">
32
                </div>
33
                <div class="col-3 input-group mb-3">
34
                    <span class="input-group-text">Lettre</span>
35
                    <input class="form-control" id="lettre" type="text"/>
36
                </div>
37
                <div class="col input-group mb-3">
38
                    <span class="input-group-text">Nombre</span>
39
                    <input class="form-control" id="nombre" type="text"/>
40
                </div>
41
                <div class="col-auto">
42
                    <button class="btn btn-primary" onclick="exercice()" type="submit">Soumettre</button>
43
                </div>
44
            </div>
45
46
            <div class="m-3 p-3 row">
47
                <p>retourne un tableau contenant les mots de plus de nb lettres :
48
                    <br/>[toto,ta,tu,tutu], 3 => [toto,tutu]</p>
49
50
                <div class="col">
51
                    <input class="form-control" id="motsNb" readonly type="text">
52
                </div>
53
            </div>
54
55
            <div class="m-3 p-3 row">
56
                <p>retourne si le tableau contient que des nombres positifs :
57
                    <br/>[2, 3, 6, 5] => true
58
                    <br/>[2, -3, 6, -5] => false</p>
59
60
                <div class="col">
61
                    <input class="form-control" id="positif" readonly type="text"/>
62
                </div>
63
            </div>
64
65
            <div class="m-3 p-3 row">
66
                <p>Retourne un tableau contenant la première et la dernière lettre de chaque mots
67
                    <br/>[totu,tite,tatu,tutux] => [tu,te,tu,tx]</p>
68
                <div class="col input-group mb-3">
69
                    <input class="form-control" id="extremes" readonly type="text"/>
70
                </div>
71
            </div>
72
73
            <div class="m-3 p-3 row">
74
                <p>retourne combien de nombres pairs contient le tableau
75
                    <br/>[3,4,9,12,5] => 2</p>
76
                <div class="col input-group mb-3">
77
                    <input class="form-control" id="nbPairs" readonly type="text"/>
78
                </div>
79
            </div>
80
81
            <div class="m-3 p-3 row">
82
                <p>Retourne combien de mots du tableau commençent par lettre
83
                    <br/>[toto,titi,tata,riri], t => 3</p>
84
                <div class="col input-group mb-3">
85
                    <input class="form-control" id="nbLettre" readonly type="text">
86
                </div>
87
            </div>
88
89
            <div class="m-3 p-3 row">
90
                <p>Retourne si le tableau contient un mot de plus de nb lettres
91
                    <br/> [tototo,titi,tat,tutu], 5 => true
92
                    <br/> [tototo,titi,tat,tutu], 10 => false</p>
93
                <div class="col input-group mb-3">
94
                    <input class="form-control" id="contient" readonly type="text"/>
95
                </div>
96
            </div>
97
98
        </main>
99
100
        <footer>
101
            <nav class="navbar navbar-expand-lg navbar-light bg-secondary bg-gradient">
102
              <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
103
                <li class="nav-item">
104
                  <a class="nav-link" href="https://www.univ-littoral.fr/">ULCO</a>
105
                </li>
106
                <li class="nav-item">
107
                  <a class="nav-link" href="https://fcu.univ-littoral.fr/">FCU</a>
108
                </li>
109
                <li class="nav-item">
110
                  <a class="nav-link" href="https://deust-bcmm.univ-littoral.fr/">W2D</a>
111
                </li>
112
              </ul>
113
            </nav>
114
        </footer>
115
116
        <script src="js/controle-2020.js"></script>
117
    </body>
118
</html>
  • Dans le dossier js ajoutez le fichier controle-2020.js
1
/**
2
 *  Fonctions
3
 */
4
5
// retourne un tableau contenant les mots de plus de nb lettres :
6
// motsNb(['toto','ta','tu,'tutu'], 3) => ['toto','tutu']
7
const motsNb = function (tab, nb) {
8
9
};
10
11
// retourne si le tableau contient que des nombres positifs :
12
// positif([2, 3, 6, 5]) => true
13
// positif([2, -3, 6, -5]) => false
14
const positif = function (tab) {
15
16
};
17
18
// Retourne un tableau contenant la première et la dernière lettre de chaque mots
19
// extremes(['totu','tite,'tatu','tutux']) => ['tu','te','tu','tx']
20
const extremes = function(tab) {
21
22
};
23
24
// retourne combien de nombres pairs contient le tableau
25
// nbPairs([3,4,9,12,5]) => 2
26
const nbPairs = function (tab) {
27
28
};
29
30
// Retourne combien de mots du tableau commençent par lettre
31
// nbLettre(['toto','titi,'tata','riri'], 't') => 3
32
const nbLettre = function(tab, lettre) {
33
34
};
35
36
// Retourne si le tableau contient un mot de plus de nb lettres
37
// contient(['tototo','titi,'tat','tutu'], 5) => true
38
// contient(['tototo','titi,'tat','tutu'], 10) => false
39
const contient = function(tab, nb) {
40
41
};
42
43
/**
44
 *  Lancement des fonctions
45
 */
46
47
const exercice = () => {
48
    let tableauNombres = document.querySelector('#tableauNombres').value.split(',').map((v) => +v);
49
    let tableauMots = document.querySelector('#tableauMots').value.split(',');
50
    let lettre = document.querySelector('#lettre').value[0] ?? ''; //
51
    let nombre = +document.querySelector('#nombre').value;
52
53
    // motsNb
54
    document.querySelector('#motsNb').value = motsNb(tableauMots, nombre);
55
    // positif
56
    document.querySelector('#positif').value = positif(tableauNombres);
57
    // extremes
58
    document.querySelector('#extremes').value = extremes(tableauMots);
59
    // nbPairs
60
    document.querySelector('#nbPairs').value = nbPairs(tableauNombres);
61
    // nbLettre
62
    document.querySelector('#nbLettre').value = nbLettre(tableauMots, lettre);
63
    // contient
64
    document.querySelector('#contient').value = contient(tableauMots, nombre);
65
66
}
Exercice :
  • complétez le fichier controle-2020.js :
    • Les instructions sur les fonctions se trouvent dans le fichier
Ouvrez dans votre navigateur le fichier controle-2020.html
Exemple
Dans le dossier 3-fonctions :
  • Ajoutez le fichier controle-2021.html
1
<!DOCTYPE html>
2
<html lang="fr">
3
  <head>
4
    <title>JS Fonctions Contrôle</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 - Contrôle</h2>
19
      </section>
20
    </header>
21
22
    <main>
23
      <div class="m-3 p-3 row">
24
        <p>Saisir les variables</p>
25
        <div class="col-3 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 input-group mb-3">
30
          <span class="input-group-text">Mot</span>
31
          <input type="text" id="mot" class="form-control" />
32
        </div>
33
        <div class="col input-group mb-3">
34
          <span class="input-group-text">Lettre</span>
35
          <input type="text" id="lettre" class="form-control" />
36
        </div>
37
        <div class="col input-group mb-3">
38
          <span class="input-group-text">Nombre1</span>
39
          <input type="text" id="nombre1" class="form-control" />
40
        </div>
41
        <div class="col input-group mb-3">
42
          <span class="input-group-text">Nombre2</span>
43
          <input type="text" id="nombre2" class="form-control" />
44
        </div>
45
        <div class="col-auto">
46
          <button type="submit" onclick="exercice()" class="btn btn-primary">
47
            Soumettre
48
          </button>
49
        </div>
50
      </div>
51
52
      <div class="m-3 p-3 row">
53
        <p>
54
          Affiche le produit des nombres pairs : produit([2, 3, 6, 5]) => 12
55
          (2*6)
56
        </p>
57
58
        <div class="col">
59
          <input type="text" id="exo1" class="form-control" readonly />
60
        </div>
61
      </div>
62
63
      <div class="m-3 p-3 row">
64
        <p>
65
          Affiche combien de nombres sont multiples de nb : multiple([12, 3, 6,
66
          8], 4) => 2 (12 et 8)
67
        </p>
68
69
        <div class="col">
70
          <input type="text" id="exo2" class="form-control" readonly />
71
        </div>
72
      </div>
73
74
      <div class="m-3 p-3 row">
75
        <p>
76
          Affiche le nombre de fois qu'une lettre apparait dans un mot :
77
          occurrence("bonjour", "o") => 2
78
        </p>
79
        <div class="col input-group mb-3">
80
          <input type="text" id="exo3" class="form-control" readonly />
81
        </div>
82
      </div>
83
84
      <div class="m-3 p-3 row">
85
        <p>
86
            Affiche un tableau contenant :
87
             Les nombres pairs multipliés par nb1.
88
             Les nombres impairs multipliés par nb2 :
89
             multiplication ([3,2,4,5], 2, 3) => [9,4,8,15]
90
        </p>
91
        <div class="col input-group mb-3">
92
          <input type="text" id="exo4" class="form-control" readonly />
93
        </div>
94
      </div>
95
96
      <div class="m-3 p-3 row">
97
        <p>
98
          Affiche les lettres du rang nb1 au rang nb2 - 1 d'un mot :
99
           slice('bonjour',2,5) => 'njo'
100
        </p>
101
        <div class="col input-group mb-3">
102
          <input type="text" id="exo5" class="form-control" readonly />
103
        </div>
104
      </div>
105
    </main>
106
107
    <footer>
108
      <nav class="navbar navbar-expand-lg navbar-light bg-secondary bg-gradient">
109
        <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
110
          <li class="nav-item">
111
            <a class="nav-link" href="https://www.univ-littoral.fr/">ULCO</a>
112
          </li>
113
          <li class="nav-item">
114
            <a class="nav-link" href="https://fcu.univ-littoral.fr/">FCU</a>
115
          </li>
116
          <li class="nav-item">
117
            <a class="nav-link" href="https://deust-bcmm.univ-littoral.fr/">W2D</a>
118
          </li>
119
        </ul>
120
      </nav>
121
  </footer>
122
123
    <script src="js/controle-2021.js"></script>
124
125
  </body>
126
</html>
  • Dans le dossier js ajoutez le fichier controle-2021.js
1
/**
2
 *  Fonctions
3
 */
4
5
// retourne le produit des nombres pairs :
6
// produit([2, 3, 6, 5]) => 12 (2*6)
7
const produit = function (tab) {
8
9
};
10
11
// retourne combien de nombres sont multiples de nb :
12
// multiple([12, 3, 6, 8], 4) => 2 (12 et 8)
13
const multiple = function (tab, nb) {
14
15
};
16
17
18
// retourne le nombre de fois qu'une lettre apparait dans un mot
19
// occurrence("bonjour", "o") => 2
20
const occurrence = function (mot, lettre) {
21
22
};
23
24
// Retourne un tableau contenant
25
// Les nombres pairs multipliés par nb1
26
// Les nombres impairs multipliés par nb2
27
// multiplication ([3,2,4,5], 2, 3) => [9,4,8,15]
28
const multiplication = function (tab, nb1, nb2) {
29
30
};
31
32
// retourne les lettres du rang nb1 au rang nb2 - 1 d'un mot
33
// slice('bonjour',2,5) => 'njo'
34
const slice = function (mot, nb1, nb2) {
35
36
};
37
38
/**
39
 *  Lancement des fonctions
40
 */
41
42
const exercice = () => {
43
  let tableauNombres = document
44
    .querySelector("#tableauNombres")
45
    .value.split(",")
46
    .map((v) => +v);
47
  let mot = document.querySelector("#mot").value;
48
  let lettre = document.querySelector("#lettre").value;
49
  let nombre1 = +document.querySelector("#nombre1").value;
50
  let nombre2 = +document.querySelector("#nombre2").value;
51
52
  // produit
53
  document.querySelector("#exo1").value = produit(tableauNombres);
54
  // plusGrand
55
  document.querySelector("#exo2").value = multiple(tableauNombres, nombre1);
56
  // emplacementPairs
57
  document.querySelector("#exo3").value = occurrence(mot, lettre);
58
  // remplace
59
  document.querySelector("#exo4").value = multiplication(
60
    tableauNombres,
61
    nombre1,
62
    nombre2
63
  );
64
  // nbPremieresP
65
  document.querySelector("#exo5").value = slice(mot, nombre1, nombre2);
66
};
67
Exercice :
  • complétez le fichier controle-2021.js :
    • Les instructions sur les fonctions se trouvent dans le fichier
Ouvrez dans votre navigateur le fichier controle-2021.html