Utiliser les

documentations
JavaScript

Attribution - Partage dans les Mêmes Conditions :

[Link]
Table des matières
Introduction 3
I - Mozilla Developer Network (MDN) 4
II - Exercice : Appliquer la notion 9
III - Approfondir les bases 10
IV - Exercice : Appliquer la notion 13
V - Chercher des fonctions 14
VI - Exercice : Appliquer la notion 16
VII - Les erreurs en JavaScript 17
VIII - Exercice : Appliquer la notion 19
IX - [Link] 20
X - Exercice : Appliquer la notion 21
XI - Quiz 22
XII - Exercice : Défi 26
Conclusion 28
Solutions des exercices 29
Crédits des ressources 36

2 Stéphane Crozat, Youssef El Saadany

 Introduction
Le métier de développeur nécessite une bonne capacité à apprendre par soi-même et à trouver de
l'information sur Internet. En effet les technologies utilisées sont très variées, et elles évoluent
rapidement. Une bonne autonomie est donc nécessaire, pour ne pas être bloqué au moindre
changement d'une technologie. Heureusement Internet est une mine d'or d'informations, en
témoigne le site du Mozilla Developer Network ([Link])1. Il héberge une documentation
conséquente, entre autre sur JavaScript, que nous allons dérouler dans ce module.

1. [Link]

Stéphane Crozat, Youssef El Saadany 3

I Mozilla Developer Network (MDN)
Objectif
Se familiariser avec le MDN.

Mise en situation
Le MDN (Mozilla Developer Network) est un site communautaire de documentations et tutoriels sur
les technologies du Web, comme HTML, CSS, JavaScript ou encore le protocole HTTP.

 Fondamental
[Link]

Accéder à la documentation JavaScript de MDN  Méthode

1. Depuis la page d'accueil, le menu déroulant « Technologies » contient un lien vers la

documentation MDN du JavaScript.
[Link]/fr/docs/Web/JavaScript
2. Cette documentation existe en Français via un menu déroulant en haut à droite.
Cependant, les pages anglaises sont les premières mises à jour et il y a un délai avant
que la communauté française les traduise.

4 Stéphane Crozat, Youssef El Saadany

 Mozilla Developer Network (MDN)

Structure du MDN  Complément

La page principale de la documentation JavaScript contient des

informations sur ce langage et des liens vers des tutoriels et la
référence complète. C'est la référence qui est considérée comme
la documentation.
Dans la partie gauche de la page, on retrouve les grandes
rubriques de cette référence.

Objets natifs : contient l'ensemble des objets natifs standard (Array, Date, etc.), y
compris leurs méthodes et propriétés.
Expressions & opérateurs : présente les mots-clés basiques (this, function, class,
etc.), les opérateurs arithmétiques, d'affectation et de manière générale toutes les
expressions du langage.
Instructions et déclarations : c'est là que se trouve les if...else, ainsi que les
déclarations var, let et const.
Errors : contient toutes les erreurs, exceptions et avertissements que l'interpréteur
JavaScript peut retourner.

Exemples de recherches  Méthode

Si un développeur a besoin d'informations sur la méthode
map (qui permet d'appliquer un traitement à tous les
éléments d'un tableau), il a deux solutions dans le MDN.
Depuis le menu latéral :
Il peut cliquer sur la rubrique « Objets natifs » puis
Array car map est une méthode de la classe Array.
Toujours depuis le menu latéral, il peut cliquer sur
[Link] (et découvrir toutes les
méthodes de Array).

Depuis la barre de recherche :

Il peut écrire « array map » dans la barre de recherche en haut à droite et trouver la page
de la documentation contenant les informations qu'il cherche.

Stéphane Crozat, Youssef El Saadany 5

Mozilla Developer Network (MDN)

Lire une page du MDN  Méthode

En continuant sur l'exemple de la page de map, on y voit plusieurs parties.
Il y a tout d'abord un court descriptif de ce que fait la méthode puis un petit éditeur pour
tester la méthode si c'est possible.

Ensuite, la partie Syntaxe contient toutes les informations importantes, par exemple :
Les paramètres pouvant être mis en entrée de la méthode ainsi que sa valeur de retour.
Les paramètres entre crochets ([]) sont optionnels.
La fonction servant à réaliser le mapping doit avoir des argument spécifiques.

6 Stéphane Crozat, Youssef El Saadany

 Mozilla Developer Network (MDN)

La suite de la page contient un descriptif plus détaillé pour comprendre comment la méthode
fonctionne, de potentiels avertissements, des bonnes pratiques et des exemples. Il y aussi
des informations sur l'introduction de la méthode dans la spécification, ce qui peut être utile
pour les développeurs travaillant avec d'anciennes versions.
Enfin, il y a généralement un tableau de compatibilité avec les navigateurs pour les
développeurs dont le code est destiné au Web.

À la toute fin de la page, on trouve une partie Voir aussi qui contient généralement des
méthodes/fonctions proches qui parfois sont plus adaptées à ce que veut faire le
développeur.
Pour map, MDN propose aussi de voir forEach qui est dans certains cas plus adaptée que
map.

Stéphane Crozat, Youssef El Saadany 7

Mozilla Developer Network (MDN)

À retenir
MDN est un site communautaire de documentations, avec une documentation JavaScript
très complète.
Chaque page contient quasiment la même structure.
Elle est divisée en grandes catégories pour rendre la recherche d'informations simple.

 Complément
MDN JavaScript ([Link])2

2. [Link]

8 Stéphane Crozat, Youssef El Saadany

II Exercice : Appliquer la notion
Vous faites un appel à une API pour recevoir le pseudo du meilleur joueur de votre jeu en ligne pour
l'afficher dans la console. Le pseudo arrive dans la variable bestPlayer.
Cependant, si aucun joueur n'a joué, l'API retourne l'objet JavaScript undefined. Ainsi, lorsque
bestPlayer est à undefined, on affiche qu'il n'y a eu aucun joueur.
Votre collègue a écrit ce code.
1 const bestPlayer = "Alice" // Un pseudo récupéré depuis l'API
2
3 if(bestPlayer === "undefined") {
4 [Link]("Il n'y a eu aucun joueur")
5 } else {
6 [Link](bestPlayer)
7}

Ce code ne fonctionne pas, il affiche quand même undefined dans la console.

[solution n°1 p. 29]

Question
Que faut-il modifier ? Voici la page MDN de undefined3.

Indice :
Il y a un exemple de comment undefined est utilisé dans un if sur sa page MDN.

3. [Link]

Stéphane Crozat, Youssef El Saadany 9

III Approfondir les bases
Objectif
Reprendre des parties du cours avec l'aide du MDN.

Mise en situation
Un langage de programmation tel que le JavaScript est simple à prendre en main mais il n'est pas
possible de tout connaître dans les moindres détails. De plus il arrive régulièrement d'avoir besoin
d'utiliser, pour la première fois, des fonctionnalités très précises du langage, même après plusieurs
années de pratique. Pour cela des sites comme MDN sont très intéressants et les ressources
mises à disposition permettent d'approfondir ses connaissances et ainsi que de mieux
comprendre le langage que l'on utilise.

 Conseil
MDN permet d'approfondir certaines notions afin de découvrir de nouveaux cas d'utilisations
ou pour répondre à un problème spécifique. Il est recommandé de parcourir la documentation
pour compléter ses connaissances.

Modification des constantes  Exemple

Il est possible de déclarer des constantes avec le mot-clé const.
1 const pi = { value: 3.1415, description: "Pi est le rapport constant de la
circonférence d'un cercle à son diamètre dans un plan euclidien" }
2 pi = { value: 3.1416, description: "Pi, appelé parfois constante d'Archimède,
est le rapport constant de la circonférence d'un cercle à son diamètre dans un
plan euclidien" }
3

Le code ci-dessus renvoie l'erreur TypeError: Assignment to constant variable car pi est
protégé par const.
Cependant, la page Types et grammaire du MDN4 nous apprend que les valeurs d'un objet,
même déclaré avec const ne sont pas protégées.
1 const pi = { value: 3.1415, description: "Pi est le rapport constant de la
circonférence d'un cercle à son diamètre dans un plan euclidien" }
2 [Link] = 3.1416
3
4

Ainsi, ce code ne renvoie pas d'erreur et une valeur présente dans un objet déclaré avec
const a été modifiée.

4. [Link]

10 Stéphane Crozat, Youssef El Saadany

 Approfondir les bases

Paramètre par défaut des fonctions  Exemple

En JavaScript, il faut préciser quand une fonction a besoin de paramètres. Cette page du
MDN5 montre que l'on peut donner des valeurs par défaut aux paramètres de fonction.
1 /** Cette fonction ajoute un utilisateur à la base de données
2 si cette fonction est appelée sans argument "nickname",
3 c'est la chaîne de caractère "JohnDoe" qui est donnée par défaut
4 */
5 function addUser (database, id, nickname = 'JohnDoe') {
6 [Link]([id, nickname])
7 [Link]('Ajout de ' + id + ' à la base de données.')
8 return database
9}
10
11 let db = [[1, 'Alice']] // Pour l'exemple, "db" remplace une base de données
distante.
12 db = addUser(db, 2, 'Bob')
13 db = addUser(db, 3)
14 [Link](db)
15

Heure UTC  Exemple

Un développeur qui souhaite retenir les heures d'inscriptions à son site web va vite se
retrouver face à des problèmes d'incohérences de fuseaux horaires si ses utilisateurs sont
dans différentes régions du monde.
Il pourrait être intéressant de stocker, dans la base de données, uniquement l'heure UTC et le
fuseau horaire de l'utilisateur.
Pour cela, un nouveau tour sur la page des dates du MDN6 nous indique qu'il existe une
méthode getTimezoneOffset qui retourne la différence en minutes entre l'heure locale de
l'utilisateur et l'heure UTC.
1 /** Cette fonction ajoute un message à une base de données */
2 function logMessage (database, msg, user, time) {
3 [Link]([msg, user, [Link]() + [Link]() * 60,
[Link]()])
4 [Link]('Message ajouté à la base de données')
5 return database
6}
7
8 let db = [] // Pour l'exemple, "db" remplace une base de données distante.
9 db = logMessage(db, 'Un message de Alice', 'Alice', new Date())
10 [Link](db)
11

Dans l'exemple ci-dessus, on imagine un service de messagerie qui aurait besoin de stocker
les messages d'un utilisateur à une base de données.
La fonction [Link]() prend en argument un tableau contenant le message,
l'utilisateur, l'heure d'envoi sommé à la différence de minutes à l'heure UTC pour obtenir
l'heure UTC et en dernier argument le fuseau horaire.
Ici, getTimezoneOffset() est multiplié par 600 pour obtenir des secondes car
[Link]() est en millisecondes.

5. [Link]
6. [Link]

Stéphane Crozat, Youssef El Saadany 11

Approfondir les bases

Les BigInt  Exemple

JavaScript, contrairement à un grand nombre de langages de programmation, possède un
type unique pour les entiers et les flottants. Le MDN nous apprend sur la page Structures de
données7 que le type Number permet en réalité de représenter les nombres de -(2^53 - 1)
à 2^53 - 1.
En dehors de cet intervalle, JavaScript ne renvoie pas d'erreur mais ne représente plus les
nombres de manière sure. C'est-à-dire qu'ils deviennent des approximations qui peuvent créer
des bugs difficiles à corriger.
Sur cette même page, on apprend qu'il existe le type BigInt qui permet justement de
représenter les entiers en dehors de l'intervalle de Number. Un BigInt se reconnaît par un « n »
à la fin du nombre.
1 /** Cette variable contient le nombre de lignes
2 d'une table de base de données.
3 Ici, on imagine 1000000.
4 */
5 let numberOfRows = 2 ** 50
6
7 /** On souhaite stocker ce nombre de ligne
8 avec le bon type (number/bigint) afin
9 de le manipuler ailleurs dans le code
10 sans avoir de problèmes.
11 */
12 if (numberOfRows >= Number.MAX_SAFE_INTEGER) {
13 numberOfRows = BigInt(numberOfRows)
14 }
15
16 /** On peut désormais continuer ce code sans problème
17 de type entre Number et BigInt.
18 */
19
20 [Link](typeof (numberOfRows))
21

À retenir
Il est primordial de s'instruire sur les pages du MDN pour approfondir ses connaissances et
éviter les erreurs que nous avons vu.
Le modificateur const ne protège pas les valeurs des objets et des tableaux.
BigInt est à privilégier avec de très grands entiers.

7. [Link]

12 Stéphane Crozat, Youssef El Saadany

IV Exercice : Appliquer la notion
Vous êtes chargé de traiter les données reçues d'un capteur. Ce capteur retourne des valeur, et
pour chaque nombre reçu, il faut lui appliquer un certain traitement. Le nombre se trouve dans la
variable numberReceived.
Cependant, le capteur connaît parfois des dysfonctionnements et renvoie NaN, une valeur utilisée
pour représenter une quantité qui n'est pas un nombre (Not a Number).
Le code suivant a été écrit par quelqu'un d'autre et il ne fonctionne pas. En effet, la clause else est
systématiquement exécutée.
1 const numberReceived = [Link]
2
3 if (numberReceived === [Link]) {
4 [Link]('Mauvais nombre, à ne pas traiter')
5 } else {
6 [Link]('Nombre à traiter')
7 // Instructions pour traiter le nombre...
8}
9

[solution n°2 p. 29]

Question
Sur la page MDN du type Number8, trouvez un moyen de savoir si un nombre est NaN.
Corriger le bug.

Indice :
Il faut regarder du côté des méthodes.

8. [Link]

Stéphane Crozat, Youssef El Saadany 13

V Chercher des fonctions
Objectif
Apprendre à chercher des fonctions sur le MDN.

Mise en situation
Une bonne partie du travail d'un développeur consiste à s'approprier des fonctions, objets,
méthodes pour résoudre un problème au lieu de développer lui-même des fonctionnalités, de ré-
inventer la roue.
Il est utile de se renseigner sur les fonctions disponibles en rapport avec les chaînes de caractères.
La page MDN des « Strings »9 est faite pour ça.
Chaque méthode, fonction ou objet est cliquable et a sa propre page avec un exemple, voici
quelques méthodes intéressantes :

 Exemple
concat : pour concaténer au moins deux chaînes ensemble.
1 const hello = "Bonjour"
2 const world = "tout le monde"
3
4 [Link]([Link](' ', world))
5 // affiche "Bonjour tout le monde"

 Exemple
includes : renvoie true si une chaîne contient la chaîne donnée comme argument.
1 const names = ['Alice', 'Jean-Marie', 'Charlie']
2
3 for (const name of names) {
4 [Link](`Le prénom ${name} ${[Link]('-') ? 'est' : "n'est pas"}
composé`)
5}
6 // Pour chaque prénom, affiche qu'il est composé si il inclut le caractère -
(trait d'union).
7

La page de la méthode includes indique aussi que cette dernière est sensible à la casse.

9. [Link]

14 Stéphane Crozat, Youssef El Saadany

 Chercher des fonctions

 Exemple
split : divise une chaîne selon un séparateur et renvoie un tableau avec les différents
éléments.
1 let receivedInfo = 'Luke:Skywalker:[Link]@[Link]:Jedi Master'
2 receivedInfo = [Link](':')
3
4 const luke = {
5 firstname: receivedInfo[0],
6 lastname: receivedInfo[1],
7 email: receivedInfo[2],
8 title: receivedInfo[3]
9}
10
11 [Link](luke)

Chaînes de caractères  Exemple

toUpperCase : retourne la chaîne en majuscule, l'exemple précédent pourrait donner :
1 let receivedInfo = 'Luke:Skywalker:[Link]@[Link]:Jedi Master'
2 receivedInfo = [Link](':')
3
4 const luke = {
5 firstname: receivedInfo[0],
6 lastname: receivedInfo[1].toUpperCase(),
7 email: receivedInfo[2],
8 title: receivedInfo[3]
9}
10
11 [Link](luke)

À retenir
Il est très simple de trouver toutes les fonctions/méthodes autour d'un objet JavaScript.
Chaque page contient aussi des informations sur la manière qu'a JavaScript d'interpréter le
code.

Stéphane Crozat, Youssef El Saadany 15

VI Exercice : Appliquer la notion
Dans un programme JavaScript, il est commun d'appeler un programme externe, par exemple pour
effectuer une requête à un serveur web.
Ce serveur peut connaître des dysfonctionnements, ou ne dispose pas forcément des ressources
que vous lui demandez.
Cependant, il renvoie toujours une chaîne de caractères pour vous informer de la situation.
Cette chaîne commence par 200 lorsque tout va bien, 400 lorsque le serveur n'a pas ce que vous
demandez et 500 lorsqu'il connaît une panne interne.

[solution n°3 p. 29]

Question
En cherchant sur la page MDN des chaînes de caractères, trouvez deux moyens de récupérer le
code situé en début de chaîne.
La chaîne est contenue dans la variable apiResponse.

Indice :
Les méthodes slice et substring permettent de découper la chaîne de caractères.

16 Stéphane Crozat, Youssef El Saadany

VII Les erreurs en JavaScript
Objectif
Apprendre à gérer les erreurs en JavaScript.

Mise en situation
Le JavaScript, à l'instar de beaucoup de langages, possède un système de gestion d'erreur.
Quand l'interpréteur traite du code problématique, il peut retourner une erreur standard à
destination du développeur, qu'il est essentiel de savoir interpréter et corriger adéquatement.

Les erreurs sur le MDN

Le MDN dispose d'une liste exhaustive des erreurs natives du JavaScript.

ReferenceError: "x" is not defined  Exemple

Cette erreur est fréquente et facilement compréhensible. Sa page sur le MDN10 nous indique
qu'elle apparaît lorsqu'une variable « x » est référencée mais n'existe pas (pas déclarée)
dans la portée utilisée. On y retrouve aussi des exemples pour reproduire cette erreur avec
des variables non déclarées ou hors de portée.

10. [Link]

Stéphane Crozat, Youssef El Saadany 17

Les erreurs en JavaScript

TypeError: invalid 'in' operand "x"  Exemple

1 const hello = 'hello world'
2 if ('hello' in hello) {
3 [Link]('hello se trouve dans la chaîne de caractère ' + hello)
4}
5

Le code ci-dessus pourrait paraître normal pour un développeur Python qui s'est habitué à
utiliser le mot-clé in pour savoir si une chaîne se trouve dans une autre.
En JavaScript, ce code renvoie une erreur.
Une consultation de la page MDN de cette erreur11 explique que in ne fonctionne que sur les
objets (pour vérifier si une propriété existe), et non sur les chaînes de caractères.

SyntaxError: missing = in const declaration  Exemple

Une erreur de syntaxe est levée lorsqu'une constante n'est pas initialisée. En effet, les
constantes doivent être initialisée à la déclaration contrairement aux variables déclarées avec
let ou var, même s'il s'agit d'une bonne pratique.
Là-aussi, la page de cette erreur sur le MDN12 donne des conseils au développeur dans la
partie Résoudre le problème, par exemple en suggérant que ce n'est probablement pas une
constante qu'il faut déclarer si cette erreur surgit. En effet, une constante est généralement
connue au moment de la déclaration..

À retenir
Il faut être capable d'analyser les erreurs en les cherchant sur le MDN pour résoudre
efficacement un problème.

11. [Link]
12. [Link]

18 Stéphane Crozat, Youssef El Saadany

VIII Exercice : Appliquer la notion
En fonction de votre projet, vous utilisez différents debuggers (outil pour exécuter le code ligne par
ligne pour dénicher de mauvais effets et ainsi trouver des bugs).
Au début d'un programme, vous voulez savoir quel debugger est disponible sur votre machine.
Pour ce faire, vous disposez d'une fonction myDebugger() qui retourne renvoie le debugger actif.
1 /** Pour l'exercice, on retourne "gdb" mais ça
2 pourrait être n'importe quoi.
3 */
4 function myDebugger () {
5 return 'gdb'
6}
7
8 const DEBUG_MODE = true
9
10 if (DEBUG_MODE) {
11 const debugger = myDebugger()
12 // Instructions suivantes...
13 }
14

Mais ce code lève une erreur. Sur Firefox :

1 SyntaxError: missing variable name

Et sur Chromium :
1 SyntaxError: Unexpected token 'debugger'

[solution n°4 p. 29]

Question
Corriger l'erreur en vous aidant du MDN.

Indice :
On pourra par exemple chercher le mot-clé debugger dans le MDN, ou chercher l'erreur elle-
même.

Stéphane Crozat, Youssef El Saadany 19

IX [Link]
Objectif
Découvrir [Link].

Mise en situation
Ce qui est intéressant avec les langages de programmation répandus, c'est la forte activité de la
communauté qui permet de le faire évoluer et de le documenter. MDN n'est pas le seul site à
proposer des ressources intéressantes pour les développeurs, il en existe d'autres, certains
maintenus par la communauté. Selon les besoins, il peut s'agir de documentation, de forums pour
demander de l'aide, ou de listes de discussions pour faire remonter des anomalies dans le langage.

[Link]
DevDocs13 est un site web qui, à l'instar du MDN, propose une documentation des technologies du
Web (HTML/CSS/HTTP/JS) mais aussi de librairies et frameworks (jQuery, Angular, etc.).
Dans les préférences (à droite de la barre de recherche), il est possible de ne garder que la
documentation JavaScript.

Toujours dans les paramètres, le bouton Offline Data mène à une page qui propose de télécharger
la documentation JavaScript en cliquant sur le bouton Install à droite de la page.
Une fois le téléchargement terminé, le site est accessible même sans connexion à Internet.

13. [Link]

20 Stéphane Crozat, Youssef El Saadany

X Exercice : Appliquer la notion
[solution n°5 p. 30]
Question
Donner les pages relatives aux méthodes suivantes sur le MDN ([Link]) et [Link] :
Retirer le dernier élément d'un tableau ;
Générer un nombre aléatoire ;
Concaténer une chaîne de caractères avec elle-même un certain nombre de fois.

Stéphane Crozat, Youssef El Saadany 21

XI Quiz
[solution n°6 p. 30]
Exercice 1 : Quiz - Culture
Exercice
Les réponses à ces questions se trouvent sur cette page du MDN ([Link])14.
Quel est le standard de JavaScript ?

A Le même que le Java

B Les PEP

C ECMAScript

D Aucune de ces réponses

Exercice
Pourquoi le JavaScript a t-il été conçu ?

A Pour exécuter des scripts sur les pages web

B Pour faire tourner des serveurs (via [Link])

C Pour développer des applications de bureau (via Electron)

D Pour prendre le relais du Java

Exercice
Lequel de ces éléments n'est pas un objet standard du JavaScript ?

A Number

B Error

C Array

D Integer

14. [Link]

22 Stéphane Crozat, Youssef El Saadany

 Quiz

[solution n°7 p. 31]

Exercice 5 : Quiz - Méthode
Pour répondre à ces questions, il faut chercher dans le MDN ([Link])15.

Exercice
Comment savoir si au moins un élément d'un tableau myArray, de type Array, remplit une
certaine condition ?

A [Link]()

B [Link]()

C [Link]()

D Il est nécessaire d'écrire une telle fonction soi-même

Exercice
Est-il possible d'utiliser des fonctions fléchées (Arrow Functions) dans la version 20 de Firefox ?

A Oui

B Non

Exercice
JavaScript ne fait pas la différence, en termes de types, entre nombre entier et nombre flottant.
Quelle fonction permet de vérifier si une variable age de type Number représente un nombre
entier ?

A [Link](age)

B [Link]

C [Link]()

D isInteger(age)

[solution n°8 p. 32]

Exercice 9 : Quiz - Code
Le but ici est de chercher sur le MDN ([Link])16 les fonctions manquantes (___) des
questions.

15. [Link]
16. [Link]

Stéphane Crozat, Youssef El Saadany 23

Quiz

Exercice
La fonction suivante remplace .com par .fr dans la chaîne domain
1 function goToFrench(domain) {
2 return domain.___(/.com/, ".fr")
3}
4
5 [Link](goToFrench("[Link]"))
6 // outputs: [Link]

A change

B match

C endsWith

D replace

Exercice
db est une variable qui permet d'interagir avec une base de données. Le développeur veut
stocker les noms de familles en majuscules.
1 function storeUserToDatabase(email, firstname, lastname) {
2 [Link](email, firstname, lastname.___()
3}

A toUpper

B toUpperCase

C goBig

D C'est une fonction à écrire soi-même.

Exercice
La fonction ci-dessous cherche à surveiller le trafic sur un site web.
Si le nombre de connections dépasse un certain nombre, le type Number ne pourra pas
représenter adéquatement ce nombre ; il faudra utiliser une variable de type BigInt.
1 function monitorTraffic() {
2 let numberOfConnections = getNumberOfConnections()
3
4 if(numberOfConnections >= Number.___)
5 numberOfConnections = BigInt(numberOfConnections)
6 }
7
8 ...
9}

A MAX_SAFE_INTEGER

24 Stéphane Crozat, Youssef El Saadany

 Quiz

B MAX_INTEGER

C MAX_SAFE

D MAX_VALUE

Stéphane Crozat, Youssef El Saadany 25

XII Exercice : Défi
Le but de ce défi est de construire un programme JavaScript pas à pas en s'aidant de la
documentation MDN17.
Ce programme a pour objectif de créer une petite base de données de films.
Les films sont stockés dans un ensemble ( Set) qui est une structure de données qui ressemble
aux tableaux.

[solution n°9 p. 33]

Question 1
Trouvez la documentation des ensembles sur MDN.

Indice :
Les Set sont des objets natifs.

[solution n°10 p. 33]

Question 2
Créez un programme JavaScript et déclarez l'ensemble vide nommé movies.

[solution n°11 p. 34]

Question 3
Trouvez la documentation de la fonction permettant d'ajouter des éléments dans un ensemble.

[solution n°12 p. 34]

Question 4
Ajoutez à l'ensemble les films suivants :
Matrix
The Artist

[solution n°13 p. 34]

Question 5
Trouvez la documentation de la boucle de type for..of.

[solution n°14 p. 34]

Question 6
Utilisez la structure for..of pour afficher tous les films de l'ensemble movies.
On fera précéder chaque titre d'un tiret.

[solution n°15 p. 34]

Question 7
Trouvez la documentation de la fonction permettant de supprimer un élément d'un ensemble.
Que renvoie cette fonction ?

17. [Link]

26 Stéphane Crozat, Youssef El Saadany

 Exercice : Défi

[solution n°16 p. 34]

Question 8
Supprimer le film The Artist ; vous testerez si la suppression a réussi ou non.

[solution n°17 p. 35]

Question 9
Ajoutez à votre programme un menu permettant de :
ajouter des films
supprimer des films
sortir du menu

Stéphane Crozat, Youssef El Saadany 27

 Conclusion
Savoir lire, mais aussi écrire, de la documentation est une compétence importante du développeur.
Sans que cela ne soit très compliqué, il convient tout de même de savoir chercher l'information au
bon endroit. Dans ce module nous avons beaucoup parlé de MDN, qui est une référence en terme
de documentation pour les technologies du Web, mais il en existe d'autres.
Le plus important reste de ne pas réinventer la roue à chaque nouveau programme, mais de
comprendre tout de même ce que l'on peut trouver dans la documentation, et ne pas se contenter
de simplement copier du code.

28 Stéphane Crozat, Youssef El Saadany

Solutions des exercices
Solution n°1 [exercice p. 9]

Il suffit de retirer les guillemets (") autour de "undefined" comme le montre l'exemple sur la page
du MDN.
1 const bestPlayer = "Alice" // Un pseudo récupéré depuis l'API
2
3 if(bestPlayer === undefined) {
4 [Link]("Il n'y a eu aucun joueur")
5 } else {
6 [Link](bestPlayer)
7}

Solution n°2 [exercice p. 13]

Pour savoir si un nombre est considéré comme Not a Number, il faut utiliser la méthode
[Link]().
1 if ([Link](numberReceived)) {
2 [Link]('Mauvais nombre, à ne pas traiter')
3 } else {
4 [Link]('Nombre à traiter')
5 // Instructions pour traiter le nombre...
6}

Solution n°3 [exercice p. 16]

1 // Méthode 1
2 const status = [Link](0, 3)
3
4 // Méthode 2
5 const status2 = [Link](0, 3)
6

Pour cet exemple, ces deux fonctions font la même chose. Leurs différences sont explicitées sur
leurs pages MDN respectives.

Solution n°4 [exercice p. 19]

Le mot debugger est un mot-clé réservé par l'interpréteur JavaScript, il ne peut donc pas être
utilisé comme nom de variable ou fonction. On pourra corriger le code comme suit :
1 const debuggerName = myDebugger()

Stéphane Crozat, Youssef El Saadany 29

Solutions des exercices

Solution n°5 [exercice p. 21]

Retirer le dernier élément d'un tableau :

MDN18 / DevDocs19
Générer un nombre aléatoire :
MDN20 / DevDocs21
Concaténer une chaîne de caractères avec elle-même un certain nombre de fois :
MDN22 / DevDocs23

Solution n°6 [exercice p. 22]

Exercice

Les réponses à ces questions se trouvent sur cette page du MDN ([Link])24.
Quel est le standard de JavaScript ?

A Le même que le Java

B Les PEP

C ECMAScript

D Aucune de ces réponses

Exercice

Pourquoi le JavaScript a t-il été conçu ?

A Pour exécuter des scripts sur les pages web

B Pour faire tourner des serveurs (via [Link])

C Pour développer des applications de bureau (via Electron)

D Pour prendre le relais du Java

 [Link] et Electron sont des évolutions de l'écosystème JavaScript.

18. [Link]
19. [Link]
20. [Link]
21. [Link]
22. [Link]
23. [Link]
24. [Link]

30 Stéphane Crozat, Youssef El Saadany

 Solutions des exercices

Exercice

Lequel de ces éléments n'est pas un objet standard du JavaScript ?

A Number

B Error

C Array

D Integer

 Le typage du JavaScript englobe les entiers dans le type Number.

Solution n°7 [exercice p. 23]

Exercice

Comment savoir si au moins un élément d'un tableau myArray, de type Array, remplit une
certaine condition ?

A [Link]()

B [Link]()

C [Link]()

D Il est nécessaire d'écrire une telle fonction soi-même

 La page ([Link])25 dédiée aux variables Array nous indique que some() permet de
vérifier automatiquement si un élément d'un tableau remplit une condition.

Exercice

Est-il possible d'utiliser des fonctions fléchées (Arrow Functions) dans la version 20 de Firefox ?

A Oui

B Non

25. [Link]

Stéphane Crozat, Youssef El Saadany 31

Solutions des exercices

 La page ([Link]) des fonctions fléchées26 indique que le support arrive à la version
22.

Exercice

JavaScript ne fait pas la différence, en termes de types, entre nombre entier et nombre flottant.
Quelle fonction permet de vérifier si une variable age de type Number représente un nombre
entier ?

A [Link](age)

B [Link]

C [Link]()

D isInteger(age)

Solution n°8 [exercice p. 23]

Exercice

La fonction suivante remplace .com par .fr dans la chaîne domain

1 function goToFrench(domain) {
2 return domain.___(/.com/, ".fr")
3}
4
5 [Link](goToFrench("[Link]"))
6 // outputs: [Link]

A change

B match

C endsWith

D replace

 La méthode replace() permet de remplacer un morceau de chaîne de caractères par

un autre.

Exercice

db est une variable qui permet d'interagir avec une base de données. Le développeur veut stocker
les noms de familles en majuscules.

[Link]
26.
9es

32 Stéphane Crozat, Youssef El Saadany

 Solutions des exercices

1 function storeUserToDatabase(email, firstname, lastname) {

2 [Link](email, firstname, lastname.___()
3}

A toUpper

B toUpperCase

C goBig

D C'est une fonction à écrire soi-même.

Exercice

La fonction ci-dessous cherche à surveiller le trafic sur un site web.

Si le nombre de connections dépasse un certain nombre, le type Number ne pourra pas
représenter adéquatement ce nombre ; il faudra utiliser une variable de type BigInt.
1 function monitorTraffic() {
2 let numberOfConnections = getNumberOfConnections()
3
4 if(numberOfConnections >= Number.___)
5 numberOfConnections = BigInt(numberOfConnections)
6 }
7
8 ...
9}

A MAX_SAFE_INTEGER

B MAX_INTEGER

C MAX_SAFE

D MAX_VALUE

 Number.MAX_SAFE_INTEGER contient le nombre le plus élevé que Number peut

contenir sans risque de perte d'information.

Solution n°9 [exercice p. 26]

[Link]

Solution n°10 [exercice p. 26]

1 // Empty set
2 let movies = new Set()

Stéphane Crozat, Youssef El Saadany 33

Solutions des exercices

Solution n°11 [exercice p. 26]

[Link]

Solution n°12 [exercice p. 26]

1 // Empty set
2 let movies = new Set()
3
4 // Add two movies
5 [Link]('Matrix')
6 [Link]('The Artist')

Solution n°13 [exercice p. 26]

[Link]

Solution n°14 [exercice p. 26]

1 // Empty set
2 let movies = new Set()
3
4 // Add two movies
5 [Link]('Matrix')
6 [Link]('The Artist')
7
8 // Display the movies
9 for (let movie of movies) {
10 [Link]('-', movie)
11 }

Solution n°15 [exercice p. 26]

[Link]
La fonction renvoie : « true si un élément de l'objet Set a été retiré lors de l'opération, false sinon. »

Solution n°16 [exercice p. 27]

1 // Empty set
2 let movies = new Set()
3
4 // Add two movies
5 [Link]('Matrix')
6 [Link]('The Artist')
7
8 // Display the movies
9 for (let movie of movies) {
10 [Link]('-', movie)
11 }
12
13 // Delete The Artist
14 if ([Link]('The Artist')) {
15 [Link]('Suppression de The Artist effectuée.')

34 Stéphane Crozat, Youssef El Saadany

 Solutions des exercices

16 }
17 else {
18 [Link]('Suppression de The Artist impossible, le film n\'existe pas.')
19 }

Solution n°17 [exercice p. 27]

1 // Empty set
2 let movies = new Set()
3
4 // Add two movies
5 [Link]('Matrix')
6 [Link]('The Artist')
7
8 // Display the movies
9 for (let movie of movies) {
10 [Link]('-', movie)
11 }
12
13 // Delete The Artist
14 if ([Link]('The Artist')) {
15 [Link]('Suppression de The Artist effectuée.')
16 }
17 else {
18 [Link]('Suppression de The Artist impossible, le film n\'existe pas.')
19 }
20
21 let choice
22 while (choice !== 0) {
23 // Movie list
24 [Link]()
25 [Link]('Liste des films :')
26 for (let movie of movies) {
27 [Link]('-', movie)
28 }
29 // Menu
30 [Link]()
31 [Link]('Menu :')
32 [Link]('1. Ajouter un film')
33 [Link]('2. Supprimer un film')
34 [Link]('0. Quitter')
35 choice = Number(prompt('Choix '))
36
37 // Add or delete
38 let movie
39 if (choice === 1 ) {
40 movie = prompt('Titre du film à ajouter ')
41 [Link](movie)
42 [Link](movie, 'ajouté.')
43 }
44 else if (choice === 2) {
45 movie = prompt('Titre du film à supprimer ')
46 if ([Link](movie)) {
47 [Link]('Suppression de', movie, 'effectuée.')
48 }
49 else {
50 [Link]('Suppression de', movie, 'impossible, le film n\'existe pas.')
51 }
52 }
53 }

Stéphane Crozat, Youssef El Saadany 35

Crédits des ressources
p. 4, 5, 5, 6, 20, 20
Licence : Domaine Public

36 Stéphane Crozat, Youssef El Saadany

 Crédits des ressources

Stéphane Crozat, Youssef El Saadany 37