Chaines

Exemple

Dans le dossier 3-fonctions :

  • Ajoutez le fichier 2-chaines.html

1
<!DOCTYPE html>
2
<html lang="fr">
3
    <head>
4
        <title>JS Fonctions Chaines</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 Chaines</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 mots</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-auto">
38
                    <button type="submit" onclick="exercice()" class="btn btn-primary">Soumettre</button>
39
                </div>
40
            </div>
41
42
            <div class="m-3 p-3 row">
43
                <p>Affiche la somme des tailles des mots</p>
44
45
                <div class="col">
46
                    <input type="text" id="sommeTailles" class="form-control" readonly/>
47
                </div>
48
            </div>
49
50
            <div class="m-3 p-3 row">
51
                <p>Affiche le plus long mot</p>
52
53
                <div class="col">
54
                    <input type="text" id="plusLong" class="form-control" readonly/>
55
                </div>
56
            </div>
57
58
            <div class="m-3 p-3 row">
59
                <p>Affiche l'emplacement du plus court</p>
60
                <div class="col input-group mb-3">
61
                    <input type="text" id="plusCourt" class="form-control" readonly/>
62
                </div>
63
            </div>
64
65
            <div class="m-3 p-3 row">
66
                <p>Affiche les mots plus longs que nombre1 caractères</p>
67
                <div class="col input-group mb-3">
68
                    <input type="text" id="plusLongNb" class="form-control" readonly>
69
                </div>
70
            </div>
71
72
            <div class="m-3 p-3 row">
73
                <p>Echange l'emplacement des mots nombre1 et nombre2, et affiche le tableau</p>
74
                <div class="col input-group mb-3">
75
                    <input type="text" id="echangeTab" class="form-control" readonly/>
76
                </div>
77
            </div>
78
79
        </main>
80
81
        <footer>
82
            <nav class="navbar navbar-expand-lg navbar-light bg-secondary bg-gradient">
83
              <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
84
                <li class="nav-item">
85
                  <a class="nav-link" href="https://www.univ-littoral.fr/">ULCO</a>
86
                </li>
87
                <li class="nav-item">
88
                  <a class="nav-link" href="https://fcu.univ-littoral.fr/">FCU</a>
89
                </li>
90
                <li class="nav-item">
91
                  <a class="nav-link" href="https://deust-bcmm.univ-littoral.fr/">W2D</a>
92
                </li>
93
              </ul>
94
            </nav>
95
        </footer>
96
97
        <script src="js/2-chaines.js"></script>
98
    </body>
99
</html>
  • Dans le dossier js ajoutez le fichier 2-chaines.js
1
// retourne la somme des tailles des mots
2
// sommeTailles(["exemples", "avec", "plusieurs", "mots"]) => 25
3
const sommeTailles = function (){
4
    return "";
5
};
6
7
// retourne le plus long mot
8
// plusLong(["exemples", "avec", "plusieurs", "mots"]) => "plusieurs"
9
const plusLong = function (){
10
    return "";
11
};
12
13
// retourne l'emplacement du plus court
14
// plusCourt(["exemples", "avec", "plusieurs", "mots"]) => 1
15
const plusCourt = function (){
16
    return "";
17
};
18
19
// retourne les mots plus longs que nb caractères
20
// plusLongNb(["exemples", "avec", "plusieurs", "mots"], 5) => 2
21
const plusLongNb = function (){
22
    return "";
23
};
24
25
// retourne le tableau avec les emplacements des mots nb1 et nb2 échangés
26
// echangeTab (["exemples", "avec", "plusieurs", "mots"], 0, 2) => ["plusieurs", "avec", "exemples", "mots"]
27
const echangeTab = function (){
28
    return "";
29
};
30
31
/**
32
 *  Lancement des fonctions
33
 */
34
35
const exercice = () => {
36
    const liste = document.querySelector('#tableau');
37
    let tableau = liste.value.split(',');
38
    let nombre1 = document.querySelector('#nombre1').value;
39
    let nombre2 = document.querySelector('#nombre2').value;
40
41
    // sommeTailles;
42
    document.querySelector('#sommeTailles').value = sommeTailles(tableau);
43
44
    // plusLong;
45
    document.querySelector('#plusLong').value = plusLong(tableau);
46
47
    // plusCourt;
48
    document.querySelector('#plusCourt').value = plusCourt(tableau);
49
50
    // plusLongNb;
51
    document.querySelector('#plusLongNb').value = plusLongNb(tableau, nombre1);
52
53
    // echangeTab;
54
    document.querySelector('#echangeTab').value = echangeTab(tableau, nombre1, nombre2);
55
}
Exercice :
  • Complétez le fichier 2-chaines.js :
    • sommeTailles() : retourne la somme des tailles des mots du tableau.
    • plusLong() : retourne le plus long mot du tableau.
    • plusCourt() : retourne l'emplacement du plus court mot du tableau.
    • plusLongNb() : retourne les mots plus longs que nb caractères.
    • echangeTab() : retourne le tableau avec les emplacements des mots nb1 et nb2 échangés
  • N'oubliez pas d'ajouter les paramètres aux fonctions.
Ouvrez dans votre navigateur le fichier 2-chaines.html