Exercices après Cours 2

Exercices à faire après avoir complété les lectures données au Cours 2

Yves MARCOUX – EBSI – Université de Montréal

Table des matières

Expressions et sous-expressions

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

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

|| 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

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
`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
`\|\|`	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

Arbres d’exécution

Dessinez l’arbre d’exécution de chacune des expressions suivantes. Quand c’est possible, donnez aussi la valeur de l’expression.

5 - 3 + 4
- Réponse
5 - (3 + 4)
- Réponse
true ? 1 : 'abc'
- Réponse
false ? 1 : 'abc'
- Réponse
(2 == 1+1) ? 'orange' : 'pomme'
- Réponse
9 - 6 / 2 + 2 * 3
- Réponse
20 * (4.5 + 0.5) / (11 - 1)
- Réponse
taux + ( 3 + 4 )
- Réponse
salaire = 50 - ( 3 + salaire )
- Réponse

Notons qu’il s’agit d’une réassignation (la nouvelle valeur de salaire est calculée à partir de l’ancienne).
(v = 12) - (7 * 5)
- Réponse
44 + Math.min ( 11 - 11 , 22 ) / 10
- Réponse
'Bonjour, '+prompt('Quel est votre nom?')+' !'
- Réponse
alert("Votre permis est " + (valide ? "" : "in") + "valide")
- Réponse
(text+"m").slice(1, text.toLowerCase().indexOf('m'))
- Réponse
text.slice(text.length / 2)
- Réponse

Expressions et sous-expressions

Avec combien d’arguments Math.min est-elle invoquée dans l’expression suivante ?

44 + Math.min ( 11 - 1 , 22 ) / 10

- Réponse

2 arguments
Soulignez la sous-expression donnant la valeur du premier argument du + dans l’expression suivante :

44 + Math.min ( 11 - 1 , 22 ) / 10

- Réponse

44 + Math.min ( 11 - 1 , 22 ) / 10
Soulignez la sous-expression donnant la valeur du second argument du + dans l’expression suivante :

44 + Math.min ( 11 - 1 , 22 ) / 10

- Réponse

44 + Math.min ( 11 - 1 , 22 ) / 10
Soulignez la sous-expression donnant la valeur du premier argument de Math.min dans l’expression suivante :

44 + Math.min ( 11 - 1 , 22 ) / 10

- Réponse

44 + Math.min ( 11 - 1 , 22 ) / 10
Soulignez la sous-expression donnant la valeur du second argument de Math.min dans l’expression suivante :

44 + Math.min ( 11 - 1 , 22 ) / 10

- Réponse

44 + Math.min ( 11 - 1 , 22 ) / 10
Soulignez la sous-expression donnant la valeur du premier argument du / dans l’expression suivante :

44 + Math.min ( 11 - 1 , 22 ) / 10

- Réponse

44 + Math.min ( 11 - 1 , 22 ) / 10
Quelle est la valeur de l’expression suivante ?

44 + Math.min ( 11 - 1 , 22 ) / 10

- Réponse

45
Avec combien d’arguments la fonction Math.min() est-elle invoquée dans l’expression suivante ?

Math.min( 7, Math.max(3, Jean), 12)

- Réponse

3 arguments
Peut-on connaître la valeur de l’expression suivante si l’on sait que Jean contient une valeur numérique ?

Math.min( 7, Math.max(3, Jean), 12)

- Réponse

Non, le résultat dépend de la valeur de Jean; si 3 < Jean < 7, l’expression aura la même valeur que Jean, autrement, elle vaudra 7.
Peut-on connaître la valeur de l’expression suivante si l’on sait que Jean contient une valeur numérique ?

Math.max( 7, Math.min(3, Jean), 12)

- Réponse

Oui, peu importe la valeur de Jean la valeur de Math.min(3, Jean) sera toujours ≤ 3; donc la valeur de l’expression complète sera toujours 12.
Soulignez la sous-expression donnant la valeur du premier argument de ? : dans l’expression suivante :

(2 == 1+1) ? 'orange' : 'pomme'

- Réponse

(2 == 1+1) ? 'orange' : 'pomme'
Soulignez la sous-expression donnant la valeur du deuxième argument de ? : dans l’expression suivante :

(2 == 1+1) ? 'orange' : 'pomme'

- Réponse

(2 == 1+1) ? 'orange' : 'pomme'
Soulignez la sous-expression donnant la valeur du troisième argument de ? : dans l’expression suivante :

(2 == 1+1) ? 'orange' : 'pomme'

- Réponse

(2 == 1+1) ? 'orange' : 'pomme'
Quelle est la valeur de l’expression suivante ?

(2 == (1+1)) ? 'orange' : 'pomme'

- Réponse

'orange'
Soulignez toutes les constantes dans l’expression suivante :

(2 == 1+1) ? 'orange' : 'pomme'

- Réponse

(2 == 1+1) ? 'orange' : 'pomme'
Soulignez la sous-expression qui donne la valeur de la chaîne sujet de .length dans l’expression suivante :

"haricot".slice(v - 2, 4).length/2

- Réponse

"haricot".slice(v - 2, 4).length/2
Soulignez la sous-expression qui donne la valeur de la chaîne sujet de .slice dans l’expression suivante :

"haricot".slice(v - 2, 4).length/2

- Réponse

"haricot".slice(v - 2, 4).length/2
Soulignez la sous-expression qui donne la valeur du premier argument de .slice dans l’expression suivante :

"haricot".slice(v - 2, 4).length/2

- Réponse

"haricot".slice(v - 2, 4).length/2
Soulignez la sous-expression qui donne la valeur de la chaîne sujet de .includes() dans l’expression suivante :

descrip.toLowerCase().includes('content') ? "🙂" : "🙁"

- Réponse

descrip.toLowerCase().includes('content') ? "🙂" : "🙁"
Soulignez la sous-expression qui donne la valeur de l’argument de .includes() dans l’expression suivante :

"oui yes".includes(rép.toLowerCase()) ? "🙂" : "🙁"

- Réponse

"oui yes".includes(rép.toLowerCase()) ? "🙂" : "🙁"
Évaluer l’expression suivante :

'orange'.length * 2

- Réponse

12
Évaluer l’expression suivante :

'pommes'.length == 'orange'.length

- Réponse

true
Évaluer l’expression suivante :

'orange'.charAt(2)

- Réponse

"a"
Évaluer l’expression suivante :

'orange'.charAt(2) == 'orange'.charAt(3)

- Réponse

false
Évaluer l’expression suivante :

'pomme'.charAt(2) == 'pomme'.charAt(3)

- Réponse

true
Évaluer l’expression suivante :

'pomme' == 'pommes'

- Réponse

false
Évaluer l’expression suivante :

'pomme' != 'pommes'

- Réponse

true
Évaluer l’expression suivante :

('pomme'+"s") != 'pommes'

- Réponse

false

Pour le reste de cette section, on suppose la variable p définie par p = "pomme".

Évaluer l’expression suivante :

p.length

- Réponse

5
Évaluer l’expression suivante :

p.toUpperCase()

- Réponse

"POMME"
Évaluer l’expression suivante :

p.toLowerCase()

- Réponse

"pomme" (L’application de la fonction n’a rien changé dans ce cas.)
Évaluer l’expression suivante :

p == p.toLowerCase()

- Réponse

true
Évaluer l’expression suivante :

p.slice(1)

- Réponse

"omme"
Évaluer l’expression suivante :

p.slice(1).length

- Réponse

4
Évaluer l’expression suivante :

p.slice(0, 1).toUpperCase()

- Réponse

"P"
Évaluer l’expression suivante :

p.slice(0, 1).toUpperCase() + p.slice(1)

- Réponse

"Pomme"

Questions générales

Supposons que vous ne vous rappelez plus ce que retourne la fonction .indexOf() dans le cas où la chaîne recherchée ne se trouve nulle part dans la chaîne sujet. Rédigez une expression qui vous permettra d’avoir immédiatement réponse à votre interrogation.
- Réponse
Par exemple :

"".indexOf("a")

ou bien :

"pomme".indexOf("raisin")

vous permettra de constater que la valeur retournée lorsque la chaîne recherchée ne se trouve pas dans la chaîne sujet est -1.
On tape à la console la suite d’énoncés suivante :

p = "pomme"; p.toUpperCase(); p;

Quelle sera la réponse obtenue au dernier énoncé ?
- Réponse
"pomme"
Il est important de comprendre que .toUpperCase(), comme les autres fonctions travaillant sur les valeurs caractères, ne modifie pas la valeur de la chaîne sujet, même si celle-ci est stockée dans une variable. Elle calcule une nouvelle chaîne, à partir de la chaîne sujet, et retourne cette nouvelle chaîne comme résultat. En jargon JS, on dit que cette fonction n’est pas modificatrice (en anglais, mutating). Vous aurez compris que, si on prend la peine de nommer ce concept, c’est que certaines fonctions sont, elles, modificatrices… Nous verrons ça en temps et lieu, quand nous aborderons les tableaux.
Suivant l’analogie du texte « Introduction aux expressions JavaScript », l’environnement d’exécution en JS correspond-il à une commode ou à un tiroir ?
- Réponse
À une commode.
Suivant la même analogie, la valeur d’une variable correspond-elle à un tiroir ou à son contenu ?
- Réponse
À son contenu.
Toujours suivant la même analogie, à quoi correspond le nom d’une variable ?
- Réponse
Au nom écrit (ou à une étiquette collée) sur le devant du tiroir qui contient sa valeur.
Combien de membres statutaires l’environnement d’un navigateur Web moderne compte-t-il : quelques dizaines, quelques centaines ou quelques milliers ?
- Réponse
Quelques centaines (autour de deux-cents).
Vrai ou faux. La valeur de certains membres statutaires de l’environnement navigateur Web ne peut pas être modifiée par assignation.
- Réponse
Vrai. Par exemple, l’assignation :

closed = "essai"

s’exécute sans erreur et semble fonctionner, mais la valeur stockée dans le membre closed n’a pas changé :
closed
false

Minidéfis

Extraire l’avant-dernier caractère d’une valeur caractère contenue dans la variable texte.
- Réponse
texte.charAt(texte.length-2)
Que pensez-vous qu’il arrive si texte.length <= 1 ? Essayez-le !
L’exemple 012 sous-entend une définition très stricte de « caractère alphanumérique » : une lettre minuscule sans signe diacritique ou un chiffre (0-9). Modifiez l’exemple pour qu’il considère aussi les lettres majuscules (toujours sans diacritiques) comme alphanumériques. Ne faites aucune validation (i.e. ne vous souciez pas de vérifier que l’intrant fourni est exactement un caractère, ni de ce qui arrive si l’utilisatrice clique Annuler).
Dans la même ligne d’idées que l’exercice précédent, supposons qu’on généralise la définition de caractère alphanumérique pour inclure aussi les lettres (minuscules ou majuscules) avec signes diacritiques. Pouvez-vous modifier l’exemple 012 en conséquence, sans pour autant traiter les caractères avec signes diacritiques un par un ?
- Indice
Pensez à utiliser .toUpperCase() et .toLowerCase().

- Réponse
Remplacer les lignes 12 à 14 par :
verdict = (car >= '0' && car <= '9') || (car.toLowerCase() != car.toUpperCase());

À partir d’une valeur numérique contenue dans la variable note, dont la valeur est un nombre entre 0 et 100 inclusivement, obtenir une chaîne constituée d’un seul caractère, représentant la cote littérale correspondant à la note note, selon la correspondance suivante :

Note sur 100 Cote

≥ 90 A

≥ 60 et < 90 B

< 60 C

Note sur 100	Cote
≥ 90	A
≥ 60 et < 90	B
< 60	C

- Réponse

note >= 90 ? "A" : note >= 60 ? "B" : "C"

Notons qu’il n’est pas nécessaire de vérifier la condition < 90 pour le deuxième cas, puisque la partie après le premier ":" n’est évaluée que si la note est < 90. Idem pour < 60 dans le troisième cas.

À partir d’une valeur numérique contenue dans la variable coteNum, dont la valeur est un entier entre 1 et 6 inclusivement, obtenir une chaîne constituée d’autant de caractères astérisques (*) que la valeur de coteNum.
Conseil : N’utilisez pas le choix conditionnel (? :) pour distinguer les différents cas.
- Indice
Utilisez .slice() avec une constante comme chaîne sujet.

- Réponse
"******".slice(0, coteNum)
ou encore :
"******".slice(6-coteNum)
N.B.: Il existe aussi une fonction .repeat() (omise jusqu’ici en vertu du principe PYM) qui permet de répéter une chaîne un certain nombre de fois. La solution la plus simple serait donc "*".repeat(coteNum).

Pour les minidéfis suivants, créez une page HTML à partir du canevas de page scriptée (infrastructure vide) et inscrivez vos énoncés (expressions suivies d’un ";") dans l’élément script. Utilisez prompt() et alert() pour les interactions avec l’utilisatrice. Tenez pour acquis que l’utilisatrice ne cliquera pas sur Annuler en réponse au prompt(), ni qu’elle cliquera OK sans rien saisir, ni qu’elle saisira autre chose que ce qui lui est demandé.

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

Demander le prénom de l’utilisatrice et le reproduire tout en majuscules.
- Réponse
prénom = prompt("SVP, entrez votre prénom"); alert("Votre prénom en majuscules : " + prénom.toUpperCase());
Demander le prénom de l’utilisatrice et afficher la longueur du prénom.
- Réponse
prénom = prompt("SVP, entrez votre prénom"); alert("Votre prénom comporte " + prénom.length + " caractères.");
Traducteur de nom de saison. Demander à l’utilisatrice le nom d’une saison en français et lui afficher le nom anglais de cette saison.
- Réponse
saison = prompt("SVP, entrez un nom de saison"); nomAnglais = saison == "printemps" ? "spring" : saison == "été" ? "summer" : saison == "automne" ? "fall" : saison == "hiver" ? "winter" : "???"; alert("Cette saison se nomme " + nomAnglais + " en anglais.");
Les structures if…else et switch…case que nous verrons plus tard peuvent aussi servir à ce genre de « conversion » d’un ensemble de valeurs possibles vers un autre.

Pour les minidéfis suivants, tenez pour acquis (sans que votre script ne le valide) que le nom fourni est de la forme "Prénom Nom", sans espace avant le prénom ni après le nom, et avec une seule espace séparant le nom du prénom.

Les solutions proposées ne marchent pas avec des prénoms multiples s’écrivant sans trait-d’union (e.g., Félix Antoine ou Anna Claudia Maria). En revanche, elles fonctionnent avec les noms multiples s’écrivant sans trait-d’union (Desgagnés Trudel). Des solutions alternatives sont données qui marchent avec les prénoms multiples (en revanche, elles ne marchent plus avec les noms multiples).

Demander le nom de l’utilisatrice sous la forme voulue et le reproduire sous la forme "Nom, Prénom".
- Réponse
nomComplet = prompt("Votre nom sous forme Prénom Nom, SVP"); longPré = nomComplet.indexOf(" "); prénom = nomComplet.slice(0, longPré); nom = nomComplet.slice(longPré + 1); alert("Votre nom peut aussi s’écrire : " + nom + ", " + prénom);

- Solution alternative
Remplacer le .indexOf(" ") par .lastIndexOf(" ").
Demander le nom de l’utilisatrice sous la forme voulue et lui dire si son nom de famille est plus long que son prénom, l’inverse, ou si les deux sont de même longueur.
- Réponse
nomComplet = prompt("Votre nom sous forme Prénom Nom, SVP"); longPré = nomComplet.indexOf(" "); longNom = nomComplet.length - longPré - 1; msg = longPré > longNom ? "Votre prénom est plus long que votre nom de famille." : longPré < longNom ? "Votre nom de famille est plus long que votre prénom." : "Vos nom et prénom sont de même longueur."; alert(msg);
Il est préférable de ne pas inclure des alert() dans la longue expression conditionnelle, ainsi :
msg = longPré > longNom ? alert("Votre prénom est plus long que votre nom de famille.") : longPré < longNom ? alert("Votre nom de famille est plus long que votre prénom.") : alert("Vos nom et prénom sont de même longueur.");
D’une part, pour éviter la répétition de la fonction alert(). Mais, d’autre part et surtout, parce que le choix conditionnel est fait pour choisir une valeur, et non pas une action. Pour choisir une action parmi plusieurs possibles, sur la base d’une condition, la structure de contrôle if…else, que nous verrons plus tard, est la façon de faire.

- Solution alternative
Remplacer le .indexOf(" ") par .lastIndexOf(" ").