From d596e86a4f13b04981f51d327af257b07e6d21c3 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 14 Nov 2021 14:23:22 +0100 Subject: Prepare Learning Area section for Markdown conversion (#2738) * Remove summary, spans and fonts * Remove notranslate class * Remove ids other than headings * Remove hidden blocks * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * Fix notes * Remove code in pre, sub/sup and some styles * fix dls * fix absolute / english links * fix figures and others * fix other issues from report * Fix other one-off issues excl. imgs * Fix images * Fixes #2842 for Learning area --- .../javascript/asynchronous/async_await/index.html | 7 +- .../choosing_the_right_approach/index.html | 4 +- .../javascript/asynchronous/concepts/index.html | 16 +- files/fr/learn/javascript/asynchronous/index.html | 9 +- .../javascript/asynchronous/introducing/index.html | 33 +- .../javascript/asynchronous/promises/index.html | 64 ++- .../asynchronous/timeouts_and_intervals/index.html | 54 +-- .../build_your_own_function/index.html | 19 +- .../building_blocks/conditionals/index.html | 132 +++--- .../javascript/building_blocks/events/index.html | 236 +++++------ .../building_blocks/functions/index.html | 91 ++--- .../building_blocks/image_gallery/index.html | 40 +- .../fr/learn/javascript/building_blocks/index.html | 20 +- .../building_blocks/looping_code/index.html | 442 ++++++++++----------- .../building_blocks/return_values/index.html | 34 +- .../client-side_storage/index.html | 56 +-- .../drawing_graphics/index.html | 52 +-- .../client-side_web_apis/fetching_data/index.html | 34 +- .../javascript/client-side_web_apis/index.html | 10 +- .../client-side_web_apis/introduction/index.html | 41 +- .../manipulating_documents/index.html | 18 +- .../third_party_apis/index.html | 14 +- .../video_and_audio_apis/index.html | 22 +- .../first_steps/a_first_splash/index.html | 53 +-- .../learn/javascript/first_steps/arrays/index.html | 41 +- files/fr/learn/javascript/first_steps/index.html | 14 +- .../learn/javascript/first_steps/math/index.html | 32 +- .../first_steps/silly_story_generator/index.html | 6 +- .../javascript/first_steps/strings/index.html | 32 +- .../test_your_skills_colon__arrays/index.html | 20 +- .../first_steps/useful_string_methods/index.html | 53 +-- .../javascript/first_steps/variables/index.html | 86 ++-- .../first_steps/what_is_javascript/index.html | 15 +- .../first_steps/what_went_wrong/index.html | 40 +- files/fr/learn/javascript/index.html | 26 +- .../adding_bouncing_balls_features/index.html | 28 +- .../fr/learn/javascript/objects/basics/index.html | 58 +-- files/fr/learn/javascript/objects/index.html | 32 +- .../javascript/objects/inheritance/index.html | 28 +- files/fr/learn/javascript/objects/json/index.html | 42 +- .../objects/object-oriented_js/index.html | 22 +- .../objects/object_building_practice/index.html | 92 ++--- .../objects/object_prototypes/index.html | 20 +- 43 files changed, 1014 insertions(+), 1174 deletions(-) (limited to 'files/fr/learn/javascript') diff --git a/files/fr/learn/javascript/asynchronous/async_await/index.html b/files/fr/learn/javascript/asynchronous/async_await/index.html index fa4956f829..5955c0f27f 100644 --- a/files/fr/learn/javascript/asynchronous/async_await/index.html +++ b/files/fr/learn/javascript/asynchronous/async_await/index.html @@ -17,9 +17,9 @@ translation_of: Learn/JavaScript/Asynchronous/Async_await

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}

Plus récemment, les fonctions async et le mot-clé await ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître.

- +

@@ -295,8 +295,7 @@ displayContent()

Pour la gestion des erreurs, nous avons inclus un bloc .catch() sur notre appel displayContent() ; cela permettra de gérer les erreurs survenant dans les deux fonctions.

Note :

Il est également possible d'utiliser un bloc finally au sein d'une fonction asynchrone, à la place d'un bloc asynchrone .finally(), pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre exemple en direct (voir aussi le code source).

Note : Il est également possible d'utiliser un bloc finally au sein d'une fonction asynchrone, à la place d'un bloc asynchrone .finally(), pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre exemple en direct (voir aussi le code source).

Gérer les ralentissements potentiellement causés par async/await

diff --git a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html index 0e44c87232..0b71c56c49 100644 --- a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html +++ b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html @@ -21,9 +21,9 @@ translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach

{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}

Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.

Prérequis :

diff --git a/files/fr/learn/javascript/asynchronous/concepts/index.html b/files/fr/learn/javascript/asynchronous/concepts/index.html index ebcb242eae..ee10969b47 100644 --- a/files/fr/learn/javascript/asynchronous/concepts/index.html +++ b/files/fr/learn/javascript/asynchronous/concepts/index.html @@ -12,9 +12,9 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts ---

{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}

Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.

Prérequis :

@@ -33,7 +33,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts

Les utilisatrices et utilisateurs de macOS, par exemple, le voient parfois avec le curseur rotatif de couleur arc-en-ciel (ou « ballon de plage », comme on l'appelle souvent). Ce curseur est la façon dont le système d'exploitation dit "le programme que vous utilisez actuellement a dû s'arrêter et attendre que quelque chose se termine, et cela prend tellement de temps que je craignais que vous vous demandiez ce qui se passe".

Spinner multicolore pour macOS avec ballon de plage.

C'est une expérience frustrante qui n'est pas une bonne utilisation de la puissance de traitement de l'ordinateur, surtout à une époque où les ordinateurs disposent de plusieurs cœurs de processeur. Il est inutile de rester assis à attendre quelque chose alors que vous pouvez laisser une tâche se dérouler sur un autre cœur de processeur et être averti quand elle a terminé. Cela vous permet d'effectuer d'autres travaux en même temps, ce qui est la base de la programmation asynchrone. C'est à l'environnement de programmation que vous utilisez (les navigateurs web, dans le cas du développement web) de vous fournir des API qui vous permettent d'exécuter de telles tâches de manière asynchrone.

@@ -63,9 +63,8 @@ btn.addEventListener('click', () => {

Lorsque vous exécutez l'exemple, ouvrez votre console JavaScript, puis cliquez sur le bouton. Vous remarquerez que le paragraphe n'apparaît qu'une fois que le calcul des dates est terminé et que le message de la console a été enregistré. Le code s'exécute dans l'ordre où il apparaît dans la source, et la dernière opération ne s'exécute pas tant que la première n'est pas terminée.

Note :

L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.

Note : L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.

Dans notre deuxième exemple, simple-sync-ui-blocking.html (voir en direct), nous simulons quelque chose de légèrement plus réaliste que vous pourriez rencontrer sur une page réelle. Nous bloquons l'interactivité de l'utilisateur avec le rendu de l'interface utilisateur. Dans cet exemple, nous avons deux boutons :

@@ -92,9 +91,8 @@ alertBtn.addEventListener('click', () =>

Si vous cliquez sur le premier bouton, puis rapidement sur le second, vous verrez que l'alerte n'apparaît pas avant que les cercles aient fini d'être rendus. La première opération bloque la seconde jusqu'à ce qu'elle ait fini de s'exécuter.

Note :

D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.

Note : D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.

Pourquoi ? La réponse est que JavaScript, de manière générale, ne s'exécute que sur un seul thread. À ce stade, nous devons introduire le concept de threads.

diff --git a/files/fr/learn/javascript/asynchronous/index.html b/files/fr/learn/javascript/asynchronous/index.html index 31e2c8bfbe..0688d5de42 100644 --- a/files/fr/learn/javascript/asynchronous/index.html +++ b/files/fr/learn/javascript/asynchronous/index.html @@ -19,12 +19,12 @@ translation_of: Learn/JavaScript/Asynchronous ---

Dans ce module, nous examinons le JavaScript asynchrone, pourquoi il est important et comment il peut être utilisé afin de gérer efficacement les opérations potentiellement bloquantes telles que la récupération de ressources sur un serveur.

Vous cherchez à devenir une développeuse ou un développeur web front-end ?

Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

Commencer +

Commencer

@@ -35,8 +35,7 @@ translation_of: Learn/JavaScript/Asynchronous

Si vous n'êtes pas familier avec le concept de programmation asynchrone, vous devriez absolument commencer par l'article Concepts généraux de programmation asynchrone de ce module. Si vous connaissez ce concept, vous pouvez probablement passer directement au module Introduction au JavaScript asynchrone.

Note :

Si vous travaillez sur un ordinateur/tablette/autre appareil où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tel que JSBin ou Glitch.

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tel que JSBin ou Glitch.

Guides

diff --git a/files/fr/learn/javascript/asynchronous/introducing/index.html b/files/fr/learn/javascript/asynchronous/introducing/index.html index b58da5b180..1a352017dd 100644 --- a/files/fr/learn/javascript/asynchronous/introducing/index.html +++ b/files/fr/learn/javascript/asynchronous/introducing/index.html @@ -19,9 +19,9 @@ translation_of: Learn/JavaScript/Asynchronous/Introducing

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}

Dans cet article, nous récapitulons brièvement les problèmes associés au JavaScript synchrone, et nous jetons un premier coup d'œil à certaines des différentes techniques asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes.

Prérequis :

@@ -68,15 +68,12 @@ btn.addEventListener('click', () => {

Ainsi, dans l'exemple ci-dessus, après avoir cliqué sur le bouton, le paragraphe n'apparaîtra qu'après avoir appuyé sur le bouton OK dans la boîte d'alerte. Vous pouvez l'essayer vous-même :

<button>Cliquez sur moi</button>

<button>Cliquez sur moi</button>

Note :

Il est important de se rappeler que alert(), tout en étant très utile pour démontrer une opération de blocage synchrone, est horrible à utiliser dans des applications du monde réel.

Note : Il est important de se rappeler que alert(), tout en étant très utile pour démontrer une opération de blocage synchrone, est horrible à utiliser dans des applications du monde réel.

JavaScript asynchrone

@@ -162,9 +159,8 @@ gods.forEach(function (eachName, index){ console.log('Problème de récupération : ' + err.message); }); -

Note :

Vous pouvez trouver la version finale sur GitHub (voir la source ici, et aussi voir le fonctionnement en direct).

Note : Vous pouvez trouver la version finale sur GitHub (voir la source ici, et aussi voir le fonctionnement en direct).

Nous voyons ici fetch() prendre un seul paramètre - l'URL d'une ressource que vous souhaitez récupérer sur le réseau - et renvoyer une promesse. La promesse est un objet représentant l'achèvement ou l'échec de l'opération asynchrone. Elle représente un état intermédiaire, en quelque sorte. En substance, c'est la façon dont le navigateur dit « Je promets de vous donner la réponse dès que possible », d'où le nom de « promesse ».

@@ -176,9 +172,8 @@ gods.forEach(function (eachName, index){

Le bloc catch() à la fin s'exécute si l'un des blocs .then() échoue - de manière similaire aux blocs synchrones try...catch, un objet d'erreur est mis à disposition à l'intérieur du catch(), qui peut être utilisé pour signaler le type d'erreur qui s'est produit. Notez cependant que le try...catch synchrone ne fonctionnera pas avec les promesses, bien qu'il fonctionne avec async/await, comme vous l'apprendrez plus tard.

Note :

Vous en apprendrez beaucoup plus sur les promesses plus tard dans le module, alors ne vous inquiétez pas si vous ne les comprenez pas encore complètement.

Note : Vous en apprendrez beaucoup plus sur les promesses plus tard dans le module, alors ne vous inquiétez pas si vous ne les comprenez pas encore complètement.

La file d'attente des événements

@@ -255,18 +250,16 @@ console.log(`Tout est bon !`);

Cela est dû au fait qu'au moment où le navigateur tente d'exécuter la troisième instruction console.log(), le bloc fetch() n'a pas fini de s'exécuter, de sorte que la variable image n'a pas reçu de valeur.

Note :

Pour des raisons de sécurité, vous ne pouvez pas fetch() les fichiers de votre système de fichiers local (ou exécuter d'autres opérations de ce type localement) ; pour exécuter l'exemple ci-dessus localement, vous devrez le faire passer par un serveur web local.

Note : Pour des raisons de sécurité, vous ne pouvez pas fetch() les fichiers de votre système de fichiers local (ou exécuter d'autres opérations de ce type localement) ; pour exécuter l'exemple ci-dessus localement, vous devrez le faire passer par un serveur web local.

Apprentissage actif : rendez tout asynchrone !

Pour corriger l'exemple problématique de fetch() et faire en sorte que les trois déclarations console.log() apparaissent dans l'ordre souhaité, vous pourriez faire en sorte que la troisième déclaration console.log() s'exécute également de manière asynchrone. Cela peut être fait en la déplaçant à l'intérieur d'un autre bloc .then() enchaîné à la fin du deuxième, ou en la déplaçant à l'intérieur du deuxième bloc then(). Essayez de corriger cela maintenant.

Note :

Si vous êtes bloqué, vous pouvez trouver une réponse ici (voyez-la fonctionner en direct). Vous pouvez également trouver beaucoup plus d'informations sur les promesses dans notre guide Gérer les opérations asynchrones avec élégance grâce aux Promesses, plus loin dans ce module.

Note : Si vous êtes bloqué, vous pouvez trouver une réponse ici (voyez-la fonctionner en direct). Vous pouvez également trouver beaucoup plus d'informations sur les promesses dans notre guide Gérer les opérations asynchrones avec élégance grâce aux Promesses, plus loin dans ce module.

Conclusion

diff --git a/files/fr/learn/javascript/asynchronous/promises/index.html b/files/fr/learn/javascript/asynchronous/promises/index.html index 499dcb87be..69f6de6a21 100644 --- a/files/fr/learn/javascript/asynchronous/promises/index.html +++ b/files/fr/learn/javascript/asynchronous/promises/index.html @@ -19,9 +19,9 @@ translation_of: Learn/JavaScript/Asynchronous/Promises

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}

Les promesses sont une fonctionnalité relativement nouvelle du langage JavaScript qui vous permet de reporter d'autres actions jusqu'à ce qu'une action précédente soit terminée, ou de répondre à son échec. Ceci est utile pour mettre en place une séquence d'opérations asynchrones afin qu'elles fonctionnent correctement. Cet article vous montre comment les promesses fonctionnent, comment vous les verrez utilisées avec les API Web, et comment écrire les vôtres.

Prérequis :

@@ -69,9 +69,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises

La chose importante ici est que l'appel getUserMedia() revient presque immédiatement, même si le flux de la caméra n'a pas encore été obtenu. Même si la fonction handleCallButton() est déjà retournée au code qui l'a appelée, lorsque getUserMedia() a fini de travailler, elle appelle le gestionnaire que vous fournissez. Tant que l'application ne suppose pas que le flux a commencé, elle peut continuer à fonctionner.

Note :

Vous pouvez en apprendre davantage sur ce sujet quelque peu avancé, si cela vous intéresse, dans l'article L'essentiel du WebRTC. Un code similaire à celui-ci, mais beaucoup plus complet, est utilisé dans cet exemple.

Note : Vous pouvez en apprendre davantage sur ce sujet quelque peu avancé, si cela vous intéresse, dans l'article L'essentiel du WebRTC. Un code similaire à celui-ci, mais beaucoup plus complet, est utilisé dans cet exemple.

Le problème des fonctions de rappel

@@ -146,9 +145,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises

Cependant, la lecture n'est pas aussi facile et cette syntaxe peut ne pas être utilisable si vos blocs sont plus complexes que ce que nous avons montré ici.

Note :

Vous pouvez apporter d'autres améliorations avec la syntaxe async/await, que nous aborderons dans le prochain article.

Note : Vous pouvez apporter d'autres améliorations avec la syntaxe async/await, que nous aborderons dans le prochain article.

Dans leur forme la plus basique, les promesses sont similaires aux écouteurs d'événements, mais avec quelques différences :

@@ -164,9 +162,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises

Dans le premier exemple, nous allons utiliser la méthode fetch() pour récupérer une image sur le web, la méthode blob() pour transformer le contenu brut du corps de la réponse fetch en un objet Blob, puis afficher ce blob à l'intérieur d'un élément <img>. Cet exemple est très similaire à celui que nous avons examiné dans le premier article, mais nous le ferons un peu différemment au fur et à mesure que nous vous ferons construire votre propre code basé sur des promesses.

Note :

L'exemple suivant ne fonctionnera pas si vous l'exécutez directement à partir du fichier (c'est-à-dire via une URL file://). Vous devez l'exécuter via un serveur de test local, ou utiliser une solution en ligne telle que Glitch ou les pages GitHub.

Note : L'exemple suivant ne fonctionnera pas si vous l'exécutez directement à partir du fichier (c'est-à-dire via une URL file://). Vous devez l'exécuter via un serveur de test local, ou utiliser une solution en ligne telle que Glitch ou les pages GitHub.

Pour répondre à l'achèvement réussi de l'opération lorsque cela se produit (dans ce cas, lorsqu'une réponse est retournée), nous invoquons la méthode .then() de l'objet promesse. La fonction de rappel à l'intérieur du bloc .then() s'exécute uniquement lorsque l'appel de la promesse se termine avec succès et retourne l'objet Response — en langage de promesse, lorsqu'elle a été remplie (fullfilled en anglais). On lui passe l'objet Response retourné en tant que paramètre.
-
-
Note :
-
Le fonctionnement d'un bloc .then() est similaire à celui de l'ajout d'un écouteur d'événements à un objet à l'aide de AddEventListener(). Il ne s'exécute pas avant qu'un événement ne se produise (lorsque la promesse se réalise). La différence la plus notable est qu'un .then() ne s'exécutera qu'une fois à chaque fois qu'il sera utilisé, alors qu'un écouteur d'événements pourrait être invoqué plusieurs fois.
+
+
Note : Le fonctionnement d'un bloc .then() est similaire à celui de l'ajout d'un écouteur d'événements à un objet à l'aide de AddEventListener(). Il ne s'exécute pas avant qu'un événement ne se produise (lorsque la promesse se réalise). La différence la plus notable est qu'un .then() ne s'exécutera qu'une fois à chaque fois qu'il sera utilisé, alors qu'un écouteur d'événements pourrait être invoqué plusieurs fois.

Nous exécutons immédiatement la méthode blob() sur cette réponse pour nous assurer que le corps de la réponse est entièrement téléchargé, et lorsqu'il est disponible, le transformer en un objet Blob avec lequel nous pouvons faire quelque chose. Le résultat de cette méthode est retourné comme suit :
```
response => response.blob()
```
@@ -220,9 +216,8 @@ document.body.appendChild(image);
Si vous enregistrez le fichier HTML que vous venez de créer et le chargez dans votre navigateur, vous verrez que l'image s'affiche dans la page comme prévu. Bon travail !
-
-
Note :
-
Vous remarquerez probablement que ces exemples sont quelque peu artificiels. Vous pourriez tout simplement vous passer de toute la chaîne fetch() et blob(), et simplement créer un élément <img> et définir la valeur de son attribut src à l'URL du fichier image, coffee.jpg. Nous avons toutefois choisi cet exemple parce qu'il démontre les promesses d'une manière simple et agréable, plutôt que pour sa pertinence dans le monde réel.
+
+
Note : Vous remarquerez probablement que ces exemples sont quelque peu artificiels. Vous pourriez tout simplement vous passer de toute la chaîne fetch() et blob(), et simplement créer un élément <img> et définir la valeur de son attribut src à l'URL du fichier image, coffee.jpg. Nous avons toutefois choisi cet exemple parce qu'il démontre les promesses d'une manière simple et agréable, plutôt que pour sa pertinence dans le monde réel.

Réagir à un échec
@@ -237,9 +232,8 @@ document.body.appendChild(image);
Cela ne fait pas beaucoup plus que si vous ne preniez pas la peine d'inclure le bloc .catch() du tout, mais pensez-y - cela nous permet de contrôler la gestion des erreurs exactement comme nous le voulons. Dans une application réelle, votre bloc .catch() pourrait réessayer de récupérer l'image, ou afficher une image par défaut, ou demander à l'utilisateur de fournir une URL d'image différente, ou autre.
-
-
Note :
-
Vous pouvez voir notre version de l'exemple en direct (voir également son code source).
+
+
Note : Vous pouvez voir notre version de l'exemple en direct (voir également son code source).

Enchaîner les blocs
@@ -266,9 +260,8 @@ document.body.appendChild(image);
Gardez à l'esprit que la valeur renvoyée par une promesse remplie devient le paramètre transmis à la fonction de rappel du bloc .then() suivant.
-
-
Note :
-
Les blocs .then()/.catch() dans les promesses sont essentiellement l'équivalent asynchrone d'un bloc try...catch dans du code synchrone. Gardez à l'esprit que le try...catch synchrone ne fonctionnera pas dans du code asynchrone.
+
+
Note : Les blocs .then()/.catch() dans les promesses sont essentiellement l'équivalent asynchrone d'un bloc try...catch dans du code synchrone. Gardez à l'esprit que le try...catch synchrone ne fonctionnera pas dans du code asynchrone.

Récapitulatif de la terminologie des promesses
@@ -394,14 +387,12 @@ document.body.appendChild(para);
Le code que nous avons fourni ici pour l'affichage des articles est assez rudimentaire, mais il fonctionne comme une explication pour le moment.
-
-
Note :
-
Si vous êtes bloqué, vous pouvez comparer votre version du code à la nôtre, pour voir à quoi elle est censée ressembler - voir en direct, et voir le code source.
+
+
Note : Si vous êtes bloqué, vous pouvez comparer votre version du code à la nôtre, pour voir à quoi elle est censée ressembler - voir en direct, et voir le code source.

-
-
Note :
-
Si vous amélioriez ce code, vous pourriez vouloir boucler sur une liste d'éléments à afficher, en récupérant et en décodant chacun d'eux, puis boucler sur les résultats à l'intérieur de Promise.all(), en exécutant une fonction différente pour afficher chacun d'eux en fonction du type de code. Cela permettrait de fonctionner pour n'importe quel nombre d'éléments, pas seulement trois.
+
+
Note : Si vous amélioriez ce code, vous pourriez vouloir boucler sur une liste d'éléments à afficher, en récupérant et en décodant chacun d'eux, puis boucler sur les résultats à l'intérieur de Promise.all(), en exécutant une fonction différente pour afficher chacun d'eux en fonction du type de code. Cela permettrait de fonctionner pour n'importe quel nombre d'éléments, pas seulement trois.

De plus, vous pourriez déterminer quel est le type de fichier récupéré sans avoir besoin d'une propriété type explicite. Vous pourriez, par exemple, vérifier l'en-tête HTTP Content-Type de la réponse dans chaque cas en utilisant response.headers.get("content-type"), puis agir en conséquence.

@@ -456,9 +447,8 @@ document.body.appendChild(para);
Cela permet d'envoyer un simple message à la console pour nous dire quand chaque tentative de récupération est terminée.
-
-
Note :
-
then()/catch()/finally() est l'équivalent asynchrone de try/catch/finally en code synchrone.
+
+
Note : then()/catch()/finally() est l'équivalent asynchrone de try/catch/finally en code synchrone.

Construire vos propres promesses personnalisées
@@ -496,9 +486,8 @@ document.body.appendChild(para);
L'exemple ci-dessus n'est pas très flexible - la promesse ne peut jamais s'accomplir qu'avec une seule chaîne de caractères, et elle n'a aucune sorte de condition reject() spécifiée (il est vrai que setTimeout() n'a pas vraiment de condition d'échec, donc cela n'a pas d'importance pour cet exemple).
-
-
Note :
-
Pourquoi resolve(), et pas fulfill() ? La réponse que nous vous donnerons, pour l'instant, est c'est compliqué.
+
+
Note : Pourquoi resolve(), et pas fulfill() ? La réponse que nous vous donnerons, pour l'instant, est c'est compliqué.

Rejeter une promesse personnalisée
@@ -545,9 +534,8 @@ document.body.appendChild(para);
Lorsque vous enregistrez et exécutez le code tel quel, après une seconde, vous obtiendrez le message d'alerte. Essayez maintenant de définir le message sur une chaîne vide ou l'intervalle sur un nombre négatif, par exemple, et vous pourrez voir la promesse rejetée avec les messages d'erreur appropriés ! Vous pouvez également essayer de faire autre chose avec le message résolu plutôt que de simplement créer une alerte.
-
-
Note :
-
Vous pouvez trouver notre version de cet exemple sur GitHub sur custom-promise2.html (voir aussi le code source).
+
+
Note : Vous pouvez trouver notre version de cet exemple sur GitHub sur custom-promise2.html (voir aussi le code source).

Un exemple plus concret
diff --git a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html index c776e4773b..e2f90a12fb 100644 --- a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html +++ b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html @@ -20,9 +20,9 @@ translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
-
Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.
+
Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.
-

Prérequis :

@@ -66,9 +66,8 @@ translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals

Zéro ou plusieurs valeurs représentant les paramètres que vous souhaitez transmettre à la fonction lors de son exécution.

Note :

La quantité de temps spécifiée (ou le délai) n'est pas le temps garanti à l'exécution, mais plutôt le temps minimum à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.

Note : La quantité de temps spécifiée (ou le délai) n'est pas le temps garanti à l'exécution, mais plutôt le temps minimum à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.

En conséquence, un code comme setTimeout(fn, 0) s'exécutera dès que la pile sera vide, pas immédiatement. Si vous exécutez un code comme setTimeout(fn, 0) mais qu'immédiatement après vous exécutez une boucle qui compte de 1 à 10 milliards, votre rappel sera exécuté après quelques secondes.

@@ -116,9 +115,8 @@ let maSalutation = setTimeout(direBonjour, 2000);

clearTimeout(maSalutation);

Note :

Voir greeter-app.html pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé (voir aussi le code source).

Note : Voir greeter-app.html pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé (voir aussi le code source).

setInterval()

@@ -179,9 +177,8 @@ clearInterval(myInterval);

Vous devriez probablement désactiver le bouton de démarrage après l'avoir pressé une fois, et le réactiver après l'avoir arrêté/réinitialisé. Sinon, les pressions multiples sur le bouton de démarrage appliqueront plusieurs setInterval() à l'horloge, ce qui entraînera un comportement erroné.

Note :

Si vous êtes bloqué, vous pouvez trouver notre version ici (voir le code source).

Note : Si vous êtes bloqué, vous pouvez trouver notre version ici (voir le code source).

Choses à garder à l'esprit concernant setTimeout() et setInterval()

@@ -251,9 +248,8 @@ alert('Hello');

(Plus d'informations à ce sujet sur CreativeJS (en).)

Note :

Vous trouverez des exemples d'utilisation de requestAnimationFrame() ailleurs dans le cours - voir par exemple Dessiner des éléments graphiques, et La construction d'objet en pratique.

Note : Vous trouverez des exemples d'utilisation de requestAnimationFrame() ailleurs dans le cours - voir par exemple Dessiner des éléments graphiques, et La construction d'objet en pratique.

La méthode prend comme argument un rappel à invoquer avant le repeignage. C'est le modèle général dans lequel vous le verrez utilisé :

@@ -267,9 +263,8 @@ draw();

L'idée est de définir une fonction dans laquelle votre animation est mise à jour (par exemple, vos sprites sont déplacés, le score est mis à jour, les données sont rafraîchies, ou autre). Ensuite, vous l'appelez pour lancer le processus. À la fin du bloc de fonctions, vous appelez requestAnimationFrame() avec la référence de la fonction passée en paramètre, et cela indique au navigateur de rappeler la fonction lors du prochain rafraîchissement de l'affichage. Ceci est ensuite exécuté en continu, car le code appelle requestAnimationFrame() de manière récursive.

Note :

Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, les animations CSS sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.

Note : Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, les animations CSS sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.

Si, toutefois, vous faites quelque chose de plus complexe et impliquant des objets qui ne sont pas directement accessibles à l'intérieur du DOM (comme les objets 2D Canvas API ou WebGL), requestAnimationFrame() est la meilleure option dans la plupart des cas.

@@ -338,9 +333,8 @@ draw();

Assez avec la théorie ! Construisons votre propre exemple personnel de requestAnimationFrame(). Vous allez créer une simple "animation de toupie" - le genre que vous pourriez voir affiché dans une application lorsqu'elle est occupée à se connecter au serveur, etc.

Note:

Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de requestAnimationFrame(), et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.

Note : Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de requestAnimationFrame(), et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.

@@ -402,9 +396,8 @@ let rAF; -

Note :

Vous pouvez trouver l'exemple terminé en direct sur GitHub. (Vous pouvez également voir le code source).

Note : Vous pouvez trouver l'exemple terminé en direct sur GitHub. (Vous pouvez également voir le code source).

Effacer un appel de requestAnimationFrame()

@@ -426,9 +419,8 @@ let rAF;

Vous voudrez ajouter une variable de suivi pour vérifier si la toupie tourne ou non, effacer le cadre d'animation si c'est le cas, et le rappeler si ce n'est pas le cas.

Note :

Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages exemple en direct et code source.

Note : Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages exemple en direct et code source.

Ralentissement d'une animation requestAnimationFrame()

@@ -536,9 +528,8 @@ function start() { btn.style.display = 'none'; setTimeout(setEndgame, random(5000,10000)); } -

Note :

Vous verrez que cet exemple appelle setTimeout() sans stocker la valeur de retour. (Donc, pas let myTimeout = setTimeout(functionName, interval).)

Note : Vous verrez que cet exemple appelle setTimeout() sans stocker la valeur de retour. (Donc, pas let myTimeout = setTimeout(functionName, interval).)

Cela fonctionne très bien, tant que vous n'avez pas besoin d'effacer votre intervalle/temps d'attente à un moment donné. Si vous le faites, vous devrez sauvegarder l'identifiant renvoyé !

Le résultat net du code précédent est que lorsque le bouton Start est pressé, la toupie est affichée et les joueurs sont amenés à attendre un temps aléatoire avant d'être invités à appuyer sur leur bouton. Cette dernière partie est gérée par la fonction setEndgame(), que vous allez définir ensuite.

@@ -586,9 +577,8 @@ function start() {

Voilà, c'est fait !

Note :

Si vous êtes bloqué, consultez notre version du jeu en live (voir également le code source).

Note : Si vous êtes bloqué, consultez notre version du jeu en live (voir également le code source).

Conclusion

diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html index 1463cc1e20..696c4d50d3 100644 --- a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html +++ b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html @@ -19,13 +19,13 @@ original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}

Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.

Prérequis :

- + @@ -36,16 +36,16 @@ original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function

Apprentissage actif : Construisons une fonction

La fonction que nous allons construire sera nommée displayMessage(). Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction alert() du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :

alert('This is a message');

La fonction prend un seul argument en paramètre — la chaîne de caractères qui est affichée dans la boîte d'alerte. Vous pouvez essayer de varier la syntaxe de la chaîne pour modifier le message.

La fonction alert() est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.

Note : Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.

Note : Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.

La fonction de base

@@ -53,7 +53,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function

Pour commencer, mettons en place une fonction de base.

Note : Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les conventions de noms de variables. Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.

Note : Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les conventions de noms de variables. Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.

Tout d'abord, téléchargez les icônes nécessaires à cet exercice (warning et chat) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé icons dans le même répertoire que votre fichier HTML. -
Note : icônes warning et chat trouvés sur iconfinder.com, et créés par Nazarrudin Ansyari. Merci !
+
+
Note : icônes warning et chat trouvés sur iconfinder.com, et créés par Nazarrudin Ansyari. Merci !
Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur .msgBox en changeant :
```
width: 200px;
```
@@ -229,7 +230,7 @@ displayMessage('Brian: Hi there, how are you today?','chat');

Note : Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la version définitive sur GitHub (aussi, vous pouvez tester la démo), ou nous demander de l'aide.

Note : Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la version définitive sur GitHub (aussi, vous pouvez tester la démo), ou nous demander de l'aide.

Conclusion

Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.

Objectif :
Prérequis :	Savoir-faire de base, une compréhension minimale HTML et CSS, premiers pas en JavaScript, Fonctions — blocs de code réutilisables.	Savoir-faire de base, une compréhension minimale HTML et CSS, premiers pas en JavaScript, Fonctions — blocs de code réutilisables.

@@ -40,7 +40,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/conditionals

Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».)

Instruction if ... else

@@ -100,7 +100,7 @@ if (coursesFaites === true) {

Avec un tel code, la variable coursesFaites renvoie toujours false, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne true à la variable coursesFaites si l'enfant a fait les courses.

Note : Vous pouvez voir une version plus complète de cet exemple sur GitHub (ainsi qu'en version live.)

Note : Vous pouvez voir une version plus complète de cet exemple sur GitHub (ainsi qu'en version live.)

else if

@@ -109,37 +109,37 @@ if (coursesFaites === true) {

Il existe un moyen d'enchaîner des choix / résultats supplémentaires à if...else — en utilisant else if entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre if() { ... } et else { ... } — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:

<label for="weather">Select the weather type today: </label>
-<select id="weather">
-  <option value="">--Make a choice--</option>
-  <option value="sunny">Sunny</option>
-  <option value="rainy">Rainy</option>
-  <option value="snowing">Snowing</option>
-  <option value="overcast">Overcast</option>
-</select>
-
-<p></p>

- -

const select = document.querySelector('select');
-const para = document.querySelector('p');
-
-select.addEventListener('change', setWeather);
-
-function setWeather() {
-  const choice = select.value;
-
-  if (choice === 'sunny') {
-    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
-  } else if (choice === 'rainy') {
-    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
-  } else if (choice === 'snowing') {
-    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
-  } else if (choice === 'overcast') {
-    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
-  } else {
-    para.textContent = '';
-  }
-}

<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>

+ +

const select = document.querySelector('select');
+const para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+function setWeather() {
+  const choice = select.value;
+
+  if (choice === 'sunny') {
+    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+  } else if (choice === 'rainy') {
+    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+  } else if (choice === 'snowing') {
+    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+  } else if (choice === 'overcast') {
+    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+  } else {
+    para.textContent = '';
+  }
+}

@@ -151,7 +151,7 @@ select.addEv

Note : Vous trouverez également cet exemple sur GitHub (ainsi qu'en version live ici.)

Note : Vous trouverez également cet exemple sur GitHub (ainsi qu'en version live ici.)

Une note sur les opérateurs de comparaison

@@ -165,7 +165,7 @@ select.addEv

Note : Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.

Note : Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.

Nous souhaitons mentionner à propos des tests des valeurs booléennes (true/false) un modèle courant que vous rencontrerez souvent. Toute valeur autre que false, undefined, null, 0, NaN ou une chaîne vide ('') renvoie true lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est true, ou même si elle existe (c'est-à-dire si elle n'est pas undefined).
@@ -262,7 +262,7 @@ if (coursesFaites) { // pas besoin d'écrire explicitement '=== true'

Les Instructions if...else font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important.

Les instructions switch sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :

switch (expression) {
   case choix1:
@@ -292,7 +292,7 @@ if (coursesFaites) { // pas besoin d'écrire explicitement '=== true'
 
 
 
-Note : Vous n'avez pas à inclure la section  default — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.
+Note : Vous n'avez pas à inclure la section  default — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.
 
 
 Un exemple de switch
@@ -340,12 +340,12 @@ function setWeather() {
 {{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}
 
 
-Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)
+Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)
 
 
 Opérateur ternaire
 
-Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'opérateur ternaire ou conditionnel est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est true et une autre si elle est false — elle est utile dans certains cas, et occupe moins de place qu'un bloc if...else si votre choix est limité à deux possibilités à choisir via une condition true/false. Voici le pseudo‑code correspondant :
+Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'opérateur ternaire ou conditionnel est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est true et une autre si elle est false — elle est utile dans certains cas, et occupe moins de place qu'un bloc if...else si votre choix est limité à deux possibilités à choisir via une condition true/false. Voici le pseudo‑code correspondant :
 
 ( condition ) ? exécuter ce code : exécuter celui‑ci à la place
 
@@ -385,10 +385,10 @@ select.onchange = function() {
 
 Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir ou blanc), plus un simple élément {{htmlelement('h1')}} pour afficher un titre de site web. Nous avons aussi une fonction update(), qui prend deux couleurs en paramètre (entrées). La couleur de fond du site est déterminée par la couleur indiquée dans le premier paramètre fourni, et la couleur du texte par le deuxième.
 
-Nous avons également mis un écouteur d'événement onchange qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — select.value === 'black'. Si le test renvoie true, nous exécutons la fonction update() avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie false, nous exécutons update() avec les paramètres noir et blanc, les couleurs du site seront inversées.
+Nous avons également mis un écouteur d'événement onchange qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — select.value === 'black'. Si le test renvoie true, nous exécutons la fonction update() avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie false, nous exécutons update() avec les paramètres noir et blanc, les couleurs du site seront inversées.
 
 
-Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)
+Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)
 
 
 Apprentissage actif : un calendrier simple
@@ -417,10 +417,7 @@ select.onchange = function() {
 
 Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton "Réinitialiser". Si vous êtes vraiment bloqué, pressez "Voir la solution".
 
-
-Playable code
-
-<div class="output" style="height: 500px;overflow: auto;">
+<div class="output" style="height: 500px;overflow: auto;">
   <label for="month">Choisissez un mois : </label>
   <select id="month">
     <option value="Janvier">Janvier</option>
@@ -476,7 +473,7 @@ createCalendar(31,'Janvier');
 </div>
 
 
-.output * {
+.output * {
   box-sizing: border-box;
 }
 
@@ -496,7 +493,7 @@ createCalendar(31,'Janvier');
 }
 
 
-const textarea = document.getElementById('code');
+const textarea = document.getElementById('code');
 const reset = document.getElementById('reset');
 const solution = document.getElementById('solution');
 let code = textarea.value;
@@ -520,11 +517,10 @@ var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = d
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
 
-
 
-{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}
+{{ EmbedLiveSample('Apprentissage_actif_un_calendrier_simple', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}
 
-Activité : plus de choix de couleurs !
+Activité : plus de choix de couleurs
 
 Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive switch  qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive switch au dessous du commentaire  // AJOUT D'UNE DIRECTIVE SWITCH :
 
@@ -536,10 +532,7 @@ window.addEventListener('load', updateCode);
 
 Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ».
 
-
-Playable code 2
-
-<div class="output" style="height: 300px;">
+<div class="output" style="height: 300px;">
   <label for="theme">Choisissez un thème : </label>
   <select id="theme">
     <option value="white">Blanc</option>
@@ -575,7 +568,7 @@ function update(bgColor, textColor) {
 </div>
 
 
-const textarea = document.getElementById('code');
+const textarea = document.getElementById('code');
 const reset = document.getElementById('reset');
 const solution = document.getElementById('solution');
 let code = textarea.value;
@@ -599,21 +592,20 @@ const jsSolution = 'const select = document.querySelector(\'select\');\nlet html
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
 
-
 
-{{ EmbedLiveSample('Playable_code_2', '100%', 850) }}
+{{ EmbedLiveSample('Activité_plus_de_choix_de_couleurs', '100%', 850) }}
 
 Conclusion
 
-C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien contactez‑nous pour une aide.
+C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien contactez‑nous pour une aide.
 
 Voir aussi
 
 
- Opérateurs de comparaison
- Les instructions conditionnelles
- Référence if...else
- Référence opérateur conditionnel (ternaire)
+ Opérateurs de comparaison
+ Les instructions conditionnelles
+ Référence if...else
+ Référence opérateur conditionnel (ternaire)
 
 
 {{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}
@@ -621,11 +613,11 @@ window.addEventListener('load', updateCode);
 Dans ce module
 
 
- Prendre des décisions dans du code — conditions
- Les boucles dans le code
- Fonctions — blocs de code réutilisables
- Construire vos propres fonctions
- Valeurs de retour des fonctions
- Introduction aux événements
- Gallerie d'images
+ Prendre des décisions dans du code — conditions
+ Les boucles dans le code
+ Fonctions — blocs de code réutilisables
+ Construire vos propres fonctions
+ Valeurs de retour des fonctions
+ Introduction aux événements
+ Gallerie d'images
 
diff --git a/files/fr/learn/javascript/building_blocks/events/index.html b/files/fr/learn/javascript/building_blocks/events/index.html
index c61ed3635e..b8bd4ba3d6 100644
--- a/files/fr/learn/javascript/building_blocks/events/index.html
+++ b/files/fr/learn/javascript/building_blocks/events/index.html
@@ -1,14 +1,6 @@
 ---
 title: Introduction aux évènements
 slug: Learn/JavaScript/Building_blocks/Events
-tags:
-  - Article
-  - Codage
-  - Débutant
-  - Evènement
-  - Gestionnaire d'événement
-  - Guide
-  - JavaScript
 translation_of: Learn/JavaScript/Building_blocks/Events
 original_slug: Apprendre/JavaScript/Building_blocks/Evènements
 ---
@@ -16,45 +8,45 @@ original_slug: Apprendre/JavaScript/Building_blocks/Evènements
 
 {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
 
-Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez. Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information. Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs. Ce ne sera pas une étude exhaustive; mais seulement ce que vous devez savoir à ce stade.
+Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez. Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information. Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs. Ce ne sera pas une étude exhaustive; mais seulement ce que vous devez savoir à ce stade.
 
-

Prérequis :

- + - +

Prérequis:	Connaissances de base en informatique, une compréhension de base de HTML et CSS, Premiers pas en JavaScript.	Connaissances de base en informatique, une compréhension de base de HTML et CSS, Premiers pas en JavaScript.
Objectif:	Comprendre la théorie fondamentale des événements, comment ils fonctionnent dans les navigateurs et comment les événements peuvent différer dans différents environnements de programmation.	Comprendre la théorie fondamentale des événements, comment ils fonctionnent dans les navigateurs et comment les événements peuvent différer dans différents environnements de programmation.

Une série d'événements heureux

Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez — le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit. Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.

Dans le cas du Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et tendent à être rattachés à un élément spécifique qui s'y trouve - il peut s'agir d'un élément unique, d'un ensemble d'éléments, du document HTML chargé dans l'onglet en cours ou toute la fenêtre du navigateur. Il y a beaucoup de types différents d'événements qui peuvent se produire, par exemple :

L'utilisateur clique avec la souris sur un certain élément ou en place le curseur sur un certain élément.
L'utilisateur appuie sur une touche du clavier.
L'utilisateur redimensionne ou ferme la fenêtre du navigateur.
Une page web finissant de se charger.
Un formulaire en cours de soumission
Une vidéo en cours de lecture, en pause ou en fin de lecture.
Une erreur qui survient.
L'utilisateur clique avec la souris sur un certain élément ou en place le curseur sur un certain élément.
L'utilisateur appuie sur une touche du clavier.
L'utilisateur redimensionne ou ferme la fenêtre du navigateur.
Une page web finissant de se charger.
Un formulaire en cours de soumission
Une vidéo en cours de lecture, en pause ou en fin de lecture.
Une erreur qui survient.

Vous vous en rendrez compte (notamment en jetant un coup d'œil à la section MDN Référence des événements ), il y a beaucoup d'événements auxquels vous pouvez répondre.
+

Vous vous en rendrez compte (notamment en jetant un coup d'œil à la section MDN Référence des événements ), il y a beaucoup d'événements auxquels vous pouvez répondre.

- Chaque événement disponible a un gestionnaire d'événement, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera. Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous enregistrons un gestionnaire d'événements. Notez que les gestionnaires d'événements sont parfois appelés écouteurs d'événements - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble. L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.

+ Chaque événement disponible a un gestionnaire d'événement, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera. Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous enregistrons un gestionnaire d'événements. Notez que les gestionnaires d'événements sont parfois appelés écouteurs d'événements - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble. L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.

Note: il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur

Note : il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur

Un exemple simple

@@ -63,9 +55,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Evènements

<button>Change color</button>

button { margin: 10px };

button { margin: 10px };

Le JavaScript ressemblera à ça :

@@ -92,21 +82,21 @@ btn.onclick = function() {

Ce ne sont pas que des pages web

Une autre chose qui mérite d'être mentionnée à ce stade est que les événements ne sont pas particuliers à JavaScript - la plupart des langages de programmation ont un certain type de modèle d'événement, et la façon dont cela fonctionne diffère souvent de celle de JavaScript. En fait, le modèle d'événement en JavaScript pour les pages Web diffère du modèle d'événement pour JavaScript tel qu'il est utilisé dans d'autres environnements.

Par exemple, Node.js est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur. Le modèle Node.js event model s'appuie sur des écouteurs pour écouter les événements et des émetteurs pour générer des événements périodiquement — bien qu'il ne le semble pas à première vue, le code est très différent, en particulier lorsqu'il utilise des fonctions comme on() pour enregistrer un écouteur d'événement, et once() pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document HTTP connect event docs propose un bon exemple d'utilisation.

Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs — comme améliorations de la fonctionnalité du navigateur — à l'aide d'une technologie appelée WebExtensions. Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent — les écouteurs d'événements sont sensibles à la casse (p.ex.onMessage plutôt que onmessage), et doivent êtres combinés à la fonction addListener. Jetez un oeil à la page runtime.onMessage page pour voir un exemple.

Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage; nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.

De quelle manière utiliser les événements Web ?

Il existe plusieurs façons d'ajouter un code d'écouteur d'événement aux pages Web afin qu'il soit exécuté lorsque l'événement associé se déclenche. Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.

Les propriétés du gestionnaire d'événement

Voici les propriétés qui existent pour contenir le code du gestionnaire d'événement que nous avons vu le plus fréquemment pendant le cours. Revenons à l'exemple ci-dessus :

var btn = document.querySelector('button');
 
@@ -115,9 +105,9 @@ btn.onclick = function() {
   document.body.style.backgroundColor = rndCol;
 }

La propriété onclick est la propriété du gestionnaire d'événement utilisée dans cette situation. C'est essentiellement une propriété comme les autres disponibles sur le bouton (p.ex. btn.textContent, ou btn.style), mais d'un type spécial — lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.

Vous pouvez également définir la propriété du gestionnaire d'événement comme étant égale au nom d'une fonction définie (comme nous l'avons vu dans Construire votre propre fonction). Le code suivant fonctionnera tout pareil:

var btn = document.querySelector('button');
 
@@ -128,22 +118,22 @@ function bgChange() {
 
 btn.onclick = bgChange;

De nombreuses propriétés de gestionnaire d'événement sont disponibles. Faisons une expérience.

Tout d'abord, faites une copie locale de random-color-eventhandlerproperty.html, et ouvrez-le dans votre navigateur. C'est juste une copie de l'exemple simple de couleur aléatoire avec lequel nous avons déjà joué dans cet article. Maintenant, changez btn.onclick pour lui attribuer, tour à tour, les différentes valeurs qui suivent, et observez le résultat:

btn.onfocus et btn.onblur — La couleur change lorsque le bouton est net ou grisé (essayez d'appuyer sur la touche Tab pour l'activer et l'éteindre à nouveau). Ceux-ci sont souvent utilisés pour afficher des informations sur la façon de remplir les champs de formulaire lorsqu'ils sont sélectionnés, ou afficher un message d'erreur si un champ de formulaire vient d'être rempli avec une valeur incorrecte.
btn.ondblclick — La couleur change seulement si l'élément est double-cliqué.
window.onkeypress, window.onkeydown, window.onkeyup — La couleur change si l'on appuie sur une touche du clavier. keypress se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que keydown et keyup se réfèrent respectivement à l'appui et au relâchement sur la touche. Notez que cela ne fonctionne pas si vous essayez d'enregistrer ce gestionnaire d'événement sur le bouton lui-même - nous avons dû l'enregistrer sur l'objet window, qui représente la fenêtre entière du navigateur.
btn.onmouseover et btn.onmouseout — La couleur changera respectivement lorsque le pointeur de la souris survolera le bouton, ou lorsque le curseur arrêtera le survol du bouton pour s'éloigner de ce dernier.
btn.onfocus et btn.onblur — La couleur change lorsque le bouton est net ou grisé (essayez d'appuyer sur la touche Tab pour l'activer et l'éteindre à nouveau). Ceux-ci sont souvent utilisés pour afficher des informations sur la façon de remplir les champs de formulaire lorsqu'ils sont sélectionnés, ou afficher un message d'erreur si un champ de formulaire vient d'être rempli avec une valeur incorrecte.
btn.ondblclick — La couleur change seulement si l'élément est double-cliqué.
window.onkeypress, window.onkeydown, window.onkeyup — La couleur change si l'on appuie sur une touche du clavier. keypress se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que keydown et keyup se réfèrent respectivement à l'appui et au relâchement sur la touche. Notez que cela ne fonctionne pas si vous essayez d'enregistrer ce gestionnaire d'événement sur le bouton lui-même - nous avons dû l'enregistrer sur l'objet window, qui représente la fenêtre entière du navigateur.
btn.onmouseover et btn.onmouseout — La couleur changera respectivement lorsque le pointeur de la souris survolera le bouton, ou lorsque le curseur arrêtera le survol du bouton pour s'éloigner de ce dernier.

Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire onclick peut être enregistré sur presque n'importe quel élément), alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser onplay seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).

Les gestionnaires d'événements en ligne : ne les utilisez pas !

Vous pourriez également voir un motif comme celui-ci dans votre code:

<button onclick="bgChange()">Press me</button>

@@ -154,18 +144,18 @@ btn.onclick = bgChange; }

Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

Note : Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des attributs HTML du gestionnaire d'événement (c'est-à-dire les gestionnaires d'événements en ligne) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :

<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>

Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement; cependant, vous ne devriez pas les utiliser — ils sont considérés comme une mauvaise pratique. Il peut sembler facile d'utiliser un attribut de gestionnaire d'événement si vous voulez avancer rapidement, mais ils deviennent rapidement ingérables et inefficaces.

- Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser — garder votre JavaScript au même endroit est préférable; s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.

+ Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser — garder votre JavaScript au même endroit est préférable; s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.

Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée. Un bouton ça va, mais que faire si vous avez 100 boutons ? Vous devez ajouter 100 attributs au fichier; la maintenance se transformerait très vite en un cauchemar. Avec JavaScript, vous pouvez facilement ajouter une fonction de gestionnaire d'événement à tous les boutons de la page, peu importe leur nombre, en utilisant quelque chose comme ceci :

var buttons = document.querySelectorAll('button');
 
@@ -174,12 +164,12 @@ for (var i = 0; i < buttons.length; i++) {
 }

Note: Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.

Note : Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.

addEventListener() et removeEventListener()

Le dernier type de mécanisme d'événement est défini dans le Document Object Model (DOM) Level 2 Events , qui fournit aux navigateurs une nouvelle fonction: addEventListener(). Cela fonctionne de la même manière que les propriétés du gestionnaire d'événement, mais la syntaxe est évidemment différente. Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:

var btn = document.querySelector('button');
 
@@ -191,65 +181,65 @@ function bgChange() {
 btn.addEventListener('click', bgChange);

Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

Note : Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

Dans la fonction addEventListener() , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction addEventListener(), dans une fonction anonyme, comme ceci:

btn.addEventListener('click', function() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
 });

Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment. Pour commencer, il existe une fonction réciproque, removeEventListener(), qui supprime un écouteur ajouté précédemment. Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:

btn.removeEventListener('click', bgChange);

Ceci n'a pas beaucoup de sens pour les programmes simples et de petite taille, mais pour les programmes plus grands et plus complexes, cela peut améliorer l'efficacité, de nettoyer les anciens gestionnaires d'événements inutilisés. De plus, par exemple, cela vous permet d'avoir un même bouton qui effectue différentes actions dans des circonstances différentes - tout ce que vous avez à faire est d'ajouter / supprimer des gestionnaires d'événements convenablement.
+

+ D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur. Les deux gestionnaires suivants ne seraient pas appliqués:

myElement.onclick = functionA;
 myElement.onclick = functionB;

Comme la deuxième ligne remplacerait la valeur de onclick définie par le premier. Cependant, ceci fonctionnerait:

myElement.addEventListener('click', functionA);
 myElement.addEventListener('click', functionB);

Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.
+

Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.

- En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement. Celles-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de addEventListener() et removeEventListener().

+ En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement. Celles-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de addEventListener() et removeEventListener().

Quel mécanisme devrais-je utiliser ?

Parmi les trois mécanismes, vous ne devriez certainement pas utiliser les attributs du gestionnaire d'événement HTML - ceux-ci sont obsolètes et constituent une mauvaise pratique, comme mentionné ci-dessus.

- Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:
+ Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:

Les propriétés du gestionnaire d'événement ont moins de puissance et d'options, mais une meilleure compatibilité entre les navigateurs (prise en charge depuis Internet Explorer 8). Vous devriez probablement commencer par ceux-ci pendant votre apprentissage.
Les événements du DOM Niveau 2 (addEventListener(), etc.) sont plus puissants, mais peuvent aussi devenir plus complexes et moins bien supportés (supportés depuis Internet Explorer 9). Vous devriez également vous entraîner avec, et tenter de les utiliser si possible.
Les propriétés du gestionnaire d'événement ont moins de puissance et d'options, mais une meilleure compatibilité entre les navigateurs (prise en charge depuis Internet Explorer 8). Vous devriez probablement commencer par ceux-ci pendant votre apprentissage.
Les événements du DOM Niveau 2 (addEventListener(), etc.) sont plus puissants, mais peuvent aussi devenir plus complexes et moins bien supportés (supportés depuis Internet Explorer 9). Vous devriez également vous entraîner avec, et tenter de les utiliser si possible.

Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant removeEventListener(), et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire. Par exemple, vous pouvez appeler addEventListener('click', function() { ... }) sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument. Cela est impossible avec les propriétés du gestionnaire d'événement car toute tentative ultérieure de définition d'une propriété remplacera les propriétés précédentes, par exemple:

element.onclick = function1;
 element.onclick = function2;
 etc.

Note: Si vous êtes appelé à prendre en charge des navigateurs plus anciens qu'Internet Explorer 8 dans votre travail, vous risquez de rencontrer des difficultés, car ces anciens navigateurs utilisent des modèles d'événements différents des nouveaux navigateurs. Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple jQuery) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs. Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.

D'autres concepts liés aux événements

Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements. Il n'est pas important de les comprendre entièrement à ce stade, mais cela pourra servir à expliquer certains modèles de code que vous rencontrerez probablement de temps en temps.

L'objet événement

Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que event, evt, ou simplement e . C'est ce qu'on appelle l'objet événement, qui est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires. Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:

function bgChange(e) {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
@@ -260,16 +250,16 @@ etc.

btn.addEventListener('click', bgChange);

Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

Note : Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

Ici, vous pouvez voir que nous incluons un objet événement, e, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur e.target - qui est le bouton lui-même. La propriété target de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.

Note: Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements. e/evt/event sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir. C'est toujours bon de s'en tenir à une norme.

Note : Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements. e/evt/event sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir. C'est toujours bon de s'en tenir à une norme.

e.targetest incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux. Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus. Il est utile de toujours pouvoir affecter une action à e.target, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir useful-eventtarget.html pour le code source ; et ici pour le voir s'exécuter), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire onclick à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:

var divs = document.querySelectorAll('div');
 
@@ -279,12 +269,11 @@ for (var i = 0; i < divs.length; i++) {
   }
 }

Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):

Résultat

Hidden example

Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):

<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -324,19 +313,18 @@ for (var i = 0; i < divs.length; i++) {
     </script>
   </body>
 </html>
-

{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

{{ EmbedLiveSample('Résultat', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

La plupart des gestionnaires d'événements que vous rencontrerez ne disposent que d'un ensemble standard de propriétés et de fonctions (méthodes) disponibles sur l'objet événement (voir la liste complète sur {{domxref("Event")}} ). Cependant, certains gestionnaires plus avancés ajoutent des propriétés spécialisées contenant des données supplémentaires dont ils ont besoin pour fonctionner. Le Media Recorder API, par exemple, a un événement dataavailable , qui se déclenche quand un fichier audio ou vidéo a été enregistré et est disponible pour être utilisé (par exemple, pour l'enregistrer ou le lire). L'objet événement du gestionnaire ondataavailable correspondant dispose d'une propriété data contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.

Éviter le comportement par défaut

Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut. L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé. Lorsque vous remplissez les détails et appuyez sur le bouton "Soumettre", le comportement naturel consiste à soumettre les données à une page spécifiée sur le serveur pour traitement, et le navigateur redirige vers une page de "message de réussite" quelconque (ou la même page, si une autre n'est pas spécifiée.).

- Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs. Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation. Regardons un exemple simple.
+ Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs. Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation. Regardons un exemple simple.

- Tout d'abord, un simple formulaire HTML qui vous oblige à entrer votre nom et votre prénom:

+ Tout d'abord, un simple formulaire HTML qui vous oblige à entrer votre nom et votre prénom:

<form>
   <div>
@@ -353,14 +341,12 @@ for (var i = 0; i < divs.length; i++) {
 </form>
 <p></p>

div {
+div {
   margin-bottom: 10px;
 }
 
-

Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement onsubmit (l'événement submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides. Si c'est le cas, nous appelons la fonction preventDefault() sur l'objet événement - ce qui stoppe la soumission du formulaire - puis nous affichons un message d'erreur dans le paragraphe sous notre formulaire pour indiquer à l'utilisateur ce qui ne va pas :

var form = document.querySelector('form');
 var fname = document.getElementById('fname');
@@ -375,22 +361,19 @@ form.onsubmit = function(e) {
   }
 }

Évidemment, cette validation est assez faible - cela n'empêcherait pas l'utilisateur de valider le formulaire avec des espaces ou des nombres entrés dans les champs, par exemple - mais cela est acceptable. Le résultat est le suivant :

{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

{{ EmbedLiveSample('Éviter_le_comportement_par_défaut', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

Note: pour le code source, voir preventdefault-validation.html (et le voir s'exécuter ici.)

Note : pour le code source, voir preventdefault-validation.html (et le voir s'exécuter ici.)

Le bouillonnement et la capture

Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple show-video-box.html dans un nouvel onglet (et le code source dans un autre). C'est également disponible en live ci-dessous.

Hidden video example

- -

<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -461,11 +444,10 @@ form.onsubmit = function(e) {
     </script>
   </body>
 </html>
-

{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

{{ EmbedLiveSample('Le_bouillonnement_et_la_capture', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

Ceci est un exemple assez simple qui montre et cache une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:

<button>Display video</button>
 
@@ -477,13 +459,13 @@ form.onsubmit = function(e) {
   </video>
 </div>

Quand le {{htmlelement("button")}} est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise <div> de hidden à showing ( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement la boîte hors de l'écran et sur l'écran.) :

btn.onclick = function() {
   videoBox.setAttribute('class', 'showing');
 }

Nous ajoutons ensuite quelques gestionnaires d'événements onclick supplémentaires - le premier à <div> et le second à <video>. L'idée est que lorsque l'on clique sur la zone du <div> en dehors de la vidéo, la boîte doit être masquée à nouveau; Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer.

videoBox.onclick = function() {
   videoBox.setAttribute('class', 'hidden');
@@ -493,29 +475,29 @@ video.onclick = function() {
   video.play();
 };

Mais il y a un problème - actuellement, lorsque vous cliquez sur la vidéo, elle commence à jouer, mais cela entraîne le fait que <div> est également caché en même temps. C'est parce que la vidéo est dans le <div> - elle en fait partie - alors que cliquer sur la vidéo lance les deux gestionnaires d'événements ci-dessus.

Explication du bouillonnement et de la capture

Quand un événement se déclenche sur un élément qui a des éléments parents (p.ex. l'élément {{htmlelement("video")}} dans notre cas), les navigateurs modernes utilisent deux phases différentes: la phase de capture et la phase de bouillonnement.
+

+ Dans la phase de capture:

Le navigateur vérifie si l'ancêtre le plus éloigné de l'élément ({{htmlelement("html")}}) dispose d'un gestionnaire d'événement onclick enregistré pendant la phase de capture et le lance si c'est le cas.
Ensuite, il passe à l'élément suivant à l'intérieur de <html> et fait la même chose, puis la suivante, et ainsi de suite jusqu'à ce qu'il atteigne l'élément sur lequel on a cliqué.
Le navigateur vérifie si l'ancêtre le plus éloigné de l'élément ({{htmlelement("html")}}) dispose d'un gestionnaire d'événement onclick enregistré pendant la phase de capture et le lance si c'est le cas.
Ensuite, il passe à l'élément suivant à l'intérieur de <html> et fait la même chose, puis la suivante, et ainsi de suite jusqu'à ce qu'il atteigne l'élément sur lequel on a cliqué.

Dans la phase de bouillonnement, l'opposé exact se produit:
+

Dans la phase de bouillonnement, l'opposé exact se produit:

- Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement onclick enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.
- Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément <html>.

+ Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement onclick enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.
+ Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément <html>.

(Cliquez sur l'image pour l'agrandir et la voir traduite en français.)

Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement. Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément <video> vers l'élément <html>. Comme ceci :

Il trouve d'abord le gestionnaire video.onclick... et le lance, de manière à ce que la vidéo soit jouée en premier.

Régler le problème avec stopPropagation()

C'est un comportement ennuyeux, mais il y a un moyen de l'éviter ! L'objet événement standard dispose d'une fonction appelée stopPropagation(), qui, lorsqu'il est invoqué sur l'objet événement d'un gestionnaire, fait en sorte que le gestionnaire soit exécuté, mais l'événement ne remonte pas plus haut dans la chaîne, et donc plus aucun autre gestionnaire ne sera exécuté.
+

video.onclick = function(e) {
   e.stopPropagation();
   video.play();
 };

Vous pouvez faire une copie locale du code source show-video-box.html et le modifier vous-même ou regarder le résultat ici : show-video-box-fixed.html (ou voir le code source).

Note: Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.

Note : Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.

Note: Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps. Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec addEventListener(), et en positionnant la troisième propriété, qui est optionnelle, surtrue.

Note : Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps. Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec addEventListener(), et en positionnant la troisième propriété, qui est optionnelle, surtrue.

Délégation d'événement

Le bouillonnement nous permet également de tirer parti de la délégation d'événements - ce concept repose sur le fait que si vous voulez exécuter du code lorsque vous cliquez sur l'un des nombreux éléments enfants, vous pouvez définir l'écouteur d'événement sur leur parent et ainsi leur répercuter les événement, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.

- Un bon exemple est une série d'éléments de liste - si vous voulez que chacun d'eux fasse apparaître un message lorsque vous cliquez dessus, vous pouvez définir l'écouteur d'événement click sur la balise parente <ul>, et il apparaîtra sur les éléments de la liste.

click

<ul>

Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir How JavaScript Event Delegation Works.

Conclusion

Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage. Comme mentionné ci-dessus, les événements ne font pas vraiment partie du langage du noyau JavaScript principal - ils sont définis dans les API Web du navigateur.

- En outre, il est important de comprendre que les différents contextes dans lesquels JavaScript est utilisé tendent à avoir des modèles d'événements différents - des API Web à d'autres domaines tels que WebExtensions du navigateur et Node.js (JavaScript côté serveur). Nous ne nous attendons pas à ce que vous compreniez tous ces domaines maintenant, mais cela aide certainement à comprendre les bases des événements à mesure que vous avancez dans l'apprentissage du développement Web.

S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou contactez-nous pour demander de l'aide.

Voir aussi

Event order (discussion sur la capture et le bouillonnement) — une pièce superbement détaillée de Peter-Paul Koch.
Event accessing (discussion sur l'objet événement) — une autre pièce superbement détaillée de Peter-Paul Koch.
Event reference
Event reference

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

Dans ce module

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}

Les fonctions sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.

En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe.

Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — () — et que vous n'utilisez pas une structure usuelle et intégrée du langage telle que les boucles for, while ou do...while , ou une déclaration if...else , vous utilisez une fonction.

Les fonctions intégrées du navigateur

... nous avons utilisé une fonction !

Note : N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.

Note : N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.

Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand invoquez (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.

Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette section antérieure de notre cours pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.

Fonctions versus méthodes

Fonctions personnalisées

Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple random-canvas-circles.html tiré de l'article les boucles dans le code (voir aussi le code source complet), nous avons inclus une fonction personnalisée draw()qui ressemblait à ça :

function draw() {
   ctx.clearRect(0,0,WIDTH,HEIGHT);
@@ -98,7 +98,7 @@ console.log(madeAString);
   return Math.floor(Math.random()*number);
 }

Nous avions besoin de cette fonction car la fonction intégrée du navigateur Math.random() génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.

Invoquer des fonctions

Certaines fonctions nécessitent que l'on définisse des paramètres lorsqu'on les appelle — ce sont des valeurs qui doivent êtres inclues dans les parenthèses de la fonction pour que celle-ci fonctionne correctement.

Note : Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.

Note : Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.

Par exemple, la fonction intégrée du navigateur Math.random() ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 :

var myNumber = Math.random();

La fonction de chaîne intégrée du navigateur replace() nécessite toutefois deux paramètres — la sous-chaîne qu'elle doit remplacer à l'intérieur de la chaîne, et la sous-chaîne par laquelle elle doit la remplacer :

var myText = 'I am a string';
 var newString = myText.replace('string', 'sausage');

Note : Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.

Note : Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.

Il est également à noter que parfois les paramètres sont optionnels — vous n'avez pas à les spécifier. Si vous ne le faites pas, la fonction va généralement adopter un comportement par défaut. Par exemple, la fonction de tableau join() a des paramètres optionnels :

var myArray = ['I', 'love', 'chocolate', 'frogs'];
 var madeAString = myArray.join(' ');
@@ -199,7 +199,7 @@ var madeAString = myArray.join(' ');
 var madeAString = myArray.join();
 // renvoie 'I,love,chocolate,frogs'

Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.

La portée des fonctions et les conflits.

Le plus haut niveau en dehors de toutes vos fonctions est appelé la portée globale. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.

Le JavaScript est construit de cette façon pour plusieurs raisons — mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.

Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :

<!-- Excerpt from my HTML -->
 <script src="first.js"></script>
@@ -230,17 +230,17 @@ function greeting() {
   alert('Our company is called ' + name + '.');
 }

Les deux fonctions que vous voulez appeler s'appellent greeting(), mais vous ne pouvez accéder qu'à la fonction greeting() du second fichier second.js — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier first.js.

Note : Vous pouvez voir cet exemple s'exécuter sur GitHub (voir aussi le code source).

Note : Vous pouvez voir cet exemple s'exécuter sur GitHub (voir aussi le code source).

En conservant des parties de votre code enfermées dans des fonctions, vous évitez de tels problèmes. Cette procédure est considérée comme une bonne pratique.

C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !

Le gardien du zoo est comme la portée globale — il ou elle a les clefs pour accéder à chaque enclos, pour l'approvisionner en nourriture, soigner les animaux malades, ...etc.

output(y);
 output(z);

Toutes les deux devraient vous renvoyer un message d'erreur du type : "ReferenceError: y is not defined". Pourquoi ? À cause de la portée de la fonction — y and z sont enfermées dans les fonctions a() et b(), donc output() ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.

Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer a() et b() pour qu'elles aient la forme suivante :

function a() {
-  var y = 2;
-  output(y);
-}
+  function a() {
+  var y = 2;
+  output(y);
+}
 
-function b() {
-  var z = 3;
-  output(z);
-}
+function b() {
+  var z = 3;
+  output(z);
+}

Sauvegardez le code et rechargez-le dans votre navigateur, puis essayez d'appeler les fonctions a() et b() depuis la console JavaScript :

a();
@@ -306,25 +306,20 @@ function b() {
  Sauvegardez et rechargez à nouveau dans la console JavaScript :
   a();
 b();
-  Cette fois l'appel de a() et b() renverra l'erreur "ReferenceError: z is not defined"  — parce que l'appel de la fonction output() et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.
+  Cette fois l'appel de a() et b() renverra l'erreur "ReferenceError: z is not defined"  — parce que l'appel de la fonction output() et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.

Note : Ces règles de portée ne s'appliquent pas aux boucles (ex. for() { ... }) ni aux instructions conditionnelles (ex. if() { ... }) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.

Note : Ces règles de portée ne s'appliquent pas aux boucles (ex. for() { ... }) ni aux instructions conditionnelles (ex. if() { ... }) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.

Note : Le message d'erreur ReferenceError: "x" is not defined est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.

Note : Le message d'erreur ReferenceError: "x" is not defined est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.

Des fonctions à l'intérieur de fonctions

Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :

function myBigFunction() {
   var myValue;
@@ -347,7 +342,7 @@ function subFunction3() {
 }

Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur ReferenceError: myValue is not defined, car bien que la valeur myValue est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :

function myBigFunction() {
   var myValue = 1;
@@ -371,13 +366,13 @@ function subFunction3(value) {
 
 Conclusion
 
-Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.
+Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.
 
 Voir aussi
 
 
- Fonctions — aborde certaines fonctionnalités avancées non incluses ici.
- Valeur par défaut des arguments, Fonctions fléchées — références avancées
+ Fonctions — aborde certaines fonctionnalités avancées non incluses ici.
+ Valeur par défaut des arguments, Fonctions fléchées — références avancées
 
 
 
@@ -388,11 +383,11 @@ function subFunction3(value) {
 Dans ce module
 
 
- Prendre des décisions dans le code — conditions
- Les boucles dans le code
- Fonctions — des blocs de code réutilisables
- Construire votre propre fonction
- Valeurs de retour des fonctions
- Introduction aux évènements
- Galerie d'images
+ Prendre des décisions dans le code — conditions
+ Les boucles dans le code
+ Fonctions — des blocs de code réutilisables
+ Construire votre propre fonction
+ Valeurs de retour des fonctions
+ Introduction aux évènements
+ Galerie d'images
 
diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.html b/files/fr/learn/javascript/building_blocks/image_gallery/index.html
index 8f7aebd796..bc09ea1194 100644
--- a/files/fr/learn/javascript/building_blocks/image_gallery/index.html
+++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.html
@@ -21,7 +21,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery
 
 Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript,  nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements  en vous aidant à créer un élément assez commun que vous verrez  sur de nombreux sites web. Une galerie JavaScript animée.
 
-

Objectif:
Prerequis:	Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...	Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...

Pour réaliser cette évaluation, vous devez récupérer le fichier ZIP et le décompresser quelque par sur votre ordinateur.

Vous pouvez également utiliser un site comme JSBin ou Thimble pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments <script>/<style> dans la page HTML.

Note: Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.

Note : Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.

Résumé du projet

Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci:

<h1>Image gallery example</h1>
 
@@ -62,24 +62,22 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery
 
 L'exemple ressemble à ceci:
 
-
+
 
-
-
 
-Les parties les plus intéressantes du fichier CSS de l'exemple:
+Les parties les plus intéressantes du fichier CSS de l'exemple:
 
 
- Positionnez les trois éléments en absolu à l’intérieur du full-img <div>: le <img> dans lequel l’image est affichée grandeur nature, un  <div> vide dimensionné à la même taille que le <img> et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton <button>qui est utilisé pour contrôler l'effet d'assombrissement.
- Réglez la largeur des images à l'intérieur de thumb-bar <div>(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne.
+ Positionnez les trois éléments en absolu à l’intérieur du full-img <div>: le <img> dans lequel l’image est affichée grandeur nature, un  <div> vide dimensionné à la même taille que le <img> et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton <button>qui est utilisé pour contrôler l'effet d'assombrissement.
+ Réglez la largeur des images à l'intérieur de thumb-bar <div>(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne.
 
 
-Votre JavaScript doit:
+Votre JavaScript doit:
 
 
  Itérer toutes les images dans une boucle, et pour chacune d'elle, insérer un élément <img> à l'intérieur de thumb-bar <div> qui va incorporer cette image dans la page.
  Associer un gestionnaire d'événement onclick à chaque <img> à l'intérieur de thumb-bar <div> pour que, lorsqu'elles sont cliquées, l'image correspondante soit affichée dans l'élément displayed-img <img>.
- Associer un gestionnaire d'événement onclick au <button> pour que, lorsqu'il est cliqué, un effet assombrissant soit appliqué à l'image grandeur nature. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre.
+ Associer un gestionnaire d'événement onclick au <button> pour que, lorsqu'il est cliqué, un effet assombrissant soit appliqué à l'image grandeur nature. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre.
 
 
 Pour vous donner une idée, regardez l'exemple (Ne regardez pas le code source!).
@@ -104,7 +102,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery
 À chaque itération, vous devez ajouter un gestionnaire onclick au newImage courant. Il doit:
 
 
- Trouver la valeur de l'attribut src de l'image courante. Cela peut être fait avec la fonction getAttribute() sur <img>, en lui passant le paramètre "src" à chaque fois. Mais comment avoir l'image? Utiliser newImage ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de src sera toujours celle du dernier <img>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <img> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?
+ Trouver la valeur de l'attribut src de l'image courante. Cela peut être fait avec la fonction getAttribute() sur <img>, en lui passant le paramètre "src" à chaque fois. Mais comment avoir l'image? Utiliser newImage ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de src sera toujours celle du dernier <img>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <img> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?
  Exécuter une fonction, en lui passant en paramètre la fameuse valeur de src. Vous pouvez nommer la fonction à votre guise.
  Cette fonction du gestionnaire d'événement doit définir la valeur de l'attribut src de displayed-img <img> à la valeur du src passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'<img> concerné dans une variable nommée displayedImg. Notez que nous voulons une fonction nommée.
 
@@ -115,7 +113,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery
 
 
  Vérifie la classe appliquée à <button> — à nouveau, vous pouvez utiliser getAttribute().
- Si le nom de classe est "dark", changer la classe du <button> pour "light" (avec setAttribute()), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0.5)".
+ Si le nom de classe est "dark", changer la classe du <button> pour "light" (avec setAttribute()), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0.5)".
  Si le nom de classe n'est pas "dark", changer la classe du <button> pour "dark", son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0)".
 
 
@@ -154,11 +152,11 @@ overlay.style.backgroundColor = xxx;

Dans ce module

{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}

Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.

Prérequis

Avant de commencer ce module, vous devriez connaître les bases du HTML et du CSS et avoir suivi le module précédent, JavaScript Premiers Pas.

Note : Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme JSBin ou Thimble .

Note : Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme JSBin ou Thimble .

Guides

Prendre des décisions dans votre code — les conditions
Prendre des décisions dans votre code — les conditions: Quelque soit le langage de programmation, notre programme doit prendre des décisions et effectuer des actions différentes selon les valeurs traitées. Dans un jeu par exemple, si le nombre de vies du joueur est égal à 0, le jeu s'achève. Sur le même principe, une application météo affiche un fond d'aube si elle est lancée le matin, des étoiles et la Lune si, au contraire, elle est lancée la nuit. Dans cet article, nous allons voir comment les structures conditionnelles fonctionnent en JavaScript.
Les boucles
Les boucles: Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript.
Les fonctions — réutiliser des blocs de code
Les fonctions — réutiliser des blocs de code: Un autre concept essentiel en programmation est celui de fonctions. Les fonctions permettent de définir un morceau de code réalisant une tâche particulière qui pourra être appelé ultérieurement dans le reste du programme par une simple ligne, ce qui évite d'écrire plusieurs fois le même code. Dans cet article, nous allons voir les concepts qui se cachent derrière les fonctions tels que la syntaxe de base, la définition et l'appel d'une fonction, sa portée et ses paramètres.
Créez votre propre fonction
Créez votre propre fonction: L'essentiel sur la théorie des fonctions a été traité dans le chapitre précédent, cet article va vous permettre de mettre en pratique vos connaissances avec un exercice. Nous allons construire notre propre fonction et nous en profiterons pour expliquer quelques notions plus avancées, utiles pour travailler avec les fonctions.
Les valeurs de retour des fonctions
Les valeurs de retour des fonctions: Il reste un dernier point à vous présenter avant de terminer cette partie sur les fonctions, il s'agit des valeurs retournées. Une fois leur exécution finie, les fonctions renvoient des valeurs, pour certaines d'entre-elles ce retour nous est utile. Il est important de bien comprendre ce que sont ces valeurs, comment les utiliser dans notre programme et comment faire en sorte que nos fonctions renvoient des valeurs qui nous soient utiles.
Introduction aux événements
Introduction aux événements: Les événements sont des actions ou occurences qui surviennent au cours de l'exécution de votre programme, auxquels vous pouvez répondre de la manière que vous souhaitez. Par exemple, si l'utilisateur clique sur une page web, vous pourriez vouloir répondre à cette action en affichant un élément d'information. Dans ce dernier article, nous allons voir des concepts importants se rapportant aux événements et voir la manière dont ils fonctionnent au sein des navigateurs.

L'auto-évaluation suivante teste votre compréhension des bases du JavaScript vues dans le guide ci-dessus.

Galerie de photos
Galerie de photos: Maintenant que vous avez fini ce chapitre sur la construction de blocs en JavaScript, vous allez pouvoir tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en codant un élément que l'on retrouve sur de très nombreux sites web, une galerie de photos en JavaScript.

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}

Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques à à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter. Ici, nous allons étudier les structures de boucle disponible dans JavaScript qui répondent à un tel besoin.

Conditions préalables:

Commençons par examiner le cas d'un fermier qui doit s'assurer d'avoir assez de nourriture pour nourrir sa famille pour la semaine. Il pourrait ainsi utiliser la boucle suivante :

Une boucle a normalement un ou plusieurs des composants suivants :

Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles sont si intéressantes. Disons que nous voulons dessiner 100 cercles aléatoirement sur un <canvas> (appuyez sur le bouton Update pour lancer le programme à nouveau et voir différentes dispositions aléatoires).

Hidden code

Exemple

<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -143,9 +142,10 @@ original_slug: Apprendre/JavaScript/Building_blocks/Looping_code
 
   </body>
 </html>
-

Principe de boucle

Vous n'avez pas besoin de comprendre entièrement le code pour l'instant, mais regardons plus en détail la partie du code qui trace les 100 cercles :

La boucle standard

Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle for. Elle a la syntaxe suivante :

for (initialisation; condition de sortie; expression finale) {
   // code à exécuter
@@ -201,12 +201,11 @@ for (let i = 0; i < chats.length; i++) {
 
 paragraphe.textContent = info;

Cela nous donne la sortie suivante :

Sortie

Hidden code 2

Cela nous donne la sortie suivante :

<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -231,12 +230,11 @@ paragraphe.textContent = info;
 
   </body>
 </html>

Note: Vous pouvez trouver aussi cet exemple de code sur GitHub (et le voir tourner en live).

Note : Vous pouvez trouver aussi cet exemple de code sur GitHub (et le voir tourner en live).

Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :

Note: Nous avons fait sortir la condition i < cats.length, et pas i <= cats.length, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré i à 0, et allons allers jusqu'à i = 4 (l'index du dernier item de la table/tableau). cats.length retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à i = 5, cela retournerai undefined pour le dernier item (il n'y a pas de item de table avec un index de 5). Par conséquent, nous voulons aller de 1 à moins que cats.length (i <), ce n'est pas la même chose que cats.length (i <=).

Note : Nous avons fait sortir la condition i < cats.length, et pas i <= cats.length, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré i à 0, et allons allers jusqu'à i = 4 (l'index du dernier item de la table/tableau). cats.length retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à i = 5, cela retournerai undefined pour le dernier item (il n'y a pas de item de table avec un index de 5). Par conséquent, nous voulons aller de 1 à moins que cats.length (i <), ce n'est pas la même chose que cats.length (i <=).

Note: Une erreur commune avec les conditions de sortie est de les faire utiliser "égal à" plutôt que de dire "inférieur ou égal à". Si nous voulions faire tourner notre boucle jusqu'à i = 5, la condition de sortie aurait besoin d'être i <= cats.length / Si nous la mettons à i = cats.length, la boucle ne fonctionnerait pas du tout parce que i n'est pas égal à 5 sur la première itération de la boucle, de sorte que cela s'arrête immédiatement.

Note : Une erreur commune avec les conditions de sortie est de les faire utiliser "égal à" plutôt que de dire "inférieur ou égal à". Si nous voulions faire tourner notre boucle jusqu'à i = 5, la condition de sortie aurait besoin d'être i <= cats.length / Si nous la mettons à i = cats.length, la boucle ne fonctionnerait pas du tout parce que i n'est pas égal à 5 sur la première itération de la boucle, de sorte que cela s'arrête immédiatement.

Un petit problème est que nous avons laissé la phrase de sortie mal formée :

Note: Vous pouvez trouver cet exemple de code sur GitHub (et aussi le voir en ligne).

Note : Vous pouvez trouver cet exemple de code sur GitHub (et aussi le voir en ligne).

Important: Avec for — comme avec toutes les boucles — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.

Attention : Avec for — comme avec toutes les boucles — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.

Quitter une boucle avec break

Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction break. Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les instructions switch : lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.

C'est la même chose avec les boucles – un break quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.

Hidden code 3

Résultat

<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -363,9 +360,7 @@ bouton.addEventListener('click', function() {
 
   </body>
 </html>
-

Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points.

Note : Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).

Note : Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).

Passer des itérations avec continue

L'instruction continue fonctionne d'une manière similaire à break, mais au lieu de sortir complètement de la boucle, elle passe à l'itération suivante de la boucle. Regardons un autre exemple qui prend un nombre comme une entrée, et retourne seulement les nombres qui sont des carrés d'entiers (nombres entiers).

Le HTML est fondamentalement le même que le dernier exemple — une entrée de texte simple, et un paragraphe pour la sortie. Le JavaScript est la plupart du temps identique, même si la boucle elle-même est un peu différente :

Ici la sortie :

Hidden code 4

- -

<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -444,26 +436,25 @@ for (let i = 1; i <= num; i++) {
 
   </body>
 </html>
-

{{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }}

Dans ce cas, l'entrée doit être un nombre (num). La boucle for est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée num, et un itérateur ajoutera 1 au compteur à chaque fois.
À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant Math.sqrt(i), , puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que Math.floor() fait au nombre auquel il est passé).
À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant Math.sqrt(i), , puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que Math.floor() fait au nombre auquel il est passé).
Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (! ==), cela signifie que la racine carrée n'est pas un entier, donc cela ne nous intéresse pas. Dans un tel cas, nous utilisons l'instruction continue pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où.
Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction continue ne soit pas exécutée; à la place, nous concaténons la valeur i actuelle plus un espace sur la fin du contenu du paragraphe.

Note: Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).

Note : Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).

while et do ... while

for n'est pas le seul type de boucle disponible en JavaScript. Il y en a beaucoup d'autres et, même si vous n'avez pas besoin de comprendre tout cela maintenant, il vaut mieux jeter un coup d'œil à la structure de quelques autres pour pouvoir reconnaître les mêmes caractéristiques au travail d'une manière légèrement différente.

D'abord, regardons la boucle while. La syntaxe de cette boucle ressemble à ceci:

initializer
 while (exit-condition) {
@@ -491,10 +482,10 @@ while (i < cats.length) {
 }

Note: Cela fonctionne toujours comme prévu regardez le ici GitHub (Voir en ligne le code complet).

Note : Cela fonctionne toujours comme prévu regardez le ici GitHub (Voir en ligne le code complet).

La boucle do...while est très similaire, mais dénote une variation par rapport à la structure de la boucle while :

initializer
 do {
@@ -522,14 +513,14 @@ do {
 } while (i < cats.length);

Note: Encore, cela fonctionne toujours comme prévu — regardez le ici GitHub (Voir en ligne le code complet).

Note : Encore, cela fonctionne toujours comme prévu — regardez le ici GitHub (Voir en ligne le code complet).

Important: Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.

Attention : Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.

Apprentissage actif : Lancer le compte à rebours !

Apprentissage actif : Lancer le compte à rebours

Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lancement dans la boîte de sortie, de 10 jusqu'à "Blast Off." Plus précisément, il s'agit de :

Si vous faites une erreur, vous pourrez toujours réinitialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.

Active learning

- -

<h2>Sortie en direct</h2>
+<h2>Sortie en direct</h2>
 <div class="output" style="height: 410px;overflow: auto;">
 
 </div>
@@ -569,8 +557,8 @@ output.innerHTML = '';
 
 // let i = 10;
 
-// const paragraphe = document.createElement('p');
-// paragraphe.textContent = ;
+// const paragraphe = document.createElement('p');
+// paragraphe.textContent = ;
 // output.appendChild(para);
 </textarea>
 
@@ -580,7 +568,7 @@ output.innerHTML = '';
 </div>
 
 
-const textarea = document.getElementById('code');
+const textarea = document.getElementById('code');
 const reset = document.getElementById('reset');
 const solution = document.getElementById('solution');
 const code = textarea.value;
@@ -590,75 +578,74 @@ function updateCode() {
 }
 
 reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = jsSolution;
-  solution.value = 'Show solution';
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
-    textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Show solution';
-  }
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
   updateCode();
 });
-
-let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
-let solutionEntry = jsSolution;
-
+
+let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
+let solutionEntry = jsSolution;
+
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
-
-// empêcher la pression de la touche de tabulation de cibler
-// un autre élément et insère une tabulation dans le textarea
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  let scrollPos = textarea.scrollTop;
-  let caretPos = textarea.selectionStart;
-
-  let front = (textarea.value).substring(0, caretPos);
-  let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Update the saved userCode every time the user updates the text area code
-
-textarea.onkeyup = function(){
-  // We only want to save the state when the user code is being shown,
-  // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};
+
+// empêcher la pression de la touche de tabulation de cibler
+// un autre élément et insère une tabulation dans le textarea
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  let scrollPos = textarea.scrollTop;
+  let caretPos = textarea.selectionStart;
+
+  let front = (textarea.value).substring(0, caretPos);
+  let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};
 
-

{{ EmbedLiveSample('Apprentissage_actif_Lancer_le_compte_à_rebours', '100%', 780) }}

Apprentissage actif : remplir une liste d'invités.

Méthodes utiles pour les chaînes de caractères pour obtenir de l'aide.

Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article Méthodes utiles pour les chaînes de caractères pour obtenir de l'aide.

Si vous faites une erreur, vous pourrez toujours ré-initialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.

Active learning 2

- -

<h2>Live output</h2>
-<div class="output" style="height: 100px;overflow: auto;">
-  <p class="admitted">Admettre : </p>
-  <p class="refused">Refuser : </p>
-</div>
+<h2>Live output</h2>
+<div class="output" style="height: 100px;overflow: auto;">
+  <p class="admitted">Admettre : </p>
+  <p class="refused">Refuser : </p>
+</div>
 
-<h2>Editable code</h2>
-<p class="a11y-label">Appuyer sur Échap pour décibler le coder</p>
-<textarea id="code" class="playable-code" style="height: 400px;width: 95%">
+<h2>Editable code</h2>
+<p class="a11y-label">Appuyer sur Échap pour décibler le code</p>
+<textarea id="code" class="playable-code" style="height: 400px;width: 95%">
 const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];
 
 const admitted = document.querySelector('.admitted');
 const refused = document.querySelector('.refused');
 admitted.textContent = 'Admit: ';
 refused.textContent = 'Refuse: '
-
+
 // let i = 0;
 
 // refused.textContent += ;
@@ -719,105 +703,104 @@ refused.textContent = 'Refuse: '
   <input id="solution" type="button" value="Show solution">
 </div>
 
-html {
-  font-family: sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}
-
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
-let code = textarea.value;
-let userEntry = textarea.value;
-
-function updateCode() {
-  eval(textarea.value);
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = jsSolution;
-  solution.value = 'Show solution';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
-    textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Show solution';
-  }
-  updateCode();
-});
-
-let jsSolution = 'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
-let solutionEntry = jsSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// stop tab key tabbing out of textarea and
-// make it write a tab at the caret position instead
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  let scrollPos = textarea.scrollTop;
-  let caretPos = textarea.selectionStart;
-
-  let front = (textarea.value).substring(0, caretPos);
-  let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Update the saved userCode every time the user updates the text area code
-
-textarea.onkeyup = function(){
-  // We only want to save the state when the user code is being shown,
-  // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};
-

html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}

+ +

const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+let jsSolution = 'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
+let solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  let scrollPos = textarea.scrollTop;
+  let caretPos = textarea.selectionStart;
+
+  let front = (textarea.value).substring(0, caretPos);
+  let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};

{{ EmbedLiveSample("Apprentissage_actif_remplir_une_liste_d'invités.", '100%', 580) }}

Quel type de boucle utiliser ?

@@ -850,24 +833,23 @@ do {

Nous recommandons for, au moins pour commencer, car elle est probablement la plus facile pour tout se remémorer — l'initialisation, la condition de sortie, l'expression finale, le tout soigneusement placé entre des parenthèses. De cette façon, il est facile de voir où elles se trouvent et de vérifier qu'on ne les a pas oubliées.

Note: Il y a d'autres types de boucles et de particularités, qui sont très utiles pour des situations spéciales et qui ne sont pas décrites dans cet article. Si vous voulez aller plus loin dans l'apprentissage des boucles, lisez le guide Boucles et itérations.

Note : Il y a d'autres types de boucles et de particularités, qui sont très utiles pour des situations spéciales et qui ne sont pas décrites dans cet article. Si vous voulez aller plus loin dans l'apprentissage des boucles, lisez le guide Boucles et itérations.

Conclusion

Cet article vous a révélé les concepts basiques et les différentes options disponibles pour créer des boucles en JavaScript. Vous devriez à présent être en mesure de comprendre en quoi les boucles constituent un bon mécanisme lorsqu'il s'agit de répéter une action dans le code, et vous devez être impatient de les utiliser dans vos propres exemples !

S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à nous contacter pour demander de l'aide.

Voir aussi

Boucles et itération
L'instruction for
while et do...while
break et continue
-
What’s the Best Way to Write a JavaScript For Loop? — quelques bonnes pratiques en matière de boucles
+
Boucles et itération
L'instruction for
while et do...while
break et continue
What’s the Best Way to Write a JavaScript For Loop? — quelques bonnes pratiques en matière de boucles

diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.html b/files/fr/learn/javascript/building_blocks/return_values/index.html index d272b2fc1c..2d2b9f628e 100644 --- a/files/fr/learn/javascript/building_blocks/return_values/index.html +++ b/files/fr/learn/javascript/building_blocks/return_values/index.html @@ -18,14 +18,14 @@ original_slug: Apprendre/JavaScript/Building_blocks/Return_values

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.

Objectif :
Prérequis :	Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...	Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...

Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction replace() sur la chaîne de caractères myText , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.

Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée Valeur retournée. Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.

Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme void ou undefined dans de tels cas). Par exemple, dans la fonction displayMessage() construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !

Utiliser des valeurs de retour dans vos fonctions

Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef return . Nous avons vu son utilisation dans l'exemple random-canvas-circles.html. Notre fonction draw() dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:

function draw() {
   ctx.clearRect(0,0,WIDTH,HEIGHT);
@@ -131,7 +131,7 @@ function factorial(num) {
 
   Ici nous créons un gestionnaire d'événement onchange qui s'exécute chaque fois que l'événement change se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable num.
 
-  Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression isNaN(num) retourne true. Nous utilisons la fonction isNaN() pour vérifier si la valeur num est un nombre — si c'est le cas, elle retourne false, sinon true.
+  Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression isNaN(num) retourne true. Nous utilisons la fonction isNaN() pour vérifier si la valeur num est un nombre — si c'est le cas, elle retourne false, sinon true.
 
   Si le test retourne false, la valeur num est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions squared(), cubed() et factorial() pour obtenir les valeurs désirées.
  
@@ -139,7 +139,7 @@ function factorial(num) {
 
 
 
-Note: Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la Version final sur GitHub (également Démonstration en direct), ou demandez-nous de l'aide.
+Note : Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la Version final sur GitHub (également Démonstration en direct), ou demandez-nous de l'aide.
 
 
 À ce stade, nous aimerions que vous essayiez d'écrire quelque fonctions de votre choix et que vous les ajoutiez à la bibliothèque. Que diriez-vous des racines carré et cubique du nombre, ou de la circonférence d'un cercle de rayon num?
@@ -155,12 +155,12 @@ function factorial(num) {
 
 Nous l'avons vu, les fonctions sont amusantes, très utiles et, bien qu'il y ait beaucoup à dire en termes de syntaxe et de fonctionnalités, elles sont assez compréhensibles si elles sont étudiés correctement.
 
-Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou contactez-nous pour obtenir de l'aide.
+Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou contactez-nous pour obtenir de l'aide.
 
 Voir aussi
 
 
- Fonctions  en profondeur — Un guide détaillé couvrant des information plus avancées sur les fonctions.
+ Fonctions  en profondeur — Un guide détaillé couvrant des information plus avancées sur les fonctions.
  Fonction Callback en JavaScript — Une façon courante en JavaScript consiste à passer une fonction à une autre en tant qu'argument, qui est alors appelée à l'intérieur de la première fonction.  Cela va au delà de la portée de ce cours, mais mériterait d'être étudier rapidement.
 
 
@@ -171,13 +171,13 @@ function factorial(num) {
 Dans ce module
 
 
- Prendre des décisions dans le code — conditions
- Les boucles dans le code
- Fonctions — Des blocs de code réutilisables
- Construire vos propres fonctions
- Valeurs de retour des fonctions
- Introduction aux événements
- Galerie d'images
+ Prendre des décisions dans le code — conditions
+ Les boucles dans le code
+ Fonctions — Des blocs de code réutilisables
+ Construire vos propres fonctions
+ Valeurs de retour des fonctions
+ Introduction aux événements
+ Galerie d'images
 
 
  
diff --git a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html
index 7bae8cbfe8..60cc11cd4a 100644
--- a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html
@@ -19,9 +19,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage
 
 
 
-Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.
+Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.
 
-

Prérequis:	- Base en langage informatique, une compréhension basic de HTML et CSS, Premiers pas en JavaScript, Fonctions — blocks de code réutilisable. + Base en langage informatique, une compréhension basic de HTML et CSS, Premiers pas en JavaScript, Fonctions — blocks de code réutilisable.

Prérequis:

Base en langage informatique, une compréhension basic de HTML et CSS, Premiers pas en JavaScript, Fonctions — blocks de code réutilisable.

Stockage côté client ?

Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les sites statiques et les sites dynamiques — ces derniers stockent des données côté serveur en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur.

Le stockage côté client fonctionne sur des principes similaires, mais pour une utilisation différente. Le stockage côté client repose sur des APIs JavaScript qui permettent de stocker des données sur la machine de l'utilisateur et de les récupérer au besoin. Cela peut se révéler utile dans différents cas comme :

Souvent, le stockage côté client et côté serveur sont utilisés ensemble. Par exemple, vous pouvez télécharger à partir d'une base de données côté serveur une série de fichiers mp3 utilisés par un site web (comme un jeu ou une application de musique) vers une base de données côté client et ainsi pouvoir les lire quand vous le voulez. Avec cette stratégie, l'utilisateur n'a à télécharger le fichier qu'une seule fois — les visites suivantes, ils sont récupérés à partir de la base de données locale.

Note : La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir Limites de stockage du navigateur et critères d'éviction pour plus d'informations.

Note : La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir Limites de stockage du navigateur et critères d'éviction pour plus d'informations.

À l'ancienne : les cookies

De par leur histoire, les cookies souffrent d'un certain nombre de problèmes — tant techniques qu'au niveau de l'expérience utilisateur. Ces problèmes sont suffisamment importants pour imposer un message d'information aux utilisateurs habitant en Europe lors de leur première visite si le site utilise des cookies pour stocker des informations sur eux. Cela est dû à une loi de l'Union Européenne connue sous le nom de directive Cookie.

Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les problèmes de sécurité qu'ils présentent et l'incapacité de stocker des données complexes, les cookies ne sont pas la meilleure manière pour stocker des données. Il y a de meilleures alternatives, modernes, permettant de stocker des données variées sur l'ordinateur de l'utilisateur.

Le seul avantage des cookies est qu'ils sont supportés par des navigateurs anciens : si votre projet requiert le support de navigateurs obsolètes (comme Internet Explorer 8 et inférieur), les cookies peuvent se révéler utiles. Pour la plupart des projets, vous ne devriez pas avoir besoin d'y recourir.

Note : Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.

Note : Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.

La nouvelle école : Web Storage et IndexedDB

Le HTML de l'exemple est disponible à personal-greeting.html — il s'agit d'un site web très simple avec entête, contenu et pied de page, ainsi qu'un formulaire pour entrer votre nom.

Nous allons construire cet exemple pas à pas, cela vous permettra de comprendre comment ça marche.

Notre exemple est terminé — bien joué ! Il ne vous reste plus qu'à enregistrer votre code et tester votre page HTML dans un navigateur. Vous pouvez voir notre version terminée en direct ici (ou le code JavaScript terminé).

Note : Vous pouvez trouver un exemple un peu plus complexe dans l'article Utiliser l'API de stockage web.

Note : Vous pouvez trouver un exemple un peu plus complexe dans l'article Utiliser l'API de stockage web.

Note : Dans la ligne <script src="index.js" defer></script> de notre version finie, l'attribut defer spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.

Note : Dans la ligne <script src="index.js" defer></script> de notre version finie, l'attribut defer spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.

Stocker des données complexes — IndexedDB

L'API IndexedDB (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.

Cependant, cela a un coût : IndexedDB est beaucoup plus complexe à utiliser que l'API Web Storage. Dans cette section, nous ne ferons qu'égratigner la surface de ce qu'IndexedDB peut faire, mais nous vous en donnerons assez pour débuter.

L'application ressemble à ceci :

Chaque note a un titre et une description, chacun éditables individuellement. Le code JavaScript que nous allons voir ci-dessous contient des commentaires détaillés pour vous aider à comprendre ce qu'il se passe.

Pour gérer cela dans IndexedDB, on crée d'abord une requête (que vous pouvez appeler comme vous le voulez — on l'appelle request pour que ce soit plus explicite). On utilise ensuite des gestionnaire d'événement pour exécuter du code lorsque les requêtes sont terminées, échouent, etc, ce que l'on va voir ci-dessous.

Note : Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement onupgradeneeded. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.

Note : Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement onupgradeneeded. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.

@@ -396,11 +396,11 @@ request.onupgradeneeded = function(e) {
Avec ce simple schéma de base de données en place, on va pouvoir ajouter des entrées à la base de données, des objets qui ressembleront à ça :
-
```
{
-  title: "Acheter du lait",
-  body: "Lait de vache et de soja.",
-  id: 8
-}
```
+
```
{
+  title: "Acheter du lait",
+  body: "Lait de vache et de soja.",
+  id: 8
+}
```
Ajouter des données à la base de données
@@ -608,7 +608,7 @@ function deleteItem(e) {
Et voilà ! L'exemple devrait maintenant fonctionner.

-
Note : Si vous rencontrez des difficultés, n'hésitez pas à consulter notre exemple en direct (ou voir le code source).
+
Note : Si vous rencontrez des difficultés, n'hésitez pas à consulter notre exemple en direct (ou voir le code source).

Stocker des données complexes avec IndexedDB
@@ -729,7 +729,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
L'exemple ci-dessus montre comment créer une application qui stocke des ressources volumineuses dans une base de données IndexedDB, évitant ainsi de devoir les télécharger plus d'une fois. C'est déjà une grande amélioration pour l'expérience utilisateur, mais il manque encore une chose: les fichiers HTML, CSS, et JavaScript doivent encore être téléchargés à chaque fois que le site est accédé, ce qui veut dire qu'il ne fonctionnera pas lorsqu'il n'y a pas de connexion réseau
-
+

C'est là qu'interviennet les Service workers et l'API étroitement liée, Cache.
@@ -742,7 +742,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
L'API Cache est un autre mécanisme de stockage côté client, il a été conçu pour enregistrer les réponses HTTP et fonctionne donc très bien en synergie avec les service workers.

-
Note : Les Service workers et Cache sont pris en charge par la plupart des navigateurs modernes aujourd'hui. Au moment de la rédaction de cet article, Safari était encore occupé à l'implémenter, mais il devrait bientôt être disponible.
+
Note : Les Service workers et Cache sont pris en charge par la plupart des navigateurs modernes aujourd'hui. Au moment de la rédaction de cet article, Safari était encore occupé à l'implémenter, mais il devrait bientôt être disponible.

Un exemple service worker
@@ -769,7 +769,7 @@ if('serviceWorker' in navigator) {
-
Note : Le chemin du fichier sw.js est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle.
+
Note : Le chemin du fichier sw.js est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle.
Le service worker est sur https://mdn.github.io/learning-area/.../sw.js. L'origine est https://mdn.github.io. Le chemin donné doit donc être /learning-area/.../sw.js.
Si vous vouliez héberger cet exemple sur votre propre serveur, vous devriez changer le chemin en conséquence. C'est plutôt inhabituel, mais cela doit fonctionner de cette façon pour des raisons de sécurité.

@@ -872,11 +872,11 @@ if('serviceWorker' in navigator) {
Dans ce module
- Introduction aux API du Web
- Manipuler des documents
- Récupérer des données du serveur
- APIs tierces
- Dessiner des éléments graphiques
- APIs vidéo et audio
- Stockage côté client
- Introduction aux API du Web
- Manipuler des documents
- Récupérer des données du serveur
- APIs tierces
- Dessiner des éléments graphiques
- APIs vidéo et audio
- Stockage côté client
diff --git a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html index 0af7689eaa..95c9f7f8e4 100644 --- a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html +++ b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html @@ -16,9 +16,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics ---
{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
-
Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.
+
Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.
-

Prérequis:

Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez par la suite suivre le tutoriel WebGL, qui couvre le code WebGL brut.

Note: Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.

Note : Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.

Apprentissage actif: Débuter avec un <canvas>

Note: Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.

Note : Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.

Obtenir le contexte du canvas et configuration finale

var ctx = canvas.getContext('2d');

Note: Vous pouvez choisir d'autres types de contexte comme webgl pour WebGL, webgl2 pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.

Note : Vous pouvez choisir d'autres types de contexte comme webgl pour WebGL, webgl2 pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.

Voilà — notre canvas est maintenant préparé et prêt à être dessiné! La variable ctx contient désormais un objet {{domxref("CanvasRenderingContext2D")}}, et toutes les opérations de dessin sur le canvas impliqueront de manipuler cet objet.

De nombreuses opérations doivent recevoir des coordonnées en entrée pour savoir où dessiner quelque chose — le coin supérieur gauche du canvas est le point (0, 0), l'axe horizontal (x) va de gauche à droite, et l'axe vertical (y) va de haut en bas.

Dessiner des formes est souvent fait en utilisant la forme rectangle, ou alors en traçant une ligne le long d'un certain chemin puis en remplissant la forme. Nous allons vous montrer ci-dessous comment faire ces deux choses.

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}

Note: Le code terminé est disponible sur GitHub, 2_canvas_rectangles.html.

Note : Le code terminé est disponible sur GitHub, 2_canvas_rectangles.html.

Dessiner des chemins

Une des formule trigonométrique de base stipule que la longueur du côté adjacent mutiplié par la tangente de l'angle est égale à l'opposé, soit 50 * Math.tan(degToRad(60)). Nous utilisons notre fonction degToRad() pour convertir 60 degrés en radians, puisque {{jsxref("Math.tan()")}} attend une valeur en radians.

Note: 0 degrés est horizontalement vers la droite.

Note : 0 degrés est horizontalement vers la droite.

@@ -350,11 +350,11 @@ ctx.fill();
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}

-
Note: Le code finit est disponible sur GitHub, 3_canvas_paths.html.
+
Note : Le code finit est disponible sur GitHub, 3_canvas_paths.html.

-
Note: Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel Dessiner des formes avec le canevas.
+
Note : Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel Dessiner des formes avec le canevas.

Texte
@@ -388,7 +388,7 @@ ctx.fillText('Canvas text', 50, 150);
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}

-
Note: Le code final est disponible sur GitHub, 4_canvas_text.html.
+
Note : Le code final est disponible sur GitHub, 4_canvas_text.html.

Jouez avec et voyez ce que vous pouvez faire! Vous pouvez trouver plus d'information sur les options disponibles pour ajouter du texte sur un canvas dans Dessin de texte avec canvas.
@@ -440,7 +440,7 @@ image.src = 'firefox.png';
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}

-
Note: Le code final est disponible sur GitHub, 5_canvas_images.html.
+
Note : Le code final est disponible sur GitHub, 5_canvas_images.html.

Boucles et animations
@@ -542,7 +542,7 @@ ctx.rotate(degToRad(5));
-
Note: Le code terminé est disponible sur GitHub, 6_canvas_for_loop.html.
+
Note : Le code terminé est disponible sur GitHub, 6_canvas_for_loop.html.

Animations
@@ -596,7 +596,7 @@ loop();
-
Note: Nous ne couvrirons pas save() et restore() ici, mais elles sont bien expliquées dans notre tutoriel Transformations (et ceux qui le suivent).
+
Note : Nous ne couvrirons pas save() et restore() ici, mais elles sont bien expliquées dans notre tutoriel Transformations (et ceux qui le suivent).

Une animation simple de personnage
@@ -627,7 +627,7 @@ var posX = 0;
L'image de sprites (que nous avons respectueusement emprunté à Mike Thomas dans son article Create a sprite sheet walk cycle using using CSS animation — créer un cycle de marche avec une feuille de sprites en utilisant les animations CSS) ressemble à ça:
-
+

Elle contient six sprites qui constituent une séquence de marche — chacun a 102 pixels de large et 148 pixels de hauteur. Pour afficher chaque sprite proprement, nous allons devoir utiliser drawImage() pour découper un seul sprite de l'image et n'afficher que cette partie, comme nous l'avons fait précédemment avec le logo Firefox. La coordonnée X de la découpe devra être un multiple de 102 et la coordonnée Y sera toujours 0. La taille de la découpe sera toujours de 102 pixels par 148.

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}

Note: Le code final est disponible sur GitHub, 7_canvas_walking_animation.html.

Note : Le code final est disponible sur GitHub, 7_canvas_walking_animation.html.

Une application simple de dessin

Note: Les types d'{{htmlelement("input")}} range et color sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type color. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.

Note : Les types d'{{htmlelement("input")}} range et color sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type color. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.

WebGL

Vous pouvez trouver le code terminé sur GitHub.

Note: Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — Three.js Video Cube (le voir en direct). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!

Note : Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — Three.js Video Cube (le voir en direct). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!

Sommaire

Dans ce module

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.

Prérequis:

À la base, le chargement d'une page web est simple — vous envoyez une requête à un serveur et, tant qu'il n'y a pas eu de problème, les ressources de la page web sont téléchargées et affichées sur votre ordinateur.

A basic representation of a web site architecture

Le problème avec ce modèle c'est qu'à chaque fois que vous voulez mettre à jour une partie de la page, par exemple pour afficher la page suivante d'une liste de produits, vous devez recharger toute la page. Ce surcoût est tout à fait inutile et résulte en une mauvaise expérience utilisateur, particulièrement pour les pages qui sont lourdes, complexes et du coup longues à charger.

Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'API Fetch. Elles permettent de réaliser des requêtes HTTP pour récupérer des ressources spécifiques disponibles sur un serveur et de formater les données retournées selon les besoins avant l'affichage dans la page.

Note : Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise XMLHttpRequest ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.

Note : Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise XMLHttpRequest ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.

A simple modern architecture for web sites

Le modèle Ajax implique une API web comme proxy pour requêter les données plus intelligemment que simplement rafraîchir la page à chaque fois. Voyons plutôt l'impact que cela a :

Notez que pour accélerer les choses encore davantage, certains sites stockent les ressources et données chez le client lors de sa première visite, si bien que les visites suivantes, les fichiers locaux sont utilisés et non re-téléchargés du serveur. Le contenu n'est rechargé que lorsqu'il a été mis à jour sur le serveur.

A basic web app data flow architecture

Une requête Ajax basique

Récupérer une ressource sur le réseau est une opération {{glossary("asynchronous","asynchrone")}}, ce qui signifie que vous devez attendre que cette opération se termine (par exemple, que la ressource soit renvoyée) avant de pouvoir récupérer la réponse — sans quoi une erreur est levée. XHR permet d'exécuter du code lorsque la réponse est reçue grâce au gestionnaire d'événement {{domxref("XMLHttpRequest.onload", "onload")}} — quand l'événement {{event("load")}} est déclenché. Une fois que la réponse a été reçue, alors la réponse est accessible via la propriété response de l'objet XHR utilisé.

Ajoutez le bloc de code qui suit toujours au bas de la fonction updateDisplay(). Vous verrez qu'à l'intérieur du gestionnaire d'événément onload, nous assignons la propriété textContent de poemDisplay (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.

request.onload = function() {
   poemDisplay.textContent = request.response;
@@ -257,7 +257,7 @@ myFetch.then(function(response) {
 
 L'objet response a une méthode {{domxref("Body.text","text()")}}, qui convertit les données brutes contenues dans la réponse en texte brut — c'est le format que nous voulons. Cette méthode retourne également une promesse, qui se résout lorsque la réponse est convertie en texte, nous utilisons donc un deuxième {{jsxref("Promise.then",".then()")}} pour cette deuxième promesse.
 
-À l'intérieur de ce dernier .then(), nous définissons une nouvelle fonction, qui décide de ce que nous faisons avec le texte récupéré. Nous nous contentons de définir la propriété textContent de l'élément {{htmlelement("pre")}} à la valeur du texte.
+À l'intérieur de ce dernier .then(), nous définissons une nouvelle fonction, qui décide de ce que nous faisons avec le texte récupéré. Nous nous contentons de définir la propriété textContent de l'élément {{htmlelement("pre")}} à la valeur du texte.
 
 Chaîner les then()
 
@@ -285,7 +285,7 @@ myFetch.then(function(response) {
 
 Pour clore l'article, nous allons regarder un exemple un peu plus complexe, qui montre des utilisations plus intéressantes de Fetch. Nous avons créé un site d'exemple appelé The Can Store (le magasin de conserves) — c'est un supermarché fictif qui ne vend que des boites de conserves. Vous pouvez trouver cet exemple en direct sur GitHub, et voir le code source.
 
-
+
 
 Par défaut, le site affiche tous les produits ; mais vous pouvez utiliser le formulaire dans la colonne de gauche pour les filtrer par catégorie, ou chercher un terme, ou les deux.
 
@@ -361,7 +361,7 @@ myFetch.then(function(response) {
 
 
 
-Note : Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub (voir le code source, ou voir en direct).
+Note : Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub (voir le code source, ou voir en direct).
 
 
 Sommaire
@@ -387,12 +387,12 @@ myFetch.then(function(response) {
 Dans ce module
 
 
- Introduction aux API du Web
- Manipuler des documents
- Récupérer des données du serveur
- APIs tierces
- Dessiner des éléments graphiques
- APIs vidéo et audio
- Stockage côté client
+ Introduction aux API du Web
+ Manipuler des documents
+ Récupérer des données du serveur
+ APIs tierces
+ Dessiner des éléments graphiques
+ APIs vidéo et audio
+ Stockage côté client
 
 
diff --git a/files/fr/learn/javascript/client-side_web_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/index.html
index ca24150652..b7ce9e7171 100644
--- a/files/fr/learn/javascript/client-side_web_apis/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/index.html
@@ -20,16 +20,16 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs
 ---
 {{LearnSidebar}}
 
-Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.
+Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.
 
 Prérequis
 
-Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série (Premiers pas, Building blocks et objets JavaScript). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.
+Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série (Premiers pas, Building blocks et objets JavaScript). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.
 
-Une connaissance basique de HTML et CSS serait aussi utile.
+Une connaissance basique de HTML et CSS serait aussi utile.
 
 
-Remarque: Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que JSBin ou Thimble.
+Note : Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que JSBin ou Thimble.
 
 
 Guides
@@ -40,7 +40,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs
  Manipuler des documents
  Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.
  Récupérer des données du serveur
- Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'API Fetch.
+ Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'API Fetch.
  APIs tierces
  Les APIs que nous avons vu jusqu'à présent sont intégrées dans le navigateur, mais ce n'est pas le cas de toutes. De nombreux gros sites web tels que Google Maps, Twitter, Facebook, PayPal, etc, fournissent des APIs permettant aux développeurs d'utiliser leurs données (par exemple pour afficher un flux twitter sur un blog) ou service (par exemple afficher une carte Google Maps sur un site, ou utiliser Facebook pour permettre aux utilisateurs de se connecter). Cet article compare les APIs du navigateur aux APIs tierces et montre quelques utilisations typiques de ces dernières.
  Dessiner des éléments graphiques
diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.html b/files/fr/learn/javascript/client-side_web_apis/introduction/index.html
index 9ac5bc56a8..ed8648ce6f 100644
--- a/files/fr/learn/javascript/client-side_web_apis/introduction/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.html
@@ -19,9 +19,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction
 
 {{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
 
-Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fonctionnement, comment les utiliser dans votre code, leur structure. Nous verrons également quelles sont les principales API et leur utilisation.
+Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fonctionnement, comment les utiliser dans votre code, leur structure. Nous verrons également quelles sont les principales API et leur utilisation.
 
-

Prérequis :

En guise d'exemple concret, pensez à des branchements électriques dans une maison, appartement ou autre logement. Si vous souhaitez utiliser un appareil dans votre maison, il vous suffit de le brancher dans une prise et cela fonctionne. Vous n'essayez pas de le brancher directement à l'alimentation électrique — le faire serait réellement inefficace, et, si vous n'êtes pas électricien, difficile et dangereux à réaliser.

Source de l'image : Overloaded plug socket par The Clear Communication People, sur Flickr.

De la même façon, par exemple, pour programmer des graphismes en 3D, il est beaucoup plus facile de le faire en utilisant une API écrite dans un langage de haut niveau comme JavaScript ou Python, plutôt que d'essayer d'écrire du code bas niveau (comme C ou C ++) qui contrôle directement le GPU de l'ordinateur ou d'autres fonctions graphiques.

Note :

Voir aussi l'entrée du glossaire du terme API pour plus de descriptions.

Note : Voir aussi l'entrée du glossaire du terme API pour plus de descriptions.

API JavaScript côté client

@@ -61,7 +60,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction Par exemple: l'API Twitter vous permet d'afficher vos derniers tweets sur votre site Web. Elle fournit un ensemble de constructions que vous pouvez utiliser pour interroger le service Twitter et qui renvoie alors les informations demandées. -

Relations entre JavaScript, les API et autres outils JavaScript

@@ -108,9 +107,8 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction

L'API Mastodon permet de manipuler les fonctionnalités du réseau social Mastodon grâce à des programmes.

Note :

Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le répertoire Programmable Web API.

Note : Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le répertoire Programmable Web API.

Comment les API fonctionnent-elles ?

@@ -121,9 +119,8 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction

Les API interagissent avec le code en utilisant un ou plusieurs objets JavaScript, qui servent de conteneurs pour les données utilisées par l'API (contenues dans les propriétés d'objet), et la fonctionnalité rendue disponible par l'API (contenue dans des méthodes d'objet).

Note :

Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module objets JavaScript avant de continuer.

Note : Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module objets JavaScript avant de continuer.

Prenons comme exemple l'API Web Audio. Il s'agit d'une API assez complexe avec plusieurs objets. Voici les objets principaux :

@@ -189,8 +186,7 @@ audioElement.addEventListener('ended', function() { });

Note :

Certains d'entre vous ont peut-être remarqué que les méthodes play() et pause() utilisées pour lire et mettre en pause la piste ne font pas partie de l'API audio Web ; elles font partie de l'API HTMLMediaElement. qui est différente mais étroitement liée.

Note : Certains d'entre vous ont peut-être remarqué que les méthodes play() et pause() utilisées pour lire et mettre en pause la piste ne font pas partie de l'API audio Web ; elles font partie de l'API HTMLMediaElement. qui est différente mais étroitement liée.

Ensuite, nous créons un objet GainNode à l'aide de la méthode AudioContext.createGain(), qui peut être utilisé pour ajuster le volume de l'audio qui le traverse, et nous créons un autre gestionnaire d'événements qui modifie la valeur du gain (volume) du graphique audio lorsque la valeur du curseur est modifiée :

@@ -233,8 +229,7 @@ const ctx = canvas.getContext('2d'); };

Note :

Vous pouvez voir ce code en action dans notre démo de balles rebondissantes (voyez-le fonctionner en direct également).

Note : Vous pouvez voir ce code en action dans notre démo de balles rebondissantes (voyez-le fonctionner en direct également).

Elles utilisent des événements pour gérer les changements d'état

@@ -261,9 +256,8 @@ request.onload = function() { showHeroes(superHeroes); } -

Note :

Vous pouvez voir ce code en action dans notre exemple ajax.html (voyez-le en direct également).

Note : Vous pouvez voir ce code en action dans notre exemple ajax.html (voyez-le en direct également).

Les cinq premières lignes spécifient l'emplacement de la ressource que nous voulons récupérer, créent une nouvelle instance d'un objet de requête en utilisant le constructeur XMLHttpRequest(), ouvrent une requête HTTP GET pour récupérer la ressource spécifiée, spécifient que la réponse doit être envoyée au format JSON, puis envoient la requête.

@@ -276,13 +270,12 @@ request.onload = function() {

En outre, certaines API Web demandent la permission d'être activées à l'utilisateur une fois que les appels à ces interfaces sont effectués dans votre code. À titre d'exemple, l'API Notifications API demande la permission à l'aide d'une boîte de dialogue contextuelle :

Les API Web Audio et HTMLMediaElement sont soumises à un mécanisme de sécurité appelé autoplay policy - cela signifie essentiellement que vous ne pouvez pas lire automatiquement l'audio lorsqu'une page se charge — vous devez permettre à vos utilisateurs de déclencher la lecture audio par le biais d'un contrôle comme un bouton. Cette mesure est prise parce que la lecture automatique de l'audio est généralement très ennuyeuse et que nous ne devrions pas y soumettre nos utilisateurs.

Note :

Selon la rigueur du navigateur, ces mécanismes de sécurité peuvent même empêcher l'exemple de fonctionner localement, c'est-à-dire si vous chargez le fichier d'exemple local dans votre navigateur au lieu de l'exécuter à partir d'un serveur web. Au moment de la rédaction de ce document, notre exemple d'API Web Audio ne fonctionnait pas localement sur Google Chrome — nous avons dû le télécharger sur GitHub avant qu'il ne fonctionne.

Note : Selon la rigueur du navigateur, ces mécanismes de sécurité peuvent même empêcher l'exemple de fonctionner localement, c'est-à-dire si vous chargez le fichier d'exemple local dans votre navigateur au lieu de l'exécuter à partir d'un serveur web. Au moment de la rédaction de ce document, notre exemple d'API Web Audio ne fonctionnait pas localement sur Google Chrome — nous avons dû le télécharger sur GitHub avant qu'il ne fonctionne.

Résumé

diff --git a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html index 76b8b9cfb7..8025213ac4 100644 --- a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -20,9 +20,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}

Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet Document. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.

Prérequis :

Malgré les limitations, les APIs Web nous donnent accès à beaucoup de fonctionnalités, lesquelles nous permettent de faire plein de choses géniales avec les pages web. Il existe quelques éléments évidents que vous utilisez régulièrement dans votre code — jetez un coup d'œil au diagramme suivant, il représente les principaux composants du navigateur directement impliqués dans l'affichage des pages web:

La fenêtre est l'onglet du navigateur dans lequel une page web est chargée. Elle est représentée en JavaScript par l'objet Window. Utiliser les méthodes disponibles sur cet objet nous permet par exemple de récupérer la taille de la fenêtre (voir Window.innerWidth et Window.innerHeight), manipuler le document chargé dans cette fenêtre, stocker des données spécifiques à ce document côté client (par exemple en utilisant une base de données locale ou autre mécanisme de stockage), attacher un gestionnaire d'événement à la fenêtre en cours, et plus encore.

Le DOM, quant à lui, ressemble à ça :

Note : Ce diagramme du DOM a été créé en utilisant le Live DOM viewer de Ian Hickson.

@@ -198,7 +198,7 @@ para.style.textAlign = 'center';

Note : Vous remarquerez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en lower camel case tandis que les versions CSS sont reliées par des tirets (par exemple backgroundColor au lieu de background-color). Prenez garde à ne pas les mélanger, sans quoi ça ne fonctionnera pas.

Note : Vous remarquerez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en lower camel case tandis que les versions CSS sont reliées par des tirets (par exemple backgroundColor au lieu de background-color). Prenez garde à ne pas les mélanger, sans quoi ça ne fonctionnera pas.

Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons étudier maintenant.

@@ -229,7 +229,7 @@ para.style.textAlign = 'center';

Dans les deux prochaines sections, nous verrons des exemples d'utilisation plus pratiques des APIs du DOM.

Note : Vous pouvez trouver la version finale de dom-example.html sur GitHub (le voir en direct aussi).

Note : Vous pouvez trouver la version finale de dom-example.html sur GitHub (le voir en direct aussi).

Apprentissage actif : Récupérer des informations utiles depuis l'objet Window

@@ -262,7 +262,7 @@ para.style.textAlign = 'center';

Note : En cas de blocage, jetez un œil à notre exemple de redimensionnement de la fenêtre terminé sur GitHub (voir en direct aussi).

Note : En cas de blocage, jetez un œil à notre exemple de redimensionnement de la fenêtre terminé sur GitHub (voir en direct aussi).

Apprentissage actif : Une liste de courses dynamique

@@ -277,7 +277,7 @@ para.style.textAlign = 'center';

La démo terminée doit ressembler à ça:

Pour compléter l'exercice, suivez les étapes ci-dessous, et assurez-vous que votre exemple se comporte comme décrit ci-dessus.

@@ -296,7 +296,7 @@ para.style.textAlign = 'center';

Note : Si vous bloquez vraiment, jetez un œil à notre liste de courses terminée (voir en direct.)

Note : Si vous bloquez vraiment, jetez un œil à notre liste de courses terminée (voir en direct.)

Résumé

diff --git a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html index c0d337f3d1..15dfb1c063 100644 --- a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html +++ b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html @@ -10,9 +10,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs ---

{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}

Jusqu'à présent, nous avons uniquement abordé des API qui sont fournies par le navigateur. Il en existe d'autres : de nombreux sites et services, tels que Google Maps, Twitter, Facebook, PayPal, etc. fournissent des API permettant aux développeurs d'exploiter leurs données (ex. afficher un flux Twitter sur un blog) ou leurs services (utiliser l'outil de connexion Facebook pour que vos utilisateurs se connectent sur votre application). Dans cet article, nous verrons les différences entre les API du navigateur et celles fournies par des services tiers (en anglais, on parle de « third-party API ») et nous illustrerons certains cas d'usage pour ces API tierces.

Prérequis :

Au final, on souhaite que l'application permette de saisir un terme de recherche, des dates optionnelles pour le début et la fin de la période à rechercher. Nous utiliserons alors ces paramètres afin de d'envoyer des requêtes sur l'API Article Search puis nous afficherons les résultats obtenus.

Connecter l'API à son application

+ '&fq=document_type:("article")'

Si on prend un exemple d'URL complète ainsi construite :

https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats
-&fq=document_type:("article")&begin_date=20170301&end_date=20170312

Note : Pour en savoir plus sur les différents paramètres d'URL qui peuvent être utilisés, vous pouvez consulter la documentation du NYTimes.

@@ -325,7 +325,7 @@ fetch(url).then(function(result) { link.href = current.web_url; link.textContent = current.headline.main; - para1.textContent = current.snippet; + para1.textContent = current.snippet; para2.textContent = 'Mots-clés : '; for(var j = 0; j < current.keywords.length; j++) { var span = document.createElement('span'); @@ -418,7 +418,7 @@ function previousPage(e) {

Cet exemple est intéressant car il permet d'illustrer l'utilisation combinée de deux API tierces pour construire une application. La première API est une API REST tandis que la seconde est plus proche du fonctionnement de MapQuest (des méthodes spécifiques à l'API, etc.). On notera que les deux API ont besoin qu'une bibliothèque JavaScript soit chargée sur la page. L'API REST possède des fonctions qui permettent de gérer les requêtes HTTP et de renvoyer les résultats.

Nous n'allons pas détailler plus encore cet exemple ici, vous pouvez consulter le code source qui contient des commentaires expliquant son fonctionnement. Là encore, pour utiliser vous-même l'exemple, vous aurez besoin de récupérer une clé d'API et de l'insérer dans le code afin que les exemples fonctionnent.

diff --git a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html index 6569f167d1..a091835f18 100644 --- a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html +++ b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html @@ -18,9 +18,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}

HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc. Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.

Prérequis :

À ce stade, vous pouvez supprimer les lignes équivalentes des fonctions windBackward() et windForward(), puisqu'elles ont été ajoutées à la fonction stopMedia() à la place.

Note: Vous pouvez améliorer votre code en créant une fonction séparée qui exécute ces lignes, et l'appeler aux endroits où vous en avez besoin plutôt que de répéter ces lignes à de multiples endroits du code. Mais nous vous laissons vous en occuper.

Note : Vous pouvez améliorer votre code en créant une fonction séparée qui exécute ces lignes, et l'appeler aux endroits où vous en avez besoin plutôt que de répéter ces lignes à de multiples endroits du code. Mais nous vous laissons vous en occuper.

Note: Le code terminé est disponible sur Github (le voir en direct).

Note : Le code terminé est disponible sur Github (le voir en direct).

Sommaire

Dans ce module

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}

Maintenant que vous avez appris quelques éléments théoriques sur le JavaScript, et ce que vous pouvez faire avec, nous allons vous donner un cours intensif sur les fonctionnalités basiques du JavaScript avec un tutoriel entièrement pratique. Vous allez construire un jeu simple, étape par étape. Il s'agit de faire deviner un nombre, notre jeu s'appelle « Guess the number ».

Prérequis:

Ne vous attendez pas à comprendre tout le code en détail immédiatement — nous voulons simplement vous présenter les grands concepts pour le moment, et vous donner une idée de la façon dont JavaScript (et d'autres langages de programmation) fonctionne. Dans les articles suivants, vous reviendrez plus en détails sur toutes ces fonctionnalités !

Note : De nombreuses fonctionnalités que vous allez voir en JavaScript sont identiques à celles d'autres langages de programmation — fonctions, boucles, etc. La syntaxe du code est différente mais les concepts sont globalement identiques.

Note : De nombreuses fonctionnalités que vous allez voir en JavaScript sont identiques à celles d'autres langages de programmation — fonctions, boucles, etc. La syntaxe du code est différente mais les concepts sont globalement identiques.

Penser comme un programmeur

Exemple — Jeu : Guess the number

Dans cet article, nous allons vous montrer comment construire le jeu simple que vous pouvez voir ci-dessous :

Top hidden code

<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
 <head>
@@ -160,16 +158,15 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash
 </script>
 
 </html>
-

{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}

{{ EmbedLiveSample('Exemple_—_Jeu_Guess_the_number', '100%', 320, "", "", "hide-codepen-jsfiddle") }}

Essayez de jouer et familiarisez-vous avec ce jeu avant de continuer.
-
- Imaginons que votre patron vous ait donné le résumé suivant pour créer ce jeu :

Essayez de jouer et familiarisez-vous avec ce jeu avant de continuer.

Imaginons que votre patron vous ait donné le résumé suivant pour créer ce jeu :

-
Je vous demande de créer un jeu simple de devinette de nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi. À chaque tour, le joueur doit être informé s'il a deviné ou non le bon nombre — si ce n'est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée. Le jeu doit également rappeler au joueur les nombres déjà proposés. Le jeu se termine quand le joueur a deviné le nombre mystère, ou s'il a épuisé ses 10 chances. À la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie.
+
Je vous demande de créer un jeu simple de devinette de nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi. À chaque tour, le joueur doit être informé s'il a deviné ou non le bon nombre — si ce n'est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée. Le jeu doit également rappeler au joueur les nombres déjà proposés. Le jeu se termine quand le joueur a deviné le nombre mystère, ou s'il a épuisé ses 10 chances. À la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie.

La première chose à faire en regardant ce résumé, c'est de le décomposer en tâches simples et codables comme le ferait un programmeur :

Afficher un contrôle pour que le joueur puisse rejouer.
Une fois le jeu redémarré, s'assurer que la logique du jeu et l'interface utilisateur sont complètement réinitialisées, puis revenir à l'étape 1.
Une fois le jeu redémarré, s'assurer que la logique du jeu et l'interface utilisateur sont complètement réinitialisées, puis revenir à l'étape 1.

Voyons maintenant comment nous pouvons transformer ces étapes en code. Nous allons développer cet exemple et explorer les fonctionnalités JavaScript au fur et à mesure.

Configuration initiale

Note : Vous en apprendrez beaucoup plus sur les variables plus tard dans le cours, en commençant par le prochain article.

Note : Vous en apprendrez beaucoup plus sur les variables plus tard dans le cours, en commençant par le prochain article.

Fonctions

Après avoir pressé Entrée ou Retour, vous devriez voir apparaître une alerte « Je suis un espace réservé » ; nous avons défini une fonction dans notre code créant une alerte chaque fois que nous l'appelons.

Note : Vous allez en apprendre beaucoup plus sur les fonctions plus tard dans ce cours.

Note : Vous allez en apprendre beaucoup plus sur les fonctions plus tard dans ce cours.

Opérateurs

Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les outils de développement et la console Javascript. Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche Entrée du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous :

Hidden code

- -

<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -397,9 +389,8 @@ let resetButton;
 
   </script>
 </html>

{{ EmbedLiveSample('Hidden_code', '100%', 300,"", "", "hide-codepen-jsfiddle") }}

{{ EmbedLiveSample('Opérateurs', '100%', 300,"", "", "hide-codepen-jsfiddle") }}

Regardons d'abord les opérateurs arithmétiques, par exemple :

Des raccourcis d'opérateurs sont également disponibles, appelés opérateurs d'assignation augmentés. Par exemple, si vous voulez simplement ajouter une nouvelle chaîne de texte à une chaîne existante et renvoyer le résultat, vous pouvez faire :

name += ' dit bonjour !';

Structures conditionnelles

Revenons à la fonction checkGuess(). Nous pouvons assurément dire que nous ne souhaitons pas qu'elle renvoie un message d'emplacement réservé. Nous voulons qu'elle vérifie si la supposition du joueur est correcte ou non et qu'elle renvoie une réponse appropriée.

Donc, remplacez l'actuelle fonction checkGuess() par celle-ci :

function checkGuess(){
+function checkGuess(){
   let userGuess = Number(guessField.value);
   if (guessCount === 1) {
     guesses.textContent = 'Propositions précédentes : ';
@@ -519,12 +510,12 @@ greeting;
   guessField.value = '';
   guessField.focus();
 }
-

Pas mal de code — ouf ! Passons en revue chaque section et expliquons ce qu'elle fait.

La première ligne de la fonction (ligne 2) déclare une variable nommée userGuess et définit sa valeur par celle qui vient d'être saisie dans le champ de texte. Nous faisons passer aussi cette valeur par la méthode Number() , juste pour nous assurer que la valeur stockée dans userGuess est bien un nombre.
La première ligne de la fonction (ligne 2) déclare une variable nommée userGuess et définit sa valeur par celle qui vient d'être saisie dans le champ de texte. Nous faisons passer aussi cette valeur par la méthode Number() , juste pour nous assurer que la valeur stockée dans userGuess est bien un nombre.
Ensuite, nous rencontrons notre premier bloc de code conditionnel (lignes 3-5). Il permet d'exécuter des instructions de manière sélective, selon certaines conditions qui sont vraies ou non. Cela ressemble un peu à une fonction, mais ce n'est pas le cas. La forme la plus simple du bloc conditionnel commence par le mot clé if, puis parenthèses, puis des accolades { }.
A l'intérieur de ces parenthèses, nous mettons le test. S'il renvoie true , nous exécutons le code à l'intérieur des accolades. Sinon, nous ne le faisons pas, et passons au morceau de code suivant. Dans ce cas, le test vérifie si la variable guessCount est égale à 1 (c'est-à-dire s'il s'agit de la première supposition du joueur) :
```
guessCount === 1
```
diff --git a/files/fr/learn/javascript/first_steps/arrays/index.html b/files/fr/learn/javascript/first_steps/arrays/index.html index f38aeee181..b201776dd1 100644 --- a/files/fr/learn/javascript/first_steps/arrays/index.html +++ b/files/fr/learn/javascript/first_steps/arrays/index.html @@ -22,9 +22,9 @@ original_slug: Learn/JavaScript/First_steps/tableaux
{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}
-
Dans le dernier article de ce module, nous examinerons les tableaux — une façon de stocker proprement une liste d'éléments de données sous un seul nom de variable. Ici nous verrons pourquoi c'est utile, puis nous apprendrons comment créer un tableau, y retrouver, y ajouter ou en enlever les éléments dedans, et quelques à‑côtés en bonus.
+
Dans le dernier article de ce module, nous examinerons les tableaux — une façon de stocker proprement une liste d'éléments de données sous un seul nom de variable. Ici nous verrons pourquoi c'est utile, puis nous apprendrons comment créer un tableau, y retrouver, y ajouter ou en enlever les éléments dedans, et quelques à‑côtés en bonus.
-

Prérequis :

Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés ou utiliser la console développeur de l'explorateur si vous préférez).

Hidden code

- -

<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -153,9 +150,8 @@ original_slug: Learn/JavaScript/First_steps/tableaux
 
   </script>
 </html>
-

Créer un tableau

Note : Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 !

Note : Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 !

Notez qu'un tableau à l'intérieur d'un tableau est appelé un tableau multidimensionnel. Vous accédez à un des éléments de ce tableau interne en chaînant deux paires de crochets. Par exemple, pour avoir accès à l'un des éléments (le troisième) du tableau élément du tableau random (voir la section précédente), vous pouvez écrire quelque chose comme :
@@ -228,7 +225,7 @@ for (var i = 0; i < sequence.length; i++) {
Souvent, vous serez confronté à des données brutes contenues dans une longue chaîne de caractères, et vous voudrez peut-être en extraire les éléments utiles sous une forme plus pratique pour en faire quelque chose, comme les afficher dans un tableau de données. Pour ce faire, nous pouvons utiliser la méthode {{jsxref ("String. prototype. prototype. split ()","split ()")}}. Dans sa formulation la plus simple, elle prend un seul paramètre, le caractère servant de séparateur ; elle renverra les sous-chaînes entre séparateurs en tant qu'éléments d'un tableau.

-
Note : D'accord, techniquement parlant c'est une méthode de chaîne, et non une méthode de tableau, mais nous la mettons dans le chapitre des tableaux car elle est bien à sa place ici.
+
Note : D'accord, techniquement parlant c'est une méthode de chaîne, et non une méthode de tableau, mais nous la mettons dans le chapitre des tableaux car elle est bien à sa place ici.
-
Activité : affichons les produits !
+
Activité : affichons les produits

Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici :
@@ -315,10 +312,7 @@ removedItem;
Nous souhaitons que vous modifiez la ligne au‑dessous de // number 5 de sorte que la variable itemText soit égale à « nom actuel de l'élément — $prix actuel de l'élément », par exemple « Shoes — $23.99 » dans chaque cas, de façon à ce qu'une information correcte soit affichée sur l'envoi. Il s'agit d'une simple concaténation de chaînes de caractères, chose qui doit vous être familière.

Playable code

- -

<div class="output" style="min-height: 150px;">
+<div class="output" style="min-height: 150px;">
 
 <ul>
 
@@ -363,7 +357,7 @@ totalBox.textContent = 'Total: $' + total.toFixed(2);
 </div>
 
 
-var textarea = document.getElementById('code');
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var code = textarea.value;
@@ -387,9 +381,8 @@ var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalB
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
 
-

{{ EmbedLiveSample('Activité_affichons_les_produits', '100%', 600) }}

Activité : Top 5 des recherches

Dans cet exemple nous allons montrer une utilisation beaucoup plus simple — ici, nous allons vous fournir un site de recherche fictif, avec une boîte de recherche. Voici l'idée : quand un terme est entré dans la boîte de recherche, les 5 précédents termes entrés sont affichés dans la liste. Quand le nombre de termes dépasse 5, le dernier terme est supprimé chaque fois qu'un nouveau terme est ajouté ; ainsi, le 5 termes précédents sont toujours affichés.

Note : Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple.

Note : Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple.

Pour terminer l'application, il vous faut :

Ajouter une ligne sous le commentaire // number 2 pour supprimer la valeur en fin de liste du tableau.

Playable code 2

- -

<div class="output" style="min-height: 150px;">
+<div class="output" style="min-height: 150px;">
 
 <input type="text"><button>Search</button>
 
@@ -466,7 +456,7 @@ searchBtn.onclick = function() {
 </div>
 
 
-var textarea = document.getElementById('code');
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var code = textarea.value;
@@ -490,9 +480,8 @@ var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar search
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
 
-

{{ EmbedLiveSample('Activité_Top_5_des_recherches', '100%', 600) }}

Testez vos compétences !

Dans notre premier module consacré à JavaScript, nous allons tout d'abord répondre à des questions fondamentales comme « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? » et « de quoi est-il capable ? ». Nous vous accompagnerons ensuite dans votre première expérience pratique consistant à écrire du code JavaScript. Après cela, nous examinerons en détail quelques briques de base, telles que les variables, les chaînes de caractères, les nombres, et les tableaux.

Prérequis

Avant d'entamer ce module, vous n'avez besoin d'aucune connaissance préalable en JavaScript, mais vous devriez être familier avec HTML et CSS. Nous vous conseillons de lire les modules suivants avant d'aller plus loin :

Commencer avec le Web (qui inclut une présentation basique de JavaScript).
Introduction au langage HTML.
Introduction au langage CSS.
Commencer avec le Web (qui inclut une présentation basique de JavaScript).
Introduction au langage HTML.
Introduction au langage CSS.

Note : Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez tester la plupart des exemples en ligne grâce à des outils comme JSBin ou Thimble.

Note : Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez tester la plupart des exemples en ligne grâce à des outils comme JSBin ou Thimble.

Guides

Qu'est-ce que JavaScript ?

Bienvenue dans le cours de JavaScript pour débutants proposé par MDN ! Dans ce premier article, nous aborderons JavaScript sous un angle général afin de comprendre ce qu'il est et à quoi il sert. Nous nous assurerons ici que vous cernez bien le but premier du langage.

Notre premier code JavaScript

@@ -65,6 +65,6 @@ translation_of: Learn/JavaScript/First_steps

L'auto-évaluation suivante teste votre compréhension des bases de JavaScript abordées dans le guide ci-dessus.

Génerateur d'histoires absurdes
Génerateur d'histoires absurdes: Dans le cadre de cette évaluation, votre tâche sera d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer pour créer une appli ludique qui génère aléatoirement des histoires absurdes. Amusez-vous bien !

diff --git a/files/fr/learn/javascript/first_steps/math/index.html b/files/fr/learn/javascript/first_steps/math/index.html index ddf396a3b7..bdfdda9e64 100644 --- a/files/fr/learn/javascript/first_steps/math/index.html +++ b/files/fr/learn/javascript/first_steps/math/index.html @@ -21,9 +21,9 @@ translation_of: Learn/JavaScript/First_steps/Math

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

À ce point du didacticiel, nous parlerons de « mathématiques en JavaScript » — comment utiliser les {{Glossary("Operator","operators")}} et autres fonctionnalités pour manier avec succès les nombres pour faire nos bricolages.

Prérequis :

Les nombres sont saisis sans guillemets — essayez de déclarer et initialiser deux ou trois variables de plus contenant des nombres avant de continuer.
Maintenant vérifions que les deux variables d'origine sont du même type de donnée. En JavaScript, l'opérateur nommé {{jsxref("Operators/typeof", "typeof")}} est prévu pour cela. Entrez les deux lignes ci‑dessous comme indiqué :

typeof myInt;
+  typeof myInt;
 typeof myFloat;

"number" est renvoyé dans les deux cas — cela nous facilite les choses quand nous avons des nombres différents de types variés et que nous avons à les traiter de diverses façons. Ouf !

Prérequis :

Note : Quelquefois les nombres impliqués dans des opérations sont nommés {{Glossary("Operand", "operands")}}.

Note : Quelquefois les nombres impliqués dans des opérations sont nommés {{Glossary("Operand", "operands")}}.

Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, mais ce serait bien de tester si vous avez bien compris la syntaxe. Entrez les exemples ci‑dessous dans la console des outils de développement JavaScript ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe.

Essayez-le et voyez.

Note : La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans Expressions and operators.

Note : La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans Expressions and operators.

Opérateurs d'incrémentation et de décrémentation

guessCount++;

Note : Ces opérateurs sont couramment utilisés dans des boucles ; nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.

Note : Ces opérateurs sont couramment utilisés dans des boucles ; nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.

Jouons avec ces opérateurs dans la console. Notez d'abord qu'il n'est pas possible de les appliquer directement à un nombre, ce qui peut paraître étrange, mais cet opérateur assigne à une variable une nouvelle valeur mise à jour, il n'agit pas sur la valeur elle‑même. Ce qui suit renvoie une erreur :

Note : En mettant l'opérateur avant la variable au lieu d'après, le navigateur agira dans l'ordre inverse — incrément/décrément de la variable puis renvoi de la valeur — . Essayez les exemples plus haut, mais cette fois avec ++num1 et --num2.

Note : En mettant l'opérateur avant la variable au lieu d'après, le navigateur agira dans l'ordre inverse — incrément/décrément de la variable puis renvoi de la valeur — . Essayez les exemples plus haut, mais cette fois avec ++num1 et --num2.

Opérateurs d'assignation

Note : Il y a des tas d'autres opérateurs d'assignation disponibles, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.

Note : Il y a des tas d'autres opérateurs d'assignation disponibles, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.

Apprentissage actif : dimensionner une boîte à canevas

Opérateur	Nom	But	Exemple	Raccourci pour	Opérateur	Nom	But	Exemple	Raccourci pour

Note : Vous verrez peut‑être certaines personnes utiliser == et != pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de ===/!==. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes. Les versions strictes à trois caractères testent à la fois l'égalité des valeurs et des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.

Note : Vous verrez peut‑être certaines personnes utiliser == et != pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de ===/!==. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes. Les versions strictes à trois caractères testent à la fois l'égalité des valeurs et des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.

Si vous entrez certaines de ces valeurs dans une console, vous constaterez que toutes renvoient une valeur true/false — les booléens mentionnés dans l'article précédent. Ces opérateurs sont très utiles car il nous permettent de prendre des décisions dans le code, et ils sont utilisés chaque fois que nous avons besoin de faire un choix. Par exemple, les booléens s'utilisent pour :

Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction updateBtn(). Dans ce cas, nous ne testons pas si deux expressions mathématiques ont la même valeur — nous testons si le contenu textuel d'un bouton contient une certaine chaîne — mais c'est toujours le même principe. Si le bouton affiche « Démarrer la machine » quand on le presse, nous changeons son étiquette en « Arrêter la machine » et mettons à jour l'étiquette comme il convient. Si le bouton indique « Arrêter la machine » au moment de le presser, nous basculons l'étiquette à nouveau.

Note : Un contrôle qui alterne entre deux états porte généralement le nom de toggle (bascule). Il bascule d'un état l'autre — allumé, éteint, etc.

Note : Un contrôle qui alterne entre deux états porte généralement le nom de toggle (bascule). Il bascule d'un état l'autre — allumé, éteint, etc.

Résumé

Dans l'article suivant, nous étudierons le texte et les façons dont JavaScript nous permet de le manipuler.

Note : Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux Nombres et dates et aux Expressions et opérateurs.

Note : Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux Nombres et dates et aux Expressions et opérateurs.

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

Dans cette évaluation, vous aurez pour tâche d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer dans le but de créer une appli ludique qui génère des histoires absurdes au hasard. Amusez-vous bien !

Note: Vous pouvez aussi utiliser un site tel que que JSBin ou Thimble pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <script> au sein de la page HTML.

Note : Vous pouvez aussi utiliser un site tel que que JSBin ou Thimble pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <script> au sein de la page HTML.

Résumé du projet

{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}

Concentrons-nous maintenant sur les chaînes de caractères - c'est le nom donné à un segment de texte en programmation. Dans cet article, nous aborderons les aspects les plus communs des chaînes de caractères que vous devez vraiment connaître quand vous apprenez JavaScript, comme créer une chaîne de caractères, échapper des guillemets dans une chaîne ou encore concaténer des chaînes.

Prérequis :

Chaînes de caractères — les bases

À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez l'ouvrir dans un onglet ou une fenêtre séparée, ou bien utiliser celle de l'explorateur, comme vous préférez).

Hidden code

- -

<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -150,9 +137,8 @@ translation_of: Learn/JavaScript/First_steps/Strings
 
   </script>
 </html>
-

{{ EmbedLiveSample('Chaînes_de_caractères_—_les_bases', '100%', 300) }}

Créer une chaîne de texte

let bigmouth = 'Je n\'ai pas eu droit à prendre place...';
 bigmouth;

Cela fonctionne à la perfection. Vous pouvez échapper d'autres caractères de la même manière, par ex. \", et il y a certains codes spéciaux à côté. Voyez Notations d'échappement pour plus de détails.

Concaténation de chaînes

Note : Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle chaîne littérale.

Note : Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle chaîne littérale.

Concaténation dans un contexte

{{ EmbedLiveSample('Concaténation_dans_un_contexte', '100%', 50) }}

Ici nous utilisons en ligne 4 la fonction {{domxref("Window.prompt()", "Window.prompt()")}}, qui demande à l'utilisateur de répondre à une question par l'intermédiaire d'une boîte de dialogue, puis qui stocke le texte entré dans une variable donnée — dans ce cas name. En ligne 5, nous nous servons de la fonction {{domxref("Window.alert()", "Window.alert()")}} pour afficher un dialogue contenant une chaîne assemblée à partir de deux chaînes littérales et de la variable name, par concaténation.

D'autre part, tout nombre possède une méthode nommée toString() qui le convertit en chaîne équivalente. Essayez : +
D'autre part, tout nombre possède une méthode nommée toString() qui le convertit en chaîne équivalente. Essayez :
```
let myNum = 123;
 let myString = myNum.toString();
 typeof myString;
```
diff --git a/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html index d41702445b..a281723a68 100644 --- a/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html +++ b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html @@ -14,13 +14,13 @@ original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux
L'objectif de ce test est d'évaluer votre compréhension de l'article sur les tableaux en JavaScript (arrays).
-
-
Note : Vous pouvez essayer vos solutions dans les éditeurs interactifs qui suivent. Toutefois, il peut aussi être utile de télécharger le code et d'utiliser un outil en ligne comme CodePen, jsFiddle, ou Glitch afin de travailler sur ces tâches.
+
+
Note : Vous pouvez essayer vos solutions dans les éditeurs interactifs qui suivent. Toutefois, il peut aussi être utile de télécharger le code et d'utiliser un outil en ligne comme CodePen, jsFiddle, ou Glitch afin de travailler sur ces tâches.

Si vous vous retrouvez bloqué·e, vous pouvez demander de l'aide (voir la section à ce sujet en fin de page).

-
-
Note : Dans les exemples qui suivent, s'il y a une erreur dans votre code, celle-ci s'affichera dans le panneau des résultats, sur la page, afin de vous aider à trouver la solution (ou bien dans la console JavaScript du navigateur si vous utilisez la version téléchargeable).
+
+
Note : Dans les exemples qui suivent, s'il y a une erreur dans votre code, celle-ci s'affichera dans le panneau des résultats, sur la page, afin de vous aider à trouver la solution (ou bien dans la console JavaScript du navigateur si vous utilisez la version téléchargeable).

Tableaux - Exercice 1
@@ -33,8 +33,8 @@ original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux
{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays1.html", '100%', 400)}}
-
-
Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.
+
+
Note : Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.

Tableaux - Exercice 2
@@ -51,8 +51,8 @@ original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux
{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays2.html", '100%', 400)}}
-
-
Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.
+
+
Note : Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.

Tableaux - Exercice 3
@@ -70,8 +70,8 @@ original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux
{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays3.html", '100%', 400)}}
-
-
Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.
+
+
Note : Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.

Recevoir une évaluation ou de l'aide
diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.html b/files/fr/learn/javascript/first_steps/useful_string_methods/index.html index f36b9f5cb2..f2e52aa169 100644 --- a/files/fr/learn/javascript/first_steps/useful_string_methods/index.html +++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.html @@ -21,9 +21,9 @@ original_slug: Learn/JavaScript/First_steps/methode_chaine_utile
{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
-
À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore.
+
À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore.
-

Prérequis :

Les chaînes de caractères sont des objets

Nous l'avons déjà dit, et nous le redirons — tout est objet en JavaScript. Lorsque vous créez une chaîne, par exemple en utilisant :

let string = 'Ceci est une chaîne';

Avant que votre cervelle ne commence à bouillir, pas de panique ! Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous utiliserez certaines assez souvent. Nous allons les voir maintenant.

Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés, ou utiliser la console de développement du navigateur si vous préférez).

Hidden code

- -

<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -152,9 +149,8 @@ original_slug: Learn/JavaScript/First_steps/methode_chaine_utile
 
   </script>
 </html>
-

{{ EmbedLiveSample('Les_chaînes_de_caractères_sont_des_objets', '100%', 300) }}

Trouver la longueur d'une chaîne

browserType.indexOf('zilla');

On peut faire cela autrement, peut-être plus efficacement encore. Écrivez :
```
browserType.indexOf('vanilla');
```
Cela doit vous donner -1 comme résultat — renvoyé quand la sous-chaîne, en l'occurence « vanilla », n'est pas trouvée dans la chaîne principale.
@@ -206,7 +199,7 @@ browserType.length;

Note : Le second paramètre de slice() est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options.

Note : Le second paramètre de slice() est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options.

Changer la casse

Conseil : dans notre cas, il est probablement plus utile de tester si le résultat de l'appel de notre méthode n'est pas égal à un certain résultat.

Playable code

- -

<div class="output" style="min-height: 125px;">
+<div class="output" style="min-height: 125px;">
 
 <ul>
 
@@ -284,7 +274,7 @@ for (var i = 0; i < greetings.length; i++) {
 </div>
 
 
-var textarea = document.getElementById('code');
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var code = textarea.value;
@@ -308,9 +298,8 @@ var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.inner
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
 
-

{{ EmbedLiveSample('Filtrer_des_messages_de_vœux', '100%', 490) }}

Remettre les majuscules

Note: Un conseil — les paramètres des méthodes de chaîne n'ont pas besoin d'être des chaînes, elle peuvent aussi être des variables, ou même des variables avec une méthode invoquée sur elles.

Note : Un conseil — les paramètres des méthodes de chaîne n'ont pas besoin d'être des chaînes, elle peuvent aussi être des variables, ou même des variables avec une méthode invoquée sur elles.

Playable code 2

- -

<div class="output" style="min-height: 125px;">
+<div class="output" style="min-height: 125px;">
 
 <ul>
 
@@ -359,7 +345,7 @@ for(var i = 0; i < cities.length; i++) {
 </div>
 
 
-var textarea = document.getElementById('code');
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var code = textarea.value;
@@ -383,9 +369,8 @@ var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.inner
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
 
-

Créer de nouvelles chaînes à partir de morceaux

Changer la valeur de la variable result pour qu'elle soit égale à la chaîne finale, plutôt qu'à input.

Playable code 3

- -

<div class="output" style="min-height: 125px;">
+<div class="output" style="min-height: 125px;">
 
 <ul>
 
@@ -444,7 +426,7 @@ for (var i = 0; i < stations.length; i++) {
 </div>
 
 
-var textarea = document.getElementById('code');
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var code = textarea.value;
@@ -469,9 +451,8 @@ var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.inner
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
 
-

{{ EmbedLiveSample('Créer_de_nouvelles_chaînes_à_partir_de_morceaux', '100%', 485) }}

Conclusion

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}

Après lecture des deux articles précédents, vous savez maintenant ce qu'est JavaScript, ce qu'il peut vous apporter, comment l'utiliser aux côtés d'autres technologies web et l'aspect de ses principales fonctionnalités vues de haut. Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les variables.

Prérequis :

Outils nécessaires

Tout au long de cet article, on vous demandera de saisir des lignes de code pour tester votre compréhension. Si vous vous servez du navigateur avec un ordinateur de bureau, l'endroit le plus approprié pour saisir les exemples de code est la console JavaScript du navigateur (voyez Les outils de développement du navigateur pour plus d'informations sur la manière d'accéder à ces outils).

Toutefois, nous avons aussi incorporé une console JavaScript dans cette page pour vous permettre d'y écrire le code au cas où vous n'utiliseriez pas un navigateur avec une console JavaScript facilement accessible, ou si vous estimez qu'une console incorporée est plus confortable.

Qu'est ce qu'une variable ?

Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple :

<button>Pressez moi</button>

Dans cet exemple, presser le bouton déclenche l'exécution de quelques lignes de code. La première ligne affiche à l'écran une boîte priant l'utilisateur de saisir son nom et stocke la valeur entrée dans une variable. La deuxième affiche un message de bienvenue avec la valeur de la variable.

Les variables sont essentielles et à mesure que vous en apprendrez plus sur JavaScript, elles deviendront une seconde nature pour vous.

Une autre particularité des variables : elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.

Une autre particularité des variables : elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.

Note : Nous disons que les variables contiennent des valeurs. C'est un distingo important. Les variables ne sont pas les valeurs elles‑mêmes : ce sont des conteneurs pour ces valeurs. Vous pouvez vous les représenter comme une boîte en carton dans laquelle il est possible de ranger des choses.

Déclarer une variable

Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons déclarer la variable. Pour ce faire, nous saisissons le mot‑clé var ou let suivi du nom que vous voulez donner à la variable :

let myName;
 let myAge;

Dans ces lignes, nous venons de créer deux variables nommées respectivement myName et myAge. Saisissez les maintenant dans la console de votre navigateur, ou dans la console au bas de la page (Vous ouvrez cette console soit dans un onglet séparé, soit dans une fenêtre selon votre préférence). Après cela, essayez de créer une variable (ou deux) en choisissant vous même le nom.

Hidden code

- -

<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -204,12 +189,11 @@ let myAge;
 
   </script>
 </html>

Note : En JavaScript, le code de toute instruction doit se terminer par un point‑virgule (;) — il peut fonctionner correctement sans ce point‑virgule pour des lignes isolées, mais ce ne sera probablement pas le cas si vous écrivez plusieurs lignes de code ensemble. Prenez l'habitude de mettre ce point‑virgule.

Note : En JavaScript, le code de toute instruction doit se terminer par un point‑virgule (;) — il peut fonctionner correctement sans ce point‑virgule pour des lignes isolées, mais ce ne sera probablement pas le cas si vous écrivez plusieurs lignes de code ensemble. Prenez l'habitude de mettre ce point‑virgule.

Vous pouvez maintenant tester si ces valeurs existent dans l'environnement d'exécution en saisissant simplement le nom de ces variables, par exemple

@@ -222,22 +206,22 @@ myAge;

scoobyDoo;

Note : Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, ne pas exister correspond à l'absence de boîte ; valeur indéfinie correspond à une boîte vide.

Note : Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, ne pas exister correspond à l'absence de boîte ; valeur indéfinie correspond à une boîte vide.

Initialisation d'une variable

Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (=), lui-même suivi de la valeur souhaitée pour la variable. Par exemple :

myName = 'Chris';
 myAge = 37;

Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore :

myName;
 myAge;

Il est possible de déclarer et initialiser une variable en même temps, comme ceci :

Il est possible de déclarer et initialiser une variable en même temps, comme ceci :

let myDog = 'Rover';

@@ -264,11 +248,11 @@ logName(); var myName; -

Note : l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web.

Note : l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web.

Ce processus se nomme « hoisting » (en français, "hissage") — lisez var hoisting pour plus de précisions sur ce sujet.

Le hissage ne fonctionne plus avec let. Si on remplaçait var par let dans l'exemple ci-dessus, l'exécution du script planterait sur une erreur. C'est une bonne chose — déclarer une variable après l'avoir initialisé produit un code obscur, difficile à lire.

@@ -296,7 +280,7 @@ myName = 'Bob' ;

Mise à jour d'une variable

Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console :

Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console :

myName = 'Bob';
 myAge = 40;

@@ -316,10 +300,10 @@ myAge = 40;

Note : Une liste exhaustive des mots réservés est proposée dans la page Lexical grammar — keywords.

Note : Une liste exhaustive des mots réservés est proposée dans la page Lexical grammar — keywords.

Exemples de noms corrects :

Exemples de noms corrects :

age
 myAge
@@ -341,9 +325,9 @@ document
 skjfndskjfnbdskjfb
 thisisareallylongstupidvariablenameman

Parmi ces noms, les suivants déclenchent une SyntaxError  :

Parmi ces noms, les suivants déclenchent une SyntaxError :

1 //la variable commence par un chiffre
+1 //la variable commence par un chiffre
 var //mot réservé
 document //mot réservé
 
@@ -370,11 +354,11 @@ document //mot réservé
 
 Booléens
 
-Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: true ou false. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être :
+Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: true ou false. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être :
 
 var iAmAlive = true;
 
-Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :
+Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :
 
 var test = 6 < 3;
 
@@ -382,17 +366,17 @@ document //mot réservé
 
 Tableaux
 
-Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console :
+Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console :
 
 var myNameArray = ['Chris', 'Bob', 'Jim'];
 var myNumberArray = [10,15,40];
 
-Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes :
+Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes :
 
 myNameArray[0]; // renverra 'Chris'
 myNumberArray[2]; // renverra 40
 
-La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro : le premier élément a l'index 0.
+La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro : le premier élément a l'index 0.
 
 Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant.
 
@@ -400,11 +384,11 @@ myNumberArray[2]; // renverra 40

En programmation, un objet est une structure de code qui modélise un objet du réel. Vous pouvez avoir un objet simple représentant une place de parking avec sa largeur et sa profondeur ou bien un objet représentant une personne avec comme données son nom, sa taille, son poids, son vernaculaire, comment le contacter, et plus encore.

Entrez la ligne suivant dans la console de votre explorateur :

Entrez la ligne suivant dans la console de votre explorateur :

var dog = { name : 'Spot', breed : 'Dalmatian' };

Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante :

Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante :

dog.name

@@ -414,11 +398,11 @@ myNumberArray[2]; // renverra 40

JavaScript est un « langage faiblement typé », ce qui veut dire que, contrairement à d'autres langages, vous n'êtes pas obligé de préciser quel est le type de donnée que doit contenir une variable (par ex. nombres, chaînes, tableaux, etc).

Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne :

Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne :

var myString = 'Hello';

Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents :

Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents :

var myNumber = '500'; // oops, c'est toujours une chaîne
 typeof(myNumber);
diff --git a/files/fr/learn/javascript/first_steps/what_is_javascript/index.html b/files/fr/learn/javascript/first_steps/what_is_javascript/index.html
index a3bac2d0fb..5e37499c73 100644
--- a/files/fr/learn/javascript/first_steps/what_is_javascript/index.html
+++ b/files/fr/learn/javascript/first_steps/what_is_javascript/index.html
@@ -246,7 +246,6 @@ function updateName() {
 
 Notez que parfois vous tomberez sur des morceaux de JavaScript directement dans le HTML. Ce qui peut ressembler à ça :
 
-
 function createParagraph() {
   let para = document.createElement('p');
   para.textContent = 'Vous avez cliqué !';
@@ -254,16 +253,17 @@ function updateName() {
 }
 
 <button onclick="createParagraph()">Cliquez-moi!</button>
-
 
 Vous pouvez essayer cette version dans la démonstration ci-dessous.
 
-{{ EmbedLiveSample('inline_js_example', '100%', 150) }}
+{{ EmbedLiveSample('Handlers_JavaScript_en_ligne', '100%', 150) }}
 
 Cet exemple a exactement le même comportement que ceux des deux sections précédentes, sauf que l'élément {{htmlelement("button")}} a un handler onclick en ligne pour déclencher l'exécution de la fonction à la pression du bouton.
 
 Évitez cependant de faire cela. C'est une mauvaise habitude de polluer le HTML avec du JavaScript, en plus d'être inefficace. Dans cette méthode, on doit inclure l'attribut onclick="createParagraph()" sur chaque bouton où le JavaScript doit s'appliquer.
 
+En JavaScript pur
+
 Une construction en JavaScript pur permet de sélectionner tous les boutons avec une instruction. Dans l'exemple précédent c'est cette partie qui s'en charge :
 
 let buttons = document.querySelectorAll('button');
@@ -311,13 +311,10 @@ document.addEventListener("DOMContentLoaded", function() {
 
 Les scripts asynchrones téléchargeront le script sans bloquer le rendu de la page et l'exécuteront dès que le téléchargement du script sera terminé. Vous n'obtenez aucune garantie que les scripts s'exécutent dans un ordre spécifique, mais seulement qu'ils n'empêcheront pas le reste de la page de s'afficher. Il est préférable d'utiliser async lorsque les scripts de la page s'exécutent indépendamment les uns des autres et ne dépendent d'aucun autre script de la page.
 
-
-  
-  Image de la spécification HTML, copiée et rognée selon les termes de la licence CC BY 4.0.
-  
-
+
 
-

+Image de la spécification HTML, copiée et rognée selon les termes de la licence CC BY 4.0.
+
 
 Par exemple, si vous avez les éléments de script suivants :
 
diff --git a/files/fr/learn/javascript/first_steps/what_went_wrong/index.html b/files/fr/learn/javascript/first_steps/what_went_wrong/index.html
index 004d4a67a7..f8ec006003 100644
--- a/files/fr/learn/javascript/first_steps/what_went_wrong/index.html
+++ b/files/fr/learn/javascript/first_steps/what_went_wrong/index.html
@@ -18,9 +18,9 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
 {{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
 
-Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous avez peut-être constaté qu'il ne fonctionnait pas. Pas de panique — cet article vise à ce que vous ne vous arrachiez pas les cheveux sur ces problèmes en donnant quelques conseils simples sur la façon de trouver et corriger les erreurs dans les programmes JavaScript.
+Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous avez peut-être constaté qu'il ne fonctionnait pas. Pas de panique — cet article vise à ce que vous ne vous arrachiez pas les cheveux sur ces problèmes en donnant quelques conseils simples sur la façon de trouver et corriger les erreurs dans les programmes JavaScript.
 
-

Prérequis :	Prérequis :	Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :	Objectif :	Se familiariser avec l'usage élémentaire des variables en JavaScript.

Note : Votre propre version de l'exemple de jeu ne fonctionne pas, vous pourriez vouloir la corriger ! Il nous semble plus efficace que vous travailliez sur notre version boguée, afin que vous puissiez apprendre les techniques que nous enseignons ici. Ensuite, vous pouvez revenir en arrière et essayer de réparer votre exemple.

Note : Votre propre version de l'exemple de jeu ne fonctionne pas, vous pourriez vouloir la corriger ! Il nous semble plus efficace que vous travailliez sur notre version boguée, afin que vous puissiez apprendre les techniques que nous enseignons ici. Ensuite, vous pouvez revenir en arrière et essayer de réparer votre exemple.

À ce stade, consultons la console du développeur pour voir si nous pouvons voir des erreurs de syntaxe, puis essayez de les corriger. Vous apprendrez comment ci-dessous.

Antérieurement dans le cours, nous vous avons demandé de taper quelques commandes JavaScript simples dans la console JavaScript des outils de développement (si vous ne pouvez pas vous rappeler comment l'ouvrir dans votre navigateur, suivez le lien précédent pour savoir comment). Ce qui est encore plus utile, c'est que la console vous donne des messages d'erreur chaque fois qu'une erreur de syntaxe existe dans le JavaScript qui est introduit dans le moteur JavaScript du navigateur. Maintenant partons en chasse !

Allez à l'onglet dans lequel est affiché number-game-errors.html, et ouvrez la console JavaScript. Vous devriez voir un message d'erreur dans les lignes qui suivent :
Allez à l'onglet dans lequel est affiché number-game-errors.html, et ouvrez la console JavaScript. Vous devriez voir un message d'erreur dans les lignes qui suivent :
C'est une erreur très facile à trouver, et le navigateur vous fournit quelques indices pour vous en sortir (la copie d'écran ci‑dessus provient de Firefox, mais les autres navigateurs donnent des indications semblables). De gauche à droite, nous avons :
- Une croix rouge indiquant que c'est une erreur.
- En examinant la ligne 86 dans l'éditeur de code, nous voyons :
```
guessSubmit.addeventListener('click', checkGuess);
```
- Le message d'erreur dit "guessSubmit.addeventListener n'est pas une fonction", donc nous avons probablement mal orthographié quelque chose. Si vous n'êtes pas sûr de la bonne orthographe d'un élément syntaxique, il est fréquemment opportun de regarder dans MDN. Actuellement, la meilleure façon d'opérer consiste à faire une recherche pour "mdn nom-de-fonctionnalité" avec votre moteur de recherche préféré. Voici un raccourci pour gagner un peu de temps dans le cas présent : addEventListener().
- Le message d'erreur dit "guessSubmit.addeventListener n'est pas une fonction", donc nous avons probablement mal orthographié quelque chose. Si vous n'êtes pas sûr de la bonne orthographe d'un élément syntaxique, il est fréquemment opportun de regarder dans MDN. Actuellement, la meilleure façon d'opérer consiste à faire une recherche pour "mdn nom-de-fonctionnalité" avec votre moteur de recherche préféré. Voici un raccourci pour gagner un peu de temps dans le cas présent : addEventListener().
- Donc, en regardant cette page, il apparaît que nous avions mal orthographié le nom de la fonction ! Souvenez-vous que JavaScript est sensible à la casse, et que la moindre différence dans l'orthographe ou la casse déclenchera une erreur. Remplacer addeventListener par addEventListener corrigera cela. Faisons‑le maintenant.

Note : Voyez la page relative à TypeError: "x" is not a function pour plus de précisions à propos de cette erreur.

Note : Voyez la page relative à TypeError: "x" is not a function pour plus de précisions à propos de cette erreur.

Erreurs de syntaxe : deuxième tour

Enregistrez la page et actualisez‑la, vous constaterez que l'erreur a disparu.
Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur !
Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur !
Cette fois‑ci, l'erreur rapportée est "TypeError: lowOrHi is null", à la ligne 78. -
Note : Null est une valeur spéciale signifiant "rien" ou "aucune valeur". Or lowOrHi a été déclaré et initialisé, mais sans valeur signifiante — il n'a ni type ni valeur.
+
+
Note : Null est une valeur spéciale signifiant "rien" ou "aucune valeur". Or lowOrHi a été déclaré et initialisé, mais sans valeur signifiante — il n'a ni type ni valeur.
-
Note : Cette erreur n'apparaît pas au moment du chargement de la page car elle survient à l'intérieur d'une fonction (dans checkGuess() { ... }). Comme vous l'apprendrez de manière plus précise plus loin dans l'article à propos des fonctions, le code dans les fonctions s'exécute dans une instance séparée du code en dehors des fonctions. Dans notre cas, le code n'avait pas été exécuté et l'erreur ne pouvait pas survenir avant que la fonction checkGuess() soit lancée à la ligne 86.
+
+
Note : Cette erreur n'apparaît pas au moment du chargement de la page car elle survient à l'intérieur d'une fonction (dans checkGuess() { ... }). Comme vous l'apprendrez de manière plus précise plus loin dans l'article à propos des fonctions, le code dans les fonctions s'exécute dans une instance séparée du code en dehors des fonctions. Dans notre cas, le code n'avait pas été exécuté et l'erreur ne pouvait pas survenir avant que la fonction checkGuess() soit lancée à la ligne 86.
Regardez à la ligne 78, vous verrez ce code :
```
lowOrHi.textContent = 'Last guess was too high!';
```
@@ -109,11 +111,11 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
```
console.log(lowOrHi);
```
-
Note : console.log() est vraiment utile pour déboguer une fonction en affichant sa valeur sur la console. Donc, elle affichera sur cette dernière la valeur de lowOrHi que nous avons essayé de définir à la ligne 48.
+
Note : console.log() est vraiment utile pour déboguer une fonction en affichant sa valeur sur la console. Donc, elle affichera sur cette dernière la valeur de lowOrHi que nous avons essayé de définir à la ligne 48.
Enregistrez et actualisez la page, et vous verrez le résultat de console.log() sur la console. C'est sûr, la valeur de lowOrHi est null à ce niveau ; il y a bien un problème à la ligne 48.
Quel est ce problème ? Réfléchissons. À la ligne 48, nous avons utilisé la méthode document.querySelector() pour obtenir une référence sur un élément avec un sélecteur CSS. En regardant plus en amont dans notre fichier, nous pouvons trouver le paragraphe en question : +
Enregistrez et actualisez la page, et vous verrez le résultat de console.log() sur la console. C'est sûr, la valeur de lowOrHi est null à ce niveau ; il y a bien un problème à la ligne 48.
Quel est ce problème ? Réfléchissons. À la ligne 48, nous avons utilisé la méthode document.querySelector() pour obtenir une référence sur un élément avec un sélecteur CSS. En regardant plus en amont dans notre fichier, nous pouvons trouver le paragraphe en question :
```
<p class="lowOrHi"></p>
```
Donc, il nous faut un sélecteur de classe ici, précédé d'un point (.), alors que le sélecteur passé à la méthode querySelector() en ligne 48 n'en a pas. Ce pourrait être le problème ! Changeons lowOrHi en .lowOrHi à la ligne 48.

Note : Voyez la page relative à TypeError: "x" is (not) "y" pour plus de précisions à propos de cette erreur.

Note : Voyez la page relative à TypeError: "x" is (not) "y" pour plus de précisions à propos de cette erreur.

Erreurs de syntaxe : troisième tour

Travaillons la logique

Pour corriger cela, examinons d'abord le fonctionnement de cette ligne. Premièrement, appelons Math.random(), qui génére un nombre décimal aléatoire compris entre 0 et 1, par exemple 0.5675493843.

Math.random()

Puis, nous passons le résultat de l'appel de Math.random() à Math.floor(), qui arrondit le nombre passé à l'entier inférieur le plus proche. Puis, on ajoute 1 au résultat :

Math.floor(Math.random()) + 1

cela déclenchera cette même erreur car le logiciel pense que vous êtes en train de faire quelque chose d'autre. Vous devez vous assurer que vous n'avez pas confondu l'opérateur d'assignation (=) — qui fixe une valeur donnée à une variable — avec l'opérateur (===) qui teste la stricte égalité de deux valeurs, et renvoie un résultat true/false (vrai/faux).

Note : Voyez la page relative à SyntaxError: missing ; before statement pour plus de précisions à propos de cette erreur.

Note : Voyez la page relative à SyntaxError: missing ; before statement pour plus de précisions à propos de cette erreur.

Le programme dit que vous avez gagné quelle que soit votre suggestion.

Cette erreur est triviale — elle indique en général que vous avez oublié une parenthèse fermante à la fin de l'appel d'une fonction ou d'une méthode.

Note: Voyez la page relative à SyntaxError: missing ) after argument list pour plus de précisions à ce propos.

Note : Voyez la page relative à SyntaxError: missing ) after argument list pour plus de précisions à ce propos.

SyntaxError: missing : after property id

Pour toutes ces erreurs, revoyez comment nous avons opéré dans les exemples de ce parcours. Quand une erreur survient, regardez le numéro de ligne indiqué, allez à cette ligne et voyez si vous remarquez ce qui ne va pas. N'oubliez pas que l'erreur n'est pas forcément sur la ligne indiquée, et qu'elle ne provient pas forcément d'un des problèmes évoqués plus haut !

Note : Voyez les pages relatives à SyntaxError: Unexpected token et SyntaxError: unterminated string literal pour plus de précisions à ce propos.

Note : Voyez les pages relatives à SyntaxError: Unexpected token et SyntaxError: unterminated string literal pour plus de précisions à ce propos.

Résumé

Il y a nombre d'autres erreurs qui n'ont pas été listées ici ; nous les avons récolées dans un référencement qui les explique en détail — voyez JavaScript error reference.
Il y a nombre d'autres erreurs qui n'ont pas été listées ici ; nous les avons récolées dans un référencement qui les explique en détail — voyez JavaScript error reference.
Si dans votre code vous rencontrez une erreur, et même après avoir lu cet article, vous ne parvenez pas à la corriger, vous pouvez obtenir de l'aide ! Demandez‑la sur le fil de discussion Learning Area Discourse thread ou par le canal IRC de #mdn sur Mozilla IRC. Dites‑nous quelle est cette erreur, et nous essayerons de vous aider. Un listing de votre code sera aussi utile.

{{Glossary('JavaScript')}} est un langage de programmation qui vous permet de mettre en œuvre des éléments complexes sur des pages Web (une page Web contenant plus que de simples informations statiques). Chaque fois qu'une page affiche des mises à jour de contenu en temps réel, des cartes interactives, des animations graphiques 2D / 3D ou un juke-box vidéo défilant, etc. — vous pouvez parier que JavaScript est probablement impliqué.

Parcours d'apprentissage

JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que HTML et CSS. Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants :

Avoir une expérience antérieure avec d'autres langages de programmation peut également aider.

Après vous être familiarisé avec les bases de JavaScript, vous devriez être en mesure d'en apprendre davantage sur des sujets plus avancés, par exemple :

JavaScript en profondeur, comme enseigné dans notre guide JavaScript
API web
JavaScript en profondeur, comme enseigné dans notre guide JavaScript
API web

Modules

Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder :

Premiers pas en JavaScript
Premiers pas en JavaScript: Dans notre premier module JavaScript, nous répondons d'abord à des questions fondamentales telles que «qu'est-ce que le JavaScript ?», «à quoi cela ressemble-t-il ?» et «que peut-il faire ?», avant de passer à votre première expérience pratique d'écriture de JavaScript. Après cela, nous discutons en détail de certaines fonctionnalités clés de JavaScript, telles que les variables, les chaînes, les nombres et les tableaux.
JavaScript les blocs
JavaScript les blocs: Dans ce module, nous continuons de couvrir toutes les fonctions clés fondamentales de JavaScript, en nous concentrant sur les types de blocs de code les plus courants, tels que les instructions conditionnelles, les boucles, les fonctions et les événements. Vous avez déjà vu ce genre de choses dans le cours, mais seulement en passant, nous en discuterons explicitement ici.
Introduction aux objets JavaScript
Introduction aux objets JavaScript: En JavaScript, la plupart des éléments sont des objets, depuis les principales fonctionnalités de JavaScript comme les chaînes et les tableaux jusqu'aux API du navigateur construites sur JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions et des variables associées dans des paquets efficaces. La nature orientée objet de JavaScript est importante à comprendre, si vous voulez aller plus loin dans la connaissance du langage et rédiger un code plus efficace. C'est pourquoi nous avons conçu ce module pour vous aider. Ici, nous enseignons la théorie et la syntaxe des objets en détail, regardons comment créer vos propres objets et expliquons quelles sont les données JSON et comment les utiliser.
API Web côté client
API Web côté client: Lors de l'écriture de JavaScript côté client, pour des sites Web ou des applications, vous n'irez pas très loin avant de commencer à utiliser des interfaces API, pour manipuler différents aspects du navigateur et du système d'exploitation sur lequel le site fonctionne, ou même des données d'autres sites Web ou des services. Dans ce module, nous explorerons quelles sont les API et comment utiliser certaines des API les plus courantes que vous rencontrerez souvent dans votre travail de développement.

Résoudre les problèmes JavaScript courants

Utiliser JavaScript pour résoudre des problèmes courants fournit des liens vers des sections expliquant comment utiliser JavaScript pour résoudre des problèmes très courants lors de la création d'une page Web.

Voir aussi

JavaScript sur MDN
JavaScript sur MDN: Principal point d'entrée de la documentation JavaScript de base sur MDN, vous y trouverez de nombreux documents de référence sur tous les aspects du langage JavaScript, ainsi que des tutoriels avancés destinés aux programmeurs en JavaScript expérimentés.
Codage des mathématiques: Une excellente série de tutoriels vidéo (anglophones) sur les mathématiques que vous devez comprendre pour être un programmeur efficace, par Keith Peters.

Prérequis :

Pour commencer, faite une copie locale de index-finished.html, style.css, et main-finished.js de l'article précédent, dans un nouveau dossier.

Note: Vous pouvez utiliser un site comme JSBin ou Thimble. Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises <script>/<style> dans votre code HTML.

Note : Vous pouvez utiliser un site comme JSBin ou Thimble. Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises <script>/<style> dans votre code HTML.

Le projet en bref

Ce screenshot vous donne une idée du résultat final:

Cette méthode doit avoir la même fonction que celle de Ball(): soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction Ball.prototype.draw. Puis appliquez les modifications suivantes:

On ne veut pas que le viseur soit plein, mais qu'il ait seulement un contour. Changez fillStyle et fill() pour strokeStyle et stroke().
On voudrait qu'il soit aussi un peu plus épais, pour être plus facile à voir. Pour ça on doit définir un attribut lineWidth à ctx après l'appel à la fonction beginPath() (avec une valeur de 3).
On ne veut pas que le viseur soit plein, mais qu'il ait seulement un contour. Changez fillStyle et fill() pour strokeStyle et stroke().
On voudrait qu'il soit aussi un peu plus épais, pour être plus facile à voir. Pour ça on doit définir un attribut lineWidth à ctx après l'appel à la fonction beginPath() (avec une valeur de 3).

`checkBounds()`

Quand une touche est enfoncée, la propriété keyCode de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas.

Pour un point bonus, faite apparaître à quel touche correspond le code de celle que l'utilisateur a enfoncé.

Dans ce Module

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

Dans ce premier article sur les objets JavaScript, nous verrons la syntaxe des objets JavaScript ainsi que quelques fonctionnalités JavaScript déjà aperçues dans les cours précédents, rappelant que beaucoup de fonctionnalités que vous utilisez sont en fait des objets.

Prérequis:

Comme souvent dans JavaScript, pour créer un objet, on commence avec la définition et l'initialisation d'une variable. Essayez de mettre le code ci-dessous sous le code déjà écrit de votre fichier JavaScript, puis sauvegardez et rafraichissez la page :

var personne = {};

var personne = {};

Désormais ouvrez la console JavaScript de votre navigateur, saisissez personne à l'intérieur, et appuyez sur Entrée. Vous devriez obtenir le résultat suivant :

[object Object]

[object Object]

Félicitations, vous avez créé votre premier objet ! Mais c'est un objet vide, on ne peut pas faire grand-chose avec. Modifions notre objet pour qu'il ressemble à ceci :

var personne = {
+var personne = {
   nom: ['Jean', 'Martin'],
   age: 32,
   sexe: 'masculin',
@@ -62,7 +62,7 @@ translation_of: Learn/JavaScript/Objects/Basics
 
 Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie input :
 
-personne.nom
+personne.nom
 personne.nom[0]
 personne.age
 personne.interets[1]
@@ -79,7 +79,7 @@ personne.salutation()
 
 Chaque paire de nom/valeur doit être séparée par une virgule, et le nom et la valeur de chaque membre sont séparés par deux points. La syntaxe suit ce schéma :
 
-var monObjet = {
+var monObjet = {
   nomDuMembre1: valeurDuMembre1,
   nomDuMembre2: valeurDuMembre2,
   nomDuMembre3: valeurDuMembre3
@@ -99,7 +99,7 @@ personne.salutation()
 
 Le nom de l'objet (personne) agit comme un espace de noms (ou namespace en anglais) — il doit être entré en premier pour accéder aux membres encapsulés dans l'objet. Ensuite, on écrit un point, puis le membre auquel on veut accéder — que ce soit le nom d'une propriété, un élément d'un tableau, ou un appel à une méthode de l'objet. Par exemple :
 
-personne.age
+personne.age
 personne.interets[1]
 personne.bio()
 
@@ -107,28 +107,28 @@ personne.bio()
 
 Il est même possible de donner un autre objet comme valeur d'un membre de l'objet. Par exemple, on peut essayer de changer la propriété nom du membre et la faire passer de
 
-nom: ['Jean', 'Martin'],
+nom: ['Jean', 'Martin'],
 
 à
 
-nom : {
+nom : {
   prenom: 'Jean',
   nomFamille: 'Martin'
 },
 
 Ici, nous avons bien créé un sous-espace de noms. Ça a l'air compliqué, mais ça ne l'est pas. Pour accéder à ces élements, il suffit de chaîner une étape de plus avec un autre point. Essayez ceci :
 
-personne.nom.prenom
+personne.nom.prenom
 personne.nom.nomFamille
 
 Important : à partir de maintenant, vous allez aussi devoir reprendre votre code et modifier toutes les occurrences de :
 
-nom[0]
+nom[0]
 nom[1]
 
 en
 
-nom.prenom
+nom.prenom
 nom.nomFamille
 
 sinon vos méthodes ne fonctionneront plus.
@@ -137,12 +137,12 @@ nom.nomFamille
 
 Il y a une autre façon d'accéder aux membres de l'objet : la notation avec les crochets. Plutôt que d'utiliser ceci :
 
-personne.age
+personne.age
 personne.nom.prenom
 
 Vous pouvez utiliser :
 
-personne['age']
+personne['age']
 personne['nom']['prenom']
 
 Cela ressemble beaucoup à la façon d'accéder aux éléments d'un tableau et c'est bien la même chose  — au lieu d'utiliser un indice numérique pour sélectionner un élément, on utilise le nom associé à chaque valeur d'un membre. Ce n'est pas pour rien que les objets sont parfois appelés tableaux associatifs : ils associent des chaînes de caractères (les noms des membres) à des valeurs, de la même façon que les tableaux associent des nombres à des valeurs.
@@ -151,42 +151,42 @@ personne['nom']['prenom']
 
 Jusqu'ici, nous avons vu comment accéder aux membres d'un objet. Vous pouvez aussi modifier la valeur d'un membre de l'objet en déclarant simplement le membre que vous souhaitez modifier(en utilisant la notation avec le point ou par crochet), comme ceci :
 
-personne.age = 45
+personne.age = 45
 personne['nom']['nomFamille'] = 'Rabuchon'
 
 Essayez de saisir ces deux lignes précédentes, puis accédez à nouveau aux membres pour voir ce qui a changé :
 
-personne.age
+personne.age
 personne['nom']['nomFamille']
 
 Définir les membres ne s'arrête pas à mettre à jour la valeur de propriétés ou méthodes existantes; vous pouvez aussi créer de nouveaux membres. Essayez ceci :
 
-personne['yeux'] = 'noisette'
+personne['yeux'] = 'noisette'
 personne.auRevoir = function() { alert("Bye bye tout le monde !"); }
 
 Vous pouvez maintenant tester vos nouveaux membres :
 
-personne['yeux']
+personne['yeux']
 personne.auRevoir()
 
 Un des aspects pratiques de la notation par crochet est qu'elle peut être utilisée pour définir dynamiquement les valeurs des membres, mais aussi pour définir les noms. Imaginons que nous voulions que les utilisateurs puissent saisir des types de valeurs personnalisées pour les données des personnes, en entrant le nom du membre et sa valeur dans deux champs input. On pourrait avoir ses valeurs comme ceci :
 
-var monNomDeDonnee = nomInput.value
+var monNomDeDonnee = nomInput.value
 var maValeurDeDonnee = valeurNom.value
 
 On peut alors ajouter le nom et la valeur du nouveau membre de l'objet personne comme ceci :
 
-personne[monNomDeDonnee] = maValeurDeDonnee
+personne[monNomDeDonnee] = maValeurDeDonnee
 
 Pour le tester, essayez d'ajouter les lignes ci-dessous dans votre code, juste après le crochet fermante de l'objet personne :
 
-var monNomDeDonnee = 'hauteur'
+var monNomDeDonnee = 'hauteur'
 var maValeurDeDonnee = '1.75m'
 personne[monNomDeDonnee] = maValeurDeDonnee
 
 Sauvegardez, rafraîchissez et entrez le texte suivant dans le champ de saisie (l'élément input) :
 
-personne.hauteur
+personne.hauteur
 
 Nous n'aurions pas pu construire ce membre avec la notation avec un point, car celle-ci n'accepte qu'un nom et pas une variable pointant vers un nom.
 
@@ -194,7 +194,7 @@ personne[monNomDeDonnee] = maValeurDeDonnee
 
 Vous avez dû remarquer quelque chose d'un peu étrange dans vos méthodes. Celle-ci, par exemple :
 
-salutation: function() {
+salutation: function() {
   alert('Bonjour! Je suis ' + this.nom.prenom + '.');
 }
 
@@ -202,7 +202,7 @@ personne[monNomDeDonnee] = maValeurDeDonnee
 
 Essayons d'illustrer nos propos par une paire d'objet personne simplifiée :
 
-var personne1 = {
+var personne1 = {
   nom: 'Christophe',
   salutation: function() {
     alert('Bonjour ! Je suis ' + this.nom + '.');
@@ -224,13 +224,13 @@ var personne2 = {
 
 Ainsi, quand vous utilisez une méthode comme :
 
-maChaineDeCaracteres.split(',');
+maChaineDeCaracteres.split(',');
 
 Vous utilisez une méthode disponible dans une instance du type {{jsxref("String")}}. Dès que vous créez une chaîne de caractères dans votre code, cette chaîne est automatiquement créée comme une instance de String et possède donc plusieurs méthodes/propriétés communes.
 
 Quand vous accédez au DOM (Document Object Model ou « modèle objet du document ») avec document et des lignes telles que :
 
-var monDiv = document.createElement('div');
+var monDiv = document.createElement('div');
 var maVideo = document.querySelector('video');
 
 Vous utilisez une méthode disponible dans l'instance de la classe {{domxref("Document")}}. Pour chaque page web chargée, une instance de Document est créée, appelée document et qui représente la structure entière de la page, son contenu et d'autres caractéristiques telles que son URL. Encore une fois, cela signifie qu'elle possède plusieurs méthodes/propriétés communes.
@@ -239,12 +239,12 @@ var maVideo = document.querySelector('video');
 
 On notera que les objets/API natifs ne créent pas toujours automatiquement des instances d'objet. Par exemple, l'API Notifications — qui permet aux navigateurs modernes de déclencher leurs propres notifications — vous demande d'instancier vous-même une nouvelle instance d'objet en utilisant le constructeur pour chaque notification que vous souhaitez lancer. Essayez d'entrer le code ci-dessous dans la console JavaScript :
 
-var maNotification = new Notification('Bonjour !');
+var maNotification = new Notification('Bonjour !');
 
 Nous verrons les constructeurs dans un prochain article.
 
 
-Note : On peut voir le mode de communication des objets comme un envoi de message. Quand un objet a besoin d'un autre pour faire une action, souvent il va envoyer un message à un autre objet via l'une de ses méthode et attendre une réponse, qui retournera une valeur.
+Note : On peut voir le mode de communication des objets comme un envoi de message. Quand un objet a besoin d'un autre pour faire une action, souvent il va envoyer un message à un autre objet via l'une de ses méthode et attendre une réponse, qui retournera une valeur.
 
 
 Résumé
diff --git a/files/fr/learn/javascript/objects/index.html b/files/fr/learn/javascript/objects/index.html
index c388ee3b62..5c7aed54cd 100644
--- a/files/fr/learn/javascript/objects/index.html
+++ b/files/fr/learn/javascript/objects/index.html
@@ -18,52 +18,52 @@ translation_of: Learn/JavaScript/Objects
 {{PreviousNext("Apprendre/JavaScript/Building_blocks", "Learn/JavaScript/Objects/Basics")}}
 
 
-En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets.     
+En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets.     
 
 Prérequis
 
-Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules Introduction au HTML et Introduction au CSS avant de commencer avec le JavaScript.
+Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules Introduction au HTML et Introduction au CSS avant de commencer avec le JavaScript.
 
-Vous devriez également être familiarisé avec les bases du JavaScript avant de poursuivre en détails avec les objets JavaScript. Avant de commencer ce module, travaillez sur Premiers pas avec JavaScript et Les blocs de construction en JavaScript.
+Vous devriez également être familiarisé avec les bases du JavaScript avant de poursuivre en détails avec les objets JavaScript. Avant de commencer ce module, travaillez sur Premiers pas avec JavaScript et Les blocs de construction en JavaScript.
 
 
-Remarque: Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme JSBin ou Thimble.
+Note : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme JSBin ou Thimble.
 
 
 Guides
 
 
- Les bases de JavaScript orienté objet
+ Les bases de JavaScript orienté objet
  Dans le premier article concernant les objets JavaScript, nous découvrirons la syntaxe fondamentale d’un objet JavaScript, et nous revisiterons certaines fonctionnalités du JavaScript que nous avions vues précédemment dans le cours, en insistant sur le fait que bon nombre d'éléments précedemment abordés sont en fait des objets.
 
 
 
- JavaScript orienté objet pour les débutants 
+ JavaScript orienté objet pour les débutants
  
- Après avoir vu les notions de base, nous nous pencherons sur le JavaScript orienté objet (JSOO) — cet article présente une vue basique de la théorie de la programmation orientée objet (POO), et explore ensuite comment le JavaScript émule les classes d’objet via les fonctions des constructeurs et comment créer des instances d’objet.
+ Après avoir vu les notions de base, nous nous pencherons sur le JavaScript orienté objet (JSOO) — cet article présente une vue basique de la théorie de la programmation orientée objet (POO), et explore ensuite comment le JavaScript émule les classes d’objet via les fonctions des constructeurs et comment créer des instances d’objet.
  
- Objets prototypes
+ Objets prototypes
  
- Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants.
+ Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants.
  
- L’héritage au sein de JavaScript
+ L’héritage au sein de JavaScript
  
- Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO.
+ Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO.
  
- Manipuler des données JSON
+ Manipuler des données JSON
  
- JavaScript Object Notation (JSON) est un format standard pour la représentation de données structurées comme les objets JavaScript, qui est communément utilisé pour représenter et transmettre les données sur les sites web (ex. : Envoyer certaines données du serveur au client, afin d’être affichées sur une page web). Vous le rencontrerez assez souvent. Aussi, dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec le format JSON utilisant le JavaScript, incluant l’accès aux éléments des données dans un objet JSON et l’écriture de votre propre JSON.
+ JavaScript Object Notation (JSON) est un format standard pour la représentation de données structurées comme les objets JavaScript, qui est communément utilisé pour représenter et transmettre les données sur les sites web (ex. : Envoyer certaines données du serveur au client, afin d’être affichées sur une page web). Vous le rencontrerez assez souvent. Aussi, dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec le format JSON utilisant le JavaScript, incluant l’accès aux éléments des données dans un objet JSON et l’écriture de votre propre JSON.
  
- Pratiques sur la construction d’objet
+ Pratiques sur la construction d’objet
  
- Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes.
+ Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes.
  
 
 
 Auto-évaluation
 
 
- Ajoutez des fonctionnalités  à notre  démo des ballons bondissants
+ Ajoutez des fonctionnalités  à notre  démo des ballons bondissants
  Dans cette évaluation, vous devrez utiliser la démo des balles bondissantes de l’article précédent comme un point de départ et y ajouter quelques nouvelles et intéressantes fonctionnalités.
 
 
diff --git a/files/fr/learn/javascript/objects/inheritance/index.html b/files/fr/learn/javascript/objects/inheritance/index.html
index b54af2f529..ededf06c2e 100644
--- a/files/fr/learn/javascript/objects/inheritance/index.html
+++ b/files/fr/learn/javascript/objects/inheritance/index.html
@@ -106,19 +106,19 @@ original_slug: Learn/JavaScript/Objects/Heritage
 
 Notez que si les valeurs des propriétés du constructeur dont vous héritez ne proviennent pas de paramètres, vous n'avez nullement besoin de les specifier comme arguments additionnels dans l'appel de la fonction call(). Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci :
 
-function Brick() {
+function Brick() {
   this.width = 10;
   this.height = 20;
-}
+}
 
 Vous pouvez hériter des propriétés width et height en procédant comme ceci (Mais  également en suivant bien sûr les différentes étapes décrites ci dessous) :
 
-function BlueGlassBrick() {
+function BlueGlassBrick() {
   Brick.call(this);
 
   this.opacity = 0.5;
   this.color = 'blue';
-}
+}
 
 Notez que nous n'avons spécifié que this au sein de call() — Aucun autre paramètre n'est requis puisque nous n'héritons ici d'aucune propriété provenant de la classe parente qui soit spécifiée via paramètres.  
 
@@ -187,7 +187,7 @@ professeur1.saluer();Ffa
 
 La méthode que nous avons détaillée ici n'est pas la seule permettant de mettre en place l'héritage de classes en JavaScript, mais elle fonctionne parfaitement et elle vous permet d'avoir une bonne idée de comment implémenter l'héritage en JavaScript.
 
-Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir Classes). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en  charge les navigateurs moins récents.
+Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir Classes). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en  charge les navigateurs moins récents.
 
 Un moyen habituel est d'utiliser les librairies JavaScript — La plupart des options populaires ont une sélection de fonctionnalités disponibles pour réaliser l'héritage plus facilement et plus rapidement.
 
@@ -195,7 +195,7 @@ professeur1.saluer();Ffa
 
 Un exercice plus complexe.
 
-Dans notre section sur la programmation orientée objet nous avons également inclus  une classe Etudiant comme un concept qui hérite de toutes les fonctionnalités de la classe Personne, et qui a également une méthode saluer() differente de celle de Personne qui est beaucoup moins formelle que la méthode saluer() de Professeur(). Jetez un oeil à ce à quoi ressemble la méthode saluer() de la classe Etudiant dans cette section et essayez d'implémenter votre propre constructeur Etudiant() qui hérite de toutes les fonctionnalités de Personne() et la fonction saluer() différente.
+Dans notre section sur la programmation orientée objet nous avons également inclus  une classe Etudiant comme un concept qui hérite de toutes les fonctionnalités de la classe Personne, et qui a également une méthode saluer() differente de celle de Personne qui est beaucoup moins formelle que la méthode saluer() de Professeur(). Jetez un oeil à ce à quoi ressemble la méthode saluer() de la classe Etudiant dans cette section et essayez d'implémenter votre propre constructeur Etudiant() qui hérite de toutes les fonctionnalités de Personne() et la fonction saluer() différente.
 
 Note: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre version finalisée (Ou regarder tourner notre demo en ligne).
 
@@ -205,7 +205,7 @@ professeur1.saluer();Ffa
 
 
  Celles définies au sein d'un constructeur et passées en paramètres aux instances de l'objet. Celles là ne sont pas difficiles à repérer — Dans votre propre code personnalisé, elles sont les membres définis en utilisant les lignes comme this.x = x ; Dans les codes préconstruits propres aux navigateurs, ils sont les membres seulement accessibles aux instances d'objet (usuellement créés en appelant un constructeur via l'utilisation du mot clé new, exemple : var myInstance = new myConstructor()).
- Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, Object.keys().
+ Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, Object.keys().
  Celles définies sur un prototype de constructeur qui sont héritées par toutes les instances des classes d'objet. Celles là incluent n'importe quel membre défini sur un prototype de constructeur, exemple : myConstructor.prototype.x().
 
 
@@ -246,13 +246,13 @@ professeur1.saluer();Ffa
 Dans ce module
 
 
- Les bases de l'Objet
- JavaScript  Orienté Objet pour débutants
- Prototypes d'Objet
- L'héritage en JavaScript
- Travailler avec les données JSON
- Construire les Objets dans la pratique
- Ajouter des fonctionnalités à la démo de nos balles bondissantes
+ Les bases de l'Objet
+ JavaScript  Orienté Objet pour débutants
+ Prototypes d'Objet
+ L'héritage en JavaScript
+ Travailler avec les données JSON
+ Construire les Objets dans la pratique
+ Ajouter des fonctionnalités à la démo de nos balles bondissantes
 
 
  
diff --git a/files/fr/learn/javascript/objects/json/index.html b/files/fr/learn/javascript/objects/json/index.html
index b06c79006d..8fa5a7e935 100644
--- a/files/fr/learn/javascript/objects/json/index.html
+++ b/files/fr/learn/javascript/objects/json/index.html
@@ -16,13 +16,13 @@ translation_of: Learn/JavaScript/Objects/JSON
 
 {{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
 
-Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON.
+Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON.
 
-

Prérequis :

{{glossary("JSON")}} est un format de données semblable à la syntaxe des objets JavaScript, qui a été popularisé par Douglas Crockford. Malgré sa syntaxe très similaire à celle des objets littéraux JavaScript, JSON peut être utilisé indépendamment de ce langage et ainsi, de nombreux autres langages de programmation disposent de fonctionnalités permettant d'analyser la syntaxe du JSON et d'en générer.

Le JSON se présente sous la forme d'une chaîne de caractères —utile lorsque vous souhaitez transmettre les données sur un réseau. Il a donc besoin d'être converti en un objet JavaScript natif lorsque vous souhaitez accéder aux données. Ce n'est pas vraiment un souci puisque le JavaScript fournit un objet global JSON disposant des méthodes pour assurer la conversion entre les deux.

Note : Convertir une chaîne de caractères en un objet natif se nomme analyse syntaxique (parsage) tandis que le contraire porte le nom de la linéarisation (stringification).

Note : Convertir une chaîne de caractères en un objet natif se nomme analyse syntaxique (parsage) tandis que le contraire porte le nom de la linéarisation (stringification).

Un objet JSON peut être stocké dans son propre fichier qui se présente simplement sous la forme d'un fichier texte avec l'extension .json et le {{glossary("MIME type")}} application/json.

Note : L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple JSONTest.html (voir le code source). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur.

Note : L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple JSONTest.html (voir le code source). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur.

Des tableaux en tant que JSON

Nous souhaitons les récupérer et, après quelques manipulations du DOM, les afficher comme ceci :

Chargeons notre JSON

Afin de créer une requête, nous avons besoin d'instancier un nouvel objet XMLHttpRequest à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script :
```
var request = new XMLHttpRequest();
```
Maintenant, nous avons besoin d'ouvrir une nouvelle requête grâce à la méthode open(). Ajoutez la ligne suivante : +
Maintenant, nous avons besoin d'ouvrir une nouvelle requête grâce à la méthode open(). Ajoutez la ligne suivante :
```
request.open('GET', requestURL);
```
Cette méthode prend au moins deux paramètres — il y a d'autres paramètres optionnels disponibles. Deux suffiront pour notre exemple :
- La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode GET est appropriée dans la mesure où nous voulons simplement récupérer quelques données.
- La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode GET est appropriée dans la mesure où nous voulons simplement récupérer quelques données.
- L'URL où adresser notre requête — il s'agit de l'URL du fichier JSON dont nous parlions tout à l'heure.
Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur 'json' à responseType, signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode send() : +
Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur 'json' à responseType, signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode send() :
```
request.responseType = 'json';
 request.send();
```

Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété response) dans la variable superHeroes ; cette variable contiendra désormais l'objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le <header> avec les données correspondantes tandis que la seconde créera une carte d'identité pour chaque héros de l'équipe et l'ajoutera dans la <section>.

Nous avons encapsulé ce code dans un gestionnaire d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir onload) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété request.response sera disponible au moment où nous essayerons d'en faire quelque chose.

Remplissage de l'en-tête

Nous avons appelé le paramètre de cette fonction jsonObj afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d'abord un élément {{HTMLElement("h1")}} à l'aide de createElement(), nous fixons son textContent à la valeur de la propriété squadName de l'objet, puis nous l'ajoutons à l'en-tête en utilisant appendChild(). Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère homeTown et la propriété formed de l'objet.

Création des fiches des héros

Note : Si vous ne parvenez pas à faire fonctionner l'exemple, consultez notre code source heroes-finished.html (ou regardez-le en action.)

Note : Si vous ne parvenez pas à faire fonctionner l'exemple, consultez notre code source heroes-finished.html (ou regardez-le en action.)

Note : Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier superheroes.json dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article Les bases du JavaScript orienté objet pour obtenir plus de détails sur la notation avec un point et avec une accolade.

Note : Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier superheroes.json dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article Les bases du JavaScript orienté objet pour obtenir plus de détails sur la notation avec un point et avec une accolade.

Conversion entre objets et textes

Mais on n'a pas toujours cette chance — il est possible de recevoir la réponse JSON sous la forme d'une chaîne de caractères et il faut alors la convertir en objet. À l'inverse, lorsqu'on veut envoyer un objet JavaScript à travers le réseau il faut au préalable le convertir en JSON (une chaîne de caractères). Heureusement, ces deux problèmes sont tellement communs dans le développement web qu'un objet JSON interne a été ajouté aux navigateurs depuis longtemps, contenant les deux méthodes suivantes :

parse() qui accepte un objet JSON sous la forme d'une chaîne de caractères en paramètre et renvoie l'objet JavaScript correspondant.
stringify() qui accepte un objet JavaScript en paramètre et renvoie son équivalent sous la forme d'une chaîne de caractères JSON.
parse() qui accepte un objet JSON sous la forme d'une chaîne de caractères en paramètre et renvoie l'objet JavaScript correspondant.
stringify() qui accepte un objet JavaScript en paramètre et renvoie son équivalent sous la forme d'une chaîne de caractères JSON.

Vous pouvez voir la première méthode en action dans notre exemple heroes-finished-json-parse.html (voir le code source) — C'est la même chose que pour l'exemple que nous avons écrit un peu plus tôt, à ceci près qu'on indique à la requête XHR de renvoyer la réponse en JSON sous forme de texte avant d'utiliser la méthode parse() pour la convertir en objet JavaScript. La partie du code correspondante se trouve ci-dessous :

Voir aussi

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

Après avoir parcouru les fondamentaux, nous allons aborder en détail le JavaScript orienté objet (JSOO). Cet article présente une approche simple de la programmation orientée objet (POO) et détaille comment JavaScript émule des classes objet au travers des méthodes constructeur et comment instancier ces objets.

Objectif :
Prérequis :	Vocabulaire de base d'informatique, connaissances de base en HTML et CSS, connaissances de base en JavaScript (voir Premiers pas et Les blocs) et en Javascript orienté objets (voir Introduction aux objets).	Vocabulaire de base d'informatique, connaissances de base en HTML et CSS, connaissances de base en JavaScript (voir Premiers pas et Les blocs) et en Javascript orienté objets (voir Introduction aux objets).

Pour débuter, nous pouvons réutiliser l'objet Personne que nous avons créé dans notre premier article, il définit un ensemble de données et actions d'une personne. Il existe tout un tas de choses que nous pourrions savoir au sujet d'une personne (son adresse, sa taille, sa pointure, son ADN, son numéro de passeport, ses traits particuliers significatifs… ). En l'occurrence, nous souhaitons uniquement afficher son nom, son âge, ses passions, écrire une petite introduction à son sujet en utilisant ces données et lui apprendre à se présenter. On parle alors d'abstraction : créer un modèle simplifié de quelque chose de complexe mais qui ne contient que les aspects qui nous intéressent. Il sera alors plus simple de manipuler ce modèle objet simplifié dans le cadre de notre programme.

Classe Personne avec attributs élémentaires

Dans plusieurs langages de POO, la définition d'un objet est appelé une classe (comme on le verra ci-après, JavaScript se base sur un mécanisme et une terminologie différente). En réalité ce n'est pas vraiment un objet mais plutôt un modèle qui définit les propriétés que notre objet doit avoir.

À partir de notre classe, nous pouvons créer des objets, on parle alors d'instancier des objets, une classe objet a alors une instance. Il s'agit d'objets qui contiennent les données et attributs définis dans une classe. À partir de notre classe Personne, nous pouvons modéliser des personnes réelles :

Instantiation on a Personn Class for JS examples (fr)

Lorsque l'instance d'un objet est créée, on appelle la fonction constructeur de la classe pour la créer. On parle d'instanciation d'un objet — l'objet ainsi créé est instancié à partir de la classe.

Pour notre exemple, nous n'allons pas nous contenter de personnes génériques — nous pourrions utiliser des professeurs, des étudiants, qui sont des types un peu plus spécifiques de personnes. En POO, il est possible de créer de nouvelles classes à partir d'autres classes — ces classes filles nouvellement créées peuvent hériter des propriétés et des attributs de leur classe mère. Il est donc possible d'avoir des attributs partagés à l'ensemble des classes plutôt que de les dupliquer. Si besoin, il est possible d'ajouter des fonctions et attributs spécifiques sur chaque classe fille.

Inheritance principle with French text for JS example

Cela s'avère très utile puisque les étudiants et les professeurs se ressemblent sur de nombreux aspects : ils ont un nom, un genre, un âge, il est donc utile de ne définir ces attributs qu'une seule fois. Il est aussi possible de redéfinir le même attribut dans différentes classes étant donné que l'attribut appartiendra à chaque fois à un nom d'espace différent. On pourra ainsi avoir différentes formes de salutations : « Hey, je m'appelle [prénom] » pour les étudiants ( « Hey je m'appelle Sam » ) tandis que les professeurs pourront dire quelque chose d'un peu plus formel comme « Bonjour, mon nom est [Titre][Nom] et j'enseigne [matière] » par exemple « Bonjour mon nom est M. Griffiths et j'enseigne la chimie ».

Note : On parle de polymorphisme, lorsque des objets réutilisent la même propriété, mais c'est juste pour info, vous embêtez pas.

Note : On parle de polymorphisme, lorsque des objets réutilisent la même propriété, mais c'est juste pour info, vous embêtez pas.

Une fois la classe fille créée il est alors possible de l'instancier et de créer des objets. Par exemple :

Professor instantiation example for JS fr

Dans la suite de l'article, nous nous intéresserons à la mise en œuvre de la programmation orientée objet (POO) au sein de JavaScript.

Lorsqu'un objet est instancié à partir d'une fonction constructeur, les fonctions de la classe ne sont pas copiées directement dans l'objet comme dans la plupart des langages orientés objet (OO). En JavaScript, les fonctions sont liées grâce à une chaîne de référence appelée chaîne prototype (voir Prototypes Objet). Il ne s'agit donc pas d'une véritable instanciation au sens strict puisque JavaScript utilise un mécanisme différent pour partager des fonctionnalités entre les objets.

Note : Ne pas être un "langage classique de POO" n'est pas nécessairement un défaut. Comme nous le mentionnions au début de l'article, la POO peut très vite devenir compliquée et JavaScript, grâce à ses différences parvient à utiliser certains concepts avancés tout en restant abordable.

Note : Ne pas être un "langage classique de POO" n'est pas nécessairement un défaut. Comme nous le mentionnions au début de l'article, la POO peut très vite devenir compliquée et JavaScript, grâce à ses différences parvient à utiliser certains concepts avancés tout en restant abordable.

Voyons comment créer des classes via les constructeurs et les utiliser pour instancier des objets en JavaScript. Nous allons commencer par faire une copie locale du fichier oojs.html que nous avons vu dans notre premier article sur les objets.

Le constructeur est l'équivalent JavaScript d'une classe. Il possède l'ensemble des fonctionnalités d'une fonction, cependant il ne renvoie rien et ne crée pas d'objet explicitement. Il se contente de définir les propriétés et les méthodes associées. Il y a aussi l'utilisation du mot-clé this, ce mot-clé sert au sein d'une instance qui sera créée à y faire référence, ainsi l'attribut nom sera, pour l'instance, égal au nom passé en argument de la fonction constructrice, la méthode salutation() retournera elle aussi le nom passé en argument de la fonction constructrice.

Note : Les fonctions de type constructeur commencent généralement par une majuscule. Cette convention d'écriture permet de repérer les constructeurs plus facilement dans le code.

Note : Les fonctions de type constructeur commencent généralement par une majuscule. Cette convention d'écriture permet de repérer les constructeurs plus facilement dans le code.

Comment pouvons-nous utiliser un constructeur ?

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir oojs-class-finished.html (vous pouvez aussi jeter un œil à la démo)

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir oojs-class-finished.html (vous pouvez aussi jeter un œil à la démo)

Exercices

D'autre part, il y a quelques améliorations possibles pour notre méthode bio(). En effet elle affiche systématiquement le pronom 'il', même si votre personne est une femme ou bien préfère se définir par un autre genre. De plus, la biographie n'inclut que deux passions, même s'il y en a plus dans la liste. Essayez d'améliorer cette méthode. Vous pourrez mettre votre code à l'intérieur du constructeur (vous aurez probablement besoin de quelques structures conditionnelles et d'une boucle). Réflechissez à la syntaxe des phrases qui devra s'adapter en fonction du genre et du nombre de passions listées.

Note: Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt GitHub (la démo) —tentez d'abord l'aventure avant d'aller regarder la réponse !

Note : Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt GitHub (la démo) —tentez d'abord l'aventure avant d'aller regarder la réponse !

D'autres manières d'instancier des objets

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.

Pré-requis :

Dans cet article, nous écrirons une démo classique de "balles bondissantes", pour vous montrer à quel point les objets peuvent être utiles en JavaScript. Nos petites balles bondiront partout sur notre écran et changeront de couleurs lorsqu'elles se toucheront. L'exemple finalisé ressemblera un peu à ceci :

Cet exemple utilise l'API Canvas pour dessiner les balles sur l'écran, et l'API requestAnimationFrame pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation détection de collision).

Pour commencer, faites des copies locales de nos fichiers index.html, style.css, et main.js. Ces fichiers contiennent respectivement :

Ce script prend une référence à l'élément <canvas> et ensuite invoque la méthode getContext() sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante (ctx) est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier.

Après, nous configurons les variables width (largeur) et height(hauteur), et la largeur et la hauteur de l'élément canvas (représentés par les propriétés canvas.width et canvas.height ) afin qu'elles soient identiques à la fenêtre du navigateur (la surface sur laquelle apparaît la page web— Ceci peut être tiré des propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}).

En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur l'écran en appelant une série de membres du contexte 2D du canvas que nous avons défini plus tôt (ctx). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose :

Premièrement, nous utilisons beginPath() pour spécifier que nous voulons dessiner une forme sur le papier.
Ensuite, nous utilisons fillStyle pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété color de notre balle.
Après, nous utilisons la méthode arc() pour tracer une forme en arc sur le papier. Ses paramètres sont : +
Premièrement, nous utilisons beginPath() pour spécifier que nous voulons dessiner une forme sur le papier.
Ensuite, nous utilisons fillStyle pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété color de notre balle.
Après, nous utilisons la méthode arc() pour tracer une forme en arc sur le papier. Ses paramètres sont :
- Les positions x et y du centre de l'arc — nous specifions donc les propriétés x et y de notre balle.
- Le rayon de l'arc — nous specifions la propriété size de notre balle.
- Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degrés et 2 * PI qui est l'équivalent de 360 degrés en radians (malheureusement vous êtes obligés de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement 1 * PI, vous auriez eu un demi-cercle (180 degrés).
En dernière position nous utilisons la méthode fill() qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec beginPath(), et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec fillStyle.
En dernière position nous utilisons la méthode fill() qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec beginPath(), et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec fillStyle.

Vous pouvez déjà commencer à tester votre objet.

Les deux dernières lignes ajoutent la valeur velX à la coordonnée x et la valeur velY à la coordonnée y — la balle est en effet mise en mouvement chaque fois que cette méthode est invoquée.

Cela suffira pour l'instant, passons à l'animation !

Animer la balle

Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer.

Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant : +
Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant :
```
let balls = [];
 
```
@@ -213,8 +213,8 @@ testBall.draw() balls.push(ball); } - Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires.
Ajoutez ce qui suit au bas de votre code maintenant : + Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires.
Ajoutez ce qui suit au bas de votre code maintenant :
```
function loop() {
   ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
   ctx.fillRect(0, 0, width, height);
@@ -230,10 +230,10 @@ testBall.draw()
```
Notre fonction loop() fonctionne comme suit :
- On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant fillRect() (les quatre paramètres fournissent une coordonnée de départ et une largeur et une hauteur pour le rectangle dessiné ). Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée. Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent ! La couleur du remplissage est définie sur semi-transparent, rgba (0,0,0,.25), pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent. Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout. Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a.
- On crée un nouvel objet Ball() avec des attributs générées aléatoirement grâce à la fonction random(), puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans balls.length <25 pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !
- Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction draw() et update() pour dessiner à l'écran chaque balle et faire les mise à jour de chaque attribut vant le prochain rafraîchissement.
- Exécute à nouveau la fonction à l'aide de la méthode requestAnimationFrame() — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.
- On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant fillRect() (les quatre paramètres fournissent une coordonnée de départ et une largeur et une hauteur pour le rectangle dessiné ). Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée. Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent ! La couleur du remplissage est définie sur semi-transparent, rgba (0,0,0,.25), pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent. Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout. Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a.
- On crée un nouvel objet Ball() avec des attributs générées aléatoirement grâce à la fonction random(), puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans balls.length <25 pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !
- Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction draw() et update() pour dessiner à l'écran chaque balle et faire les mise à jour de chaque attribut vant le prochain rafraîchissement.
- Exécute à nouveau la fonction à l'aide de la méthode requestAnimationFrame() — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.
Finallement mais non moins important, ajoutez la ligne suivante au bas de votre code — nous devons appeler la fonction une fois pour démarrer l'animation. @@ -241,14 +241,14 @@ testBall.draw()

Voilà pour les bases — essayez d'enregistrer et de rafraîchir pour tester vos balles bondissantes!

Ajouter la détection de collision

Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notre programme, afin que nos balles sachent quand elles ont frappé une autre balle.

Tout d'abord, ajoutez la définition de méthode suivante ci-dessous où vous avez défini la méthode update() (c'est-à-dire le bloc Ball.prototype.update). +
Tout d'abord, ajoutez la définition de méthode suivante ci-dessous où vous avez défini la méthode update() (c'est-à-dire le bloc Ball.prototype.update).
```
Ball.prototype.collisionDetect = function() {
   for (let j = 0; j < balls.length; j++) {
@@ -264,40 +264,40 @@ testBall.draw()
```
} } -
Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas :
+
Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas :
- Pour chaque balle b, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec b. Pour ce faire, on inspecte toutes les balles du tableau balls[] dans une boucle for.
- Immédiatement à l'intérieur de cette boucle for, une instruction if vérifie si la balle courante b' , inspectée dans la boucle, n'est égale à la balle b. Le code correspondant est : b'!== b. En effet, nous ne voulons pas vérifier si une balle b est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle b—dont la méthode collisionDetect() est invoquée—est distincte de la balle b' inspectée dans la boucle. Ainsi le bloc de code venant après l'instruction if ne s'exécutera que si les balles b et b' ne sont pas identiques.
- Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans 2D collision detection.
- Si une collision est détectée, le code à l'intérieur de l'instruction interne if est exécuté. Dans ce cas, nous définissons simplement la propriété color des deux cercles à une nouvelle couleur aléatoire. Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre. Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que PhysicsJS, matter.js, Phaser, etc.
- Pour chaque balle b, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec b. Pour ce faire, on inspecte toutes les balles du tableau balls[] dans une boucle for.
- Immédiatement à l'intérieur de cette boucle for, une instruction if vérifie si la balle courante b' , inspectée dans la boucle, n'est égale à la balle b. Le code correspondant est : b'!== b. En effet, nous ne voulons pas vérifier si une balle b est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle b—dont la méthode collisionDetect() est invoquée—est distincte de la balle b' inspectée dans la boucle. Ainsi le bloc de code venant après l'instruction if ne s'exécutera que si les balles b et b' ne sont pas identiques.
- Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans 2D collision detection.
- Si une collision est détectée, le code à l'intérieur de l'instruction interne if est exécuté. Dans ce cas, nous définissons simplement la propriété color des deux cercles à une nouvelle couleur aléatoire. Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre. Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que PhysicsJS, matter.js, Phaser, etc.
Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous juste après la ligne balls[i].update();: +
Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous juste après la ligne balls[i].update();:
```
balls[i].collisionDetect();
```
Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision !
Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision !

Note : Si vous avez des difficultés à faire fonctionner cet exemple, essayez de comparer votre code JavaScript avec notre version finale (voir également la démo en ligne).

Note : Si vous avez des difficultés à faire fonctionner cet exemple, essayez de comparer votre code JavaScript avec notre version finale (voir également la démo en ligne).

Résumé

Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module ! Nous espérons vous avoir offert un aperçu utile de l'utilisation des objets.
-
- C'est tout pour les articles sur les objets — il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets.

C'est tout pour les articles sur les objets — il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets.

Voir aussi

Didacticiel sur canvas — un guide pour débutants sur l'utilisation de canvas 2D.
requestAnimationFrame()
Détection de collision 2D
Détection de collision 3D
Jeu d'évasion 2D utilisant du JavaScript pu —un excellent tutoriel pour débutant montrant comment construire un jeu en 2D.
Jeu d'évasion 2D utilisant phaser — explique les bases de la construction d'un jeu 2D en utilisant une bibliothèque de jeux JavaScript.
Didacticiel sur canvas — un guide pour débutants sur l'utilisation de canvas 2D.
requestAnimationFrame()
Détection de collision 2D
Détection de collision 3D
Jeu d'évasion 2D utilisant du JavaScript pu —un excellent tutoriel pour débutant montrant comment construire un jeu en 2D.
Jeu d'évasion 2D utilisant phaser — explique les bases de la construction d'un jeu 2D en utilisant une bibliothèque de jeux JavaScript.

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

Dans ce module

{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}

Les prototypes sont un mécanisme au sein de JavaScript qui permettent aux objets JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage différent de celui rencontré dans les langages de programmation objets habituels. Dans cet article, nous allons aborder ces différences, nous allons aussi voir comment la chaîne de prototypage fonctionne. Nous verrons aussi comment les propriétés prototypes peuvent être utilisées afin d'ajouter des méthodes à des constructeurs existants.

Pré-requis :

Connaissance basique de l'informatique, une compréhension basique du HTML et du CSS, une familiarité avec les bases du JavaScript (voir Premiers pas et Les blocs de construction) et les bases de la programmation objet en JavaScript (voir Introduction aux objets).

En programmation orientée objet classique, les classes sont définies, puis lorsque des instances sont créées, l'ensemble des attributs et des méthodes sont copiés dans l'instance. En JavaScript en revanche, tout n'est pas copié : on établit un lien entre l'objet instancié et son constructeur (c'est un lien dans la chaîne de prototypage). On détermine alors les méthodes et les attributs en remontant la chaîne.

Note: Il faut bien comprendre qu'il y a une différence entre la notion de prototype d'un objet (qu'on obtient via Object.getPrototypeOf(obj), ou via la propriété dépréciée __proto__ ) et l' attribut prototyped'une fonction constructrice. La première concerne chaque instance, le dernier existe uniquement sur une fonction constructrice. Cela dit, Object.getPrototypeOf(new Foobar()) renvoie au même object queFoobar.prototype.

Prenons un exemple afin de rendre cela un peu plus clair.

Si vous entrez « personne1 » dans votre console JavaScript, vous devriez voir que le navigateur essaie de faire de l'auto-complétion avec les attributs de cet objet.

Dans cette liste vous verrez les membres définis au niveau du constructeur de personne1 qui n'est autre Personne(). On y trouve les valeurs suivantes : nom, age, genre, interets, bio, et salutation. On peut voir aussi d'autres membres tels que watch, valueOf … Ces membres particuliers sont définis au niveau du prototype objet du constructeur Personne(), qui est Object. On voit ici une mise en œuvre de la chaine de prototypage.

Que peut-il bien se passer lorsque l'on tente d'appeler une méthode définie pour Object en l'appliquant à Personne1 ? Par exemple :

Note : Encore une fois, il est important d'insister sur le fait que les méthodes et attributs ne sont pas copiés d'un objet à un autre, mais qu'on y accède à chaque fois en remontant la chaine de prototypage.

Note : Encore une fois, il est important d'insister sur le fait que les méthodes et attributs ne sont pas copiés d'un objet à un autre, mais qu'on y accède à chaque fois en remontant la chaine de prototypage.

Note : Il n'existe pas de façon officielle d'accéder directement au prototype d'un objet donné. Les « liens » entre les éléments de la chaine sont définis au sein d'une propriété interne appelée [[prototype]] définie dans la spécification de JavaScript. (voir ECMAScript). Néanmoins, la plupart des navigateurs modernes implémentent l'attribut __proto__ (deux tirets soulignés ou underscore de chaque côté) qui contient le prototype objet d'un objet. Vous pouvez tenter personne1.__proto__ et personne1.__proto__.__proto__ pour voir à quoi ressemble une chaine de prototypage dans la console !

Note : Il n'existe pas de façon officielle d'accéder directement au prototype d'un objet donné. Les « liens » entre les éléments de la chaine sont définis au sein d'une propriété interne appelée [[prototype]] définie dans la spécification de JavaScript. (voir ECMAScript). Néanmoins, la plupart des navigateurs modernes implémentent l'attribut __proto__ (deux tirets soulignés ou underscore de chaque côté) qui contient le prototype objet d'un objet. Vous pouvez tenter personne1.__proto__ et personne1.__proto__.__proto__ pour voir à quoi ressemble une chaine de prototypage dans la console !

L'attribut prototype : là où l'on définit les éléments héritables

Object.is(), Object.keys(), ainsi que d'autres membres non définis dans prototype ne sont pas hérités par les instances d'objet ou les objets qui héritent de Object.prototype. Ces méthodes et attributs sont disponibles uniquement pour le constructeur Object().

Note : Ça paraît bizarre, d'avoir une méthode définie au sein d'un constructeur qui est lui même une fonction non ? Et bien, une fonction est aussi un type d'objet — vous pouvez jeter un œil à la documentation du constructeur Function() si vous ne nous croyez pas.

Note : Ça paraît bizarre, d'avoir une méthode définie au sein d'un constructeur qui est lui même une fonction non ? Et bien, une fonction est aussi un type d'objet — vous pouvez jeter un œil à la documentation du constructeur Function() si vous ne nous croyez pas.

maChaine possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que split(), indexOf(), replace()…

Important : L'attribut prototype est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via __proto__). L'attribut prototype est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.

Attention : L'attribut prototype est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via __proto__). L'attribut prototype est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.

Revenons sur create()

Même si nous l'avons déclaré après, la méthode aurevoir() est disponible pour l'instance personne1. Son existence a mis à jour dynamiquement les méthodes de l'instance. Cela démontre ce que nous expliquions plus haut au sujet de la chaine de prototypage : le navigateur la parcourt de manière ascendante. Ainsi, il est possible de trouver directement les méthodes qui n'ont pas été définies au niveau de l'instance, plutôt que de les recopier au sein de l'instance. Cela nous permet de bénéficier d'un système extensible de manière simple et élégante.

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez jeter un œil au notre (oojs-class-prototype.html, voir la démo)

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez jeter un œil au notre (oojs-class-prototype.html, voir la démo)

Vous verrez peu d'attributs définis au sein de l'attribut prototype, pour la simple et bonne raison que c'est assez peu pratique. Vous pourriez avoir :

Pré-requis :

Gérer les ralentissements potentiellement causés par async/await

Vous cherchez à devenir une développeuse ou un développeur web front-end ?

Guides

JavaScript asynchrone

La file d'attente des événements

Apprentissage actif : rendez tout asynchrone !

Conclusion

Le problème des fonctions de rappel

Réagir à un échec

Enchaîner les blocs

Récapitulatif de la terminologie des promesses

Construire vos propres promesses personnalisées

Rejeter une promesse personnalisée

Un exemple plus concret

setInterval()

Choses à garder à l'esprit concernant setTimeout() et setInterval()

Effacer un appel de requestAnimationFrame()

Ralentissement d'une animation requestAnimationFrame()

Conclusion

Apprentissage actif : Construisons une fonction

La fonction de base

Conclusion

Instruction if ... else

else if

Une note sur les opérateurs de comparaison

Un exemple de switch

Opérateur ternaire

Apprentissage actif : un calendrier simple

Playable code

Activité : plus de choix de couleurs !

Activité : plus de choix de couleurs

Playable code 2

Conclusion

Voir aussi

Dans ce module

Une série d'événements heureux

Un exemple simple

Ce ne sont pas que des pages web

De quelle manière utiliser les événements Web ?

Les propriétés du gestionnaire d'événement

Les gestionnaires d'événements en ligne : ne les utilisez pas !

addEventListener() et removeEventListener()

Quel mécanisme devrais-je utiliser ?

D'autres concepts liés aux événements

L'objet événement

Résultat

Hidden example

Éviter le comportement par défaut

Le bouillonnement et la capture

Hidden video example

Explication du bouillonnement et de la capture

Régler le problème avec stopPropagation()

Délégation d'événement

Conclusion

Voir aussi

Dans ce module

Les fonctions intégrées du navigateur

Fonctions versus méthodes

Fonctions personnalisées

Invoquer des fonctions

La portée des fonctions et les conflits.

Des fonctions à l'intérieur de fonctions

Conclusion

Voir aussi

Dans ce module

Résumé du projet

Dans ce module

Prérequis

Guides

Hidden code

Exemple

Principe de boucle

La boucle standard

Sortie

Hidden code 2

Quitter une boucle avec break

Hidden code 3

Résultat

Passer des itérations avec continue

Hidden code 4

Apprentissage actif : un calendrier simple

Activité : plus de choix de couleurs !

Activité : plus de choix de couleurs

Activité : affichons les produits !

Activité : affichons les produits

Activité : Top 5 des recherches

Apprentissage actif : dimensionner une boîte à canevas