Copyright © 2025 Yves MARCOUX; dernière modification de cette page : 2025-05-28.

SCI6373 Programmation documentaire

Exercices après Cours 3

Exercices à faire après le Cours 3

Yves MARCOUXEBSIUniversité de Montréal


Table des matières

Rehaussement de l’expérience utilisatrice

Minidéfis


Votre coffre à outils jusqu’à maintenant
Outil Fait quoi ? Utilisation Vu où ?
+ - * / + - × ÷ n1 + n2 § 6
+ Concaténation de chaînes ch1 + ch2 § 6
= Assignation de variable maVar = expression § 7
+=, -=, *=, … Auto-réassignation d’une variable ou d’un membre maVar += expression
ou
chemin.d.accès += expression
C3
++, -- Incrémentation / décrémentation de variable ou membre à valeur numérique, retourne la nouvelle valeur ++maVar
ou
++chemin.d.accès
C3
++, -- Incrémentation / décrémentation de variable ou membre à valeur numérique, retourne l’ancienne valeur maVar++
ou
chemin.d.accès++
C3
Math.PI π (3.14159…) Math.PI § 5
== Est égal à val1 == val2 § 9.1
=== Égalité stricte (sans conversion) val1 === val2 C2
!= Est différent de val1 != val2 § 9.1
> Est plus grand que val1 > val2 § 9.1
>= Est plus grand que ou égal à val1 >= val2 § 9.1
< Est plus petit que val1 < val2 § 9.1
<= Est plus petit que ou égal à val1 <= val2 § 9.1
isNaN() Vérifie si la valeur d’une expression est NaN isNaN(expression) C3
|| OU booléen val1 || val2 § 9.2
&& ET booléen val1 || val2 § 9.2
! NON booléen !val § 9.2
? : Choix conditionnel valBool ? valSiVrai : valSiFaux § 9.3
- Inversion de signe -n § 9.4
+ Chaîne → nombre +ch § 9.4
Math.min() Minimum Math.min(n1, n2, …) § 10.1
Math.max() Maximum Math.max(n1, n2, …) § 10.1
Math.sqrt() Racine carrée Math.sqrt(n) § 10.1
Math.pow() Exposant Math.pow(n1, n2) § 10.1
.length Longueur d’une chaîne ch.length § 10.2
.charAt() Extrait caractère en position ch.charAt(n) § 10.2
.slice() Extrait sous-chaîne ch.slice(nDéb, nFin) § 10.2
.toUpperCase() → Majuscules ch.toUpperCase() § 10.2
.toLowerCase() → Minuscules ch.toLowerCase() § 10.2
.indexOf() Position d’une sous-chaîne ch1.indexOf(ch2) § 10.2
.lastIndexOf() Dernière position d’une sous-chaîne ch1.lastIndexOf(ch2) C2
.includes() Présence d’une sous-chaîne ch1.includes(ch2) § 10.2
prompt() Affiche invite & lit une chaîne chLue = prompt(chInvite) § 10.3
alert() Affiche message alert(chMessage) § 10.3
.trim() Enlève blancs initiaux et finaux ch.trim() C3
.replace() Remplace sous-chaîne ch1 par ch2 ch.replace(ch1, ch2) C3
if / if…else Blocs conditionnels if (valBool) {
   blocSiVrai
} else {
   blocSiFaux
};
C3
console.log() Affiche à la console console.log(val1, val2, …) C3

Rehaussement de l’expérience utilisatrice

Les améliorations demandées ont l’air insignifiantes dans le contexte de traitements aussi simples. Dans des cas plus complexes, elles peuvent faire toute une différence dans l’expérience utilisatrice.

Les réponses proposées ne montrent que les énoncés à inscrire dans l’élément script.

  1. Dans l’exercice 4h de la série après C2, ignorer les blancs initiaux et finaux dans la réponse fournie par l’utilisatrice.
    - Réponse
    saison = prompt("SVP, entrez un nom de saison");
    saison = saison.trim();
    nomAnglais =
       saison == "printemps" ? "spring" :
       saison == "été" ? "summer" :
       saison == "automne" ? "fall" :
       saison == "hiver" ? "winter" : "???";
    alert("Cette saison se nomme " + nomAnglais + " en anglais.");
  2. Encore dans l’exercice 4h de la série après C2, améliorez le comportement du script dans le cas où l’intrant fourni par l’utilisatrice n’est pas un nom de saison.
    - Réponse
    saison = prompt("SVP, entrez un nom de saison");
    saison = saison.trim();
    nomAnglais =
       saison == "printemps" ? "spring" :
       saison == "été" ? "summer" :
       saison == "automne" ? "fall" :
       saison == "hiver" ? "winter" : "???";
    if (nomAnglais != "???")
       alert("Cette saison se nomme " + nomAnglais + " en anglais.");
    else
       alert("Saison inconnue");
  3. Toujours dans l’exercice 4h de la série après C2, dans les cas où l’utilisatrice n’entre rien (ou que des blancs) ou clique sur Annuler, lui afficher un message rappelant ce qu’il était attendu de sa part.
    - Réponse
    saison = prompt("SVP, entrez un nom de saison");
    if (saison == null) saison = "";
    saison = saison.trim();
    if (saison) {
       nomAnglais =
          saison == "printemps" ? "spring" :
          saison == "été" ? "summer" :
          saison == "automne" ? "fall" :
          saison == "hiver" ? "winter" : "???";
       if (nomAnglais != "???")
          alert("Cette saison se nomme " + nomAnglais + " en anglais.");
       else
          alert("Saison inconnue");
    } else alert("SVP, entrez le nom d’une saison en français");
  4. (Petit défi suggéré au C3 autour de diapo 14) Dans l’exemple 060, ignorer les blancs initiaux et finaux dans la réponse fournie par l’utilisatrice et traiter le cas d’une réponse vide (ou ne contenant que des blancs) de la même façon qu’un clic sur Annuler.
  5. Dans l’exemple 012, rehaussez l’expérience utilisatrice en cas de réponse vide ou de clic sur Annuler (en plus de l’amélioration déjà réalisée à l’exercice 4c de la série après C2 pour accepter les lettres avec signes diacritiques).
    - Réponse
    car = prompt("Entrez un caractère SVP") ;
    if (car == null) car = "";   // Ramène Annuler au cas "réponse vide"
    car = car.trim();
    if (car.length == 1) {
      verdict = car.toLowerCase() != car.toUpperCase();
      msg = "Ce caractère " + (verdict ? "est" : "n’est pas") + " alphanumérique." ;
    } else msg = "SVP, répondez par un seul caractère.";
    alert(msg) ;

Minidéfis

Cette section est facultative. Ne la faites que si vous avez beaucoup de temps disponible.

Créez une page scriptée (par exemple, à partir du canevas de page scriptée) qui fait ce qui est demandé.

Les réponses proposées ne montrent que les énoncés à inscrire dans l’élément script.

  1. Demander à l’utilisatrice un bout de texte et lui dire s’il serait digne de Georges Perec ou non. On dit qu’un texte est digne de Georges Perec (auteur de La disparition) s’il ne contient aucune lettre « e », toutes formes confondues (majuscule, minuscule, avec ou sans accent). Les formes accentuées que vous devez traiter sont "éèëê" (majuscules et minuscules). Aussi, traiter adéquatement les cas d’un intrant vide (ou ne comportant que des blancs) et le clic sur Annuler.
    - Réponse
    intrant = prompt("Donnez-moi un bout de texte…");
    if (intrant == null) intrant = "";
    intrant = intrant.trim().toLowerCase();
    verdict =
       !intrant.includes("e") &&
       !intrant.includes("é") &&
       !intrant.includes("è") &&
       !intrant.includes("ê") &&
       !intrant.includes("ë");
    if (verdict)
       if (intrant)
          alert("Votre texte est digne de Georges Perec !");
       else
          alert("Vous n’avez pas fourni de texte… c’est de la triche !");
    else
       alert('Vous texte contient trop de "e" pour être digne de Georges Perec !');
  2. Demander à l’utilisatrice deux nombres séparés par au moins un blanc et lui afficher la somme des deux nombres. Autant le point décimal que la virgule décimale doit être acceptée dans l’intrant fourni et le résultat, s’il comporte une partie fractionnaire, doit s’afficher avec la virgule décimale. Si un des nombres fournis est incorrect ou si l’intrant contient autre chose que deux nombres, simplement donner un message approprié.
    - Réponse
    intrant = prompt("Entrez deux nombres séparés par au moins un blanc");
    if (intrant == null) intrant = "";
    intrant = intrant.trim();
    lngn1 = intrant.indexOf(" ");
    n1 = intrant.slice(0, lngn1);
    n1 = n1.replace(",", ".");
    n1 = +n1;
    n2 = intrant.slice(lngn1);
    n2 = n2.replace(",", ".");
    n2 = +n2;
    somme = n1 + n2 + "";
    somme = somme.replace(".", ",");
    if (intrant && somme != "NaN")
       alert("La somme des nombres est " + somme);
    else
       alert("Vous devez entrer deux nombres séparés par au moins un blanc");