From e26d24940b2234a1a5e63b19d19d298bf36354e2 Mon Sep 17 00:00:00 2001 From: julieng Date: Sun, 14 Nov 2021 14:30:32 +0100 Subject: move *.html to *.md --- .../first_steps/a_first_splash/index.html | 699 --------------------- .../javascript/first_steps/a_first_splash/index.md | 699 +++++++++++++++++++++ .../learn/javascript/first_steps/arrays/index.html | 517 --------------- .../learn/javascript/first_steps/arrays/index.md | 517 +++++++++++++++ files/fr/learn/javascript/first_steps/index.html | 70 --- files/fr/learn/javascript/first_steps/index.md | 70 +++ .../learn/javascript/first_steps/math/index.html | 450 ------------- .../fr/learn/javascript/first_steps/math/index.md | 450 +++++++++++++ .../first_steps/silly_story_generator/index.html | 143 ----- .../first_steps/silly_story_generator/index.md | 143 +++++ .../javascript/first_steps/strings/index.html | 264 -------- .../learn/javascript/first_steps/strings/index.md | 264 ++++++++ .../test_your_skills_colon__arrays/index.html | 93 --- .../test_your_skills_colon__arrays/index.md | 93 +++ .../first_steps/useful_string_methods/index.html | 461 -------------- .../first_steps/useful_string_methods/index.md | 461 ++++++++++++++ .../javascript/first_steps/variables/index.html | 418 ------------ .../javascript/first_steps/variables/index.md | 418 ++++++++++++ .../first_steps/what_is_javascript/index.html | 406 ------------ .../first_steps/what_is_javascript/index.md | 406 ++++++++++++ .../first_steps/what_went_wrong/index.html | 256 -------- .../first_steps/what_went_wrong/index.md | 256 ++++++++ 22 files changed, 3777 insertions(+), 3777 deletions(-) delete mode 100644 files/fr/learn/javascript/first_steps/a_first_splash/index.html create mode 100644 files/fr/learn/javascript/first_steps/a_first_splash/index.md delete mode 100644 files/fr/learn/javascript/first_steps/arrays/index.html create mode 100644 files/fr/learn/javascript/first_steps/arrays/index.md delete mode 100644 files/fr/learn/javascript/first_steps/index.html create mode 100644 files/fr/learn/javascript/first_steps/index.md delete mode 100644 files/fr/learn/javascript/first_steps/math/index.html create mode 100644 files/fr/learn/javascript/first_steps/math/index.md delete mode 100644 files/fr/learn/javascript/first_steps/silly_story_generator/index.html create mode 100644 files/fr/learn/javascript/first_steps/silly_story_generator/index.md delete mode 100644 files/fr/learn/javascript/first_steps/strings/index.html create mode 100644 files/fr/learn/javascript/first_steps/strings/index.md delete mode 100644 files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html create mode 100644 files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md delete mode 100644 files/fr/learn/javascript/first_steps/useful_string_methods/index.html create mode 100644 files/fr/learn/javascript/first_steps/useful_string_methods/index.md delete mode 100644 files/fr/learn/javascript/first_steps/variables/index.html create mode 100644 files/fr/learn/javascript/first_steps/variables/index.md delete mode 100644 files/fr/learn/javascript/first_steps/what_is_javascript/index.html create mode 100644 files/fr/learn/javascript/first_steps/what_is_javascript/index.md delete mode 100644 files/fr/learn/javascript/first_steps/what_went_wrong/index.html create mode 100644 files/fr/learn/javascript/first_steps/what_went_wrong/index.md (limited to 'files/fr/learn/javascript/first_steps') diff --git a/files/fr/learn/javascript/first_steps/a_first_splash/index.html b/files/fr/learn/javascript/first_steps/a_first_splash/index.html deleted file mode 100644 index 40c91d2fa4..0000000000 --- a/files/fr/learn/javascript/first_steps/a_first_splash/index.html +++ /dev/null @@ -1,699 +0,0 @@ ---- -title: Notre premier code JavaScript -slug: Learn/JavaScript/First_steps/A_first_splash -tags: - - Apprendre - - Article - - CodingScripting - - Débutant - - Fonctions - - JavaScript - - Objets - - Opérateurs - - Variables - - structures conditionnelles -translation_of: Learn/JavaScript/First_steps/A_first_splash ---- -
{{LearnSidebar}}
- -
{{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 :Une culture informatique basique, et des notions de HTML et CSS.
Objectif :Avoir une première expérience d'écriture de JavaScript et comprendre les implications de l'écriture d'un programme en JavaScript.
- -

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.

-
- -

Penser comme un programmeur

- -

Une des choses les plus difficiles à apprendre en programmation n'est pas la syntaxe, mais comment l'appliquer afin de résoudre un problème réel. Vous devez commencer à penser comme un programmeur — ce qui implique généralement d'examiner les tâches que votre programme doit effectuer, de déterminer les fonctionnalités du code nécessaires à leurs réalisations et comment les faire fonctionner ensemble.

- -

Cela requiert un mélange de travail acharné, d'expérience avec la syntaxe de programmation (de manière générale) et surtout de la pratique — ainsi qu'un peu de créativité. Plus vous allez coder, plus vous aller vous améliorer. On ne peut pas garantir que vous aurez un « cerveau de développeur » en 5 minutes, mais nous allons vous donner plein d'occasions pour pratiquer cette façon de penser, tout au long du cours.

- -

Maintenant que vous avez cela en tête, regardons l'exemple que nous allons construire dans cet article et comment le découper en plusieurs tâches qui ont du sens.

- -

Exemple — Jeu : Guess the number

- -

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

- - - - -

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

- -
-

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 :

- -
    -
  1. Générer un nombre aléatoire entre 1 et 100.
    2. -
  2. Stocker le nombre de tours déjà joués. Commencer par 1.
    3. -
  3. Fournir au joueur le moyen de saisir un nombre.
    4. -
  4. Stocker l'ensemble des propositions de nombres pour que le joueur puisse les consulter.
    5. -
  5. Vérifier si le nombre saisi par le joueur est correct.
    6. -
  6. S'il est correct : -
      -
    1. Afficher un message de félicitations.
      2. -
    2. Empêcher que le joueur saisisse de nouveau un nombre.
      3. -
    3. Afficher un contrôle pour que le joueur puisse rejouer.
      4. -
    -
    7. -
  7. S'il est faux et que le joueur a encore des tours à jouer : -
      -
    1. Informer le joueur que sa proposition de nombre est fausse.
      2. -
    2. Lui permettre d'entrer une nouvelle proposition de nombre.
      3. -
    3. Incrémenter le nombre de tours de 1.
      4. -
    -
    8. -
  8. S'il est faux et que le joueur n'a plus de tours à jouer : -
      -
    1. Informer le joueur qu'il a perdu et que la partie est finie.
      2. -
    2. Empêcher que le joueur saisisse de nouveau un nombre.
      3. -
    3. Afficher un contrôle pour que le joueur puisse rejouer.
      4. -
    -
    9. -
  9. 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.
    10. -
- -

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

- -

Pour commencer ce didacticiel, faites une copie locale du fichier number-guessing-game-start.html  (à voir directement ici). Ouvrez-le dans votre éditeur de code et votre navigateur web. Pour l'instant, vous ne verrez qu'un titre, un paragraphe d'instructions et un formulaire pour entrer une estimation, mais le formulaire est pour l'instant inactif.

- -

L'endroit où nous allons ajouter tout notre code se trouve dans l'élément {{htmlelement ("script")}} au bas du code HTML :

- -
<script>
-
-  // Votre code JavaScript se place ici
-
-</script>
-
- -

Ajouter des variables pour stocker les données

- -

Commençons. Tout d'abord, ajoutez les lignes suivantes dans l'élément {{htmlelement ("script")}} :

- -
let randomNumber = Math.floor(Math.random() * 100) + 1;
-
-let guesses = document.querySelector('.guesses');
-let lastResult = document.querySelector('.lastResult');
-let lowOrHi = document.querySelector('.lowOrHi');
-
-let guessSubmit = document.querySelector('.guessSubmit');
-let guessField = document.querySelector('.guessField');
-
-let guessCount = 1;
-let resetButton;
- -

Cette partie de code définit les variables nécessaires au stockage des données que notre programme utilisera. Les variables sont essentiellement des conteneurs de valeurs (tels que des nombres ou des chaînes de texte). Une variable se crée avec le mot-clé let suivi du nom de la variable. Vous pouvez ensuite attribuer une valeur à la variable avec le signe égal (=) suivi de la valeur que vous voulez lui donner.

- -

Dans notre exemple :

- - - -
-

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

-
- -

Fonctions

- -

Ajoutez maintenant ce qui suit dans votre code JavaScript :

- -
function checkGuess() {
-  alert('Je suis un espace réservé');
-}
- -

Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une fois et exécuter encore et encore, pour éviter de réécrire le même code tout le temps. C'est vraiment utile. Il y a plusieurs façons de définir les fonctions, mais pour l'instant nous allons nous concentrer sur un type simple. Ici, nous avons défini une fonction en utilisant le mot-clé function accompagné de son nom suivi de parenthèses. Ensuite, nous avons mis deux accolades ({ }). Dans ces accolades est placé tout le code à exécuter à chaque appel de la fonction.

- -

Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses.

- -

Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les outils de développement et la console JavaScript et entrez la ligne suivante :

- -
checkGuess();
- -

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.

-
- -

Opérateurs

- -

Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre.

- -

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 :

- - - -

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

- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNameExample
+Addition6 + 9
-Soustraction20 - 15
*Multiplication3 * 7
/Division10 / 5
- -

L'opérateur + peut aussi s'utiliser pour unir des chaînes de caractères (en informatique, on dit concaténer). Entrez les lignes suivantes, une par une :

- -
let name = 'Bingo';
-name;
-let hello = ' dit bonjour !';
-hello;
-let greeting = name + hello;
-greeting;
- -

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 !';
- -

Cela équivaut à :

- -
name = name + ' dit bonjour !';
- -

Lorsque nous exécutons des tests vrai/faux (par exemple, dans des conditions — voir {{anch ("Structures conditionnelles", "ci-dessous")}}, nous utilisons des opérateurs de comparaison, par exemple :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNameExample
===Égalité stricte (est-ce exactement identique ?)5 === 2 + 4
!==Non égalité (est-ce différent ?)'Chris' !== 'Ch' + 'ris'
<Inférieur à10 < 6
>Supérieur à10 > 20
- -

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(){
-  let userGuess = Number(guessField.value);
-  if (guessCount === 1) {
-    guesses.textContent = 'Propositions précédentes : ';
-  }
-  guesses.textContent += userGuess + ' ';
-
-  if (userGuess === randomNumber) {
-    lastResult.textContent = 'Bravo, vous avez trouvé le nombre !';
-    lastResult.style.backgroundColor = 'green';
-    lowOrHi.textContent = '';
-    setGameOver();
-  } else if (guessCount === 10) {
-     lastResult.textContent = '!!! PERDU !!!';
-     setGameOver();
-  } else {
-     lastResult.textContent = 'Faux !';
-     lastResult.style.backgroundColor = 'red';
-     if (userGuess < randomNumber) {
-      lowOrHi.textContent = 'Le nombre saisi est trop petit !';
-     } else if (userGuess > randomNumber) {
-      lowOrHi.textContent = 'Le nombre saisi est trop grand !';
-     }
-  }
-
-  guessCount++;
-  guessField.value = '';
-  guessField.focus();
-}
-
- -

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

- - - - - -

Evénements

- -

À ce stade, nous avons bien implémentée la fonction checkGuess(), mais elle ne s'éxecutera pas parce que nous ne l'avons pas encore appelé.
- Idéalement, nous voulons l'appeler lorsque le bouton Soumettre est cliqué, et pour ce faire, nous devons utiliser un événement. Les événements sont des actions qui se produisent dans le navigateur, comme le clic sur un bouton, le chargement d'une page ou la lecture d'une vidéo, en réponse à quoi nous pouvons exécuter des blocs de code. Les constructions qui écoutent l'événement en cours s'appellent des écouteurs d'événements, et les blocs de code exécutés en réponse à l'événement déclencheur sont appelés des gestionnaires d'évenements.
-
- Ajoutez la ligne suivante sous l'accolade de fermeture de votre fonction checkGuess() :

- -
guessSubmit.addEventListener('click', checkGuess);
- -

Ici, nous ajoutons un écouteur d'événement au bouton guessSubmit . C'est une méthode qui prend deux valeurs d'entrée (appelées arguments) - le type d'événement que nous écoutons (dans ce cas, click) qui est une chaîne de caractères, et le code que nous voulons exécuter quand l'événement se produit (dans ce cas, la fonction checkGuess()  — notez que nous n'avons pas besoin de spécifier les parenthèses lors de l'écriture dans {{domxref("EventTarget.addEventListener", "addEventListener()")}}).

- -

Essayez d'enregistrer et d'actualiser votre code, votre exemple devrait désormais fonctionner, jusqu'à un certain point. Maintenant, le seul problème est que si vous devinez la bonne réponse ou si vous n'avez plus de tours à jouer, le jeu "va se casser" parce que nous n'avons pas encore implémenté la fonction setGameOver() dont le rôle est de terminer proprement le jeu. Ajoutons maintenant le code manquant pour compléter notre exemple.

- -

Finir les fonctionnalités du jeu

- -

Pour définir la fonction setGameOver() à la fin de notre programme, ajoutez le code ci-dessous tout en bas :

- -
function setGameOver() {
-  guessField.disabled = true;
-  guessSubmit.disabled = true;
-  resetButton = document.createElement('button');
-  resetButton.textContent = 'Start new game';
-  document.body.appendChild(resetButton);
-  resetButton.addEventListener('click', resetGame);
-}
- - - -

Reste à définir cette fonction ! Ajoutez le code suivant, tout en bas de votre JavaScript :

- -
function resetGame() {
-  guessCount = 1;
-
-  let resetParas = document.querySelectorAll('.resultParas p');
-  for (let i = 0 ; i < resetParas.length ; i++) {
-    resetParas[i].textContent = '';
-  }
-
-  resetButton.parentNode.removeChild(resetButton);
-
-  guessField.disabled = false;
-  guessSubmit.disabled = false;
-  guessField.value = '';
-  guessField.focus();
-
-  lastResult.style.backgroundColor = 'white';
-
-  randomNumber = Math.floor(Math.random() * 100) + 1;
-}
- -

Ce bloc de code assez long réinitialise complètement les paramètres du jeu (le joueur pourra commencer une nouvelle partie). Il permet de  :

- - - -

À ce stade, vous devriez avoir un jeu (simple) entièrement fonctionnel — félicitations!

- -

Pour finir, c'est le moment de faire une synthèse sur  quelques caractéristiques importantes du code ;  vous les avez déjà vues, sans forcément vous en rendre compte.

- -

Boucles

- -

Dans le code précédent, une partie à examiner de plus près est la boucle for. Les boucles sont un concept très important dans la programmation, qui vous permet de continuer à exécuter un morceau de code encore et encore, jusqu'à ce qu'une certaine condition soit remplie.

- -

Pour commencer, allez sur votre console developpeur Javascript et entrez ce qui suit :

- -
for (let i = 1 ; i < 21 ; i++) { console.log(i) }
- -

Que s'est-il passé ? Les nombres de 1 à 20 s'affichent dans la console. C'est à cause de la boucle. Une boucle : for  prend trois valeurs d'entrée (arguments)

- -
    -
  1. Une valeur de départ : Dans ce cas, nous commençons un compte à 1, mais cela pourrait être n'importe quel nombre. Vous pouvez remplacer i par n'importe quel nom (ou presque...) , mais i est utilisé par convention car il est court et facile à retenir.
    2. -
  2. Une condition de fin : Ici, nous avons spécifié  i < 21 la boucle continuera jusqu'à ce que  i  ne soit plus inférieur à 21. Quand i atteindra ou dépassera 21, la boucle s'arrêtera.
    3. -
  3. Un incrémenteur :  Nous avons spécifié i++, ce qui signifie "ajouter 1 à i". La boucle sera exécutée une fois pour chaque valeur de i, jusqu'a ce que i atteigne une valeur de 21 (comme indiqué ci-dessus). Dans ce cas, nous imprimons simplement la valeur de i  sur la console à chaque itération en utilisant {{domxref("Console.log", "console.log()")}}.
    4. -
- -

Maintenant, regardons la boucle dans notre jeu de devinettes de nombres — ce qui suit peut être trouvé dans la fonction resetGame() :

- -
let resetParas = document.querySelectorAll('.resultParas p');
-for (let i = 0 ; i < resetParas.length ; i++) {
-  resetParas[i].textContent = '';
-}
- -

Ce code crée une variable contenant une liste de tous les paragraphes à l'intérieur de <div class="resultParas">  en utilisant la méthode {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, puis il passe dans la boucle et pour chacun d'entre eux supprime le contenu du texte.

- -

Une petite discussion sur les objets

- -

Voyons une dernière amélioration avant d'aborder cette discussion. Ajoutez la ligne suivante juste en dessous de let resetButton; ligne près du haut de votre JavaScript, puis enregistrez votre fichier :

- -
guessField.focus();
- -

Cette ligne utilise la méthode{{domxref("HTMLElement.focus", "focus()")}} pour placer automatiquement le curseur dans le champ texte {{htmlelement ("input")}} dès le chargement de la page, permettant à l'utilisateur de commencer à taper sa première proposition de suite sans avoir à cliquer préalablement dans le champ. Ce n'est qu'un petit ajout, mais cela améliore la convivialité  en donnant à l'utilisateur une bonne idée visuelle de ce qu'il doit faire pour jouer.

- -

Analysons ce qui se passe ici un peu plus en détail. En JavaScript, tout est objet. Un objet JavaScript possède des propriétés, chacune définissant une caractéristique. Vous pouvez créer vos propres objets, mais cela est une notion assez avancée, nous ne la couvrirons que beaucoup plus tard dans le cours. Pour l'instant, nous allons discuter brièvement des objets intégrés que contient votre navigateur, ce qui vous permet de faire beaucoup de choses utiles.

- -

Dans ce cas particulier, nous avons d'abord créé une variable guessField qui stocke une référence au champ de formulaire de saisie de texte dans notre HTML — la ligne suivante se trouve parmi nos déclarations de variables en haut du code :

- -
let guessField = document.querySelector('.guessField');
- -

Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. querySelector() prend une information - un sélecteur CSS qui sélectionne l'élément auquel vous voulez faire référence.

- -

Parce que guessField contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est focus(), donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte :

- -
guessField.focus();
- -

Les variables qui ne contiennent pas de références aux éléments de formulaire n'auront pas de focus() à leur disposition. Par exemple, la variable guesses contient une référence à un élément {{htmlelement ("p")}} et guessCount contient un nombre.

- -

Jouer avec les objets du navigateur

- -

Jouons un peu avec certains objets du navigateur.

- -
    -
  1.  Tout d'abord, ouvrez votre programme dans un navigateur.
    2. -
  2.  Ensuite, ouvrez les outils de développement de votre navigateur et assurez-vous que l'onglet de la console JavaScript est ouvert.
    3. -
  3.  Tapez guessField et la console vous montrera que la variable contient un élément {{htmlelement ("input")}}. Vous remarquerez également que la console complète automatiquement les noms d'objets existant dans l'environnement d'exécution, y compris vos variables!
    4. -
  4. -

     Maintenant, tapez ce qui suit :

    - - 
    guessField.value = 'Hello';
-
    - -

    La propriété value représente la valeur courante entrée dans un champs de texte. Vous verrez qu'en entrant cette commande nous avons changé ce que c'est.

    -
    5. -
  5. Tapez maintenant guesses and appuyez sur entrée. La console vous montrera que la variable contient un élément {{htmlelement ("p")}}.
    6. -
  6. -

    Maintenant, essayez d'entrer la ligne suivante :

    - - 
    guesses.value
-
    - -

    Le navigateur va retourner undefined, parce que value n'existe pas dans le paragraphe.

    -
    7. -
  7. -

    Pour changer le texte dans le paragraphe vous aurez besoin de  la propriété {{domxref("Node.textContent", "textContent")}} à la place.
    - Essayez ceci :

    - - 
    guesses.textContent = 'Where is my paragraph?';
-
    -
    8. -
  8. Maintenant, pour des trucs amusants. Essayez d'entrer les lignes ci-dessous, une par une :
    9. -
- -
guesses.style.backgroundColor = 'yellow';
-guesses.style.fontSize = '200%';
-guesses.style.padding = '10px';
-guesses.style.boxShadow = '3px 3px 6px black';
- -

Chaque élément d'une page possède une propriété de style , qui contient elle-même un objet dont les propriétés contiennent tous les styles CSS en ligne appliqués à cet élément. Cela nous permet de définir dynamiquement de nouveaux styles CSS sur des éléments en utilisant JavaScript.

- -

C'est fini pour le moment...

- -

Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou jouez avec notre version finale ici. Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport au code source.

- -

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

diff --git a/files/fr/learn/javascript/first_steps/a_first_splash/index.md b/files/fr/learn/javascript/first_steps/a_first_splash/index.md new file mode 100644 index 0000000000..40c91d2fa4 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/a_first_splash/index.md @@ -0,0 +1,699 @@ +--- +title: Notre premier code JavaScript +slug: Learn/JavaScript/First_steps/A_first_splash +tags: + - Apprendre + - Article + - CodingScripting + - Débutant + - Fonctions + - JavaScript + - Objets + - Opérateurs + - Variables + - structures conditionnelles +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +
{{LearnSidebar}}
+ +
{{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 :Une culture informatique basique, et des notions de HTML et CSS.
Objectif :Avoir une première expérience d'écriture de JavaScript et comprendre les implications de l'écriture d'un programme en JavaScript.
+ +

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.

+
+ +

Penser comme un programmeur

+ +

Une des choses les plus difficiles à apprendre en programmation n'est pas la syntaxe, mais comment l'appliquer afin de résoudre un problème réel. Vous devez commencer à penser comme un programmeur — ce qui implique généralement d'examiner les tâches que votre programme doit effectuer, de déterminer les fonctionnalités du code nécessaires à leurs réalisations et comment les faire fonctionner ensemble.

+ +

Cela requiert un mélange de travail acharné, d'expérience avec la syntaxe de programmation (de manière générale) et surtout de la pratique — ainsi qu'un peu de créativité. Plus vous allez coder, plus vous aller vous améliorer. On ne peut pas garantir que vous aurez un « cerveau de développeur » en 5 minutes, mais nous allons vous donner plein d'occasions pour pratiquer cette façon de penser, tout au long du cours.

+ +

Maintenant que vous avez cela en tête, regardons l'exemple que nous allons construire dans cet article et comment le découper en plusieurs tâches qui ont du sens.

+ +

Exemple — Jeu : Guess the number

+ +

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

+ + + + +

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

+ +
+

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 :

+ +
    +
  1. Générer un nombre aléatoire entre 1 et 100.
    2. +
  2. Stocker le nombre de tours déjà joués. Commencer par 1.
    3. +
  3. Fournir au joueur le moyen de saisir un nombre.
    4. +
  4. Stocker l'ensemble des propositions de nombres pour que le joueur puisse les consulter.
    5. +
  5. Vérifier si le nombre saisi par le joueur est correct.
    6. +
  6. S'il est correct : +
      +
    1. Afficher un message de félicitations.
      2. +
    2. Empêcher que le joueur saisisse de nouveau un nombre.
      3. +
    3. Afficher un contrôle pour que le joueur puisse rejouer.
      4. +
    +
    7. +
  7. S'il est faux et que le joueur a encore des tours à jouer : +
      +
    1. Informer le joueur que sa proposition de nombre est fausse.
      2. +
    2. Lui permettre d'entrer une nouvelle proposition de nombre.
      3. +
    3. Incrémenter le nombre de tours de 1.
      4. +
    +
    8. +
  8. S'il est faux et que le joueur n'a plus de tours à jouer : +
      +
    1. Informer le joueur qu'il a perdu et que la partie est finie.
      2. +
    2. Empêcher que le joueur saisisse de nouveau un nombre.
      3. +
    3. Afficher un contrôle pour que le joueur puisse rejouer.
      4. +
    +
    9. +
  9. 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.
    10. +
+ +

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

+ +

Pour commencer ce didacticiel, faites une copie locale du fichier number-guessing-game-start.html  (à voir directement ici). Ouvrez-le dans votre éditeur de code et votre navigateur web. Pour l'instant, vous ne verrez qu'un titre, un paragraphe d'instructions et un formulaire pour entrer une estimation, mais le formulaire est pour l'instant inactif.

+ +

L'endroit où nous allons ajouter tout notre code se trouve dans l'élément {{htmlelement ("script")}} au bas du code HTML :

+ +
<script>
+
+  // Votre code JavaScript se place ici
+
+</script>
+
+ +

Ajouter des variables pour stocker les données

+ +

Commençons. Tout d'abord, ajoutez les lignes suivantes dans l'élément {{htmlelement ("script")}} :

+ +
let randomNumber = Math.floor(Math.random() * 100) + 1;
+
+let guesses = document.querySelector('.guesses');
+let lastResult = document.querySelector('.lastResult');
+let lowOrHi = document.querySelector('.lowOrHi');
+
+let guessSubmit = document.querySelector('.guessSubmit');
+let guessField = document.querySelector('.guessField');
+
+let guessCount = 1;
+let resetButton;
+ +

Cette partie de code définit les variables nécessaires au stockage des données que notre programme utilisera. Les variables sont essentiellement des conteneurs de valeurs (tels que des nombres ou des chaînes de texte). Une variable se crée avec le mot-clé let suivi du nom de la variable. Vous pouvez ensuite attribuer une valeur à la variable avec le signe égal (=) suivi de la valeur que vous voulez lui donner.

+ +

Dans notre exemple :

+ + + +
+

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

+
+ +

Fonctions

+ +

Ajoutez maintenant ce qui suit dans votre code JavaScript :

+ +
function checkGuess() {
+  alert('Je suis un espace réservé');
+}
+ +

Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une fois et exécuter encore et encore, pour éviter de réécrire le même code tout le temps. C'est vraiment utile. Il y a plusieurs façons de définir les fonctions, mais pour l'instant nous allons nous concentrer sur un type simple. Ici, nous avons défini une fonction en utilisant le mot-clé function accompagné de son nom suivi de parenthèses. Ensuite, nous avons mis deux accolades ({ }). Dans ces accolades est placé tout le code à exécuter à chaque appel de la fonction.

+ +

Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses.

+ +

Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les outils de développement et la console JavaScript et entrez la ligne suivante :

+ +
checkGuess();
+ +

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.

+
+ +

Opérateurs

+ +

Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre.

+ +

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 :

+ + + +

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

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNameExample
+Addition6 + 9
-Soustraction20 - 15
*Multiplication3 * 7
/Division10 / 5
+ +

L'opérateur + peut aussi s'utiliser pour unir des chaînes de caractères (en informatique, on dit concaténer). Entrez les lignes suivantes, une par une :

+ +
let name = 'Bingo';
+name;
+let hello = ' dit bonjour !';
+hello;
+let greeting = name + hello;
+greeting;
+ +

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 !';
+ +

Cela équivaut à :

+ +
name = name + ' dit bonjour !';
+ +

Lorsque nous exécutons des tests vrai/faux (par exemple, dans des conditions — voir {{anch ("Structures conditionnelles", "ci-dessous")}}, nous utilisons des opérateurs de comparaison, par exemple :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNameExample
===Égalité stricte (est-ce exactement identique ?)5 === 2 + 4
!==Non égalité (est-ce différent ?)'Chris' !== 'Ch' + 'ris'
<Inférieur à10 < 6
>Supérieur à10 > 20
+ +

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(){
+  let userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = 'Propositions précédentes : ';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = 'Bravo, vous avez trouvé le nombre !';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+     lastResult.textContent = '!!! PERDU !!!';
+     setGameOver();
+  } else {
+     lastResult.textContent = 'Faux !';
+     lastResult.style.backgroundColor = 'red';
+     if (userGuess < randomNumber) {
+      lowOrHi.textContent = 'Le nombre saisi est trop petit !';
+     } else if (userGuess > randomNumber) {
+      lowOrHi.textContent = 'Le nombre saisi est trop grand !';
+     }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}
+
+ +

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

+ + + + + +

Evénements

+ +

À ce stade, nous avons bien implémentée la fonction checkGuess(), mais elle ne s'éxecutera pas parce que nous ne l'avons pas encore appelé.
+ Idéalement, nous voulons l'appeler lorsque le bouton Soumettre est cliqué, et pour ce faire, nous devons utiliser un événement. Les événements sont des actions qui se produisent dans le navigateur, comme le clic sur un bouton, le chargement d'une page ou la lecture d'une vidéo, en réponse à quoi nous pouvons exécuter des blocs de code. Les constructions qui écoutent l'événement en cours s'appellent des écouteurs d'événements, et les blocs de code exécutés en réponse à l'événement déclencheur sont appelés des gestionnaires d'évenements.
+
+ Ajoutez la ligne suivante sous l'accolade de fermeture de votre fonction checkGuess() :

+ +
guessSubmit.addEventListener('click', checkGuess);
+ +

Ici, nous ajoutons un écouteur d'événement au bouton guessSubmit . C'est une méthode qui prend deux valeurs d'entrée (appelées arguments) - le type d'événement que nous écoutons (dans ce cas, click) qui est une chaîne de caractères, et le code que nous voulons exécuter quand l'événement se produit (dans ce cas, la fonction checkGuess()  — notez que nous n'avons pas besoin de spécifier les parenthèses lors de l'écriture dans {{domxref("EventTarget.addEventListener", "addEventListener()")}}).

+ +

Essayez d'enregistrer et d'actualiser votre code, votre exemple devrait désormais fonctionner, jusqu'à un certain point. Maintenant, le seul problème est que si vous devinez la bonne réponse ou si vous n'avez plus de tours à jouer, le jeu "va se casser" parce que nous n'avons pas encore implémenté la fonction setGameOver() dont le rôle est de terminer proprement le jeu. Ajoutons maintenant le code manquant pour compléter notre exemple.

+ +

Finir les fonctionnalités du jeu

+ +

Pour définir la fonction setGameOver() à la fin de notre programme, ajoutez le code ci-dessous tout en bas :

+ +
function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = 'Start new game';
+  document.body.appendChild(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}
+ + + +

Reste à définir cette fonction ! Ajoutez le code suivant, tout en bas de votre JavaScript :

+ +
function resetGame() {
+  guessCount = 1;
+
+  let resetParas = document.querySelectorAll('.resultParas p');
+  for (let i = 0 ; i < resetParas.length ; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}
+ +

Ce bloc de code assez long réinitialise complètement les paramètres du jeu (le joueur pourra commencer une nouvelle partie). Il permet de  :

+ + + +

À ce stade, vous devriez avoir un jeu (simple) entièrement fonctionnel — félicitations!

+ +

Pour finir, c'est le moment de faire une synthèse sur  quelques caractéristiques importantes du code ;  vous les avez déjà vues, sans forcément vous en rendre compte.

+ +

Boucles

+ +

Dans le code précédent, une partie à examiner de plus près est la boucle for. Les boucles sont un concept très important dans la programmation, qui vous permet de continuer à exécuter un morceau de code encore et encore, jusqu'à ce qu'une certaine condition soit remplie.

+ +

Pour commencer, allez sur votre console developpeur Javascript et entrez ce qui suit :

+ +
for (let i = 1 ; i < 21 ; i++) { console.log(i) }
+ +

Que s'est-il passé ? Les nombres de 1 à 20 s'affichent dans la console. C'est à cause de la boucle. Une boucle : for  prend trois valeurs d'entrée (arguments)

+ +
    +
  1. Une valeur de départ : Dans ce cas, nous commençons un compte à 1, mais cela pourrait être n'importe quel nombre. Vous pouvez remplacer i par n'importe quel nom (ou presque...) , mais i est utilisé par convention car il est court et facile à retenir.
    2. +
  2. Une condition de fin : Ici, nous avons spécifié  i < 21 la boucle continuera jusqu'à ce que  i  ne soit plus inférieur à 21. Quand i atteindra ou dépassera 21, la boucle s'arrêtera.
    3. +
  3. Un incrémenteur :  Nous avons spécifié i++, ce qui signifie "ajouter 1 à i". La boucle sera exécutée une fois pour chaque valeur de i, jusqu'a ce que i atteigne une valeur de 21 (comme indiqué ci-dessus). Dans ce cas, nous imprimons simplement la valeur de i  sur la console à chaque itération en utilisant {{domxref("Console.log", "console.log()")}}.
    4. +
+ +

Maintenant, regardons la boucle dans notre jeu de devinettes de nombres — ce qui suit peut être trouvé dans la fonction resetGame() :

+ +
let resetParas = document.querySelectorAll('.resultParas p');
+for (let i = 0 ; i < resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}
+ +

Ce code crée une variable contenant une liste de tous les paragraphes à l'intérieur de <div class="resultParas">  en utilisant la méthode {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, puis il passe dans la boucle et pour chacun d'entre eux supprime le contenu du texte.

+ +

Une petite discussion sur les objets

+ +

Voyons une dernière amélioration avant d'aborder cette discussion. Ajoutez la ligne suivante juste en dessous de let resetButton; ligne près du haut de votre JavaScript, puis enregistrez votre fichier :

+ +
guessField.focus();
+ +

Cette ligne utilise la méthode{{domxref("HTMLElement.focus", "focus()")}} pour placer automatiquement le curseur dans le champ texte {{htmlelement ("input")}} dès le chargement de la page, permettant à l'utilisateur de commencer à taper sa première proposition de suite sans avoir à cliquer préalablement dans le champ. Ce n'est qu'un petit ajout, mais cela améliore la convivialité  en donnant à l'utilisateur une bonne idée visuelle de ce qu'il doit faire pour jouer.

+ +

Analysons ce qui se passe ici un peu plus en détail. En JavaScript, tout est objet. Un objet JavaScript possède des propriétés, chacune définissant une caractéristique. Vous pouvez créer vos propres objets, mais cela est une notion assez avancée, nous ne la couvrirons que beaucoup plus tard dans le cours. Pour l'instant, nous allons discuter brièvement des objets intégrés que contient votre navigateur, ce qui vous permet de faire beaucoup de choses utiles.

+ +

Dans ce cas particulier, nous avons d'abord créé une variable guessField qui stocke une référence au champ de formulaire de saisie de texte dans notre HTML — la ligne suivante se trouve parmi nos déclarations de variables en haut du code :

+ +
let guessField = document.querySelector('.guessField');
+ +

Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. querySelector() prend une information - un sélecteur CSS qui sélectionne l'élément auquel vous voulez faire référence.

+ +

Parce que guessField contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est focus(), donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte :

+ +
guessField.focus();
+ +

Les variables qui ne contiennent pas de références aux éléments de formulaire n'auront pas de focus() à leur disposition. Par exemple, la variable guesses contient une référence à un élément {{htmlelement ("p")}} et guessCount contient un nombre.

+ +

Jouer avec les objets du navigateur

+ +

Jouons un peu avec certains objets du navigateur.

+ +
    +
  1.  Tout d'abord, ouvrez votre programme dans un navigateur.
    2. +
  2.  Ensuite, ouvrez les outils de développement de votre navigateur et assurez-vous que l'onglet de la console JavaScript est ouvert.
    3. +
  3.  Tapez guessField et la console vous montrera que la variable contient un élément {{htmlelement ("input")}}. Vous remarquerez également que la console complète automatiquement les noms d'objets existant dans l'environnement d'exécution, y compris vos variables!
    4. +
  4. +

     Maintenant, tapez ce qui suit :

    + + 
    guessField.value = 'Hello';
+
    + +

    La propriété value représente la valeur courante entrée dans un champs de texte. Vous verrez qu'en entrant cette commande nous avons changé ce que c'est.

    +
    5. +
  5. Tapez maintenant guesses and appuyez sur entrée. La console vous montrera que la variable contient un élément {{htmlelement ("p")}}.
    6. +
  6. +

    Maintenant, essayez d'entrer la ligne suivante :

    + + 
    guesses.value
+
    + +

    Le navigateur va retourner undefined, parce que value n'existe pas dans le paragraphe.

    +
    7. +
  7. +

    Pour changer le texte dans le paragraphe vous aurez besoin de  la propriété {{domxref("Node.textContent", "textContent")}} à la place.
    + Essayez ceci :

    + + 
    guesses.textContent = 'Where is my paragraph?';
+
    +
    8. +
  8. Maintenant, pour des trucs amusants. Essayez d'entrer les lignes ci-dessous, une par une :
    9. +
+ +
guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';
+ +

Chaque élément d'une page possède une propriété de style , qui contient elle-même un objet dont les propriétés contiennent tous les styles CSS en ligne appliqués à cet élément. Cela nous permet de définir dynamiquement de nouveaux styles CSS sur des éléments en utilisant JavaScript.

+ +

C'est fini pour le moment...

+ +

Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou jouez avec notre version finale ici. Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport au code source.

+ +

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

diff --git a/files/fr/learn/javascript/first_steps/arrays/index.html b/files/fr/learn/javascript/first_steps/arrays/index.html deleted file mode 100644 index b201776dd1..0000000000 --- a/files/fr/learn/javascript/first_steps/arrays/index.html +++ /dev/null @@ -1,517 +0,0 @@ ---- -title: Les tableaux -slug: Learn/JavaScript/First_steps/Arrays -tags: - - Arrays - - Article - - Beginner - - CodingScripting - - JavaScript - - Join - - Learn - - Pop - - Push - - l10n:priority - - shift - - split - - unshift -translation_of: Learn/JavaScript/First_steps/Arrays -original_slug: Learn/JavaScript/First_steps/tableaux ---- -
{{LearnSidebar}}
- -
{{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.

- - - - - - - - - - - - -
Prérequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Comprendre ce que sont les tableaux et savoir comment les manipuler en JavaScript.
- -

Qu'est‑ce qu'un tableau ?

- -

Les tableaux sont généralement décrits comme des "objets de type liste" ; un tableau est un objet contenant plusieurs valeurs. Les objets tableau peuvent être stockés dans des variables et traités de la même manière que tout autre type de valeur, la différence étant que nous pouvons accéder à chaque valeur du tableau individuellement, et faire des choses super utiles et efficaces avec la liste des valeurs, comme boucler et faire la même chose pour chaque valeur. Peut-être que nous avons une série d'articles et leurs prix stockés dans un tableau, et nous voulons les parcourir tous et les imprimer sur une facture, tout en totalisant tous les prix ensemble et en imprimant le prix total en bas.

- -

Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément. Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs. Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans l'article.

- -

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

- - - -

{{ EmbedLiveSample('Quest‑ce_quun_tableau', '100%', 300) }}

- -

Créer un tableau

- -

On définit les valeurs d'un tableau par une liste d'éléments entre crochets droits, séparés par des virgules.

- -
    -
  1. Disons que nous voulons mettre une liste d'achats dans un tableau — nous devons opérer comme suit. Entrez les lignes ci‑après dans la console : - 
    let shopping = ['pain', 'lait', 'fromage', 'houmous', 'nouilles'];
-shopping;
    -
    2. -
  2. Dans ce cas, chaque élément du tableau est une chaîne, mais gardez en tête que vous pouvez stocker n'importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d'autres tableaux. Vous pouvez également mélanger et assortir les types d'articles — il n'est pas obligatoire que ce soient tous des nombres, des chaînes, etc. Essayez ceci :
    3. -
  3. - 
    let sequence = [1, 1, 2, 3, 5, 8, 13];
-let random = ['arbre', 795, [0, 1, 2]];
    -
    4. -
  4. Créez donc quelques tableaux de votre cru avant de continuer.
    5. -
- -

Accès aux éléments de tableau et modification de ceux‑ci

- -

Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet, de la même façon que nous avons eu accès aux lettres dans une chaîne.

- -
    -
  1. Entrez ceci dans la console : - 
    shopping[0];
-// renvoie "pain"
    -
    2. -
  2. Vous pouvez aussi modifier un élément dans un tableau en donnant simplement une nouvelle valeur à l'élément. Essayez ceci : - 
    shopping[0] = 'crème de sésame';
-shopping;
-// shopping renvoie maintenant [ "crème de sésame", "lait", "fromage", "houmous", "nouilles" ]
    - -
    -

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

    -
    3. -
  3. 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 :
    4. -
  4. - 
    random[2][2];
    -
    5. -
  5. Poursuivez et faites quelques autres modifications dans les exemples de tableaux avant de poursuivre.
    6. -
- -

Trouver la taille d'un tableau

- -

Vous pouvez trouver la taille d'un tableau (le nombre d'éléments qu'il comporte) de la même façon que vous obtenez la taille (en caractères) d'un chaîne — avec la propriété {{jsxref("Array.prototype.length","length")}}. Essayez :

- -
sequence.length;
-// renvoie 7
- -

Il y a d'autres usages, mais le plus courant permet de dire à une boucle de poursuivre jusqu'à ce que tous les éléments du tableau aient été passés en revue. Ainsi, par exemple :

- -
let sequence = [1, 1, 2, 3, 5, 8, 13];
-for (var i = 0; i < sequence.length; i++) {
-  console.log(sequence[i]);
-}
- -

Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résumé, ce code dit :

- -
    -
  1. Commencer la boucle à l'élément 0 du tableau.
    2. -
  2. Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément  7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6).
    3. -
  3. Afficher chaque élément sur la console de l'explorateur avec console.log().
    4. -
- -

Quelques méthodes utiles pour les tableaux

- -

Dans ce paragraphe nous examinerons quelques méthodes de tableaux à connaître. Elles permettent de scinder des chaînes en éléments de tableau et inversement, et d'ajouter de nouveaux éléments dans des tableaux.

- -

Conversions entre chaînes et tableaux

- -

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.

-
- -
    -
  1. Servons‑nous en et voyons comment elle fonctionne. D'abord créons une chaîne dans la console : - 
    let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
    -
    2. -
  2. Scindons‑la à chaque virgule : - 
    let myArray = myData.split(',');
-myArray;
    -
    3. -
  3. Pour terminer, trouvons la taille du nouveau tableau et retrouvons quelques‑uns de ses éléments : - 
    myArray.length;
-myArray[0]; // le premier élément du tableau
-myArray[1]; // le deuxième élément du tableau
-myArray[myArray.length-1]; // le dernier élément du tableau
    -
    4. -
  4. Vous pouvez également faire le contraire avec la méthode {{jsxref("Array.prototype.join()","join()")}}. Essayons : - 
    let myNewString = myArray.join(',');
-myNewString;
    -
    5. -
  5. Une autre façon de convertir un tableau en chaîne consiste à se servir de la méthode {{jsxref("Array.prototype.toString()","toString()")}}. toString() est plus simple au plan des arguments que join(), car elle ne prend pas de paramètre, mais elle est plus limitée. Avec join() vous pouvez diversifier les séparateurs (essayez de lancer la commande du point 4 avec un caractère autre que la virgule). - 
    let dogNames = ["Rocket","Flash","Bella","Slugger"];
-dogNames.toString(); //Rocket,Flash,Bella,Slugger
    -
    6. -
- -

Ajout et suppression d'éléments de tableau

- -

Nous n'avons pas encore parlé d'ajout et de suppression d'éléments de tableau — allons‑y. Nous utiliserons le tableau myArray dont nous nous sommes servis à la fin de la dernière section. Si vous n'avez pas entré les commandes de cette section dans la console, il est nécessaire de créer d'abord le tableau :

- -
let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
- -

Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous pouvez respectivement utiliser {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}}.

- -
    -
  1. Voyons push() d'abord — notez que vous devez mettre en paramètre les éléments que vous souhaitez ajouter à la fin du tableau. Essayez ceci : - - 
    myArray.push('Cardiff');
-myArray;
-myArray.push('Bradford', 'Brighton');
-myArray;
-
    -
    2. -
  2. La taille du tableau modifié est renvoyée quand l'appel de la méthode est terminé. Si vous voulez enregistrer la taille du nouveau tableau dans une variable, vous pouvez écrire quelque chose comme ceci : - 
    let newLength = myArray.push('Bristol');
-myArray;
-newLength;
    -
    3. -
  3. Supprimer le dernier élément de la liste est très simple : il suffit de lancer pop() sur celle‑ci. Essayez : - 
    myArray.pop();
    -
    4. -
  4. L'élément supprimé est renvoyé à la fin de l'appel de la méthode. Également : - 
    let removedItem = myArray.pop();
-myArray;
-removedItem;
    -
    5. -
- -

{{jsxref("Array.prototype.unshift()","unshift()")}} et {{jsxref("Array.prototype.shift()","shift()")}} fonctionnent exactement de la même manière, excepté qu'il travaillent sur la tête du tableau au lieu de la queue.

- -
    -
  1. D'abord unshift() — essayez : - - 
    myArray.unshift('Edinburgh');
-myArray;
    -
    2. -
  2. Maintenant shift() — essayez ! - 
    let removedItem = myArray.shift();
-myArray;
-removedItem;
    -
    3. -
- -

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 :

- -
    -
  1. Sous le commentaire // number 1 il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom products.
    2. -
  2. Sur la même ligne que le commentaire // number 2 se trouve le début d'une boucle. Dans cette ligne nous avons actuellement i <= 0, test conditionnel qui fait que la  boucle stoppe immédiatement, car ce test dit « stopper dès que i est inférieur ou égal à 0 » et i part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que i sera inférieur à la taille du tableau products.
    3. -
  3. Au dessous du commentaire // number 3 nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (nom:prix) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux Méthodes utiles pour les chaînes de caractères pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.
    4. -
  4. En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le premier article à propos des chaînes.
    5. -
  5. Il y a une variable nommée total créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous // number 4) ajoutez une ligne qui ajoute à ce total le prix de l'article courant  à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un opérateur d'assignation pour faire cela ;-).
    6. -
  6. 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.
    7. -
- - - - - -

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

- -

Activité : Top 5 des recherches

- -

Une bonne utilisation des méthodes de tableaux comme {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}} permet de conserver un enregistrement des éléments actuellement actifs dans une application web. Dans une scène animée, par exemple, vous pouvez avoir un tableau d'objets représentant les graphiques d'arrière-plan actuellement affichés, et vous pouvez n'en vouloir que 50 à la fois, pour des raisons de performance ou d'encombrement. Chaque fois que de nouveaux objets sont créés et ajoutés au tableau, les plus anciens peuvent être supprimés du tableau pour n'en conserver que le nombre voulu.

- -

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.

-
- -

Pour terminer l'application, il vous faut :

- -
    -
  1. Ajouter une ligne sous le commentaire // number 1 pour ajouter la valeur qui vient d'être saisie dans la boîte au début du tableau. Cette valeur est récupérée avec searchInput.value.
    2. -
  2. Ajouter une ligne sous le commentaire // number 2  pour supprimer la valeur en fin de liste du tableau.
    3. -
- - - - - -

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

- -

Testez vos compétences !

- -

Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir Test de compétences : les tableaux.

- -

Conclusion

- -

Après la lecture de cet article, vous conviendrez que les tableaux semblent fichtrement utiles ; vous les verrez un peu partout en JavaScript, souvent associés à des boucles pour appliquer la même action à chaque élément du tableau. Nous vous indiquerons toutes les bases utiles à savoir à propos des boucles dans le prochain module, mais pour l'instant, félicitations : prenez une pause bien méritée ; vous avez étudié tous les articles du module !

- -

La seule chose restant à faire est de procéder à l'évaluation de ce module pour tester votre compréhension de son contenu.

- -

Voir aussi

- - - -

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

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/first_steps/arrays/index.md b/files/fr/learn/javascript/first_steps/arrays/index.md new file mode 100644 index 0000000000..b201776dd1 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/arrays/index.md @@ -0,0 +1,517 @@ +--- +title: Les tableaux +slug: Learn/JavaScript/First_steps/Arrays +tags: + - Arrays + - Article + - Beginner + - CodingScripting + - JavaScript + - Join + - Learn + - Pop + - Push + - l10n:priority + - shift + - split + - unshift +translation_of: Learn/JavaScript/First_steps/Arrays +original_slug: Learn/JavaScript/First_steps/tableaux +--- +
{{LearnSidebar}}
+ +
{{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.

+ + + + + + + + + + + + +
Prérequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Comprendre ce que sont les tableaux et savoir comment les manipuler en JavaScript.
+ +

Qu'est‑ce qu'un tableau ?

+ +

Les tableaux sont généralement décrits comme des "objets de type liste" ; un tableau est un objet contenant plusieurs valeurs. Les objets tableau peuvent être stockés dans des variables et traités de la même manière que tout autre type de valeur, la différence étant que nous pouvons accéder à chaque valeur du tableau individuellement, et faire des choses super utiles et efficaces avec la liste des valeurs, comme boucler et faire la même chose pour chaque valeur. Peut-être que nous avons une série d'articles et leurs prix stockés dans un tableau, et nous voulons les parcourir tous et les imprimer sur une facture, tout en totalisant tous les prix ensemble et en imprimant le prix total en bas.

+ +

Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément. Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs. Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans l'article.

+ +

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

+ + + +

{{ EmbedLiveSample('Quest‑ce_quun_tableau', '100%', 300) }}

+ +

Créer un tableau

+ +

On définit les valeurs d'un tableau par une liste d'éléments entre crochets droits, séparés par des virgules.

+ +
    +
  1. Disons que nous voulons mettre une liste d'achats dans un tableau — nous devons opérer comme suit. Entrez les lignes ci‑après dans la console : + 
    let shopping = ['pain', 'lait', 'fromage', 'houmous', 'nouilles'];
+shopping;
    +
    2. +
  2. Dans ce cas, chaque élément du tableau est une chaîne, mais gardez en tête que vous pouvez stocker n'importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d'autres tableaux. Vous pouvez également mélanger et assortir les types d'articles — il n'est pas obligatoire que ce soient tous des nombres, des chaînes, etc. Essayez ceci :
    3. +
  3. + 
    let sequence = [1, 1, 2, 3, 5, 8, 13];
+let random = ['arbre', 795, [0, 1, 2]];
    +
    4. +
  4. Créez donc quelques tableaux de votre cru avant de continuer.
    5. +
+ +

Accès aux éléments de tableau et modification de ceux‑ci

+ +

Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet, de la même façon que nous avons eu accès aux lettres dans une chaîne.

+ +
    +
  1. Entrez ceci dans la console : + 
    shopping[0];
+// renvoie "pain"
    +
    2. +
  2. Vous pouvez aussi modifier un élément dans un tableau en donnant simplement une nouvelle valeur à l'élément. Essayez ceci : + 
    shopping[0] = 'crème de sésame';
+shopping;
+// shopping renvoie maintenant [ "crème de sésame", "lait", "fromage", "houmous", "nouilles" ]
    + +
    +

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

    +
    3. +
  3. 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 :
    4. +
  4. + 
    random[2][2];
    +
    5. +
  5. Poursuivez et faites quelques autres modifications dans les exemples de tableaux avant de poursuivre.
    6. +
+ +

Trouver la taille d'un tableau

+ +

Vous pouvez trouver la taille d'un tableau (le nombre d'éléments qu'il comporte) de la même façon que vous obtenez la taille (en caractères) d'un chaîne — avec la propriété {{jsxref("Array.prototype.length","length")}}. Essayez :

+ +
sequence.length;
+// renvoie 7
+ +

Il y a d'autres usages, mais le plus courant permet de dire à une boucle de poursuivre jusqu'à ce que tous les éléments du tableau aient été passés en revue. Ainsi, par exemple :

+ +
let sequence = [1, 1, 2, 3, 5, 8, 13];
+for (var i = 0; i < sequence.length; i++) {
+  console.log(sequence[i]);
+}
+ +

Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résumé, ce code dit :

+ +
    +
  1. Commencer la boucle à l'élément 0 du tableau.
    2. +
  2. Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément  7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6).
    3. +
  3. Afficher chaque élément sur la console de l'explorateur avec console.log().
    4. +
+ +

Quelques méthodes utiles pour les tableaux

+ +

Dans ce paragraphe nous examinerons quelques méthodes de tableaux à connaître. Elles permettent de scinder des chaînes en éléments de tableau et inversement, et d'ajouter de nouveaux éléments dans des tableaux.

+ +

Conversions entre chaînes et tableaux

+ +

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.

+
+ +
    +
  1. Servons‑nous en et voyons comment elle fonctionne. D'abord créons une chaîne dans la console : + 
    let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
    +
    2. +
  2. Scindons‑la à chaque virgule : + 
    let myArray = myData.split(',');
+myArray;
    +
    3. +
  3. Pour terminer, trouvons la taille du nouveau tableau et retrouvons quelques‑uns de ses éléments : + 
    myArray.length;
+myArray[0]; // le premier élément du tableau
+myArray[1]; // le deuxième élément du tableau
+myArray[myArray.length-1]; // le dernier élément du tableau
    +
    4. +
  4. Vous pouvez également faire le contraire avec la méthode {{jsxref("Array.prototype.join()","join()")}}. Essayons : + 
    let myNewString = myArray.join(',');
+myNewString;
    +
    5. +
  5. Une autre façon de convertir un tableau en chaîne consiste à se servir de la méthode {{jsxref("Array.prototype.toString()","toString()")}}. toString() est plus simple au plan des arguments que join(), car elle ne prend pas de paramètre, mais elle est plus limitée. Avec join() vous pouvez diversifier les séparateurs (essayez de lancer la commande du point 4 avec un caractère autre que la virgule). + 
    let dogNames = ["Rocket","Flash","Bella","Slugger"];
+dogNames.toString(); //Rocket,Flash,Bella,Slugger
    +
    6. +
+ +

Ajout et suppression d'éléments de tableau

+ +

Nous n'avons pas encore parlé d'ajout et de suppression d'éléments de tableau — allons‑y. Nous utiliserons le tableau myArray dont nous nous sommes servis à la fin de la dernière section. Si vous n'avez pas entré les commandes de cette section dans la console, il est nécessaire de créer d'abord le tableau :

+ +
let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
+ +

Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous pouvez respectivement utiliser {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}}.

+ +
    +
  1. Voyons push() d'abord — notez que vous devez mettre en paramètre les éléments que vous souhaitez ajouter à la fin du tableau. Essayez ceci : + + 
    myArray.push('Cardiff');
+myArray;
+myArray.push('Bradford', 'Brighton');
+myArray;
+
    +
    2. +
  2. La taille du tableau modifié est renvoyée quand l'appel de la méthode est terminé. Si vous voulez enregistrer la taille du nouveau tableau dans une variable, vous pouvez écrire quelque chose comme ceci : + 
    let newLength = myArray.push('Bristol');
+myArray;
+newLength;
    +
    3. +
  3. Supprimer le dernier élément de la liste est très simple : il suffit de lancer pop() sur celle‑ci. Essayez : + 
    myArray.pop();
    +
    4. +
  4. L'élément supprimé est renvoyé à la fin de l'appel de la méthode. Également : + 
    let removedItem = myArray.pop();
+myArray;
+removedItem;
    +
    5. +
+ +

{{jsxref("Array.prototype.unshift()","unshift()")}} et {{jsxref("Array.prototype.shift()","shift()")}} fonctionnent exactement de la même manière, excepté qu'il travaillent sur la tête du tableau au lieu de la queue.

+ +
    +
  1. D'abord unshift() — essayez : + + 
    myArray.unshift('Edinburgh');
+myArray;
    +
    2. +
  2. Maintenant shift() — essayez ! + 
    let removedItem = myArray.shift();
+myArray;
+removedItem;
    +
    3. +
+ +

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 :

+ +
    +
  1. Sous le commentaire // number 1 il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom products.
    2. +
  2. Sur la même ligne que le commentaire // number 2 se trouve le début d'une boucle. Dans cette ligne nous avons actuellement i <= 0, test conditionnel qui fait que la  boucle stoppe immédiatement, car ce test dit « stopper dès que i est inférieur ou égal à 0 » et i part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que i sera inférieur à la taille du tableau products.
    3. +
  3. Au dessous du commentaire // number 3 nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (nom:prix) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux Méthodes utiles pour les chaînes de caractères pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.
    4. +
  4. En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le premier article à propos des chaînes.
    5. +
  5. Il y a une variable nommée total créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous // number 4) ajoutez une ligne qui ajoute à ce total le prix de l'article courant  à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un opérateur d'assignation pour faire cela ;-).
    6. +
  6. 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.
    7. +
+ + + + + +

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

+ +

Activité : Top 5 des recherches

+ +

Une bonne utilisation des méthodes de tableaux comme {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}} permet de conserver un enregistrement des éléments actuellement actifs dans une application web. Dans une scène animée, par exemple, vous pouvez avoir un tableau d'objets représentant les graphiques d'arrière-plan actuellement affichés, et vous pouvez n'en vouloir que 50 à la fois, pour des raisons de performance ou d'encombrement. Chaque fois que de nouveaux objets sont créés et ajoutés au tableau, les plus anciens peuvent être supprimés du tableau pour n'en conserver que le nombre voulu.

+ +

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.

+
+ +

Pour terminer l'application, il vous faut :

+ +
    +
  1. Ajouter une ligne sous le commentaire // number 1 pour ajouter la valeur qui vient d'être saisie dans la boîte au début du tableau. Cette valeur est récupérée avec searchInput.value.
    2. +
  2. Ajouter une ligne sous le commentaire // number 2  pour supprimer la valeur en fin de liste du tableau.
    3. +
+ + + + + +

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

+ +

Testez vos compétences !

+ +

Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir Test de compétences : les tableaux.

+ +

Conclusion

+ +

Après la lecture de cet article, vous conviendrez que les tableaux semblent fichtrement utiles ; vous les verrez un peu partout en JavaScript, souvent associés à des boucles pour appliquer la même action à chaque élément du tableau. Nous vous indiquerons toutes les bases utiles à savoir à propos des boucles dans le prochain module, mais pour l'instant, félicitations : prenez une pause bien méritée ; vous avez étudié tous les articles du module !

+ +

La seule chose restant à faire est de procéder à l'évaluation de ce module pour tester votre compréhension de son contenu.

+ +

Voir aussi

+ + + +

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

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/first_steps/index.html b/files/fr/learn/javascript/first_steps/index.html deleted file mode 100644 index 8e093bebfb..0000000000 --- a/files/fr/learn/javascript/first_steps/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Premiers pas en JavaScript -slug: Learn/JavaScript/First_steps -tags: - - Article - - Auto-évaluation - - Chaînes de caractères - - Débutant - - Guide - - JavaScript - - Module - - Nombres - - Opérateurs - - Tableaux - - Variables -translation_of: Learn/JavaScript/First_steps ---- -
{{LearnSidebar}}
- -

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 :

- - - -
-

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

Maintenant que vous en savez un peu plus sur la partie théorique de JavaScript et sur ce que vous pouvez réaliser avec, nous allons poursuivre avec un cours accéléré sur les fonctionnalités de base du langage par le biais d'un tutoriel axé sur la pratique. Vous développerez ici, pas à pas, un jeu simple consistant à faire deviner un nombre.

-
-
Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript
-
-

Quand vous développiez le jeu de devinette dans le cadre du tutoriel précédent, vous avez pu constater que notre programme ne fonctionnait pas. Pas de panique — cet article est là pour vous éviter de vous arracher les cheveux sur de tels problèmes en vous donnant quelques conseils simples sur la manière de trouver et résoudre les erreurs dans vos programmes JavaScript.

-
-
Stocker les informations dont vous avez besoin — les variables
-
-

Après avoir lu les articles précédents, vous devriez maintenant mieux comprendre ce qu'est JavaScript, ce qu'il peut faire pour vous, comment l'utiliser de pair avec d'autres technologies du Web, et à quoi ressemblent ses principales fonctionnalités d'un point de vue global. Dans cet article, nous allons aborder les véritables fondements, en présentant l'une des pierres angulaires du langage : les variables.

-
-
Mathématiques de base en JavaScript — nombres et opérateurs
-
À ce stade du cours, nous allons parler de mathématiques en JavaScript, à savoir comment combiner des opérateurs arithmétiques avec d'autres fonctionnalités du langage pour arriver à nos fins.
-
Gérer du texte — les chaînes de caractères en JavaScript
-
Attaquons-nous maintenant aux chaînes de caractères — le nom savant désignant en programmation des portions de texte. Dans cet article, nous allons voir les bases que vous devez impérativement connaître lors de votre apprentissage de JavaScript, comme la création de chaînes, l'échappement de caractères et la jonction de plusieurs chaînes.
-
Méthodes utiles pour les chaînes de caractères
-
Maintenant que nous avons vu les bases relatives aux chaînes de catactères, passons à la vitesse supérieure et regardons ce que nous pouvons faire de plus poussé avec lesdites chaînes grâce aux méthodes natives, comme par exemple déterminer la longueur d'un texte, joindre et séparer des chaînes, remplacer un caractère par un autre, et bien plus encore.
-
Les tableaux
-
Dans le dernier article de ce module, nous allons nous pencher sur les tableaux — un moyen ingénieux de stocker une liste d'éléments dans une unique variable. Ici nous allons voir en quoi cela est pratique, puis nous verrons entre autres comment créer un tableau et comment récupérer, ajouter et supprimer des éléments stockés.
-
- -

Auto-évaluation

- -

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

- -
-
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/index.md b/files/fr/learn/javascript/first_steps/index.md new file mode 100644 index 0000000000..8e093bebfb --- /dev/null +++ b/files/fr/learn/javascript/first_steps/index.md @@ -0,0 +1,70 @@ +--- +title: Premiers pas en JavaScript +slug: Learn/JavaScript/First_steps +tags: + - Article + - Auto-évaluation + - Chaînes de caractères + - Débutant + - Guide + - JavaScript + - Module + - Nombres + - Opérateurs + - Tableaux + - Variables +translation_of: Learn/JavaScript/First_steps +--- +
{{LearnSidebar}}
+ +

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 :

+ + + +
+

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

Maintenant que vous en savez un peu plus sur la partie théorique de JavaScript et sur ce que vous pouvez réaliser avec, nous allons poursuivre avec un cours accéléré sur les fonctionnalités de base du langage par le biais d'un tutoriel axé sur la pratique. Vous développerez ici, pas à pas, un jeu simple consistant à faire deviner un nombre.

+
+
Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript
+
+

Quand vous développiez le jeu de devinette dans le cadre du tutoriel précédent, vous avez pu constater que notre programme ne fonctionnait pas. Pas de panique — cet article est là pour vous éviter de vous arracher les cheveux sur de tels problèmes en vous donnant quelques conseils simples sur la manière de trouver et résoudre les erreurs dans vos programmes JavaScript.

+
+
Stocker les informations dont vous avez besoin — les variables
+
+

Après avoir lu les articles précédents, vous devriez maintenant mieux comprendre ce qu'est JavaScript, ce qu'il peut faire pour vous, comment l'utiliser de pair avec d'autres technologies du Web, et à quoi ressemblent ses principales fonctionnalités d'un point de vue global. Dans cet article, nous allons aborder les véritables fondements, en présentant l'une des pierres angulaires du langage : les variables.

+
+
Mathématiques de base en JavaScript — nombres et opérateurs
+
À ce stade du cours, nous allons parler de mathématiques en JavaScript, à savoir comment combiner des opérateurs arithmétiques avec d'autres fonctionnalités du langage pour arriver à nos fins.
+
Gérer du texte — les chaînes de caractères en JavaScript
+
Attaquons-nous maintenant aux chaînes de caractères — le nom savant désignant en programmation des portions de texte. Dans cet article, nous allons voir les bases que vous devez impérativement connaître lors de votre apprentissage de JavaScript, comme la création de chaînes, l'échappement de caractères et la jonction de plusieurs chaînes.
+
Méthodes utiles pour les chaînes de caractères
+
Maintenant que nous avons vu les bases relatives aux chaînes de catactères, passons à la vitesse supérieure et regardons ce que nous pouvons faire de plus poussé avec lesdites chaînes grâce aux méthodes natives, comme par exemple déterminer la longueur d'un texte, joindre et séparer des chaînes, remplacer un caractère par un autre, et bien plus encore.
+
Les tableaux
+
Dans le dernier article de ce module, nous allons nous pencher sur les tableaux — un moyen ingénieux de stocker une liste d'éléments dans une unique variable. Ici nous allons voir en quoi cela est pratique, puis nous verrons entre autres comment créer un tableau et comment récupérer, ajouter et supprimer des éléments stockés.
+
+ +

Auto-évaluation

+ +

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

+ +
+
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 deleted file mode 100644 index bdfdda9e64..0000000000 --- a/files/fr/learn/javascript/first_steps/math/index.html +++ /dev/null @@ -1,450 +0,0 @@ ---- -title: Mathématiques de base en JavaScript — nombres et opérateurs -slug: Learn/JavaScript/First_steps/Math -tags: - - Article - - Beginner - - CodingScripting - - Guide - - JavaScript - - Learn - - Math - - Operators - - augmented - - increment - - l10n:priority - - maths - - modulo -translation_of: Learn/JavaScript/First_steps/Math ---- -
{{LearnSidebar}}
- -
{{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 :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Se familiariser avec les bases des maths en JavaScript.
- -

Tout le monde aime les maths

- -

Mouais, peut‑être pas. Certains parmi nous aiment les maths, d'autres les détestent depuis qu'il leur a fallu apprendre les tables de multiplication et les longues divisions à l'école, d'autres se situent entre les deux. Mais personne ne peut nier que les mathématiques sont une connaissance fondamentale dont il n'est pas possible de se passer. Cela devient particulièrement vrai lorsque nous apprenons à programmer en JavaScript (ou tout autre langage d'ailleurs) — une grande part de ce que nous faisons reposant en effet sur le traitement de données numériques, le calcul de nouvelles valeurs, etc. ; vous ne serez donc pas étonné d'apprendre que JavaScript dispose d'un ensemble complet de fonctions mathématiques.

- -

Cet article ne traite que des éléments de base nécessaires pour débuter.

- -

Types de nombres

- -

En programmation, même l'ordinaire système des nombres décimaux que nous connaissons tous si bien est plus compliqué qu'on ne pourrait le croire. Nous utilisons divers termes pour décrire différents types de nombres décimaux, par exemple :

- - - -

Nous disposons même de plusieurs systèmes de numération ! Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres :

- - - -

Avant que votre cervelle ne se mette à bouillir, stop ! Pour commencer, nous ne nous intéresserons qu'aux nombres décimaux dans ce cours ; vous aurez rarement besoin de vous servir des autres types, peut-être même jamais.

- -

L'autre bonne nouvelle, c'est que contrairement à d'autres langages de programmation, JavaScript n'a qu'un seul type de donnée pour les nombres, vous l'avez deviné : {{jsxref("Number")}}. Cela signifie que, en JavaScript, quels que soient les types de nombre avec lesquels vous travaillerez, vous les manipulerez tous exactement de la même façon.

- -

Ce ne sont que des nombres pour moi

- -

Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de base dont nous aurons besoin. Entrez les commandes listées ci-dessous dans la console JavaScript des outils de développement, ou utilisez la simple console intégrée que vous voyez ci-dessous si vous préférez.

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}}

- -

Ouvrir la console dans une nouvelle fenêtre

- -
    -
  1. Premièrement, déclarons une paire de variables et initialisons‑les respectivement avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct : - 
    var myInt = 5;
-var myFloat = 6.667;
-myInt;
-myFloat;
    -
    2. -
  2. Les nombres sont saisis sans guillemets — essayez de déclarer et initialiser deux ou trois variables de plus contenant des nombres avant de continuer.
    3. -
  3. 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é :
    4. -
  4. - 
    typeof myInt;
-typeof myFloat;
    -
    5. -
  5. "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 !
    6. -
- -

Méthodes de nombres utiles

- -

L'objet Number , une instance qui représente tous les nombres standards que vous utiliserez dans votre JavaScript, a de nombreuses méthodes disponibles pour vous permettre de manipuler les nombres. Nous ne les étudierons pas tous en détail dans cet article car nous voulons qu'il reste une simple introduction et nous verrons seulement les bases essentielles pour le moment; cependant, une fois que vous aurez lu ce module plusieurs fois, il pourra être utile de visiter les pages de référence d'objet et d'en apprendre plus sur ce qui est disponible.

- -

Par exemple, pour arrondir votre nombre avec un nombre fixe de décimales, utilisez la méthode toFixed(). Tapez les lignes suivantes dans la console de votre navigateur:

- -
let lotsOfDecimal = 1.766584958675746364;
-lotsOfDecimal;
-let twoDecimalPlaces = lotsOfDecimal.toFixed(2);
-twoDecimalPlaces;
- -

Convertir en type de données numérique

- -

Parfois vous pourriez finir avec un nombre stocké de type "string", ce qui rendra difficile le fait d'effectuer un calcul avec. Ca arrive le plus souvent lorsqu'une donnée est entrée dans une entrée de formulaire, et le type de donnée entré est du texte. Il éxiste une façon de résoudre ce problème — passer la valeur de "string" dans le constructeur Number() pour retourner une version numérique de la même valeur.

- -

Par exemple, essayez de taper ces lignes dans votre console:

- -
let myNumber = '74';
-myNumber + 3;
- -

Vous obtenez le résultat 743, et non pas 77, car myNumber est en fait défini en tant que "string". Vous pouvez tester en tapant la ligne suivante:

- -
typeof myNumber;
- -

Pour réparer le calcul, vous pouvez faire ceci:

- -
Number(myNumber) + 3;
- -

Opérateurs arithmétiques

- -

Ce sont les opérateurs de base pour effectuer diverses opérations :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperateurNomButExemple
+AdditionAjoute deux nombres.6 + 9
-SoustractionSoustrait le nombre de droite de celui de gauche.20 - 15
*MultiplicationMultiplie les deux nombrer.3 * 7
/DivisionDivise le nombre de gauche par celui de droite.10 / 5
% -

Reste (quelquefois nommé modulo)

- 		-

Renvoie le reste de la division du nombre de gauche par celui de droite.

- 		8 % 3 (renvoie 2, car 3 est contenu 2 fois dans 8, et il reste 2.)
- -
-

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.

- -
    -
  1. Essayez de saisir quelques exemples simples de votre cru, comme : - 
    10 + 7
-9 * 8
-60 % 3
    -
    2. -
  2. Déclarez et initialisez quelques variables, puis utilisez‑les dans des opérations — les variables se comporteront exactement comme les valeurs qu'elles contiennent pour les besoins de l'opération. Par exemple : - 
    var num1 = 10;
-var num2 = 50;
-9 * num1;
-num2 / num1;
    -
    3. -
  3. Pour terminer cette partie, entrez quelques expressions plus compliquées, comme : - 
    5 + 10 * 3;
-num2 % 9 * num1;
-num2 + num1 / 8 + 2;
    -
    4. -
- -

Certaines opérations de cet ensemble ne vous renvoient peut-être pas le résultat attendu ; le paragraphe qui suit vous explique pourquoi.

- -

Priorité des opérateurs

- -

Revenons sur le dernier exemple ci‑dessus, en supposant que num2 contient la valeur 50 et num1 contient 10 (comme défini plus haut) :

- -
num2 + num1 / 8 + 2;
- -

En tant qu'humain, vous pouvez lire « 50 plus 10 égale 60 », puis « 8 plus 2 égale 10 » et finalement « 60 divisé par 10 égale 6 ».

- -

Mais le navigateur calcule « 10 sur 8 égale 1.25 », puis « 50 plus 1.25 plus 2 égale 53.25 ».

- -

Cela est dû aux priorités entre opérateurs — certains sont appliqués avant d'autres dans une opération (on parle d'une expression en programmation). En JavaScript, la priorité des opérateurs est identique à celle enseignée à l'école — Multiplication et Division sont toujours effectuées en premier, suivies d'Addition et Soustraction (le calcul est toujours exécuté de la gauche vers la droite).

- -

Si vous voulez contourner les règles de priorité des opérateurs, vous pouvez mettre entre parenthèses les parties que vous souhaitez voir calculées en premier. Pour obtenir un résultat égal à 6, nous devons donc écrire :

- -
(num2 + num1) / (8 + 2);
- -

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.

-
- -

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

- -

Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (++) ou de décrementation (--). Nous nous sommes servis de ++ dans le jeu « Devinez le nombre » dans notre article Première plongée dans le JavaScript pour ajouter 1 à la variable guessCount pour décompter le nombre de suppositions restantes après chaque tour.

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

-
- -

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 :

- -
3++;
- -

Vous ne pouvez donc incrémenter qu'une variable déjà existante. Essayez ceci :

- -
var num1 = 4;
-num1++;
- -

Ok, curieuse la ligne 2 ! En écrivant cela, elle renvoie la valeur 4 — c'est dû au fait que l'explorateur renvoie la valeur courante, puis incrémente la variable. Vous constaterez qu'elle a bien été incrémentée si vous demandez de la revoir :

- -
num1;
- -

C'est pareil avec -- : essayez ce qui suit

- -
var num2 = 6;
-num2--;
-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

- -

Les opérateurs d'assignation sont ceux qui fixent la valeur d'une variable. Nous avons déjà utilisé plusieurs fois le plus élémentaire, = — il donne à la variable de gauche la valeur indiquée à droite :

- -
var x = 3; // x contient la valeur 3
-var y = 4; // y contient la valeur 4
-x = y; // x contient maintenant la même valeur que y, 4
- -

Mais il existe des types plus complexes, qui procurent des raccourcis utiles pour un code plus propre et plus efficace. Les plus courants sont listés ici :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpérateurNomButExempleRaccourci pour
+=Addition et assignationAjoute la valeur de droite à la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variablex = 3;
- x += 4;		x = 3;
- x = x + 4;
-=Soustraction et assignationSoustrait la valeur de droite à la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variablex = 6;
- x -= 3;		x = 6;
- x = x - 3;
*=Multiplication et assignationMultiplie la valeur de droite par la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variablex = 2;
- x *= 3;		x = 2;
- x = x * 3;
/=Division et assignationDivise la valeur de la variable de gauche par la valeur de droite, puis renvoie la nouvelle valeur de la variablex = 10;
- x /= 5;		x = 10;
- x = x / 5;
- -

Saisissez quelques uns de ces exemples dans la console pour avoir une idée de leur fonctionnement. Dans chaque cas, voyez si vous avez deviné la valeur avant de saisir la deuxième ligne.

- -

Notez que vous pouvez opportunément utiliser une autre variable comme opérateur sur la droite de chaque expression, par exemple :

- -
var x = 3; // x contient la valeur 3
-var y = 4; // y contient la valeur 4
-x *= y; // x contient maintenant la valeur 12
- -
-

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

- -

Dans cet exercice, vous allez manier quelques nombres et opérateurs pour changer la taille d'une boîte. La boîte est tracée à l'aide de l'API de navigateur nommée {{domxref("Canvas API", "", "", "true")}}. Pas besoin de savoir comment elle fonctionne — concentrez-vous simplement sur les mathématiques pour l'instant. Les largeur et hauteur de la boîte (en pixels) sont définies par les variables x et y, qui sont toutes deux initialisées avec la valeur 50.

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}

- -

Ouvrir dans une nouvelle fenêtre

- -

Le code dans la boîte ci-desssus peut être modifié. Un commentaire signale les deux lignes suivantes, que vous devez mettre à jour pour faire en sorte que la boîte grossisse ou rétrécisse aux tailles données, en utilisant certains opérateurs et/ou valeurs dans chaque cas. Essayez ce qui suit en réinitialisant à chaque étape :

- - - -

Pas d'inquiétude si vous vous trompez. Vous pouvez toujours presser le bouton Reset et les choses fonctionneront à nouveau. Après avoir répondu correctement aux questions posées, amusez‑vous avec ce code ou définissez vous‑même les défis.

- -

Opérateurs de comparaison

- -

Parfois nous avons besoin d'exécuter des tests vrai/faux (true/false), puis d'agir en fonction du résultat — pour ce faire, nous utilisons des opérateurs de comparaison.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperateurNomButExemple
===Égalité stricteTeste si les valeurs de droite et de gauche sont identiques5 === 2 + 4
!==Non-égalité stricteTeste si les valeurs de doite et de gauche ne sont pas identiques5 !== 2 + 3
<Inférieur àTeste si la valeur de gauche est plus petite que celle de droite.10 < 6
>Supérieur àTeste si la valeur de gauche est plus grande que celle de droite.10 > 20
<=Inférieur ou égal àTeste si la valeur de gauche est plus petite ou égale à celle de droite.3 <= 2
>=Supérieur ou égal àTeste si la valeur de gauche est supérieure ou égale à celle de droite.5 >= 4
- -
-

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 :

- - - -

Nous verrons comment coder cette logique quand nous étudierons les directives conditionnelles dans un article ultérieur. Pour le moment, regardons un exemple rapide :

- -
<button>Démarrer la machine</button>
-<p>La machine est arrêtée.</p>
-
- -
var btn = document.querySelector('button');
-var txt = document.querySelector('p');
-
-btn.addEventListener('click', updateBtn);
-
-function updateBtn() {
-  if (btn.textContent === 'Démarrer la machine') {
-    btn.textContent = 'Arrêter la machine';
-    txt.textContent = 'La machine est en marche !';
-  } else {
-    btn.textContent = 'Démarrer la machine';
-    txt.textContent = 'La machine est arrêtée.';
-  }
-}
- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

- -

Ouvrir dans une nouvelle fenêtre

- -

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.

-
- -

Résumé

- -

Dans cet article, nous avons exposé les informations fondamentales concernant les nombres en JavaScript, à connaître absolument pour débuter convenablement. Vous verrez encore et encore des utilisations de nombres tout au long de cet introduction au JavaScript, prenons donc une pause pour le moment. Si vous êtes de ceux qui n'aiment pas les maths, vous noterez avec satisfaction que ce chapitre était vraiment très court.

- -

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.

-
- -

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

diff --git a/files/fr/learn/javascript/first_steps/math/index.md b/files/fr/learn/javascript/first_steps/math/index.md new file mode 100644 index 0000000000..bdfdda9e64 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/math/index.md @@ -0,0 +1,450 @@ +--- +title: Mathématiques de base en JavaScript — nombres et opérateurs +slug: Learn/JavaScript/First_steps/Math +tags: + - Article + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - Math + - Operators + - augmented + - increment + - l10n:priority + - maths + - modulo +translation_of: Learn/JavaScript/First_steps/Math +--- +
{{LearnSidebar}}
+ +
{{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 :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Se familiariser avec les bases des maths en JavaScript.
+ +

Tout le monde aime les maths

+ +

Mouais, peut‑être pas. Certains parmi nous aiment les maths, d'autres les détestent depuis qu'il leur a fallu apprendre les tables de multiplication et les longues divisions à l'école, d'autres se situent entre les deux. Mais personne ne peut nier que les mathématiques sont une connaissance fondamentale dont il n'est pas possible de se passer. Cela devient particulièrement vrai lorsque nous apprenons à programmer en JavaScript (ou tout autre langage d'ailleurs) — une grande part de ce que nous faisons reposant en effet sur le traitement de données numériques, le calcul de nouvelles valeurs, etc. ; vous ne serez donc pas étonné d'apprendre que JavaScript dispose d'un ensemble complet de fonctions mathématiques.

+ +

Cet article ne traite que des éléments de base nécessaires pour débuter.

+ +

Types de nombres

+ +

En programmation, même l'ordinaire système des nombres décimaux que nous connaissons tous si bien est plus compliqué qu'on ne pourrait le croire. Nous utilisons divers termes pour décrire différents types de nombres décimaux, par exemple :

+ + + +

Nous disposons même de plusieurs systèmes de numération ! Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres :

+ + + +

Avant que votre cervelle ne se mette à bouillir, stop ! Pour commencer, nous ne nous intéresserons qu'aux nombres décimaux dans ce cours ; vous aurez rarement besoin de vous servir des autres types, peut-être même jamais.

+ +

L'autre bonne nouvelle, c'est que contrairement à d'autres langages de programmation, JavaScript n'a qu'un seul type de donnée pour les nombres, vous l'avez deviné : {{jsxref("Number")}}. Cela signifie que, en JavaScript, quels que soient les types de nombre avec lesquels vous travaillerez, vous les manipulerez tous exactement de la même façon.

+ +

Ce ne sont que des nombres pour moi

+ +

Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de base dont nous aurons besoin. Entrez les commandes listées ci-dessous dans la console JavaScript des outils de développement, ou utilisez la simple console intégrée que vous voyez ci-dessous si vous préférez.

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}}

+ +

Ouvrir la console dans une nouvelle fenêtre

+ +
    +
  1. Premièrement, déclarons une paire de variables et initialisons‑les respectivement avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct : + 
    var myInt = 5;
+var myFloat = 6.667;
+myInt;
+myFloat;
    +
    2. +
  2. Les nombres sont saisis sans guillemets — essayez de déclarer et initialiser deux ou trois variables de plus contenant des nombres avant de continuer.
    3. +
  3. 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é :
    4. +
  4. + 
    typeof myInt;
+typeof myFloat;
    +
    5. +
  5. "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 !
    6. +
+ +

Méthodes de nombres utiles

+ +

L'objet Number , une instance qui représente tous les nombres standards que vous utiliserez dans votre JavaScript, a de nombreuses méthodes disponibles pour vous permettre de manipuler les nombres. Nous ne les étudierons pas tous en détail dans cet article car nous voulons qu'il reste une simple introduction et nous verrons seulement les bases essentielles pour le moment; cependant, une fois que vous aurez lu ce module plusieurs fois, il pourra être utile de visiter les pages de référence d'objet et d'en apprendre plus sur ce qui est disponible.

+ +

Par exemple, pour arrondir votre nombre avec un nombre fixe de décimales, utilisez la méthode toFixed(). Tapez les lignes suivantes dans la console de votre navigateur:

+ +
let lotsOfDecimal = 1.766584958675746364;
+lotsOfDecimal;
+let twoDecimalPlaces = lotsOfDecimal.toFixed(2);
+twoDecimalPlaces;
+ +

Convertir en type de données numérique

+ +

Parfois vous pourriez finir avec un nombre stocké de type "string", ce qui rendra difficile le fait d'effectuer un calcul avec. Ca arrive le plus souvent lorsqu'une donnée est entrée dans une entrée de formulaire, et le type de donnée entré est du texte. Il éxiste une façon de résoudre ce problème — passer la valeur de "string" dans le constructeur Number() pour retourner une version numérique de la même valeur.

+ +

Par exemple, essayez de taper ces lignes dans votre console:

+ +
let myNumber = '74';
+myNumber + 3;
+ +

Vous obtenez le résultat 743, et non pas 77, car myNumber est en fait défini en tant que "string". Vous pouvez tester en tapant la ligne suivante:

+ +
typeof myNumber;
+ +

Pour réparer le calcul, vous pouvez faire ceci:

+ +
Number(myNumber) + 3;
+ +

Opérateurs arithmétiques

+ +

Ce sont les opérateurs de base pour effectuer diverses opérations :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperateurNomButExemple
+AdditionAjoute deux nombres.6 + 9
-SoustractionSoustrait le nombre de droite de celui de gauche.20 - 15
*MultiplicationMultiplie les deux nombrer.3 * 7
/DivisionDivise le nombre de gauche par celui de droite.10 / 5
% +

Reste (quelquefois nommé modulo)

+ 		+

Renvoie le reste de la division du nombre de gauche par celui de droite.

+ 		8 % 3 (renvoie 2, car 3 est contenu 2 fois dans 8, et il reste 2.)
+ +
+

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.

+ +
    +
  1. Essayez de saisir quelques exemples simples de votre cru, comme : + 
    10 + 7
+9 * 8
+60 % 3
    +
    2. +
  2. Déclarez et initialisez quelques variables, puis utilisez‑les dans des opérations — les variables se comporteront exactement comme les valeurs qu'elles contiennent pour les besoins de l'opération. Par exemple : + 
    var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;
    +
    3. +
  3. Pour terminer cette partie, entrez quelques expressions plus compliquées, comme : + 
    5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;
    +
    4. +
+ +

Certaines opérations de cet ensemble ne vous renvoient peut-être pas le résultat attendu ; le paragraphe qui suit vous explique pourquoi.

+ +

Priorité des opérateurs

+ +

Revenons sur le dernier exemple ci‑dessus, en supposant que num2 contient la valeur 50 et num1 contient 10 (comme défini plus haut) :

+ +
num2 + num1 / 8 + 2;
+ +

En tant qu'humain, vous pouvez lire « 50 plus 10 égale 60 », puis « 8 plus 2 égale 10 » et finalement « 60 divisé par 10 égale 6 ».

+ +

Mais le navigateur calcule « 10 sur 8 égale 1.25 », puis « 50 plus 1.25 plus 2 égale 53.25 ».

+ +

Cela est dû aux priorités entre opérateurs — certains sont appliqués avant d'autres dans une opération (on parle d'une expression en programmation). En JavaScript, la priorité des opérateurs est identique à celle enseignée à l'école — Multiplication et Division sont toujours effectuées en premier, suivies d'Addition et Soustraction (le calcul est toujours exécuté de la gauche vers la droite).

+ +

Si vous voulez contourner les règles de priorité des opérateurs, vous pouvez mettre entre parenthèses les parties que vous souhaitez voir calculées en premier. Pour obtenir un résultat égal à 6, nous devons donc écrire :

+ +
(num2 + num1) / (8 + 2);
+ +

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.

+
+ +

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

+ +

Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (++) ou de décrementation (--). Nous nous sommes servis de ++ dans le jeu « Devinez le nombre » dans notre article Première plongée dans le JavaScript pour ajouter 1 à la variable guessCount pour décompter le nombre de suppositions restantes après chaque tour.

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

+
+ +

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 :

+ +
3++;
+ +

Vous ne pouvez donc incrémenter qu'une variable déjà existante. Essayez ceci :

+ +
var num1 = 4;
+num1++;
+ +

Ok, curieuse la ligne 2 ! En écrivant cela, elle renvoie la valeur 4 — c'est dû au fait que l'explorateur renvoie la valeur courante, puis incrémente la variable. Vous constaterez qu'elle a bien été incrémentée si vous demandez de la revoir :

+ +
num1;
+ +

C'est pareil avec -- : essayez ce qui suit

+ +
var num2 = 6;
+num2--;
+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

+ +

Les opérateurs d'assignation sont ceux qui fixent la valeur d'une variable. Nous avons déjà utilisé plusieurs fois le plus élémentaire, = — il donne à la variable de gauche la valeur indiquée à droite :

+ +
var x = 3; // x contient la valeur 3
+var y = 4; // y contient la valeur 4
+x = y; // x contient maintenant la même valeur que y, 4
+ +

Mais il existe des types plus complexes, qui procurent des raccourcis utiles pour un code plus propre et plus efficace. Les plus courants sont listés ici :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpérateurNomButExempleRaccourci pour
+=Addition et assignationAjoute la valeur de droite à la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variablex = 3;
+ x += 4;		x = 3;
+ x = x + 4;
-=Soustraction et assignationSoustrait la valeur de droite à la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variablex = 6;
+ x -= 3;		x = 6;
+ x = x - 3;
*=Multiplication et assignationMultiplie la valeur de droite par la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variablex = 2;
+ x *= 3;		x = 2;
+ x = x * 3;
/=Division et assignationDivise la valeur de la variable de gauche par la valeur de droite, puis renvoie la nouvelle valeur de la variablex = 10;
+ x /= 5;		x = 10;
+ x = x / 5;
+ +

Saisissez quelques uns de ces exemples dans la console pour avoir une idée de leur fonctionnement. Dans chaque cas, voyez si vous avez deviné la valeur avant de saisir la deuxième ligne.

+ +

Notez que vous pouvez opportunément utiliser une autre variable comme opérateur sur la droite de chaque expression, par exemple :

+ +
var x = 3; // x contient la valeur 3
+var y = 4; // y contient la valeur 4
+x *= y; // x contient maintenant la valeur 12
+ +
+

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

+ +

Dans cet exercice, vous allez manier quelques nombres et opérateurs pour changer la taille d'une boîte. La boîte est tracée à l'aide de l'API de navigateur nommée {{domxref("Canvas API", "", "", "true")}}. Pas besoin de savoir comment elle fonctionne — concentrez-vous simplement sur les mathématiques pour l'instant. Les largeur et hauteur de la boîte (en pixels) sont définies par les variables x et y, qui sont toutes deux initialisées avec la valeur 50.

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}

+ +

Ouvrir dans une nouvelle fenêtre

+ +

Le code dans la boîte ci-desssus peut être modifié. Un commentaire signale les deux lignes suivantes, que vous devez mettre à jour pour faire en sorte que la boîte grossisse ou rétrécisse aux tailles données, en utilisant certains opérateurs et/ou valeurs dans chaque cas. Essayez ce qui suit en réinitialisant à chaque étape :

+ + + +

Pas d'inquiétude si vous vous trompez. Vous pouvez toujours presser le bouton Reset et les choses fonctionneront à nouveau. Après avoir répondu correctement aux questions posées, amusez‑vous avec ce code ou définissez vous‑même les défis.

+ +

Opérateurs de comparaison

+ +

Parfois nous avons besoin d'exécuter des tests vrai/faux (true/false), puis d'agir en fonction du résultat — pour ce faire, nous utilisons des opérateurs de comparaison.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperateurNomButExemple
===Égalité stricteTeste si les valeurs de droite et de gauche sont identiques5 === 2 + 4
!==Non-égalité stricteTeste si les valeurs de doite et de gauche ne sont pas identiques5 !== 2 + 3
<Inférieur àTeste si la valeur de gauche est plus petite que celle de droite.10 < 6
>Supérieur àTeste si la valeur de gauche est plus grande que celle de droite.10 > 20
<=Inférieur ou égal àTeste si la valeur de gauche est plus petite ou égale à celle de droite.3 <= 2
>=Supérieur ou égal àTeste si la valeur de gauche est supérieure ou égale à celle de droite.5 >= 4
+ +
+

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 :

+ + + +

Nous verrons comment coder cette logique quand nous étudierons les directives conditionnelles dans un article ultérieur. Pour le moment, regardons un exemple rapide :

+ +
<button>Démarrer la machine</button>
+<p>La machine est arrêtée.</p>
+
+ +
var btn = document.querySelector('button');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.textContent === 'Démarrer la machine') {
+    btn.textContent = 'Arrêter la machine';
+    txt.textContent = 'La machine est en marche !';
+  } else {
+    btn.textContent = 'Démarrer la machine';
+    txt.textContent = 'La machine est arrêtée.';
+  }
+}
+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

+ +

Ouvrir dans une nouvelle fenêtre

+ +

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.

+
+ +

Résumé

+ +

Dans cet article, nous avons exposé les informations fondamentales concernant les nombres en JavaScript, à connaître absolument pour débuter convenablement. Vous verrez encore et encore des utilisations de nombres tout au long de cet introduction au JavaScript, prenons donc une pause pour le moment. Si vous êtes de ceux qui n'aiment pas les maths, vous noterez avec satisfaction que ce chapitre était vraiment très court.

+ +

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.

+
+ +

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

diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html deleted file mode 100644 index 298aef0296..0000000000 --- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Générateur d'histoires absurdes -slug: Learn/JavaScript/First_steps/Silly_story_generator -translation_of: Learn/JavaScript/First_steps/Silly_story_generator ---- -
{{LearnSidebar}}
- -
{{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 !

- - - - - - - - - - - - -
Prérequis : -

Avant de vous lancer dans cette évaluation, vous devez avoir déjà travaillé sur tous les articles de ce module.

-
Objectif : -

Tester la compréhension des fondamentaux JavaScript tels que les variables, les nombres, les opérateurs, les chaînes de caractères et les tableaux.

-
- -

Point de départ

- -

Pour commencer cette évaluation :

- - - -
-

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

- -

On vous a fourni du code HTML/CSS brut ainsi que quelques chaînes de caractères et fonctions JavaScript : vous devez écrire le code JavaScript nécessaire pour transformer ces éléments en un programme fonctionnel, qui fera les choses suivantes :

- - - -

Les captures d'écran suivantes montrent un exemple de ce que le programme terminé doit afficher :

- -

- -

Pour vous faire une idée un peu plus précise, jetez un œil à l'exemple terminé (mais sans regarder le code source !)

- -

Les étapes

- -

Les sections suivantes décrivent ce que vous devez faire :

- -

Installation basique :

- -
    -
  1. Créez un nouveau fichier nommé main.js, dans le même dossier que index.html file.
    2. -
  2. Appliquez le fichier JavaScript externe à votre code HTML en insérant une balise {{htmlelement("script")}} dans votre code HTML en référençant main.js. Mettez-la juste avant de refermer la balise </body>.
    3. -
- -

Variables initiales et fonctions :

- -
    -
  1. Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier main. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (randomize), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (story). Par ailleurs, vous avez une fonction appelée randomValueFromArray() qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient.
    2. -
  2. Maintenant regardons la deuxième section du fichier de texte brut : "2. RAW TEXT STRINGS". Cette section contient des chaînes de caractères qui vont se comporter comme des entrées (input) dans notre program. L'idée est que vous intégriez ces variables internes dans main.js: -
      -
    1. Stockez la première longue chaîne de caractères (string) dans la variable storyText.
      2. -
    2. Stockez le premier groupe de trois strings dans le tableau insertX.
      3. -
    3. Stockez le deuxième groupe de trois strings dans le tableau insertY.
      4. -
    4. Stockez le troisième groupe de trois strings dans une tableau insertZ.
      5. -
    -
    3. -
- -

Mettre en place le gestionnaire d'événements (event handler) et le squelette de la fonction :

- -
    -
  1. Retournez au fichier de texte brut.
    2. -
  2. Copiez le code qui se trouve sous le titre "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" et collez-le en bas de votre fichier main.js principal. Cela : -
      -
    • Ajoute un gestionnaire d'événements pour les clics à la variable randomize de telle sorte que quand on clique sur le bouton associé, la fonction result() se lance.
      • -
    • Ajoute une définition partiellement complète de la fonction result() à votre code. Pour le reste de l'évaluation, vous compléterez des lignes au sein de cette fonction pour la compléter et la faire fonctionner correctement.
      • -
    -
    3. -
- -

Compléter la fonction result() :

- -
    -
  1. Créer une nouvelle variable nommée newStory, et fixer sa valeur pour qu'elle soit égale à storyText. C'est nécessaire pour que soit créée une nouvelle histoire au hasard à chaque fois qu'on appuiera sur le bouton "Generate" et que la fonction sera lancée. Si on apportait des modifications directement à storyText, on ne pourrait générer une nouvelle histoire qu'une seule fois.
    2. -
  2. Créer trois nouvelles variables nommées xItem, yItem, et zItem, et faites en sorte qu'elles soient égales au résultat de l'appel de randomValueFromArray() sur vos trois tables (le résultat dans chaque cas fera apparaître un élément au hasard en provenance de chacune des tables appelées). Par exemple, vous pouvez appeler la fonction et lui faire retourner une chaîne de caractères au hasard depuis insertX en écrivant randomValueFromArray(insertX).
    3. -
  3. Ensuite nous allons remplacer les trois fichiers temporaires dans la chaîne newStory — :insertx:, :inserty:, et :insertz: — par les chaînes stockées dans xItem, yItem, and zItem. Ici, une méthode particulière de chaînes pourra vous aider : dans chaque cas, faites que l'appel à la méthode soit égal à newStory, de sorte qu'à chaque appel, newStory est égal à lui-même, mais avec les substitutions effectuées. Ainsi, à chaque fois qu'on appuiera sur le bouton, ces fichiers temporaires seront chacun remplacés par une chaîne de caractères absurdes au hasard. Pour information, la méthode en question remplace seulement la première séquence de sous-chaîne qu'elle trouve, donc vous devrez peut-être l'un des appels deux fois.
    4. -
  4. Dans le premier block if, ajoutez une autre méthode de remplacement de chaîne pour remplacer le nom 'Bob' que vous trouverez dans la chaîne newStory en tant que variable name. Dans ce block, on établit que "Si une valeur a été entrée dans le champ customName text input, on remplacera dans l'histoire le mot Bob par ce nom personnalisé".
    5. -
  5. Dans le deuxième block if, on vérifie que le bouton radio uk a été coché. Si c'est le cas, nous voulons convertir les valeurs de poids et de température de l'histoire. Les pounds et les farenheit deviennent des stones et des centigrades. Procédez comme suit : -
      -
    1. Cherchez la formule pour convertir les pounds en stones et les fareinheit en centigrades.
      2. -
    2. Dans la ligne qui définit la variable weight (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un Math.round() à la fin duquel vous concatenez 'stone'.
      3. -
    3. Dans la ligne qui définit la variable temperature, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un Math.round() à la fin duquel vous concatenez 'centigrade'.
      4. -
    4. Juste sous la définition des deux variables, ajoutez deux lignes de remplacement de chaînes supplémentaires qui remplacent '94 farhenheit' par les contenus de la variable temperature, et '300 pounds' par les contenus de la variable weight.
      5. -
    -
    6. -
  6. Enfin, dans l'antépénultième ligne de la fonction, faites en sorte que la propriété textContent de la variable story (qui référence le paragraphe) soit égale à newStory.
    7. -
- -

Trucs et astuces

- - - -

Évaluation

- -

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir soumettre votre travail à votre enseignant/encadrant pour être évalué. Si vous êtes autodidacte, vous pouvez facilement obtenir le guide de notation en vous adressant à la mailing list dev-mdc ou au canal IRC #mdn sur Mozilla IRC. Essayez de faire l'exercice d'abord — vous ne gagnez rien à tricher !

- -

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

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md new file mode 100644 index 0000000000..298aef0296 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md @@ -0,0 +1,143 @@ +--- +title: Générateur d'histoires absurdes +slug: Learn/JavaScript/First_steps/Silly_story_generator +translation_of: Learn/JavaScript/First_steps/Silly_story_generator +--- +
{{LearnSidebar}}
+ +
{{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 !

+ + + + + + + + + + + + +
Prérequis : +

Avant de vous lancer dans cette évaluation, vous devez avoir déjà travaillé sur tous les articles de ce module.

+
Objectif : +

Tester la compréhension des fondamentaux JavaScript tels que les variables, les nombres, les opérateurs, les chaînes de caractères et les tableaux.

+
+ +

Point de départ

+ +

Pour commencer cette évaluation :

+ + + +
+

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

+ +

On vous a fourni du code HTML/CSS brut ainsi que quelques chaînes de caractères et fonctions JavaScript : vous devez écrire le code JavaScript nécessaire pour transformer ces éléments en un programme fonctionnel, qui fera les choses suivantes :

+ + + +

Les captures d'écran suivantes montrent un exemple de ce que le programme terminé doit afficher :

+ +

+ +

Pour vous faire une idée un peu plus précise, jetez un œil à l'exemple terminé (mais sans regarder le code source !)

+ +

Les étapes

+ +

Les sections suivantes décrivent ce que vous devez faire :

+ +

Installation basique :

+ +
    +
  1. Créez un nouveau fichier nommé main.js, dans le même dossier que index.html file.
    2. +
  2. Appliquez le fichier JavaScript externe à votre code HTML en insérant une balise {{htmlelement("script")}} dans votre code HTML en référençant main.js. Mettez-la juste avant de refermer la balise </body>.
    3. +
+ +

Variables initiales et fonctions :

+ +
    +
  1. Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier main. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (randomize), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (story). Par ailleurs, vous avez une fonction appelée randomValueFromArray() qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient.
    2. +
  2. Maintenant regardons la deuxième section du fichier de texte brut : "2. RAW TEXT STRINGS". Cette section contient des chaînes de caractères qui vont se comporter comme des entrées (input) dans notre program. L'idée est que vous intégriez ces variables internes dans main.js: +
      +
    1. Stockez la première longue chaîne de caractères (string) dans la variable storyText.
      2. +
    2. Stockez le premier groupe de trois strings dans le tableau insertX.
      3. +
    3. Stockez le deuxième groupe de trois strings dans le tableau insertY.
      4. +
    4. Stockez le troisième groupe de trois strings dans une tableau insertZ.
      5. +
    +
    3. +
+ +

Mettre en place le gestionnaire d'événements (event handler) et le squelette de la fonction :

+ +
    +
  1. Retournez au fichier de texte brut.
    2. +
  2. Copiez le code qui se trouve sous le titre "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" et collez-le en bas de votre fichier main.js principal. Cela : +
      +
    • Ajoute un gestionnaire d'événements pour les clics à la variable randomize de telle sorte que quand on clique sur le bouton associé, la fonction result() se lance.
      • +
    • Ajoute une définition partiellement complète de la fonction result() à votre code. Pour le reste de l'évaluation, vous compléterez des lignes au sein de cette fonction pour la compléter et la faire fonctionner correctement.
      • +
    +
    3. +
+ +

Compléter la fonction result() :

+ +
    +
  1. Créer une nouvelle variable nommée newStory, et fixer sa valeur pour qu'elle soit égale à storyText. C'est nécessaire pour que soit créée une nouvelle histoire au hasard à chaque fois qu'on appuiera sur le bouton "Generate" et que la fonction sera lancée. Si on apportait des modifications directement à storyText, on ne pourrait générer une nouvelle histoire qu'une seule fois.
    2. +
  2. Créer trois nouvelles variables nommées xItem, yItem, et zItem, et faites en sorte qu'elles soient égales au résultat de l'appel de randomValueFromArray() sur vos trois tables (le résultat dans chaque cas fera apparaître un élément au hasard en provenance de chacune des tables appelées). Par exemple, vous pouvez appeler la fonction et lui faire retourner une chaîne de caractères au hasard depuis insertX en écrivant randomValueFromArray(insertX).
    3. +
  3. Ensuite nous allons remplacer les trois fichiers temporaires dans la chaîne newStory — :insertx:, :inserty:, et :insertz: — par les chaînes stockées dans xItem, yItem, and zItem. Ici, une méthode particulière de chaînes pourra vous aider : dans chaque cas, faites que l'appel à la méthode soit égal à newStory, de sorte qu'à chaque appel, newStory est égal à lui-même, mais avec les substitutions effectuées. Ainsi, à chaque fois qu'on appuiera sur le bouton, ces fichiers temporaires seront chacun remplacés par une chaîne de caractères absurdes au hasard. Pour information, la méthode en question remplace seulement la première séquence de sous-chaîne qu'elle trouve, donc vous devrez peut-être l'un des appels deux fois.
    4. +
  4. Dans le premier block if, ajoutez une autre méthode de remplacement de chaîne pour remplacer le nom 'Bob' que vous trouverez dans la chaîne newStory en tant que variable name. Dans ce block, on établit que "Si une valeur a été entrée dans le champ customName text input, on remplacera dans l'histoire le mot Bob par ce nom personnalisé".
    5. +
  5. Dans le deuxième block if, on vérifie que le bouton radio uk a été coché. Si c'est le cas, nous voulons convertir les valeurs de poids et de température de l'histoire. Les pounds et les farenheit deviennent des stones et des centigrades. Procédez comme suit : +
      +
    1. Cherchez la formule pour convertir les pounds en stones et les fareinheit en centigrades.
      2. +
    2. Dans la ligne qui définit la variable weight (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un Math.round() à la fin duquel vous concatenez 'stone'.
      3. +
    3. Dans la ligne qui définit la variable temperature, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un Math.round() à la fin duquel vous concatenez 'centigrade'.
      4. +
    4. Juste sous la définition des deux variables, ajoutez deux lignes de remplacement de chaînes supplémentaires qui remplacent '94 farhenheit' par les contenus de la variable temperature, et '300 pounds' par les contenus de la variable weight.
      5. +
    +
    6. +
  6. Enfin, dans l'antépénultième ligne de la fonction, faites en sorte que la propriété textContent de la variable story (qui référence le paragraphe) soit égale à newStory.
    7. +
+ +

Trucs et astuces

+ + + +

Évaluation

+ +

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir soumettre votre travail à votre enseignant/encadrant pour être évalué. Si vous êtes autodidacte, vous pouvez facilement obtenir le guide de notation en vous adressant à la mailing list dev-mdc ou au canal IRC #mdn sur Mozilla IRC. Essayez de faire l'exercice d'abord — vous ne gagnez rien à tricher !

+ +

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

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/first_steps/strings/index.html b/files/fr/learn/javascript/first_steps/strings/index.html deleted file mode 100644 index 457cf98379..0000000000 --- a/files/fr/learn/javascript/first_steps/strings/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: Gérer du texte — les chaînes de caractères en JavaScript -slug: Learn/JavaScript/First_steps/Strings -translation_of: Learn/JavaScript/First_steps/Strings ---- -
{{LearnSidebar}}
- -
{{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 :Connaissance de base en informatique, une compréhension basique de HTML et CSS et savoir ce qu'est JavaScript.
Objectif :Devenir familier avec les fondamentaux pour manipuler les chaînes de caractères en JavaScript.
- -

Le pouvoir des mots

- -

Les mots ont beaucoup d'importance pour les humains — ils occupent une large part dans nos façons de communiquer. Comme le Web est un medium essentiellement fondé sur du texte conçu pour permettre aux hommes de communiquer et partager de l'information, il est utile de contrôler les mots qui y sont publiés. {{glossary("HTML")}} donne structure et sens au texte, {{glossary("CSS")}} en gère le style et JavaScript comporte une série de fonctionnalités pour manipuler les chaînes de caractères, créer des messages d'accueil personnalisés, afficher la bonne étiquette quand nécessaire, trier des termes dans l'ordre voulu, et bien d'autres choses encore.

- -

À peu près tous les programmes que nous vous avons montrés jusqu'ici ont impliqué des manipulations de chaînes de caractères.

- -

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

- - - -

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

- -

Créer une chaîne de texte

- -
    -
  1. Pour débuter, entrez les lignes suivantes : - 
    let string = 'La révolution ne sera pas télévisée.';
-string;
    - Comme nous l'avons fait avec les nombres, nous déclarons une variable, l'initialisons avec une valeur de chaîne, puis renvoyons la valeur. La seule différence ici est que lorsque nous écrivons une chaîne, nous la mettons entre guillemets.
    2. -
  2. Si vous ne le faites pas, ou si vous oubliez un des guillemets, vous déclenchez une erreur. Essayez d'entrer une de ces lignes : - 
    let badString = Voici un test;
-let badString = 'Voici un test;
-let badString = Voici un test';
    - Ces lignes de code ne fonctionnent pas parce que toute chaîne de texte qui n'est pas écrite entre guillemets est considérée comme un nom de variable, un nom de propriété, un mot réservé ou quelque chose de semblable. Quand l'interpréteur ne parvient pas à trouver la déclaration de ladite variable, une erreur est déclenchée (par ex. « missing ; before statement »). Si l'interpréteur voit le début d'une chaîne  mais ne trouve pas sa fin, comme dans la ligne 2, il se plaint en émettant une erreur (avec « unterminated string literal »). Si votre programme produit de telles erreurs, revoyez‑le et vérifiez qu'aucun guillemet ne manque.
    3. -
  3. L'assertion suivante fonctionne si la variable string a été préalablement définie — essayez maintenant : - 
    let badString = string;
-badString;
    - badString est maintenant défini avec la même valeur que string.
    4. -
- -

Guillemets simples vs guillemets doubles

- -
    -
  1. En JavaScript, vous pouvez envelopper vos chaînes entre des guillemets simples ou doubles. Les deux expressions suivantes sont correctes : - 
    let sgl = 'Guillemet simple.';
-let dbl = "Guillemets doubles.";
-sgl;
-dbl;
    -
    2. -
  2. Il y a une toute petite différence entre les deux, et celle que vous retenez relève de la préférence personnelle. Prenez-en une, et tenez‑vous y toutefois : du code avec des mises entre guillemets diversifiées peut amener des confusions, en particulier si vous utilisez les deux sortes dans la même chaîne ! Ce qui suit renvoie une erreur : - 
    let badQuotes = 'Quoi sur Terre ?";
    -
    3. -
  3. L'interpréteur pensera que la chaîne n'a pas été fermée, car le type de guillemet autre ne servant pas à délimiter les chaînes peut y être employé. Par exemple, ces deux assertions sont valables : - 
    let sglDbl = 'Mangeriez‑vous un "souper de poisson"?';
-let dblSgl = "J'ai le blues.";
-sglDbl;
-dblSgl;
    -
    4. -
  4. Bien entendu, vous ne pouvez pas inclure dans la chaîne le même type de guillemet que celui qui est utilisé pour la délimiter. Ce qui suit conduit à une erreur, car l'explorateur ne peut pas déterminer là où se termine la chaîne : - 
    let bigmouth = 'Je n'ai pas eu droit à prendre place...';
    - Voilà qui nous amène naturellement au prochain sujet.
    5. -
- -

Échappement de caractères dans une chaîne

- -

Pour corriger l'erreur dans notre ligne de code précédente, il nous suffit d'échapper au problème que pose le guillemet. « Échapper des caractères » signifie que nous les marquons de manière à ce qu'ils soient reconnus comme partie intégrante du texte, et non pas comme symbole de code. Dans JavaScript, nous le faisons en mettant une barre oblique inverse juste avant le caractère. Essayons :

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

- -
    -
  1. Concaténer est un terme de programmation du genre chic qui signifie « attacher ensemble ». Pour attacher des chaînes en JavaScript, on utilise l'opérateur plus (+) , le même que l'on utilise pour ajouter deux nombres, mais dans ce contexte il fait quelque chose de différent. Voyons un exemple dans la console. - 
    let one = 'Hello, ';
-let two = 'comment allez‑vous ?';
-let joined = one + two;
-joined;
    - Il en résulte que la variable nommée joined contient la valeur "Hello, comment allez‑vous ?".
    2. -
  2. Dans le dernier exemple, nous avons juste attaché deux chaînes ensemble, mais vous pouvez en attacher autant que vous voulez, pour autant que vous mettiez un signe  +  entre chacune. Essayez ceci : - 
    let multiple = one + one + one + one + two;
-multiple;
    -
    3. -
  3. Vous pouvez aussi mélanger des variables avec des vraies chaînes. Regardez : - 
    let response = one + 'Je vais bien — et vous ' + two;
-response;
    -
    4. -
- -
-

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

- -

Examinons une concaténation dans une action — voici un exemple tiré en amont de ce cours :

- -
<button>Pressez‑moi</button>
- -
let button = document.querySelector('button');
-
-button.onclick = function() {
-  let name = prompt('Quel est votre nom ?');
-  alert('Hello ' + name + ', sympa de vous voir !');
-}
- -

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

- -

Nombres vs chaînes

- -
    -
  1. Que se passe-t-il quand nous essayons d'additionner (ou concaténer) une chaîne et un nombre ? Essayons dans la console : - 
    'Front ' + 242;
-
    - Vous vous attendriez à déclencher une erreur, mais cela fonctionne parfaitement. Essayer de représenter une chaîne comme un nombre n'a vraiment aucun sens, mais représenter un nombre par une chaîne en a, donc le navigateur convertit adroitement le nombre en chaîne et concatène les deux chaînes.
    2. -
  2. Vous pouvez même faire cela avec deux nombres — vous forcez un nombre à devenir une chaîne en le mettant entre guillemets. Essayez ce qui suit (nous nous servons de l'opérateur typeof pour vérifier si la variable est un nombre ou une chaîne): - 
    let myDate = '19' + '67';
-typeof myDate;
    -
    3. -
  3. Si vous avez une variable numérique que vous souhaitez convertir en chaîne sans autre modification, ou une variable numérique que vous voulez convertir en chaîne sans autre modification, vous pouvez utiliser les constructions suivantes : -
      -
    • L'objet {{jsxref("Number")}} convertit tout ce qui lui est passé en nombre, si c'est possible. Essayez : - 
      let myString = '123';
-let myNum = Number(myString);
-typeof myNum;
      -
      • -
    • 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;
      -
      • -
    - Ces constructions peuvent être vraiment utiles en certaines circonstances. Par exemple, si un utilisateur entre un nombre dans un champ texte d'un formulaire, c'est une chaîne. Mais si vous voulez ajouter ce nombre à autre chose, il est nécessaire qu'il soit du type number, donc vous pouvez le faire passer par la méthode Number() pour gérer cela. C'est exactement ce que nous avons fait dans le jeu Devinez un nombre, à la ligne 63.
    4. -
- -

Conclusion

- -

Voilà donc les bases de la manipulation des chaînes de caractères en JavaScript. Dans le prochain article, nous allons bâtir sur ces éléments en examinant certaines méthodes intégrées disponibles pour les chaînes de caractères dans JavaScript et en les utilisant pour mettre les chaînes de caractères dans la forme voulue.

- -

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

diff --git a/files/fr/learn/javascript/first_steps/strings/index.md b/files/fr/learn/javascript/first_steps/strings/index.md new file mode 100644 index 0000000000..457cf98379 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/strings/index.md @@ -0,0 +1,264 @@ +--- +title: Gérer du texte — les chaînes de caractères en JavaScript +slug: Learn/JavaScript/First_steps/Strings +translation_of: Learn/JavaScript/First_steps/Strings +--- +
{{LearnSidebar}}
+ +
{{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 :Connaissance de base en informatique, une compréhension basique de HTML et CSS et savoir ce qu'est JavaScript.
Objectif :Devenir familier avec les fondamentaux pour manipuler les chaînes de caractères en JavaScript.
+ +

Le pouvoir des mots

+ +

Les mots ont beaucoup d'importance pour les humains — ils occupent une large part dans nos façons de communiquer. Comme le Web est un medium essentiellement fondé sur du texte conçu pour permettre aux hommes de communiquer et partager de l'information, il est utile de contrôler les mots qui y sont publiés. {{glossary("HTML")}} donne structure et sens au texte, {{glossary("CSS")}} en gère le style et JavaScript comporte une série de fonctionnalités pour manipuler les chaînes de caractères, créer des messages d'accueil personnalisés, afficher la bonne étiquette quand nécessaire, trier des termes dans l'ordre voulu, et bien d'autres choses encore.

+ +

À peu près tous les programmes que nous vous avons montrés jusqu'ici ont impliqué des manipulations de chaînes de caractères.

+ +

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

+ + + +

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

+ +

Créer une chaîne de texte

+ +
    +
  1. Pour débuter, entrez les lignes suivantes : + 
    let string = 'La révolution ne sera pas télévisée.';
+string;
    + Comme nous l'avons fait avec les nombres, nous déclarons une variable, l'initialisons avec une valeur de chaîne, puis renvoyons la valeur. La seule différence ici est que lorsque nous écrivons une chaîne, nous la mettons entre guillemets.
    2. +
  2. Si vous ne le faites pas, ou si vous oubliez un des guillemets, vous déclenchez une erreur. Essayez d'entrer une de ces lignes : + 
    let badString = Voici un test;
+let badString = 'Voici un test;
+let badString = Voici un test';
    + Ces lignes de code ne fonctionnent pas parce que toute chaîne de texte qui n'est pas écrite entre guillemets est considérée comme un nom de variable, un nom de propriété, un mot réservé ou quelque chose de semblable. Quand l'interpréteur ne parvient pas à trouver la déclaration de ladite variable, une erreur est déclenchée (par ex. « missing ; before statement »). Si l'interpréteur voit le début d'une chaîne  mais ne trouve pas sa fin, comme dans la ligne 2, il se plaint en émettant une erreur (avec « unterminated string literal »). Si votre programme produit de telles erreurs, revoyez‑le et vérifiez qu'aucun guillemet ne manque.
    3. +
  3. L'assertion suivante fonctionne si la variable string a été préalablement définie — essayez maintenant : + 
    let badString = string;
+badString;
    + badString est maintenant défini avec la même valeur que string.
    4. +
+ +

Guillemets simples vs guillemets doubles

+ +
    +
  1. En JavaScript, vous pouvez envelopper vos chaînes entre des guillemets simples ou doubles. Les deux expressions suivantes sont correctes : + 
    let sgl = 'Guillemet simple.';
+let dbl = "Guillemets doubles.";
+sgl;
+dbl;
    +
    2. +
  2. Il y a une toute petite différence entre les deux, et celle que vous retenez relève de la préférence personnelle. Prenez-en une, et tenez‑vous y toutefois : du code avec des mises entre guillemets diversifiées peut amener des confusions, en particulier si vous utilisez les deux sortes dans la même chaîne ! Ce qui suit renvoie une erreur : + 
    let badQuotes = 'Quoi sur Terre ?";
    +
    3. +
  3. L'interpréteur pensera que la chaîne n'a pas été fermée, car le type de guillemet autre ne servant pas à délimiter les chaînes peut y être employé. Par exemple, ces deux assertions sont valables : + 
    let sglDbl = 'Mangeriez‑vous un "souper de poisson"?';
+let dblSgl = "J'ai le blues.";
+sglDbl;
+dblSgl;
    +
    4. +
  4. Bien entendu, vous ne pouvez pas inclure dans la chaîne le même type de guillemet que celui qui est utilisé pour la délimiter. Ce qui suit conduit à une erreur, car l'explorateur ne peut pas déterminer là où se termine la chaîne : + 
    let bigmouth = 'Je n'ai pas eu droit à prendre place...';
    + Voilà qui nous amène naturellement au prochain sujet.
    5. +
+ +

Échappement de caractères dans une chaîne

+ +

Pour corriger l'erreur dans notre ligne de code précédente, il nous suffit d'échapper au problème que pose le guillemet. « Échapper des caractères » signifie que nous les marquons de manière à ce qu'ils soient reconnus comme partie intégrante du texte, et non pas comme symbole de code. Dans JavaScript, nous le faisons en mettant une barre oblique inverse juste avant le caractère. Essayons :

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

+ +
    +
  1. Concaténer est un terme de programmation du genre chic qui signifie « attacher ensemble ». Pour attacher des chaînes en JavaScript, on utilise l'opérateur plus (+) , le même que l'on utilise pour ajouter deux nombres, mais dans ce contexte il fait quelque chose de différent. Voyons un exemple dans la console. + 
    let one = 'Hello, ';
+let two = 'comment allez‑vous ?';
+let joined = one + two;
+joined;
    + Il en résulte que la variable nommée joined contient la valeur "Hello, comment allez‑vous ?".
    2. +
  2. Dans le dernier exemple, nous avons juste attaché deux chaînes ensemble, mais vous pouvez en attacher autant que vous voulez, pour autant que vous mettiez un signe  +  entre chacune. Essayez ceci : + 
    let multiple = one + one + one + one + two;
+multiple;
    +
    3. +
  3. Vous pouvez aussi mélanger des variables avec des vraies chaînes. Regardez : + 
    let response = one + 'Je vais bien — et vous ' + two;
+response;
    +
    4. +
+ +
+

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

+ +

Examinons une concaténation dans une action — voici un exemple tiré en amont de ce cours :

+ +
<button>Pressez‑moi</button>
+ +
let button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('Quel est votre nom ?');
+  alert('Hello ' + name + ', sympa de vous voir !');
+}
+ +

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

+ +

Nombres vs chaînes

+ +
    +
  1. Que se passe-t-il quand nous essayons d'additionner (ou concaténer) une chaîne et un nombre ? Essayons dans la console : + 
    'Front ' + 242;
+
    + Vous vous attendriez à déclencher une erreur, mais cela fonctionne parfaitement. Essayer de représenter une chaîne comme un nombre n'a vraiment aucun sens, mais représenter un nombre par une chaîne en a, donc le navigateur convertit adroitement le nombre en chaîne et concatène les deux chaînes.
    2. +
  2. Vous pouvez même faire cela avec deux nombres — vous forcez un nombre à devenir une chaîne en le mettant entre guillemets. Essayez ce qui suit (nous nous servons de l'opérateur typeof pour vérifier si la variable est un nombre ou une chaîne): + 
    let myDate = '19' + '67';
+typeof myDate;
    +
    3. +
  3. Si vous avez une variable numérique que vous souhaitez convertir en chaîne sans autre modification, ou une variable numérique que vous voulez convertir en chaîne sans autre modification, vous pouvez utiliser les constructions suivantes : +
      +
    • L'objet {{jsxref("Number")}} convertit tout ce qui lui est passé en nombre, si c'est possible. Essayez : + 
      let myString = '123';
+let myNum = Number(myString);
+typeof myNum;
      +
      • +
    • 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;
      +
      • +
    + Ces constructions peuvent être vraiment utiles en certaines circonstances. Par exemple, si un utilisateur entre un nombre dans un champ texte d'un formulaire, c'est une chaîne. Mais si vous voulez ajouter ce nombre à autre chose, il est nécessaire qu'il soit du type number, donc vous pouvez le faire passer par la méthode Number() pour gérer cela. C'est exactement ce que nous avons fait dans le jeu Devinez un nombre, à la ligne 63.
    4. +
+ +

Conclusion

+ +

Voilà donc les bases de la manipulation des chaînes de caractères en JavaScript. Dans le prochain article, nous allons bâtir sur ces éléments en examinant certaines méthodes intégrées disponibles pour les chaînes de caractères dans JavaScript et en les utilisant pour mettre les chaînes de caractères dans la forme voulue.

+ +

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

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 deleted file mode 100644 index a281723a68..0000000000 --- a/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: 'Testez vos compétences : les tableaux' -slug: Learn/JavaScript/First_steps/Test_your_skills:_Arrays -tags: - - Arrays - - Beginner - - JavaScript - - Learn - - test your skills -translation_of: Learn/JavaScript/First_steps/Test_your_skills:_Arrays -original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux ---- -
{{learnsidebar}}
- -

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.

-

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

-
- -

Tableaux - Exercice 1

- -

Commençons par quelques manipulations de base. Dans cet exercice, vous devrez créer un tableau avec trois éléments. Ce tableau devra être stocké dans une variable intitulée myArray. Les éléments du tableau peuvent être n'importe quoi (si vous avez besoin d'inspiration : pourquoi ne pas utiliser vos plats ou vos groupes de musique préférés ?).

- -

Ensuite, modifiez les deux premiers éléments du tableau en utilisant la notation avec les guillemets/quotes et des opérations d'affectation. Puis ajoutez un nouvel élément au début du tableau.

- -

Vous pouvez mettre à jour le code suivant pour parvenir à la solution :

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays1.html", '100%', 400)}}

- -
-

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

- -

Voyons maintenant un autre exercice. Ici, vous avez une chaîne de caractères sur laquelle travailler. Vous devrez :

- -
    -
  1. Convertir la chaîne de caractères en un tableau tout en retirant les caractères + lors de la conversion. Stockez ensuite le résultat dans une variable intitulée myArray.
    2. -
  2. Stocker la longueur du tableau dans une variable intitulée arrayLength.
    3. -
  3. Stocker le dernier élément du tableau dans une variable intitulée lastItem.
    4. -
- -

Essayez de mettre à jour le code qui suit pour parvenir à la solution :

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays2.html", '100%', 400)}}

- -
-

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

- -

Dans ce dernier exercice, vous disposez d'un tableau de départ et vous devrez effectuer les opérations inverses de l'exercice précédent. Voici ce qu'il faudra réaliser :

- -
    -
  1. Retirer le dernier élément du tableau.
    2. -
  2. Ajouter deux nouveaux noms à la fin du tableau.
    3. -
  3. Parcourir chaque élément du tableau et ajouter son indice, entre parenthèses, après le nom (par exemple Ryu (0)). Note : ceci n'est pas indiqué dans l'article sur les tableaux, il vous faudra rechercher comment faire.
    4. -
  4. Enfin, fusionner les éléments du tableau dans une chaîne de caractères intitulée myString en utilisant " - " comme séparateur.
    5. -
- -

Essayez de mettre à jour le code qui suit pour parvenir à la solution :

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays3.html", '100%', 400)}}

- -
-

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

- -

Vous pouvez vous exercer sur ces exemples grâce aux éditeurs interactifs de la page.

- -

Si vous souhaitez faire évaluer votre travail ou si vous êtes bloqué·e et que vous voulez demander de l'aide :

- -
    -
  1. Enregistrez votre travail dans un éditeur en ligne tel que CodePen, jsFiddle, ou Glitch pour le partager. Vous pouvez écrire le code vous-même ou utiliser les fichiers téléchargeables indiqués comme point de départ.
    2. -
  2. Rédigez un message pour la demande d'aide ou d'évaluation sur la catégorie Learning du forum Discourse de MDN. Votre billet devrait inclure : -
      -
    • Un titre descriptif comme « Évaluation demandée pour le test Tableaux JavaScript ».
      • -
    • Des détails sur ce que vous avez déjà tenté et sur quels aspects vous avez besoin d'aide si vous bloquez.
      • -
    • Un lien vers l'exemple que vous voulez évaluer ou sur lequel vous avez besoin d'aide. Ce lien doit pointer vers un éditeur en ligne (voir l'étape 1). Il s'agit ici d'une bonne pratique pour commencer : il est souvent difficile d'aider quelqu'un si on ne peut pas voir le code.
      • -
    • Un lien vers la page MDN pour la tâche ou l'évaluation afin que nous puissions trouver la question sur laquelle vous avez besoin d'aide.
      • -
    -
    3. -
diff --git a/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md new file mode 100644 index 0000000000..a281723a68 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md @@ -0,0 +1,93 @@ +--- +title: 'Testez vos compétences : les tableaux' +slug: Learn/JavaScript/First_steps/Test_your_skills:_Arrays +tags: + - Arrays + - Beginner + - JavaScript + - Learn + - test your skills +translation_of: Learn/JavaScript/First_steps/Test_your_skills:_Arrays +original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux +--- +
{{learnsidebar}}
+ +

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.

+

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

+
+ +

Tableaux - Exercice 1

+ +

Commençons par quelques manipulations de base. Dans cet exercice, vous devrez créer un tableau avec trois éléments. Ce tableau devra être stocké dans une variable intitulée myArray. Les éléments du tableau peuvent être n'importe quoi (si vous avez besoin d'inspiration : pourquoi ne pas utiliser vos plats ou vos groupes de musique préférés ?).

+ +

Ensuite, modifiez les deux premiers éléments du tableau en utilisant la notation avec les guillemets/quotes et des opérations d'affectation. Puis ajoutez un nouvel élément au début du tableau.

+ +

Vous pouvez mettre à jour le code suivant pour parvenir à la solution :

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays1.html", '100%', 400)}}

+ +
+

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

+ +

Voyons maintenant un autre exercice. Ici, vous avez une chaîne de caractères sur laquelle travailler. Vous devrez :

+ +
    +
  1. Convertir la chaîne de caractères en un tableau tout en retirant les caractères + lors de la conversion. Stockez ensuite le résultat dans une variable intitulée myArray.
    2. +
  2. Stocker la longueur du tableau dans une variable intitulée arrayLength.
    3. +
  3. Stocker le dernier élément du tableau dans une variable intitulée lastItem.
    4. +
+ +

Essayez de mettre à jour le code qui suit pour parvenir à la solution :

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays2.html", '100%', 400)}}

+ +
+

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

+ +

Dans ce dernier exercice, vous disposez d'un tableau de départ et vous devrez effectuer les opérations inverses de l'exercice précédent. Voici ce qu'il faudra réaliser :

+ +
    +
  1. Retirer le dernier élément du tableau.
    2. +
  2. Ajouter deux nouveaux noms à la fin du tableau.
    3. +
  3. Parcourir chaque élément du tableau et ajouter son indice, entre parenthèses, après le nom (par exemple Ryu (0)). Note : ceci n'est pas indiqué dans l'article sur les tableaux, il vous faudra rechercher comment faire.
    4. +
  4. Enfin, fusionner les éléments du tableau dans une chaîne de caractères intitulée myString en utilisant " - " comme séparateur.
    5. +
+ +

Essayez de mettre à jour le code qui suit pour parvenir à la solution :

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays3.html", '100%', 400)}}

+ +
+

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

+ +

Vous pouvez vous exercer sur ces exemples grâce aux éditeurs interactifs de la page.

+ +

Si vous souhaitez faire évaluer votre travail ou si vous êtes bloqué·e et que vous voulez demander de l'aide :

+ +
    +
  1. Enregistrez votre travail dans un éditeur en ligne tel que CodePen, jsFiddle, ou Glitch pour le partager. Vous pouvez écrire le code vous-même ou utiliser les fichiers téléchargeables indiqués comme point de départ.
    2. +
  2. Rédigez un message pour la demande d'aide ou d'évaluation sur la catégorie Learning du forum Discourse de MDN. Votre billet devrait inclure : +
      +
    • Un titre descriptif comme « Évaluation demandée pour le test Tableaux JavaScript ».
      • +
    • Des détails sur ce que vous avez déjà tenté et sur quels aspects vous avez besoin d'aide si vous bloquez.
      • +
    • Un lien vers l'exemple que vous voulez évaluer ou sur lequel vous avez besoin d'aide. Ce lien doit pointer vers un éditeur en ligne (voir l'étape 1). Il s'agit ici d'une bonne pratique pour commencer : il est souvent difficile d'aider quelqu'un si on ne peut pas voir le code.
      • +
    • Un lien vers la page MDN pour la tâche ou l'évaluation afin que nous puissions trouver la question sur laquelle vous avez besoin d'aide.
      • +
    +
    3. +
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 deleted file mode 100644 index f2e52aa169..0000000000 --- a/files/fr/learn/javascript/first_steps/useful_string_methods/index.html +++ /dev/null @@ -1,461 +0,0 @@ ---- -title: Méthodes utiles pour les chaînes de caractères -slug: Learn/JavaScript/First_steps/Useful_string_methods -tags: - - Apprentissage - - Article - - Codage - - Débutant - - JavaScript - - Longueur - - cas - - couper - - indexof - - majuscule - - minuscule - - remplacer -translation_of: Learn/JavaScript/First_steps/Useful_string_methods -original_slug: Learn/JavaScript/First_steps/methode_chaine_utile ---- -
{{LearnSidebar}}
- -
{{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érequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Comprendre que les chaînes de caractères sont des objets, et apprendre à utiliser certaines méthodes basiques disponibles sur ces objets pour manipuler les chaînes.
- -

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

votre variable devient une instance de l'objet String, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page !

- -

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

- - - -

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

- -

Trouver la longueur d'une chaîne

- -

C'est facile — il suffit d'utiliser la propriété {{jsxref("String.prototype.length", "length")}}. Entrez ceci :

- -
let browserType = 'mozilla';
-browserType.length;
- -

Cette commande doit renvoyer le nombre 7, parce que « mozilla » comporte 7 caractères. C'est utile pour de nombreuses raisons ; par exemple, vous pourriez avoir besoin de trouver les longueurs d'une série de noms pour les afficher par taille ou faire savoir à un utilisateur qu'il a entré un nom trop long dans un champ de formulaire à partir du moment où il dépasse une certaine taille.

- -

Retrouver un caractère donné dans une chaîne

- -

Dans le même ordre d'idées, il est possible de faire renvoyer tout caractère d'une chaîne avec la notation crochets — c'est-à-dire en ajoutant des crochets ([]) à la fin du nom de la variable. Entre les crochets, mettez le rang du caractère à retrouver ; par exemple, pour retrouver le premier caractère, vous devez  écrire ceci :

- -
browserType[0];
- -

Les ordinateurs décomptent à partir de 0, pas de 1 ! Pour retrouver le dernier caractère de n'importe quelle chaîne, on peut utiliser la commande qui suit ; elle combine cette technique avec la propriété length  que nous avons vue plus haut :

- -
browserType[browserType.length-1];
- -

La longueur de « mozilla » est de 7 caractères, mais comme le décompte se fait à partir de 0, la position du caractère est 6, d'où la nécessité d'écrire length-1. Vous pourrez utiliser cette propriété pour, par exemple, trouver la première lettre d'une série de chaînes et les trier alphabétiquement.

- -

Trouver une sous-chaîne à l'intérieur d'une chaîne et l'extraire

- -
    -
  1. Parfois, vous aurez besoin de trouver si une chaîne est présente à l'intérieur d'une autre chaîne plus grande (on dit en général si une sous-chaîne est présente à l'intérieur d'une chaîne). La méthode {{jsxref("String.prototype.indexOf()", "indexOf()")}} permet de le faire ; elle prend un unique ({{glossary("parameter")}}) — la sous-chaîne recherchée. Essayez : - - 
    browserType.indexOf('zilla');
    - La commande donne 2 comme résultat, car la sous-chaîne « zilla » commence à la position 2 (0, 1, 2 — donc au troisième caractère) dans « mozilla ». Un tel code s'utilise pour filtrer des chaînes. Par exemple, vous pourriez avoir une liste d'adresses web et ne vouloir afficher que celles qui contiennent « mozilla ».
    2. -
  2. 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.
    -
    - Vous pouvez utiliser cette propriété pour trouver tous les cas de chaînes ne contenant pas la sous-chaîne « mozilla », ou bien la contenant, si vous utilisez l'opérateur négation logique, tel que montré ci-dessous. Vous pourriez faire quelque chose comme : - - 
    if(browserType.indexOf('mozilla') !== -1) {
-  // faire des tas de choses avec la chaîne
-}
    -
    3. -
  3. Lorsque vous savez où la sous-chaîne commence à l'intérieur de la chaîne, et savez à quel caractère elle prend fin, vous pouvez utiliser {{jsxref("String.prototype.slice()", "slice()")}} pour l'extraire. Voyez ce code : - 
    browserType.slice(0,3);
    - Il renvoie « moz » — le premier paramètre est la position du caractère où doit commencer l'extraction, et le second paramètre est la position du caractère se trouvant après le dernier à extraire. Ainsi, l'extraction va de la première position à la dernière, celle-ci non comprise. On peut dire, dans notre cas, que le second paramètre est égal à la longueur de la chaîne retournée.
    4. -
  4. Également, si vous souhaitez extraire tous les caractères après un caractère donné jusqu'à la fin de la chaîne, vous n'avez pas à mettre le second paramètre ! Il suffit d'indiquer la position du caractère à partir duquel vous voulez extraire les caractères restants dans la chaîne. Essayez la commande : - 
    browserType.slice(2);
    - Elle renvoie « zilla » — le caractère à la position 2 est « z » et comme nous n'avons pas mis de second paramètre, la sous-chaîne retournée comporte tous les caractères restants de la chaîne.
    5. -
- -
-

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

- -

Les méthodes {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} et {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} s'appliquent à une chaîne et en convertissent tous les caractères, respectivement en minuscules ou en majuscules. C'est utile si, par exemple, vous souhaitez normaliser toutes les données entrées par des utilisateurs avant de les stocker dans une base de données.

- -

Essayons d'entrer les lignes suivantes et voyons ce qui se passe :

- -
let radData = 'My NaMe Is MuD';
-radData.toLowerCase();
-radData.toUpperCase();
- -

Actualiser des parties de chaîne

- -

Vous pouvez remplacer une sous-chaîne à l'intérieur d'une chaîne avec une autre sous-chaîne à l'aide de la méthode {{jsxref("String.prototype.replace()", "replace()")}}. Cela fonctionne très simplement au niveau basique, bien qu'il soit possible de faire des choses plus avancées, mais nous ne y attarderons pas maintenant.

- -

La méthode prend deux paramètres — la chaîne que vous voulez remplacer et la chaîne avec laquelle vous voulez la remplacer. Essayez avec cet exemple :

- -
browserType.replace('moz','van');
- -

À noter : pour que, dans un programme réel, la variable browserType reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire : browserType = browserType.replace('moz','van');

- -

Apprendre en pratiquant

- -

Dans cette section, vous allez pouvoir vous entraîner à écrire du code de manipulation de chaîne. Dans chacun des exercices ci-dessous, nous avons un tableau de chaînes, une boucle qui traîte chaque valeur dans le tableau et l'affiche dans une liste à puces. Vous n'avez pas besoin de comprendre comment fonctionnent les tableaux ou les boucles dès maintenant — cela vous sera expliqué dans de prochains articles. Tout ce dont vous avez besoin dans chaque cas est d'écrire le code qui va renvoyer les chaînes dans le format souhaité.

- -

Chaque exemple est accompagné d'un bouton « Réinitialiser », que vous pouvez utiliser pour réinitialiser le code si vous faites une erreur et que vous ne parvenez pas à la corriger, et un bouton « Montrer la solution » sur lequel vous pouvez cliquer pour afficher une réponse possible si jamais vous êtes vraiment bloqué.

- -

Filtrer des messages de vœux

- -

Dans ce premier exercice, nous commencerons simplement — nous avons un tableau de carte de voeux, mais nous voulons les trier pour ne lister que les messages concernant Noël. Nous attendons de vous que vous utilisiez un test conditionnel à l'intérieur d'une structure if( ... ), pour tester chaque chaîne et ne l'afficher dans la liste que si elle contient un message concernant Noël.

- -
    -
  1. Réfléchissez d'abord à comment vérifier que le message concerne Noël. Quelle chaîne est présente dans tous ces messages, et quelle méthode pourriez-vous utiliser pour en tester la présence ?
    2. -
  2. Il vous faudra alors écrire un test conditionnel sous la forme opérande1 opérateur opérande2. La chose à gauche est-elle égale à la chose à droite ? Ou dans notre cas, l'appel de méthode de gauche renvoie-t-il le résultat de droite ?
    3. -
  3. 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.
    4. -
- - - - - -

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

- -

Remettre les majuscules

- -

Dans cet exercice, nous avons des noms des villes du Royaume-Uni, mais les majuscules ne sont pas au bon endroit. Nous souhaitons modifier les noms pour qu'ils soient en minuscules à l'exception de la première lettre qui doit être une majuscule. Une bonne manière de faire ceci :

- -
    -
  1. Convertissez la totalité de la chaîne contenue dans la variable input en minuscules et stockez-la dans une nouvelle variable.
    2. -
  2. Récupérez la première lettre de la chaîne dans cette nouvelle variable et stockez-la dans une autre variable.
    3. -
  3. En utilisant la dernière variable comme une sous-chaîne, remplacez la première lettre de la chaîne en minuscules par la première lettre de la chaîne en minuscules transformé en majuscules. Stockez le résultat de cette procédure de remplacement dans une autre nouvelle variable.
    4. -
  4. Changez la valeur de la variable result afin qu'elle soit égale au résultat final plutôt qu'à input.
    5. -
- -
-

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.

-
- - - - - -

{{ EmbedLiveSample('Remettre_les_majuscules', '100%', 450) }}

- -

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

- -

Dans ce dernier exercice, le tableau contient un lot de chaînes contenant des informations à propos d'arrêts de train dans le nord de l'Angleterre. Les chaînes sont des éléments de données contenant le code en trois lettres de l'arrêt, suivi par des données lisibles par machine, suivi par un point-virgule, et enfin le nom de la station lisible par un humain. Par exemple :

- -
MAN675847583748sjt567654;Manchester Piccadilly
- -

Nous voulons extraire le code de la station et son nom, et les associer dans une chaîne avec la structure suivante :

- -
MAN: Manchester Piccadilly
- -

Nous vous recommandons de procéder de la manière suivante :

- -
    -
  1. Extraire le code de trois lettres de la station et le stocker dans une nouvelle variable.
    2. -
  2. Trouver la position du caractère point-virgule.
    3. -
  3. Extraire le nom de la station lisible par un humain en utilisant la position du caractère point virgule comme référence, et le stocker dans une nouvelle variable.
    4. -
  4. Concaténer les deux nouvelles variables et une chaîne pour fabriquer la chaîne finale.
    5. -
  5. Changer la valeur de la variable result pour qu'elle soit égale à la chaîne finale, plutôt qu'à input.
    6. -
- - - - - -

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

- -

Conclusion

- -

Il n'est pas possible d'éluder le fait qu'il est très important de savoir manipuler des mots et des phrases lorsqu'on programme — tout particulièrement en JavaScript, dans la mesure où les sites web servent à la communication entre les personnes. Cet article vous a indiqué, pour l'instant, les bases à connaître pour manipuler les chaînes. Ce sera utile lorsque vous aborderez des sujets plus complexes à l'avenir. Pour suivre, nous allons nous intéresser au dernier grand type de données sur lequel nous devons nous concentrer à court terme — les tableaux.

- -

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

diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md new file mode 100644 index 0000000000..f2e52aa169 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md @@ -0,0 +1,461 @@ +--- +title: Méthodes utiles pour les chaînes de caractères +slug: Learn/JavaScript/First_steps/Useful_string_methods +tags: + - Apprentissage + - Article + - Codage + - Débutant + - JavaScript + - Longueur + - cas + - couper + - indexof + - majuscule + - minuscule + - remplacer +translation_of: Learn/JavaScript/First_steps/Useful_string_methods +original_slug: Learn/JavaScript/First_steps/methode_chaine_utile +--- +
{{LearnSidebar}}
+ +
{{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érequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Comprendre que les chaînes de caractères sont des objets, et apprendre à utiliser certaines méthodes basiques disponibles sur ces objets pour manipuler les chaînes.
+ +

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';
+ +

votre variable devient une instance de l'objet String, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page !

+ +

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

+ + + +

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

+ +

Trouver la longueur d'une chaîne

+ +

C'est facile — il suffit d'utiliser la propriété {{jsxref("String.prototype.length", "length")}}. Entrez ceci :

+ +
let browserType = 'mozilla';
+browserType.length;
+ +

Cette commande doit renvoyer le nombre 7, parce que « mozilla » comporte 7 caractères. C'est utile pour de nombreuses raisons ; par exemple, vous pourriez avoir besoin de trouver les longueurs d'une série de noms pour les afficher par taille ou faire savoir à un utilisateur qu'il a entré un nom trop long dans un champ de formulaire à partir du moment où il dépasse une certaine taille.

+ +

Retrouver un caractère donné dans une chaîne

+ +

Dans le même ordre d'idées, il est possible de faire renvoyer tout caractère d'une chaîne avec la notation crochets — c'est-à-dire en ajoutant des crochets ([]) à la fin du nom de la variable. Entre les crochets, mettez le rang du caractère à retrouver ; par exemple, pour retrouver le premier caractère, vous devez  écrire ceci :

+ +
browserType[0];
+ +

Les ordinateurs décomptent à partir de 0, pas de 1 ! Pour retrouver le dernier caractère de n'importe quelle chaîne, on peut utiliser la commande qui suit ; elle combine cette technique avec la propriété length  que nous avons vue plus haut :

+ +
browserType[browserType.length-1];
+ +

La longueur de « mozilla » est de 7 caractères, mais comme le décompte se fait à partir de 0, la position du caractère est 6, d'où la nécessité d'écrire length-1. Vous pourrez utiliser cette propriété pour, par exemple, trouver la première lettre d'une série de chaînes et les trier alphabétiquement.

+ +

Trouver une sous-chaîne à l'intérieur d'une chaîne et l'extraire

+ +
    +
  1. Parfois, vous aurez besoin de trouver si une chaîne est présente à l'intérieur d'une autre chaîne plus grande (on dit en général si une sous-chaîne est présente à l'intérieur d'une chaîne). La méthode {{jsxref("String.prototype.indexOf()", "indexOf()")}} permet de le faire ; elle prend un unique ({{glossary("parameter")}}) — la sous-chaîne recherchée. Essayez : + + 
    browserType.indexOf('zilla');
    + La commande donne 2 comme résultat, car la sous-chaîne « zilla » commence à la position 2 (0, 1, 2 — donc au troisième caractère) dans « mozilla ». Un tel code s'utilise pour filtrer des chaînes. Par exemple, vous pourriez avoir une liste d'adresses web et ne vouloir afficher que celles qui contiennent « mozilla ».
    2. +
  2. 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.
    +
    + Vous pouvez utiliser cette propriété pour trouver tous les cas de chaînes ne contenant pas la sous-chaîne « mozilla », ou bien la contenant, si vous utilisez l'opérateur négation logique, tel que montré ci-dessous. Vous pourriez faire quelque chose comme : + + 
    if(browserType.indexOf('mozilla') !== -1) {
+  // faire des tas de choses avec la chaîne
+}
    +
    3. +
  3. Lorsque vous savez où la sous-chaîne commence à l'intérieur de la chaîne, et savez à quel caractère elle prend fin, vous pouvez utiliser {{jsxref("String.prototype.slice()", "slice()")}} pour l'extraire. Voyez ce code : + 
    browserType.slice(0,3);
    + Il renvoie « moz » — le premier paramètre est la position du caractère où doit commencer l'extraction, et le second paramètre est la position du caractère se trouvant après le dernier à extraire. Ainsi, l'extraction va de la première position à la dernière, celle-ci non comprise. On peut dire, dans notre cas, que le second paramètre est égal à la longueur de la chaîne retournée.
    4. +
  4. Également, si vous souhaitez extraire tous les caractères après un caractère donné jusqu'à la fin de la chaîne, vous n'avez pas à mettre le second paramètre ! Il suffit d'indiquer la position du caractère à partir duquel vous voulez extraire les caractères restants dans la chaîne. Essayez la commande : + 
    browserType.slice(2);
    + Elle renvoie « zilla » — le caractère à la position 2 est « z » et comme nous n'avons pas mis de second paramètre, la sous-chaîne retournée comporte tous les caractères restants de la chaîne.
    5. +
+ +
+

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

+ +

Les méthodes {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} et {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} s'appliquent à une chaîne et en convertissent tous les caractères, respectivement en minuscules ou en majuscules. C'est utile si, par exemple, vous souhaitez normaliser toutes les données entrées par des utilisateurs avant de les stocker dans une base de données.

+ +

Essayons d'entrer les lignes suivantes et voyons ce qui se passe :

+ +
let radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();
+ +

Actualiser des parties de chaîne

+ +

Vous pouvez remplacer une sous-chaîne à l'intérieur d'une chaîne avec une autre sous-chaîne à l'aide de la méthode {{jsxref("String.prototype.replace()", "replace()")}}. Cela fonctionne très simplement au niveau basique, bien qu'il soit possible de faire des choses plus avancées, mais nous ne y attarderons pas maintenant.

+ +

La méthode prend deux paramètres — la chaîne que vous voulez remplacer et la chaîne avec laquelle vous voulez la remplacer. Essayez avec cet exemple :

+ +
browserType.replace('moz','van');
+ +

À noter : pour que, dans un programme réel, la variable browserType reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire : browserType = browserType.replace('moz','van');

+ +

Apprendre en pratiquant

+ +

Dans cette section, vous allez pouvoir vous entraîner à écrire du code de manipulation de chaîne. Dans chacun des exercices ci-dessous, nous avons un tableau de chaînes, une boucle qui traîte chaque valeur dans le tableau et l'affiche dans une liste à puces. Vous n'avez pas besoin de comprendre comment fonctionnent les tableaux ou les boucles dès maintenant — cela vous sera expliqué dans de prochains articles. Tout ce dont vous avez besoin dans chaque cas est d'écrire le code qui va renvoyer les chaînes dans le format souhaité.

+ +

Chaque exemple est accompagné d'un bouton « Réinitialiser », que vous pouvez utiliser pour réinitialiser le code si vous faites une erreur et que vous ne parvenez pas à la corriger, et un bouton « Montrer la solution » sur lequel vous pouvez cliquer pour afficher une réponse possible si jamais vous êtes vraiment bloqué.

+ +

Filtrer des messages de vœux

+ +

Dans ce premier exercice, nous commencerons simplement — nous avons un tableau de carte de voeux, mais nous voulons les trier pour ne lister que les messages concernant Noël. Nous attendons de vous que vous utilisiez un test conditionnel à l'intérieur d'une structure if( ... ), pour tester chaque chaîne et ne l'afficher dans la liste que si elle contient un message concernant Noël.

+ +
    +
  1. Réfléchissez d'abord à comment vérifier que le message concerne Noël. Quelle chaîne est présente dans tous ces messages, et quelle méthode pourriez-vous utiliser pour en tester la présence ?
    2. +
  2. Il vous faudra alors écrire un test conditionnel sous la forme opérande1 opérateur opérande2. La chose à gauche est-elle égale à la chose à droite ? Ou dans notre cas, l'appel de méthode de gauche renvoie-t-il le résultat de droite ?
    3. +
  3. 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.
    4. +
+ + + + + +

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

+ +

Remettre les majuscules

+ +

Dans cet exercice, nous avons des noms des villes du Royaume-Uni, mais les majuscules ne sont pas au bon endroit. Nous souhaitons modifier les noms pour qu'ils soient en minuscules à l'exception de la première lettre qui doit être une majuscule. Une bonne manière de faire ceci :

+ +
    +
  1. Convertissez la totalité de la chaîne contenue dans la variable input en minuscules et stockez-la dans une nouvelle variable.
    2. +
  2. Récupérez la première lettre de la chaîne dans cette nouvelle variable et stockez-la dans une autre variable.
    3. +
  3. En utilisant la dernière variable comme une sous-chaîne, remplacez la première lettre de la chaîne en minuscules par la première lettre de la chaîne en minuscules transformé en majuscules. Stockez le résultat de cette procédure de remplacement dans une autre nouvelle variable.
    4. +
  4. Changez la valeur de la variable result afin qu'elle soit égale au résultat final plutôt qu'à input.
    5. +
+ +
+

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.

+
+ + + + + +

{{ EmbedLiveSample('Remettre_les_majuscules', '100%', 450) }}

+ +

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

+ +

Dans ce dernier exercice, le tableau contient un lot de chaînes contenant des informations à propos d'arrêts de train dans le nord de l'Angleterre. Les chaînes sont des éléments de données contenant le code en trois lettres de l'arrêt, suivi par des données lisibles par machine, suivi par un point-virgule, et enfin le nom de la station lisible par un humain. Par exemple :

+ +
MAN675847583748sjt567654;Manchester Piccadilly
+ +

Nous voulons extraire le code de la station et son nom, et les associer dans une chaîne avec la structure suivante :

+ +
MAN: Manchester Piccadilly
+ +

Nous vous recommandons de procéder de la manière suivante :

+ +
    +
  1. Extraire le code de trois lettres de la station et le stocker dans une nouvelle variable.
    2. +
  2. Trouver la position du caractère point-virgule.
    3. +
  3. Extraire le nom de la station lisible par un humain en utilisant la position du caractère point virgule comme référence, et le stocker dans une nouvelle variable.
    4. +
  4. Concaténer les deux nouvelles variables et une chaîne pour fabriquer la chaîne finale.
    5. +
  5. Changer la valeur de la variable result pour qu'elle soit égale à la chaîne finale, plutôt qu'à input.
    6. +
+ + + + + +

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

+ +

Conclusion

+ +

Il n'est pas possible d'éluder le fait qu'il est très important de savoir manipuler des mots et des phrases lorsqu'on programme — tout particulièrement en JavaScript, dans la mesure où les sites web servent à la communication entre les personnes. Cet article vous a indiqué, pour l'instant, les bases à connaître pour manipuler les chaînes. Ce sera utile lorsque vous aborderez des sujets plus complexes à l'avenir. Pour suivre, nous allons nous intéresser au dernier grand type de données sur lequel nous devons nous concentrer à court terme — les tableaux.

+ +

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

diff --git a/files/fr/learn/javascript/first_steps/variables/index.html b/files/fr/learn/javascript/first_steps/variables/index.html deleted file mode 100644 index dacd075396..0000000000 --- a/files/fr/learn/javascript/first_steps/variables/index.html +++ /dev/null @@ -1,418 +0,0 @@ ---- -title: Stocker les informations nécessaires — les variables -slug: Learn/JavaScript/First_steps/Variables -translation_of: Learn/JavaScript/First_steps/Variables ---- -
{{LearnSidebar}}
- -
{{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 :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Se familiariser avec l'usage élémentaire des variables en JavaScript.
- -

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>
- -
const button = document.querySelector('button');
-
-button.onclick = function() {
-  let name = prompt('Quel est votre nom ?');
-  alert('Salut ' + name + ', sympa de vous voir !');
-}
- -

{{ EmbedLiveSample('Quest_ce_quune_variable', '100%', 50) }}

- -

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.

- -

Pour comprendre le pratique de la chose, imaginons comment nous aurions du coder cet exemple sans utiliser de variable. Serait-ce comme cela ?

- -
let name = prompt('Quel est votre nom ?');
-
-if (name === 'Adam') {
-  alert('Salut Adam, sympa de vous voir !');
-} else if (name === 'Alan') {
-  alert('Salut Alan, sympa de vous voir !');
-} else if (name === 'Bella') {
-  alert('Salut Bella, sympa de vous voir !');
-} else if (name === 'Bianca') {
-  alert('Salut Bianca, sympa de vous voir !');
-} else if (name === 'Chris') {
-  alert('Salut Chris, sympa de vous voir !');
-}
-
-// ... etc.
- -

Peut-être ne comprenez‑vous pas (encore !) la syntaxe utilisée, mais vous l'imaginerez sans peine  — si nous n'avions pas de variables à disposition, nous devrions implémenter un bloc de code géant qui vérifierait quel était le nom saisi, puis afficherait un message approprié à ce nom. Cela est évidemment inefficace (le code est déjà plus volumineux avec seulement quatre possibilités) et il ne fonctionnerait certainement pas — il n'est pas possible de stocker tous les choix possibles.

- -

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.

- -
-

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.

- - - -

{{ EmbedLiveSample('Déclarer_une_variable', '100%', 300) }}

- -
-

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

- -
myName;
-myAge;
- -

Actuellement elles ne contiennent aucune valeur ; ce sont des conteneurs vides. Quand vous entrez les noms des variables, vous obtiendrez la valeur undefined en retour. Si elles n'existent pas, vous aurez un message d'erreur — essayez en saisissant

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

-
- -

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 :

- -
let myDog = 'Rover';
- -

C'est probablement ce que vous ferez la plupart du temps, c'est plus rapide que d'effectuer ces deux actions sur deux lignes distinctes.

- -

La différence entre var et let

- -

A ce moment de votre apprentissage, vous vous demandez sans doute : mais quel besoin de deux mot-clé pour définir une variable ? Pourquoi var et let ?

- -

Les raisons sont d'ordre historique. A l'origine, quand Javascript fut créé, il n'y avait que var. Cela fonctionnait plutôt bien dans la plupart des cas, avec parfois quelques surprises -- l'implémentation étonnante du var peut amener à une mauvaise interprétation, voire à des soucis. Ainsi, let a été ajouté dans les versions plus récentes de Javascript, un nouveau mot-clé pour créer des variables, avec un fonctionnement différent de celui du var, réglant ainsi les difficultés évoquées ci-dessus.

- -

Nous évoquons ci-dessous quelques unes de ces différences, sans pouvoir faire ici le tour complet de la question. Vous comprendrez mieux la différence entre ces deux constructions au fur et à mesure de votre progression en JavaScript (si vous ne pouvez pas attendre, consultez la page de référence du let). 

- -

Pour commencer, si vous écrivez un programme JavaScript multi-lignes qui déclare et initialise une variable, vous pouvez déclarez une variable avec le mot-clé var après l'avoir initialisée. Cela fonctionnera. Par exemple :

- -
myName = 'Chris';
-
-function logName(){
-    console.log(myName);
-}
-
-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.

-
- -

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.

- -

Deuxièmement, quand vous utilisez var, vous pouvez déclarer la même variable autant de fois que vous le désirez, avec let c'est impossible. Le code suivant s'exécute sans erreur :

- -
var myName = 'Chris';
-var myName = 'Bob';
-
- -

 Celui là produit une erreur sur la seconde ligne :

- -
let myName = 'Chris';
-let myName = 'Bob';
-
- -

Le code correct serait :

- -
let myName = 'Chris' ;
-
-myName = 'Bob' ;
- -

Encore une fois, c'est une décision sensée des concepteurs du langage. Il n'y a aucune bonne raison de redéclarer une variable —  cela rend les choses obscures.

- -

Pour ces raisons, et d'autres, nous recommandons d'utiliser let plutôt que var. Il n'y a pas de bonne raison d'utiliser var, sauf à rechercher la compatibilité avec de vieilles versions d'Internet Explorer (pas de support du let avant la version 11 ; le support de let par le navigateur Edge ne pose pas de problème).

- -

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 :

- -
myName = 'Bob';
-myAge = 40;
- -

Aparté concernant les règles de nommage des variables

- -

Vous pouvez nommer une variable comme vous l'entendez, mais il y a des restrictions. Généralement, il convient de se limiter à l'emploi des caractères latins (0-9, a-z, A-Z)  et du underscore ( _ ).

- - - -
-

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

-
- -

Exemples de noms corrects :

- -
age
-myAge
-init
-initialColor
-finalOutputValue
-audio1
-audio2
- -

Exemples de noms incorrects (soit illégal, soit non conforme aux recommandations) :

- -
1
-a
-_12
-myage
-MYAGE
-var
-document
-skjfndskjfnbdskjfb
-thisisareallylongstupidvariablenameman
- -

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

- -
1 //la variable commence par un chiffre
-var //mot réservé
-document //mot réservé
-
- -

Essayez maintenant de créer quelques variables supplémentaires en tenant compte de ce qui précède.

- -

Types de variables

- -

Plusieurs types de données peuvent être stockés dans des variables. Dans cette section, nous allons les décrire brièvement, puis dans les prochains articles, nous vous en dirons plus.

- -

Jusqu'à présent, nous avons vu les deux types suivants, mais il y en a d'autres.

- -

Nombres

- -

Vous pouvez stocker des nombres dans des variables, soit des nombres entiers comme 30 ou des nombres décimaux comme 2.456 (appelés aussi nombres à virgule flottante). Il n'est pas nécessaire de déclarer le type de la variable dans JavaScript, contrairement à d'autres langages de programmation. Lorsque vous donnez une valeur numérique à une variable, ne la mettez pas entre guillemets.

- -
var myAge = 17;
- -

Chaînes

- -

Les chaînes sont des mots ou des suites de mots. Quand vous stockez dans une variable une valeur chaîne, vous devez la mettre entre guillemets simples ou doubles, sinon JavaScript va tenter de l'interpréter en tant qu'un autre nom de variable.

- -
var dolphinGoodbye = 'So long and thanks for all the fish';
- -

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 :

- -
var iAmAlive = true;
- -

Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :

- -
var test = 6 < 3;
- -

Cette expression utilise l'opérateur  « inférieur à » (<) pour tester si 6 est plus petit que 3. Comme vous pouvez vous y attendre, cette expression renverra false, car 6 n'est pas plus petit que 3 ! Vous en apprendrez bien plus à propos de ces opérateurs plus loin dans ce cours.

- -

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 :

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

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

- -

Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant.

- -

Objets

- -

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 :

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

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

- -
dog.name
- -

Nous en resterons là avec les objets pour le moment — vous en saurez plus à leur propos dans un module ultérieur.

- -

Typage faible

- -

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 :

- -
var myString = 'Hello';
- -

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);
-myNumber = 500; // mieux — maintenant c'est un nombre
-typeof(myNumber);
- -

Entrez ces quatre lignes dans la console les unes à la suite des autres, et voyez les résultats. Notez l'emploi de la fonction spéciale typeof() — elle renvoie le type de donnée placé dans la variable. À son premier appel, elle renverra string, car à ce stade la variable myNumber contient la chaîne '500'. Observez bien et voyez ce que la fonction renvoie au second appel.

- -

Résumé

- -

Maintenant, nous en savons un peu plus à propos des variables JavaScript, en particulier comment les créer. Dans le prochain article, nous verrons en détail les nombres et comment effectuer les opérations mathématiques élémentaires.

- -

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

diff --git a/files/fr/learn/javascript/first_steps/variables/index.md b/files/fr/learn/javascript/first_steps/variables/index.md new file mode 100644 index 0000000000..dacd075396 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/variables/index.md @@ -0,0 +1,418 @@ +--- +title: Stocker les informations nécessaires — les variables +slug: Learn/JavaScript/First_steps/Variables +translation_of: Learn/JavaScript/First_steps/Variables +--- +
{{LearnSidebar}}
+ +
{{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 :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Se familiariser avec l'usage élémentaire des variables en JavaScript.
+ +

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>
+ +
const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('Quel est votre nom ?');
+  alert('Salut ' + name + ', sympa de vous voir !');
+}
+ +

{{ EmbedLiveSample('Quest_ce_quune_variable', '100%', 50) }}

+ +

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.

+ +

Pour comprendre le pratique de la chose, imaginons comment nous aurions du coder cet exemple sans utiliser de variable. Serait-ce comme cela ?

+ +
let name = prompt('Quel est votre nom ?');
+
+if (name === 'Adam') {
+  alert('Salut Adam, sympa de vous voir !');
+} else if (name === 'Alan') {
+  alert('Salut Alan, sympa de vous voir !');
+} else if (name === 'Bella') {
+  alert('Salut Bella, sympa de vous voir !');
+} else if (name === 'Bianca') {
+  alert('Salut Bianca, sympa de vous voir !');
+} else if (name === 'Chris') {
+  alert('Salut Chris, sympa de vous voir !');
+}
+
+// ... etc.
+ +

Peut-être ne comprenez‑vous pas (encore !) la syntaxe utilisée, mais vous l'imaginerez sans peine  — si nous n'avions pas de variables à disposition, nous devrions implémenter un bloc de code géant qui vérifierait quel était le nom saisi, puis afficherait un message approprié à ce nom. Cela est évidemment inefficace (le code est déjà plus volumineux avec seulement quatre possibilités) et il ne fonctionnerait certainement pas — il n'est pas possible de stocker tous les choix possibles.

+ +

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.

+ +
+

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.

+ + + +

{{ EmbedLiveSample('Déclarer_une_variable', '100%', 300) }}

+ +
+

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

+ +
myName;
+myAge;
+ +

Actuellement elles ne contiennent aucune valeur ; ce sont des conteneurs vides. Quand vous entrez les noms des variables, vous obtiendrez la valeur undefined en retour. Si elles n'existent pas, vous aurez un message d'erreur — essayez en saisissant

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

+
+ +

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 :

+ +
let myDog = 'Rover';
+ +

C'est probablement ce que vous ferez la plupart du temps, c'est plus rapide que d'effectuer ces deux actions sur deux lignes distinctes.

+ +

La différence entre var et let

+ +

A ce moment de votre apprentissage, vous vous demandez sans doute : mais quel besoin de deux mot-clé pour définir une variable ? Pourquoi var et let ?

+ +

Les raisons sont d'ordre historique. A l'origine, quand Javascript fut créé, il n'y avait que var. Cela fonctionnait plutôt bien dans la plupart des cas, avec parfois quelques surprises -- l'implémentation étonnante du var peut amener à une mauvaise interprétation, voire à des soucis. Ainsi, let a été ajouté dans les versions plus récentes de Javascript, un nouveau mot-clé pour créer des variables, avec un fonctionnement différent de celui du var, réglant ainsi les difficultés évoquées ci-dessus.

+ +

Nous évoquons ci-dessous quelques unes de ces différences, sans pouvoir faire ici le tour complet de la question. Vous comprendrez mieux la différence entre ces deux constructions au fur et à mesure de votre progression en JavaScript (si vous ne pouvez pas attendre, consultez la page de référence du let). 

+ +

Pour commencer, si vous écrivez un programme JavaScript multi-lignes qui déclare et initialise une variable, vous pouvez déclarez une variable avec le mot-clé var après l'avoir initialisée. Cela fonctionnera. Par exemple :

+ +
myName = 'Chris';
+
+function logName(){
+    console.log(myName);
+}
+
+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.

+
+ +

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.

+ +

Deuxièmement, quand vous utilisez var, vous pouvez déclarer la même variable autant de fois que vous le désirez, avec let c'est impossible. Le code suivant s'exécute sans erreur :

+ +
var myName = 'Chris';
+var myName = 'Bob';
+
+ +

 Celui là produit une erreur sur la seconde ligne :

+ +
let myName = 'Chris';
+let myName = 'Bob';
+
+ +

Le code correct serait :

+ +
let myName = 'Chris' ;
+
+myName = 'Bob' ;
+ +

Encore une fois, c'est une décision sensée des concepteurs du langage. Il n'y a aucune bonne raison de redéclarer une variable —  cela rend les choses obscures.

+ +

Pour ces raisons, et d'autres, nous recommandons d'utiliser let plutôt que var. Il n'y a pas de bonne raison d'utiliser var, sauf à rechercher la compatibilité avec de vieilles versions d'Internet Explorer (pas de support du let avant la version 11 ; le support de let par le navigateur Edge ne pose pas de problème).

+ +

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 :

+ +
myName = 'Bob';
+myAge = 40;
+ +

Aparté concernant les règles de nommage des variables

+ +

Vous pouvez nommer une variable comme vous l'entendez, mais il y a des restrictions. Généralement, il convient de se limiter à l'emploi des caractères latins (0-9, a-z, A-Z)  et du underscore ( _ ).

+ + + +
+

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

+
+ +

Exemples de noms corrects :

+ +
age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2
+ +

Exemples de noms incorrects (soit illégal, soit non conforme aux recommandations) :

+ +
1
+a
+_12
+myage
+MYAGE
+var
+document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman
+ +

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

+ +
1 //la variable commence par un chiffre
+var //mot réservé
+document //mot réservé
+
+ +

Essayez maintenant de créer quelques variables supplémentaires en tenant compte de ce qui précède.

+ +

Types de variables

+ +

Plusieurs types de données peuvent être stockés dans des variables. Dans cette section, nous allons les décrire brièvement, puis dans les prochains articles, nous vous en dirons plus.

+ +

Jusqu'à présent, nous avons vu les deux types suivants, mais il y en a d'autres.

+ +

Nombres

+ +

Vous pouvez stocker des nombres dans des variables, soit des nombres entiers comme 30 ou des nombres décimaux comme 2.456 (appelés aussi nombres à virgule flottante). Il n'est pas nécessaire de déclarer le type de la variable dans JavaScript, contrairement à d'autres langages de programmation. Lorsque vous donnez une valeur numérique à une variable, ne la mettez pas entre guillemets.

+ +
var myAge = 17;
+ +

Chaînes

+ +

Les chaînes sont des mots ou des suites de mots. Quand vous stockez dans une variable une valeur chaîne, vous devez la mettre entre guillemets simples ou doubles, sinon JavaScript va tenter de l'interpréter en tant qu'un autre nom de variable.

+ +
var dolphinGoodbye = 'So long and thanks for all the fish';
+ +

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 :

+ +
var iAmAlive = true;
+ +

Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :

+ +
var test = 6 < 3;
+ +

Cette expression utilise l'opérateur  « inférieur à » (<) pour tester si 6 est plus petit que 3. Comme vous pouvez vous y attendre, cette expression renverra false, car 6 n'est pas plus petit que 3 ! Vous en apprendrez bien plus à propos de ces opérateurs plus loin dans ce cours.

+ +

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 :

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

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

+ +

Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant.

+ +

Objets

+ +

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 :

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

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

+ +
dog.name
+ +

Nous en resterons là avec les objets pour le moment — vous en saurez plus à leur propos dans un module ultérieur.

+ +

Typage faible

+ +

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 :

+ +
var myString = 'Hello';
+ +

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);
+myNumber = 500; // mieux — maintenant c'est un nombre
+typeof(myNumber);
+ +

Entrez ces quatre lignes dans la console les unes à la suite des autres, et voyez les résultats. Notez l'emploi de la fonction spéciale typeof() — elle renvoie le type de donnée placé dans la variable. À son premier appel, elle renverra string, car à ce stade la variable myNumber contient la chaîne '500'. Observez bien et voyez ce que la fonction renvoie au second appel.

+ +

Résumé

+ +

Maintenant, nous en savons un peu plus à propos des variables JavaScript, en particulier comment les créer. Dans le prochain article, nous verrons en détail les nombres et comment effectuer les opérations mathématiques élémentaires.

+ +

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

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 deleted file mode 100644 index 5e37499c73..0000000000 --- a/files/fr/learn/javascript/first_steps/what_is_javascript/index.html +++ /dev/null @@ -1,406 +0,0 @@ ---- -title: Qu'est-ce que le JavaScript ? -slug: Learn/JavaScript/First_steps/What_is_JavaScript -translation_of: Learn/JavaScript/First_steps/What_is_JavaScript ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
- -

Bienvenue dans le cours JavaScript pour débutants sur le MDN. Dans ce premier article nous donnons une description générale de JavaScript en présentant le « pourquoi » et le « comment » du JavaScript. L'objectif est que vous compreniez bien son but.

- - - - - - - - - - - - -
Prérequis : -

Une culture informatique basique et une compréhension élémentaire de HTML et CSS.

-
Objectif :Se familiariser avec JavaScript, ce qu'il peut faire et comment il s'intègre dans un site web.
- -

Une définition générale

- -

JavaScript est un langage de programmation qui permet d'implémenter des mécanismes complexes sur une page web. À chaque fois qu'une page web fait plus que simplement afficher du contenu statique — afficher du contenu mis à jour à des temps déterminés, des cartes interactives, des animations 2D/3D, des menus vidéo défilants, ou autre, JavaScript a de bonnes chances d'être impliqué. C'est la troisième couche des technologies standards du web, les deux premières (HTML et CSS) étant couvertes bien plus en détail dans d'autres tutoriels sur MDN.

- -

- - - -

Les trois couches se superposent naturellement. Prenons pour exemple une simple étiquette texte. Les balises HTML lui donnent une structure et un but :

- -
<p>Player 1: Chris</p>
- -

- -

Nous pouvons ensuite ajouter du CSS pour rendre cela plus joli :

- -
p {
-  font-family: 'helvetica neue', helvetica, sans-serif;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  text-align: center;
-  border: 2px solid rgba(0,0,200,0.6);
-  background: rgba(0,0,200,0.3);
-  color: rgba(0,0,200,0.6);
-  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
-  border-radius: 10px;
-  padding: 3px 10px;
-  display: inline-block;
-  cursor:pointer;
-}
- -

- -

Et enfin utiliser JavaScript pour ajouter un comportement dynamique :

- -
let para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  let name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
-
- -

{{ EmbedLiveSample('Une_définition_générale', '100%', 80) }}

- -

Essayez de cliquer sur l'étiquette texte pour voir ce qui se passe. Notez que vous pouvez également retrouver cet exemple sur GitHub — voir le code source, ou l'exécuter.

- -

JavaScript peut faire bien plus. Voyons cela plus en détail.

- -

Que peut-il vraiment faire ?

- -

Le cœur de JavaScript est constitué de fonctionnalités communes de programmation permettant de :

- - - -

Là où ça devient excitant, c'est que de nombreuses fonctionnalités sont basées sur ce cœur de JavaScript. Les « interfaces de programmation applicatives » (API pour « Application Programming Interfaces ») donnent accès à des fonctionnalités presqu'illimitées dans votre code JavaScript.

- -

Les API sont des blocs de code déjà prêts qui permettent à un développeur d'implémenter des programmes qui seraient difficiles voire impossibles à implémenter sans elles. C'est comme du code "en kit" pour la programmation, très pratiques à assembler et à combiner. Les API sont au code ce que les meubles en kits sont aux fournitures de maison — il est beaucoup plus facile de prendre des panneaux prêts à l'emploi et de les visser ensemble pour faire une étagère que de travailler vous-même sur le design, d'aller chercher le bon bois, de couper tous les panneaux à la bonne taille et la bonne forme, de trouver les vis de la bonne taille, puis les assembler pour faire une étagère.

- -

Elles se divisent généralement en deux catégories :

- -

- -

Les API de navigateur font partie intégrante de votre navigateur web, et peuvent accéder à des données de l'environnement informatique (l'ordinateur), ou faire d'autres choses complexes. Par exemple :

- - - -
-

Note : Beaucoup des exemples ci-dessus ne fonctionneront pas dans un ancien navigateur. Il vaut mieux utiliser un navigateur moderne comme Firefox, Chrome, Edge ou Opera pour exécuter votre code et faire vos tests. Si vous êtes amené à écrire du code de production (c'est-à-dire destiné à de véritables utilisateurs), il vous faudra prendre en compte la compatibilité pour différents navigateurs.

-
- -

Les APIs tierces ne font par défaut pas partie de votre navigateur, et vous devrez en général récupérer le code et les informations les concernant quelque part sur le web. Par exemple :

- - - -
-

Note : ces APIs sont d'un niveau avancé et nous ne couvrirons aucune d'entre elles dans ce cours, mais les liens ci-dessus fournissent une large documentation si vous voulez en savoir davantage.

-
- -

Et il y a bien plus encore ! Pas de précipitation cependant. Vous ne serez pas en mesure de créer le nouveau Facebook, Google Maps ou Instagram après une journée de travail sur JavaScript, il y a d'abord beaucoup de bases à assimiler. Et c'est pourquoi vous êtes ici. Allons-y !

- -

Que fait JavaScript sur votre page ?

- -

Ici nous allons commencer à réellement nous intéresser au code, et, ce faisant, à explorer ce qui se passe quand vous exécutez du JavaScript dans votre page.

- -

Commençons par un bref récapitulatif de ce qui se passe lorsqu'une page web se charge dans le navigateur (voir Comment fonctionnent vraiment les CSS). Quand la page se charge, les codes HTML, CSS et JavaScript s'exécutent dans un environnement (l'onglet du navigateur). C'est un peu comme une usine qui prend des matières premières (le code) et sort un produit (la page web).

- -

- -

Le JavaScript est exécuté par le moteur JavaScript du navigateur, après que le HTML et le CSS ont été assemblés et combinés en une page web. Cet enchaînement est nécessaire pour être sûr que la structure et le style de la page sont déjà en place quand le JavaScript commence son exécution.

- -

C'est une bonne chose, étant donné qu'un usage fréquent de JavaScript est de modifier dynamiquement le HTML et le CSS pour mettre à jour l'interface utilisateur, via l'API DOM comme évoqué plus tôt. Charger le JavaScript et essayer de l'exécuter avant que le HTML et le CSS ne soient en place mènerait à des erreurs.

- -

Sécurité du navigateur

- -

Chaque onglet du navigateur constitue un périmètre séparé dans lequel s'exécute le code (en termes techniques ces périmètres sont des « environnements d'exécution ») ce qui signifie que, dans la plupart des cas, le code de chaque onglet est exécuté complètement séparément, et le code d'un onglet ne peut affecter directement le code d'un autre onglet ou d'un autre site. C'est une bonne mesure de sécurité. Si ce n'était pas le cas, des pirates pourraient par exemple écrire du code pour voler des informations sur d'autres sites web.

- -
-

Note : il existe des moyens d'envoyer du code et des données entre différents sites/onglets de façon sécurisée, mais ce sont des techniques avancées que ne nous couvrirons pas dans ce cours.

-
- -

Ordre d'exécution du JavaScript

- -

Quand le navigateur rencontre un bloc de JavaScript, il l'exécute généralement dans l'ordre, de haut en bas. Vous devrez donc faire attention à l'ordre dans lequel vous écrivez les choses. Reprenons le bloc de JavaScript vu dans notre premier exemple :

- -
let para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  let name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
- -

Nous sélectionnons ici un paragraphe de texte (ligne 1), puis lui attachons un « gestionnaire d'évènement »  (event listener)  ligne 3, pour qu'ensuite, lors d'un clic sur le paragraphe, le bloc de code updateName() (lignes 5-8) s'exécute. Le bloc de code updateName() (ces blocs de code réutilisables sont appelés « fonctions ») demande à l'utilisateur un nouveau nom, et l'insère dans le paragraphe pour mettre à jour l'affichage.

- -

Si vous échangiez les deux premières lignes de code, rien ne fonctionnerait plus, vous obtiendriez une erreur dans la console développeur du navigateur : TypeError: para is undefined. Cela signifie que l'objet para n'existe pas encore, donc nous ne pouvons pas y ajouter de gestionnaire d'évènement.

- -
-

Note : c'est une erreur très fréquente. Il faut veiller à ce que les objets référencés dans votre code existent avant d'essayer de les utiliser.

-
- -

Code interprété contre code compilé

- -

En informatique, on parle de code interprété ou compilé. JavaScript est un langage interprété : le code est exécuté de haut en bas et le résultat du code exécuté est envoyé immédiatement. Vous n'avez pas à transformer le code en une autre forme avant que le navigateur ne l'exécute.

- -

Les langages compilés quant à eux sont transformés (compilés) en une autre forme avant d'être exécutés par l'ordinateur. Par exemple le C et le C++ sont compilés en langage assembleur qui est ensuite exécuté par l'ordinateur.

- -

Chaque approche a ses avantages, ce que nous ne développerons pas pour l'instant.

- -

Code côté client contre côté serveur

- -

Vous pouvez aussi rencontrer les termes de code côté serveur et côté client, notamment dans le contexte du développement web. Le code côté client est du code exécuté sur l'ordinateur de l'utilisateur : quand une page web est vue, le code côté client de la page est téléchargé, puis exécuté et affiché par le navigateur. Dans ce module JavaScript, nous parlons explicitement de JavaScript côté client.

- -

Le code côté serveur quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage côté serveur, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article Programmation de Sites Web côté serveur.

- -

Code dynamique contre code statique

- -

Le mot dynamique est utilisé tant pour qualifier le JavaScript côté client que les langages côté serveur. Il se réfère à la capacité de mettre à jour l'affichage d'une page/application web pour montrer des choses différentes en des circonstances différentes, en générant un nouveau contenu quand nécessaire. Le code côté serveur génère dynamiquement du nouveau contenu sur le serveur, par exemple en lisant une base de données, tandis que le JavaScript côté client peut générer dynamiquement un contenu nouveau dans le navigateur, par exemple en créant une nouvelle table HTML, en y insérant les données demandées au serveur, puis en affichant la table dans une page web. Selon le contexte, le terme dynamique prend un sens un peu différent, mais les deux sont très liés, et les deux approches (côté serveur et client) vont souvent de pair.

- -

Une page web sans contenu mis à jour dynamiquement est appelé statique : elle montre simplement toujours le même contenu.

- -

Comment ajouter du JavaScript à votre page ?

- -

Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les éléments {{htmlelement("link")}} permettent d'appliquer des feuilles de style externes au HTML alors que les feuilles de style internes utilisent les éléments {{htmlelement("style")}}. Pour ajouter du JavaScript à un document HTML, il n'y a qu'une seule façon : avec l'élément {{htmlelement("script")}}. Voyons cela sur un exemple.

- -

JavaScript interne

- -
    -
  1. Faites d'abord une copie locale de notre fichier d'exemple apply-javascript.html. Enregistrez-le dans un répertoire approprié.
    2. -
  2. Ouvrez le fichier dans votre navigateur web et dans un éditeur de texte. Vous verrez que le HTML crée une page web simple contenant un bouton cliquable.
    3. -
  3. Ensuite, allez dans votre éditeur de texte et ajoutez ce qui suit juste avant la balise fermante </head> : - 
    <script>
-
-  // JavaScript goes here
-
-</script>
    -
    4. -
  4. Ajoutons maintenant du JavaScript dans notre élément {{htmlelement("script")}} pour rendre la page plus dynamique. Ajoutez le code suivant juste en dessous de la ligne "// JavaScript goes here" : - 
      document.addEventListener("DOMContentLoaded", function() {
-  function createParagraph() {
-    let para = document.createElement('p');
-    para.textContent = 'Vous avez cliqué sur le bouton!';
-    document.body.appendChild(para);
-  }
-
-  const buttons = document.querySelectorAll('button');
-
-  for(let i = 0; i < buttons.length ; i++) {
-    buttons[i].addEventListener('click', createParagraph);
-  }
-});
    -
    5. -
  5. Enregistrez le fichier et actualisez le navigateur. Vous pouvez maintenant voir que, lorsque vous cliquez sur le bouton, un nouveau paragraphe est généré et placé en dessous.
    6. -
- -
-

Note : si l'exemple ne semble pas marcher, reprenez pas à pas chaque étape. Avez-vous bien enregistré le code de départ comme un fichier .html ? Avez-vous bien ajouté l'élément {{htmlelement("script")}} juste après la balise </head> ? Avez-vous collé le bon code JavaScript au bon endroit ? JavaScript est sensible à la casse, et assez tatillon, il faut donc respecter scrupuleusement la syntaxe indiquée, sans quoi il peut ne pas fonctionner.

-
- -
-

Note : vous pouvez voir cette version sur GitHub avec apply-javascript-internal.html (et aussi en live).

-
- -

JavaScript externe

- -

Ça marche très bien, mais si nous voulons mettre notre JavaScript dans un fichier externe ? Voyons cela.

- -
    -
  1. Créez d'abord un nouveau fichier dans le même répertoire que votre fichier HTML. Nommez-le script.js (vérifiez qu'il a bien l'extension de fichier .js, c'est ainsi qu'il est identifié comme fichier JavaScript).
    2. -
  2. Ensuite, copiez-collez tout le script contenu dans l'élément {{htmlelement("script")}} vers le fichier .js, et enregistrez le fichier.
    3. -
  3. À présent remplacez l'élément {{htmlelement("script")}} par : - 
    <script src="script.js" defer></script>
    -
    4. -
  4. Enregistrez et rechargez la page dans votre navigateur, et vous devriez voir la même chose qu'avant. C'est la même chose, mais nous avons maintenant le JavaScript dans un fichier externe. C'est une bonne chose en général pour organiser le code et le rendre réutilisable pour plusieurs fichiers HTML. Cela rend aussi le code HTML plus lisible en évitant d'y inclure de gros blocs de JavaScript.
    5. -
- -

Note : vous pouvez voir cette version sur GitHub avec apply-javascript-external.html et script.js (ainsi qu'en live).

- -

Handlers JavaScript en ligne

- -

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é !';
-  document.body.appendChild(para);
-}
- -
<button onclick="createParagraph()">Cliquez-moi!</button>
- -

Vous pouvez essayer cette version dans la démonstration ci-dessous.

- -

{{ 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');
-
-for(let i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -

Cela peut sembler un peu plus long que l'attribut onclick, mais cela fonctionnera pour tous les boutons peu importe leur nombre sur la page, et peu importe si des boutons sont ajoutés ou retirés, le code JavaScript n'aura pas besoin d'être modifié.

- -
-

Note : essayez de modifier votre version de apply-javascript.html et d'y ajouter quelques boutons dans le fichier. En actualisant la page, tous les boutons devraient créer un paragraphe quand ils sont cliqués. Pas mal, non ?

-
- -

Stratégies de chargement de script

- -

Le chargement des scripts au bon moment pose un certain nombre de problèmes. Rien n'est aussi simple qu'il y paraît ! Un problème courant est que le code HTML d'une page se charge en suivant l'ordre d'apparition dans le code source. Si vous utilisez JavaScript pour manipuler des éléments sur la page (plus précisément, le DOM), votre code ne fonctionnera pas si le JavaScript est chargé et analysé avant le code HTML sur lequel vous voulez opérer.

- -

Dans les exemples de code interne et externe ci-dessus, le JavaScript est chargé et exécuté dans l'en-tête du document, avant que le corps soit analysé. Cela peut causer une erreur, donc nous avons utilisé des structures pour le contourner.

- -

Dans l'exemple interne, vous pouvez voir cette structure autour du code :

- -
-document.addEventListener("DOMContentLoaded", function() {
-  ...
-});
- -

Il s'agit d'un gestionnaire d'évènement associé à l'événement DOMContentLoaded du navigateur, cet événement est déclenché quand le body HTML est complètement chargé et analysé. Le code JavaScript à l'intérieur du bloc est exécuté après le déclenchement de DOMContentLoaded. Par conséquent, l'erreur est évitée (vous en apprendrez plus sur les événements plus tard dans le cours).

- -

Dans l'exemple externe, nous utilisons une fonctionnalité JavaScript plus moderne pour résoudre le problème, l'attribut async, qui indique au navigateur de continuer à télécharger le contenu HTML une fois que l'élément de balise {{htmlelement("script")}} a été atteint.

- -
<script src="script.js" defer></script>
- -

Dans ce cas, le script et le code HTML se chargeront simultanément et le code fonctionnera.

- -
-

Note : Dans le cas externe, nous n'avions pas besoin d'utiliser l'événement DOMContentLoaded, car l'attribut async a résolu le problème pour nous. Nous n'avons pas utilisé la solution async pour l'exemple JavaScript interne, car elle ne fonctionne que pour les scripts externes.

-
- -

Auparavant, une solution à ce problème consistait à placer votre élément de script juste au bas du corps (par exemple, juste avant la balise), afin qu'il soit chargé après que tout le code HTML a été analysé. Le problème de cette solution (et de la solution DOMContentLoaded vue ci-dessus) est que le chargement et l'analyse du script sont complètements bloqués jusqu'à ce que le DOM HTML soit chargé. Sur des sites plus importants avec beaucoup de JavaScript, cela peut entraîner un problème de performances majeur, ce qui ralentit votre site. C'est pourquoi async a été ajouté aux navigateurs !

- -

async et defer

- -

En fait, il existe deux façons de contourner le problème du script de blocage : async et defer. Regardons la différence entre les deux.

- -

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.

- -async vs defer - -

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 :

- -
<script async src="js/vendor/jquery.js"></script>
-
-<script async src="js/script2.js"></script>
-
-<script async src="js/script3.js"></script>
- -

Vous ne pouvez pas compter sur l'ordre dans lequel les scripts seront chargés. Jquery.js peut être chargé avant ou après script2.js et script3.js. Si tel est le cas, toute fonction de ces scripts dépendant de jquery générera une erreur, car jquery ne sera pas défini au moment de l'exécution du script.

- -

defer exécute les scripts dans l'ordre dans lequel ils apparaissent dans la page et les exécute dès que le script et le contenu sont téléchargés :

- -
<script defer src="js/vendor/jquery.js"></script>
-
-<script defer src="js/script2.js"></script>
-
-<script defer src="js/script3.js"></script>
- -

Tous les scripts dotés de l'attribut de defer seront chargés dans l'ordre dans lequel ils apparaissent sur la page. Ainsi, dans le deuxième exemple, nous pouvons être sûrs que jquery.js se chargera avant script2.js et script3.js et que script2.js se chargera avant script3.js.

- -

Pour résumer :

- - - -

Commentaires

- -

Comme pour le HTML et le CSS, il est possible d'écrire des commentaires dans le code JavaScript qui seront ignorés par le navigateur. Ils ne sont là que pour apporter des précisions aux autres développeurs sur le fonctionnement du code (et vous-même, si vous reprenez votre code après six mois sans pouvoir vous rappeler ce que vous avez fait). Les commentaires sont très utiles, et vous devriez les utiliser fréquemment, surtout pour des applications de grande taille. Il y en a deux types :

- - - -

Ainsi, vous pourriez par exemple annoter notre dernière démonstration de JavaScript de cette manière :

- -
// Fonction: créer un nouveau paragraphe et l'ajouter en bas du HTML
-
-function createParagraph() {
-  let para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
-
-/*
-  1. Regrouper les coordonnées de tous les boutons de la page et les organiser en tableau
-  2. Faire une boucle dans ce tableau et ajouter un "click event listener" à chaque bouton
-
-  Quand le bouton est cliqué, la fonction "createParagraph()" sera exécutée
-*/
-
-let buttons = document.querySelectorAll('button');
-
-for(let i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -

Résumé

- -

Et voilà votre premier pas dans le monde du JavaScript. Nous avons commencé par la théorie seule, pour vous habituer aux raisons d'utiliser JavaScript, et à ses possibilités. Vous avez pu voir quelques exemples de code et appris comment JavaScript s'intègre avec le reste du code sur votre site web, entre autres choses.

- -

Le JavaScript peut sembler un peu impressionnant pour l'instant, mais pas d'inquiétude, ce cours progressera pas à pas. Dans le prochain article Notre premier code JavaScript, nous entrons au cœur du sujet et vous réaliserez vos propres exemples de JavaScript.

- -

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

- - -

Dans ce module

- - diff --git a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md new file mode 100644 index 0000000000..5e37499c73 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md @@ -0,0 +1,406 @@ +--- +title: Qu'est-ce que le JavaScript ? +slug: Learn/JavaScript/First_steps/What_is_JavaScript +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
+ +

Bienvenue dans le cours JavaScript pour débutants sur le MDN. Dans ce premier article nous donnons une description générale de JavaScript en présentant le « pourquoi » et le « comment » du JavaScript. L'objectif est que vous compreniez bien son but.

+ + + + + + + + + + + + +
Prérequis : +

Une culture informatique basique et une compréhension élémentaire de HTML et CSS.

+
Objectif :Se familiariser avec JavaScript, ce qu'il peut faire et comment il s'intègre dans un site web.
+ +

Une définition générale

+ +

JavaScript est un langage de programmation qui permet d'implémenter des mécanismes complexes sur une page web. À chaque fois qu'une page web fait plus que simplement afficher du contenu statique — afficher du contenu mis à jour à des temps déterminés, des cartes interactives, des animations 2D/3D, des menus vidéo défilants, ou autre, JavaScript a de bonnes chances d'être impliqué. C'est la troisième couche des technologies standards du web, les deux premières (HTML et CSS) étant couvertes bien plus en détail dans d'autres tutoriels sur MDN.

+ +

+ + + +

Les trois couches se superposent naturellement. Prenons pour exemple une simple étiquette texte. Les balises HTML lui donnent une structure et un but :

+ +
<p>Player 1: Chris</p>
+ +

+ +

Nous pouvons ensuite ajouter du CSS pour rendre cela plus joli :

+ +
p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor:pointer;
+}
+ +

+ +

Et enfin utiliser JavaScript pour ajouter un comportement dynamique :

+ +
let para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+
+ +

{{ EmbedLiveSample('Une_définition_générale', '100%', 80) }}

+ +

Essayez de cliquer sur l'étiquette texte pour voir ce qui se passe. Notez que vous pouvez également retrouver cet exemple sur GitHub — voir le code source, ou l'exécuter.

+ +

JavaScript peut faire bien plus. Voyons cela plus en détail.

+ +

Que peut-il vraiment faire ?

+ +

Le cœur de JavaScript est constitué de fonctionnalités communes de programmation permettant de :

+ + + +

Là où ça devient excitant, c'est que de nombreuses fonctionnalités sont basées sur ce cœur de JavaScript. Les « interfaces de programmation applicatives » (API pour « Application Programming Interfaces ») donnent accès à des fonctionnalités presqu'illimitées dans votre code JavaScript.

+ +

Les API sont des blocs de code déjà prêts qui permettent à un développeur d'implémenter des programmes qui seraient difficiles voire impossibles à implémenter sans elles. C'est comme du code "en kit" pour la programmation, très pratiques à assembler et à combiner. Les API sont au code ce que les meubles en kits sont aux fournitures de maison — il est beaucoup plus facile de prendre des panneaux prêts à l'emploi et de les visser ensemble pour faire une étagère que de travailler vous-même sur le design, d'aller chercher le bon bois, de couper tous les panneaux à la bonne taille et la bonne forme, de trouver les vis de la bonne taille, puis les assembler pour faire une étagère.

+ +

Elles se divisent généralement en deux catégories :

+ +

+ +

Les API de navigateur font partie intégrante de votre navigateur web, et peuvent accéder à des données de l'environnement informatique (l'ordinateur), ou faire d'autres choses complexes. Par exemple :

+ + + +
+

Note : Beaucoup des exemples ci-dessus ne fonctionneront pas dans un ancien navigateur. Il vaut mieux utiliser un navigateur moderne comme Firefox, Chrome, Edge ou Opera pour exécuter votre code et faire vos tests. Si vous êtes amené à écrire du code de production (c'est-à-dire destiné à de véritables utilisateurs), il vous faudra prendre en compte la compatibilité pour différents navigateurs.

+
+ +

Les APIs tierces ne font par défaut pas partie de votre navigateur, et vous devrez en général récupérer le code et les informations les concernant quelque part sur le web. Par exemple :

+ + + +
+

Note : ces APIs sont d'un niveau avancé et nous ne couvrirons aucune d'entre elles dans ce cours, mais les liens ci-dessus fournissent une large documentation si vous voulez en savoir davantage.

+
+ +

Et il y a bien plus encore ! Pas de précipitation cependant. Vous ne serez pas en mesure de créer le nouveau Facebook, Google Maps ou Instagram après une journée de travail sur JavaScript, il y a d'abord beaucoup de bases à assimiler. Et c'est pourquoi vous êtes ici. Allons-y !

+ +

Que fait JavaScript sur votre page ?

+ +

Ici nous allons commencer à réellement nous intéresser au code, et, ce faisant, à explorer ce qui se passe quand vous exécutez du JavaScript dans votre page.

+ +

Commençons par un bref récapitulatif de ce qui se passe lorsqu'une page web se charge dans le navigateur (voir Comment fonctionnent vraiment les CSS). Quand la page se charge, les codes HTML, CSS et JavaScript s'exécutent dans un environnement (l'onglet du navigateur). C'est un peu comme une usine qui prend des matières premières (le code) et sort un produit (la page web).

+ +

+ +

Le JavaScript est exécuté par le moteur JavaScript du navigateur, après que le HTML et le CSS ont été assemblés et combinés en une page web. Cet enchaînement est nécessaire pour être sûr que la structure et le style de la page sont déjà en place quand le JavaScript commence son exécution.

+ +

C'est une bonne chose, étant donné qu'un usage fréquent de JavaScript est de modifier dynamiquement le HTML et le CSS pour mettre à jour l'interface utilisateur, via l'API DOM comme évoqué plus tôt. Charger le JavaScript et essayer de l'exécuter avant que le HTML et le CSS ne soient en place mènerait à des erreurs.

+ +

Sécurité du navigateur

+ +

Chaque onglet du navigateur constitue un périmètre séparé dans lequel s'exécute le code (en termes techniques ces périmètres sont des « environnements d'exécution ») ce qui signifie que, dans la plupart des cas, le code de chaque onglet est exécuté complètement séparément, et le code d'un onglet ne peut affecter directement le code d'un autre onglet ou d'un autre site. C'est une bonne mesure de sécurité. Si ce n'était pas le cas, des pirates pourraient par exemple écrire du code pour voler des informations sur d'autres sites web.

+ +
+

Note : il existe des moyens d'envoyer du code et des données entre différents sites/onglets de façon sécurisée, mais ce sont des techniques avancées que ne nous couvrirons pas dans ce cours.

+
+ +

Ordre d'exécution du JavaScript

+ +

Quand le navigateur rencontre un bloc de JavaScript, il l'exécute généralement dans l'ordre, de haut en bas. Vous devrez donc faire attention à l'ordre dans lequel vous écrivez les choses. Reprenons le bloc de JavaScript vu dans notre premier exemple :

+ +
let para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+ +

Nous sélectionnons ici un paragraphe de texte (ligne 1), puis lui attachons un « gestionnaire d'évènement »  (event listener)  ligne 3, pour qu'ensuite, lors d'un clic sur le paragraphe, le bloc de code updateName() (lignes 5-8) s'exécute. Le bloc de code updateName() (ces blocs de code réutilisables sont appelés « fonctions ») demande à l'utilisateur un nouveau nom, et l'insère dans le paragraphe pour mettre à jour l'affichage.

+ +

Si vous échangiez les deux premières lignes de code, rien ne fonctionnerait plus, vous obtiendriez une erreur dans la console développeur du navigateur : TypeError: para is undefined. Cela signifie que l'objet para n'existe pas encore, donc nous ne pouvons pas y ajouter de gestionnaire d'évènement.

+ +
+

Note : c'est une erreur très fréquente. Il faut veiller à ce que les objets référencés dans votre code existent avant d'essayer de les utiliser.

+
+ +

Code interprété contre code compilé

+ +

En informatique, on parle de code interprété ou compilé. JavaScript est un langage interprété : le code est exécuté de haut en bas et le résultat du code exécuté est envoyé immédiatement. Vous n'avez pas à transformer le code en une autre forme avant que le navigateur ne l'exécute.

+ +

Les langages compilés quant à eux sont transformés (compilés) en une autre forme avant d'être exécutés par l'ordinateur. Par exemple le C et le C++ sont compilés en langage assembleur qui est ensuite exécuté par l'ordinateur.

+ +

Chaque approche a ses avantages, ce que nous ne développerons pas pour l'instant.

+ +

Code côté client contre côté serveur

+ +

Vous pouvez aussi rencontrer les termes de code côté serveur et côté client, notamment dans le contexte du développement web. Le code côté client est du code exécuté sur l'ordinateur de l'utilisateur : quand une page web est vue, le code côté client de la page est téléchargé, puis exécuté et affiché par le navigateur. Dans ce module JavaScript, nous parlons explicitement de JavaScript côté client.

+ +

Le code côté serveur quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage côté serveur, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article Programmation de Sites Web côté serveur.

+ +

Code dynamique contre code statique

+ +

Le mot dynamique est utilisé tant pour qualifier le JavaScript côté client que les langages côté serveur. Il se réfère à la capacité de mettre à jour l'affichage d'une page/application web pour montrer des choses différentes en des circonstances différentes, en générant un nouveau contenu quand nécessaire. Le code côté serveur génère dynamiquement du nouveau contenu sur le serveur, par exemple en lisant une base de données, tandis que le JavaScript côté client peut générer dynamiquement un contenu nouveau dans le navigateur, par exemple en créant une nouvelle table HTML, en y insérant les données demandées au serveur, puis en affichant la table dans une page web. Selon le contexte, le terme dynamique prend un sens un peu différent, mais les deux sont très liés, et les deux approches (côté serveur et client) vont souvent de pair.

+ +

Une page web sans contenu mis à jour dynamiquement est appelé statique : elle montre simplement toujours le même contenu.

+ +

Comment ajouter du JavaScript à votre page ?

+ +

Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les éléments {{htmlelement("link")}} permettent d'appliquer des feuilles de style externes au HTML alors que les feuilles de style internes utilisent les éléments {{htmlelement("style")}}. Pour ajouter du JavaScript à un document HTML, il n'y a qu'une seule façon : avec l'élément {{htmlelement("script")}}. Voyons cela sur un exemple.

+ +

JavaScript interne

+ +
    +
  1. Faites d'abord une copie locale de notre fichier d'exemple apply-javascript.html. Enregistrez-le dans un répertoire approprié.
    2. +
  2. Ouvrez le fichier dans votre navigateur web et dans un éditeur de texte. Vous verrez que le HTML crée une page web simple contenant un bouton cliquable.
    3. +
  3. Ensuite, allez dans votre éditeur de texte et ajoutez ce qui suit juste avant la balise fermante </head> : + 
    <script>
+
+  // JavaScript goes here
+
+</script>
    +
    4. +
  4. Ajoutons maintenant du JavaScript dans notre élément {{htmlelement("script")}} pour rendre la page plus dynamique. Ajoutez le code suivant juste en dessous de la ligne "// JavaScript goes here" : + 
      document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'Vous avez cliqué sur le bouton!';
+    document.body.appendChild(para);
+  }
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i < buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});
    +
    5. +
  5. Enregistrez le fichier et actualisez le navigateur. Vous pouvez maintenant voir que, lorsque vous cliquez sur le bouton, un nouveau paragraphe est généré et placé en dessous.
    6. +
+ +
+

Note : si l'exemple ne semble pas marcher, reprenez pas à pas chaque étape. Avez-vous bien enregistré le code de départ comme un fichier .html ? Avez-vous bien ajouté l'élément {{htmlelement("script")}} juste après la balise </head> ? Avez-vous collé le bon code JavaScript au bon endroit ? JavaScript est sensible à la casse, et assez tatillon, il faut donc respecter scrupuleusement la syntaxe indiquée, sans quoi il peut ne pas fonctionner.

+
+ +
+

Note : vous pouvez voir cette version sur GitHub avec apply-javascript-internal.html (et aussi en live).

+
+ +

JavaScript externe

+ +

Ça marche très bien, mais si nous voulons mettre notre JavaScript dans un fichier externe ? Voyons cela.

+ +
    +
  1. Créez d'abord un nouveau fichier dans le même répertoire que votre fichier HTML. Nommez-le script.js (vérifiez qu'il a bien l'extension de fichier .js, c'est ainsi qu'il est identifié comme fichier JavaScript).
    2. +
  2. Ensuite, copiez-collez tout le script contenu dans l'élément {{htmlelement("script")}} vers le fichier .js, et enregistrez le fichier.
    3. +
  3. À présent remplacez l'élément {{htmlelement("script")}} par : + 
    <script src="script.js" defer></script>
    +
    4. +
  4. Enregistrez et rechargez la page dans votre navigateur, et vous devriez voir la même chose qu'avant. C'est la même chose, mais nous avons maintenant le JavaScript dans un fichier externe. C'est une bonne chose en général pour organiser le code et le rendre réutilisable pour plusieurs fichiers HTML. Cela rend aussi le code HTML plus lisible en évitant d'y inclure de gros blocs de JavaScript.
    5. +
+ +

Note : vous pouvez voir cette version sur GitHub avec apply-javascript-external.html et script.js (ainsi qu'en live).

+ +

Handlers JavaScript en ligne

+ +

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é !';
+  document.body.appendChild(para);
+}
+ +
<button onclick="createParagraph()">Cliquez-moi!</button>
+ +

Vous pouvez essayer cette version dans la démonstration ci-dessous.

+ +

{{ 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');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

Cela peut sembler un peu plus long que l'attribut onclick, mais cela fonctionnera pour tous les boutons peu importe leur nombre sur la page, et peu importe si des boutons sont ajoutés ou retirés, le code JavaScript n'aura pas besoin d'être modifié.

+ +
+

Note : essayez de modifier votre version de apply-javascript.html et d'y ajouter quelques boutons dans le fichier. En actualisant la page, tous les boutons devraient créer un paragraphe quand ils sont cliqués. Pas mal, non ?

+
+ +

Stratégies de chargement de script

+ +

Le chargement des scripts au bon moment pose un certain nombre de problèmes. Rien n'est aussi simple qu'il y paraît ! Un problème courant est que le code HTML d'une page se charge en suivant l'ordre d'apparition dans le code source. Si vous utilisez JavaScript pour manipuler des éléments sur la page (plus précisément, le DOM), votre code ne fonctionnera pas si le JavaScript est chargé et analysé avant le code HTML sur lequel vous voulez opérer.

+ +

Dans les exemples de code interne et externe ci-dessus, le JavaScript est chargé et exécuté dans l'en-tête du document, avant que le corps soit analysé. Cela peut causer une erreur, donc nous avons utilisé des structures pour le contourner.

+ +

Dans l'exemple interne, vous pouvez voir cette structure autour du code :

+ +
+document.addEventListener("DOMContentLoaded", function() {
+  ...
+});
+ +

Il s'agit d'un gestionnaire d'évènement associé à l'événement DOMContentLoaded du navigateur, cet événement est déclenché quand le body HTML est complètement chargé et analysé. Le code JavaScript à l'intérieur du bloc est exécuté après le déclenchement de DOMContentLoaded. Par conséquent, l'erreur est évitée (vous en apprendrez plus sur les événements plus tard dans le cours).

+ +

Dans l'exemple externe, nous utilisons une fonctionnalité JavaScript plus moderne pour résoudre le problème, l'attribut async, qui indique au navigateur de continuer à télécharger le contenu HTML une fois que l'élément de balise {{htmlelement("script")}} a été atteint.

+ +
<script src="script.js" defer></script>
+ +

Dans ce cas, le script et le code HTML se chargeront simultanément et le code fonctionnera.

+ +
+

Note : Dans le cas externe, nous n'avions pas besoin d'utiliser l'événement DOMContentLoaded, car l'attribut async a résolu le problème pour nous. Nous n'avons pas utilisé la solution async pour l'exemple JavaScript interne, car elle ne fonctionne que pour les scripts externes.

+
+ +

Auparavant, une solution à ce problème consistait à placer votre élément de script juste au bas du corps (par exemple, juste avant la balise), afin qu'il soit chargé après que tout le code HTML a été analysé. Le problème de cette solution (et de la solution DOMContentLoaded vue ci-dessus) est que le chargement et l'analyse du script sont complètements bloqués jusqu'à ce que le DOM HTML soit chargé. Sur des sites plus importants avec beaucoup de JavaScript, cela peut entraîner un problème de performances majeur, ce qui ralentit votre site. C'est pourquoi async a été ajouté aux navigateurs !

+ +

async et defer

+ +

En fait, il existe deux façons de contourner le problème du script de blocage : async et defer. Regardons la différence entre les deux.

+ +

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.

+ +async vs defer + +

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 :

+ +
<script async src="js/vendor/jquery.js"></script>
+
+<script async src="js/script2.js"></script>
+
+<script async src="js/script3.js"></script>
+ +

Vous ne pouvez pas compter sur l'ordre dans lequel les scripts seront chargés. Jquery.js peut être chargé avant ou après script2.js et script3.js. Si tel est le cas, toute fonction de ces scripts dépendant de jquery générera une erreur, car jquery ne sera pas défini au moment de l'exécution du script.

+ +

defer exécute les scripts dans l'ordre dans lequel ils apparaissent dans la page et les exécute dès que le script et le contenu sont téléchargés :

+ +
<script defer src="js/vendor/jquery.js"></script>
+
+<script defer src="js/script2.js"></script>
+
+<script defer src="js/script3.js"></script>
+ +

Tous les scripts dotés de l'attribut de defer seront chargés dans l'ordre dans lequel ils apparaissent sur la page. Ainsi, dans le deuxième exemple, nous pouvons être sûrs que jquery.js se chargera avant script2.js et script3.js et que script2.js se chargera avant script3.js.

+ +

Pour résumer :

+ + + +

Commentaires

+ +

Comme pour le HTML et le CSS, il est possible d'écrire des commentaires dans le code JavaScript qui seront ignorés par le navigateur. Ils ne sont là que pour apporter des précisions aux autres développeurs sur le fonctionnement du code (et vous-même, si vous reprenez votre code après six mois sans pouvoir vous rappeler ce que vous avez fait). Les commentaires sont très utiles, et vous devriez les utiliser fréquemment, surtout pour des applications de grande taille. Il y en a deux types :

+ + + +

Ainsi, vous pourriez par exemple annoter notre dernière démonstration de JavaScript de cette manière :

+ +
// Fonction: créer un nouveau paragraphe et l'ajouter en bas du HTML
+
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Regrouper les coordonnées de tous les boutons de la page et les organiser en tableau
+  2. Faire une boucle dans ce tableau et ajouter un "click event listener" à chaque bouton
+
+  Quand le bouton est cliqué, la fonction "createParagraph()" sera exécutée
+*/
+
+let buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

Résumé

+ +

Et voilà votre premier pas dans le monde du JavaScript. Nous avons commencé par la théorie seule, pour vous habituer aux raisons d'utiliser JavaScript, et à ses possibilités. Vous avez pu voir quelques exemples de code et appris comment JavaScript s'intègre avec le reste du code sur votre site web, entre autres choses.

+ +

Le JavaScript peut sembler un peu impressionnant pour l'instant, mais pas d'inquiétude, ce cours progressera pas à pas. Dans le prochain article Notre premier code JavaScript, nous entrons au cœur du sujet et vous réaliserez vos propres exemples de JavaScript.

+ +

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

+ + +

Dans ce module

+ + 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 deleted file mode 100644 index f8ec006003..0000000000 --- a/files/fr/learn/javascript/first_steps/what_went_wrong/index.html +++ /dev/null @@ -1,256 +0,0 @@ ---- -title: Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript -slug: Learn/JavaScript/First_steps/What_went_wrong -tags: - - Apprentissage - - Article - - Codage - - Débutant - - Erreur - - JavaScript - - Tutoriel - - console.log - - débogage - - outils de développement -translation_of: Learn/JavaScript/First_steps/What_went_wrong ---- -
{{LearnSidebar}}
- -
{{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.

- - - - - - - - - - - - -
Prérequis : -

Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.

-
Objectif :Acquérir la capacité et la confiance pour commencer à résoudre des problèmes simples dans votre propre code.
- -

Types d' erreurs

- -

En règle générale, les erreurs dans un code sont à ranger dans deux catégories :

- - - -

Bon, mais ce n'est pas si simple que cela — il y a d'autres facteurs de différenciation lorsque vous approfondissez. Mais la classification ci-dessus suffiira pour commencer. Nous examinerons ces deux catégories d'erreur un peu plus loin.

- -

Un exemple erroné

- -

Pour commencer, revenons à notre jeu de devinettes numériques — sauf que cette fois-ci, nous explorerons une version qui comporte des erreurs délibérées. Allez sur Github et fabriquez vous-même une copie locale de number-game-errors.html (voyez-la ici en direct).

- -
    -
  1. Pour commencer, ouvrez la copie locale avec votre éditeur de texte favoris.
    2. -
  2. Essayez de lancer le jeu — vous remarquerez que quand vous pressez le bouton Submit guess, cela ne fonctionne pas!
    3. -
- -
-

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.

- -

Réparer les erreurs de syntaxe

- -

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 !

- -
    -
  1. 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 :
    2. -
  2. 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.
      • -
    • Un message d'erreur précisant ce qui ne va pas : "TypeError: guessSubmit.addeventListener is not a function" ("Type d'erreur : guessSubmit.addeventListener n'est pas une fonction")
      • -
    • Un lien "Learn More" ("En savoir plus") pointant sur une page MDN explicitant ce que l'erreur signifie avec pléthore de détails.
      • -
    • Le nom du fichier JavaScript, lié à l'onglet Debugger de l'outil de développement. Si vous suivez le lien, vous verrez exactement la ligne dans laquelle l'erreur est mise en évidence.
      • -
    • Le numéro de la ligne où se situe l'erreur, et le rang du caractère dans cette ligne où l'erreur a été repérée pour la première fois. Dans notre cas, il s'agit de la ligne 86, caractère 3.
      • -
    -
    3. -
  3. En examinant la ligne 86 dans l'éditeur de code, nous voyons : - 
    guessSubmit.addeventListener('click', checkGuess);
    -
    4. -
  4. 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().
    5. -
  5. 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.
    6. -
- -
-

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

- -
    -
  1. Enregistrez la page et actualisez‑la, vous constaterez que l'erreur a disparu.
    2. -
  2. Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur !
    3. -
  3. 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 : 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.

    -
    4. -
  4. Regardez à la ligne 78, vous verrez ce code : - 
    lowOrHi.textContent = 'Last guess was too high!';
    -
    5. -
  5. La commande dans cette ligne essaie de définir la propriété textContent de la variable lowOrHi à l'aide d'une chaîne textuelle ; mais cela ne fonctionne pas car lowOrHi ne contient pas ce qui est attendu. Voyons voir — recherchons d'autres occurrences de lowOrHi dans le code. La plus proche que vous trouverez dans le JavaScript se situe à la ligne 48 : - 
    let lowOrHi = document.querySelector('lowOrHi');
    -
    6. -
  6. Là, nous essayons de faire en sorte que la variable contienne une référence à un élément dans le HTML du document. Vérifions si sa valeur est null après que cette ligne ait été exécutée. Ajoutez le code suivant à la ligne 49 : - 
    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.

    -
    -
    7. -
  7. 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.
    8. -
  8. 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>
    -
    9. -
  9. 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.
    10. -
  10. Enregistrons et actualisons à nouveau, et la directive console.log() renvoie bien l'élément  <p> attendu. Pfff ! Une autre erreur corrigée ! On peut enlever la ligne console.log() maintenant, ou bien la garder pour s'y reporter plus tard — comme vous l'entendez.
    11. -
- -
-

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

- -
    -
  1. Maintenant si vous essayez de jouer, cela ira mieux — tout se déroule correctement, jusqu'à ce que vous arriviez à la fin, soit en devinant le bon chiffre, soit en épuisant le nombre de tentatives permises.
    2. -
  2. Arrivé là, le jeu échoue à nouveau et vous rencontrez la même erreur qu'au début — "TypeError: resetButton.addeventListener is not a function" ! Mais cette fois‑ci, elle vient de la ligne  94.
    3. -
  3. En regardant cette ligne, il est facile de voir que nous avons fait ici la même erreur que précédemment. Il nous suffit de changer addeventListener en addEventListener. Faites‑le.
    4. -
- -

Une erreur de logique

- -

À ce stade, le jeu se déroule correctement, mais après avoir fait quelques parties, vous noterez sans doute que le nombre « aléatoire » à deviner est toujours 0 ou 1. Franchement, de quoi vous dégoûter de jouer !

- -

Il y a sûrement un problème dans la logique du jeu quelque part — le jeu ne renvoie pas d'erreur ; il ne fonctionne pas correctement.

- -
    -
  1. Recherchons les lignes où la variable randomNumber est définie. L'instance qui stocke en début de jeu le nombre aléatoire à deviner se situe autour de la ligne 44 : - - 
    let randomNumber = Math.floor(Math.random()) + 1;
    - Et celle qui génére le nombre aléatoire pour une succession de jeux se situe autour de la ligne 113 : - - 
    randomNumber = Math.floor(Math.random()) + 1;
    -
    2. -
  2. Pour vérifier si ces lignes sont vraiment à l'origine du problème, faisons appel à nouveau à notre ami console.log() — insérons la ligne suivante directement en dessous des deux lignes indiquées plus haut : - 
    console.log(randomNumber);
    -
    3. -
  3. Enregistrons, actualisons et jouons quelques parties — on constate que randomNumber est égal à 1 quel que soit le point où il est raccordé à la console.
    4. -
- -

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

Garder la partie entière d'un nombre décimal compris entre 0 et 1 renvoie toujours 0, y ajouter 1 donne toujours  1. Il faut multiplier le nombre aléatoire par 100 avant de l'arrondir par défaut. La ligne suivante nous donne un entier aléatoire entre 0 et  99 :

- -
Math.floor(Math.random()*100);
- -

Maintenant ajoutons 1 pour obtenir un nombre aléatoire entre 1 et 100 :

- -
Math.floor(Math.random()*100) + 1;
- -

Modifiez ces deux lignes comme indiqué, enregistrez, actualisez — le jeu devrait maintenant fonctionner comme il faut !

- -

Autres erreurs courantes

- -

D'autres erreurs courantes peuvent être commises en écrivant du code. Ce paragraphe attire votre attention sur la plupart d'entre elles.

- -

SyntaxError: missing ; before statement

- -

Cette erreur signale généralement l'oubli du point‑virgule à la fin d'une ligne de code ; mais elle peut se révéler parfois plus énigmatique. Par exemple, si, dans la fonction  checkGuess(),nous modifions cette ligne :

- -
let userGuess = Number(guessField.value);
- -

en

- -
let userGuess === Number(guessField.value);
- -

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.

-
- -

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

- -

Voilà un autre symptome de la confusion entre opérateur d'assignation et opérateur de test d'égalité. Ainsi, dans checkGuess(), si vous modifiez cette ligne :

- -
if (userGuess === randomNumber) {
- -

en

- -
if (userGuess = randomNumber) {
- -

le test renverra toujours true (vrai) et le programme indiquera que vous avez gagné à tout coup. Soyez attentif !

- -

SyntaxError: missing ) after argument list

- -

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.

-
- -

SyntaxError: missing : after property id

- -

Cette erreur concerne généralement un objet JavaScript mal construit, mais dans ce cas nous l'avons déclenchée en modifiant

- -
function checkGuess() {
- -

en

- -
function checkGuess( {
- -

Le navigateur pense que vous essayez de passer le contenu d'un fonction comme argument pour l'autre fonction. Soyez attentifs avec les parenthèses !

- -

SyntaxError: missing } after function body

- -

Facile — elle signifie généralement que vous avez omis une accolade dans une fonction ou dans une structure conditionnelle. Vous l'obtiendrez en effaçant une des accolades voisines de la terminaison de la fonction checkGuess().

- -

SyntaxError: expected expression, got 'string' ou SyntaxError: unterminated string literal

- -

Ces erreurs signalent généralement l'oubli de guillemets ouvrants ou fermants dans une chaîne littérale. Dans la première erreur du titre, string doit être remplacé par l'un ou les caractères inattendus que l'explorateur a trouvé à la place du guillemet en début de chaîne. La deuxième erreur indique que la chaîne n'a pas été clôturée avec un guillement fermant.

- -

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.

-
- -

Résumé

- -

Voilà ce que nous pouvons dire à propos des erreurs basiques pour de simples programmes JavaScript. Il n'est pas toujours aussi simple de détecter ce qui ne va pas dans du code, mais au moins vous économiserez ainsi quelques heures de veille et vous progresserez plus rapidement si les choses ne déraillent pas dès le début de votre parcours d'apprentissage.

- -

Voir aussi

- -
- -
- -

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

diff --git a/files/fr/learn/javascript/first_steps/what_went_wrong/index.md b/files/fr/learn/javascript/first_steps/what_went_wrong/index.md new file mode 100644 index 0000000000..f8ec006003 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/what_went_wrong/index.md @@ -0,0 +1,256 @@ +--- +title: Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript +slug: Learn/JavaScript/First_steps/What_went_wrong +tags: + - Apprentissage + - Article + - Codage + - Débutant + - Erreur + - JavaScript + - Tutoriel + - console.log + - débogage + - outils de développement +translation_of: Learn/JavaScript/First_steps/What_went_wrong +--- +
{{LearnSidebar}}
+ +
{{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.

+ + + + + + + + + + + + +
Prérequis : +

Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.

+
Objectif :Acquérir la capacité et la confiance pour commencer à résoudre des problèmes simples dans votre propre code.
+ +

Types d' erreurs

+ +

En règle générale, les erreurs dans un code sont à ranger dans deux catégories :

+ + + +

Bon, mais ce n'est pas si simple que cela — il y a d'autres facteurs de différenciation lorsque vous approfondissez. Mais la classification ci-dessus suffiira pour commencer. Nous examinerons ces deux catégories d'erreur un peu plus loin.

+ +

Un exemple erroné

+ +

Pour commencer, revenons à notre jeu de devinettes numériques — sauf que cette fois-ci, nous explorerons une version qui comporte des erreurs délibérées. Allez sur Github et fabriquez vous-même une copie locale de number-game-errors.html (voyez-la ici en direct).

+ +
    +
  1. Pour commencer, ouvrez la copie locale avec votre éditeur de texte favoris.
    2. +
  2. Essayez de lancer le jeu — vous remarquerez que quand vous pressez le bouton Submit guess, cela ne fonctionne pas!
    3. +
+ +
+

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.

+ +

Réparer les erreurs de syntaxe

+ +

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 !

+ +
    +
  1. 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 :
    2. +
  2. 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.
      • +
    • Un message d'erreur précisant ce qui ne va pas : "TypeError: guessSubmit.addeventListener is not a function" ("Type d'erreur : guessSubmit.addeventListener n'est pas une fonction")
      • +
    • Un lien "Learn More" ("En savoir plus") pointant sur une page MDN explicitant ce que l'erreur signifie avec pléthore de détails.
      • +
    • Le nom du fichier JavaScript, lié à l'onglet Debugger de l'outil de développement. Si vous suivez le lien, vous verrez exactement la ligne dans laquelle l'erreur est mise en évidence.
      • +
    • Le numéro de la ligne où se situe l'erreur, et le rang du caractère dans cette ligne où l'erreur a été repérée pour la première fois. Dans notre cas, il s'agit de la ligne 86, caractère 3.
      • +
    +
    3. +
  3. En examinant la ligne 86 dans l'éditeur de code, nous voyons : + 
    guessSubmit.addeventListener('click', checkGuess);
    +
    4. +
  4. 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().
    5. +
  5. 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.
    6. +
+ +
+

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

+ +
    +
  1. Enregistrez la page et actualisez‑la, vous constaterez que l'erreur a disparu.
    2. +
  2. Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur !
    3. +
  3. 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 : 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.

    +
    4. +
  4. Regardez à la ligne 78, vous verrez ce code : + 
    lowOrHi.textContent = 'Last guess was too high!';
    +
    5. +
  5. La commande dans cette ligne essaie de définir la propriété textContent de la variable lowOrHi à l'aide d'une chaîne textuelle ; mais cela ne fonctionne pas car lowOrHi ne contient pas ce qui est attendu. Voyons voir — recherchons d'autres occurrences de lowOrHi dans le code. La plus proche que vous trouverez dans le JavaScript se situe à la ligne 48 : + 
    let lowOrHi = document.querySelector('lowOrHi');
    +
    6. +
  6. Là, nous essayons de faire en sorte que la variable contienne une référence à un élément dans le HTML du document. Vérifions si sa valeur est null après que cette ligne ait été exécutée. Ajoutez le code suivant à la ligne 49 : + 
    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.

    +
    +
    7. +
  7. 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.
    8. +
  8. 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>
    +
    9. +
  9. 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.
    10. +
  10. Enregistrons et actualisons à nouveau, et la directive console.log() renvoie bien l'élément  <p> attendu. Pfff ! Une autre erreur corrigée ! On peut enlever la ligne console.log() maintenant, ou bien la garder pour s'y reporter plus tard — comme vous l'entendez.
    11. +
+ +
+

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

+ +
    +
  1. Maintenant si vous essayez de jouer, cela ira mieux — tout se déroule correctement, jusqu'à ce que vous arriviez à la fin, soit en devinant le bon chiffre, soit en épuisant le nombre de tentatives permises.
    2. +
  2. Arrivé là, le jeu échoue à nouveau et vous rencontrez la même erreur qu'au début — "TypeError: resetButton.addeventListener is not a function" ! Mais cette fois‑ci, elle vient de la ligne  94.
    3. +
  3. En regardant cette ligne, il est facile de voir que nous avons fait ici la même erreur que précédemment. Il nous suffit de changer addeventListener en addEventListener. Faites‑le.
    4. +
+ +

Une erreur de logique

+ +

À ce stade, le jeu se déroule correctement, mais après avoir fait quelques parties, vous noterez sans doute que le nombre « aléatoire » à deviner est toujours 0 ou 1. Franchement, de quoi vous dégoûter de jouer !

+ +

Il y a sûrement un problème dans la logique du jeu quelque part — le jeu ne renvoie pas d'erreur ; il ne fonctionne pas correctement.

+ +
    +
  1. Recherchons les lignes où la variable randomNumber est définie. L'instance qui stocke en début de jeu le nombre aléatoire à deviner se situe autour de la ligne 44 : + + 
    let randomNumber = Math.floor(Math.random()) + 1;
    + Et celle qui génére le nombre aléatoire pour une succession de jeux se situe autour de la ligne 113 : + + 
    randomNumber = Math.floor(Math.random()) + 1;
    +
    2. +
  2. Pour vérifier si ces lignes sont vraiment à l'origine du problème, faisons appel à nouveau à notre ami console.log() — insérons la ligne suivante directement en dessous des deux lignes indiquées plus haut : + 
    console.log(randomNumber);
    +
    3. +
  3. Enregistrons, actualisons et jouons quelques parties — on constate que randomNumber est égal à 1 quel que soit le point où il est raccordé à la console.
    4. +
+ +

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

Garder la partie entière d'un nombre décimal compris entre 0 et 1 renvoie toujours 0, y ajouter 1 donne toujours  1. Il faut multiplier le nombre aléatoire par 100 avant de l'arrondir par défaut. La ligne suivante nous donne un entier aléatoire entre 0 et  99 :

+ +
Math.floor(Math.random()*100);
+ +

Maintenant ajoutons 1 pour obtenir un nombre aléatoire entre 1 et 100 :

+ +
Math.floor(Math.random()*100) + 1;
+ +

Modifiez ces deux lignes comme indiqué, enregistrez, actualisez — le jeu devrait maintenant fonctionner comme il faut !

+ +

Autres erreurs courantes

+ +

D'autres erreurs courantes peuvent être commises en écrivant du code. Ce paragraphe attire votre attention sur la plupart d'entre elles.

+ +

SyntaxError: missing ; before statement

+ +

Cette erreur signale généralement l'oubli du point‑virgule à la fin d'une ligne de code ; mais elle peut se révéler parfois plus énigmatique. Par exemple, si, dans la fonction  checkGuess(),nous modifions cette ligne :

+ +
let userGuess = Number(guessField.value);
+ +

en

+ +
let userGuess === Number(guessField.value);
+ +

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.

+
+ +

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

+ +

Voilà un autre symptome de la confusion entre opérateur d'assignation et opérateur de test d'égalité. Ainsi, dans checkGuess(), si vous modifiez cette ligne :

+ +
if (userGuess === randomNumber) {
+ +

en

+ +
if (userGuess = randomNumber) {
+ +

le test renverra toujours true (vrai) et le programme indiquera que vous avez gagné à tout coup. Soyez attentif !

+ +

SyntaxError: missing ) after argument list

+ +

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.

+
+ +

SyntaxError: missing : after property id

+ +

Cette erreur concerne généralement un objet JavaScript mal construit, mais dans ce cas nous l'avons déclenchée en modifiant

+ +
function checkGuess() {
+ +

en

+ +
function checkGuess( {
+ +

Le navigateur pense que vous essayez de passer le contenu d'un fonction comme argument pour l'autre fonction. Soyez attentifs avec les parenthèses !

+ +

SyntaxError: missing } after function body

+ +

Facile — elle signifie généralement que vous avez omis une accolade dans une fonction ou dans une structure conditionnelle. Vous l'obtiendrez en effaçant une des accolades voisines de la terminaison de la fonction checkGuess().

+ +

SyntaxError: expected expression, got 'string' ou SyntaxError: unterminated string literal

+ +

Ces erreurs signalent généralement l'oubli de guillemets ouvrants ou fermants dans une chaîne littérale. Dans la première erreur du titre, string doit être remplacé par l'un ou les caractères inattendus que l'explorateur a trouvé à la place du guillemet en début de chaîne. La deuxième erreur indique que la chaîne n'a pas été clôturée avec un guillement fermant.

+ +

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.

+
+ +

Résumé

+ +

Voilà ce que nous pouvons dire à propos des erreurs basiques pour de simples programmes JavaScript. Il n'est pas toujours aussi simple de détecter ce qui ne va pas dans du code, mais au moins vous économiserez ainsi quelques heures de veille et vous progresserez plus rapidement si les choses ne déraillent pas dès le début de votre parcours d'apprentissage.

+ +

Voir aussi

+ +
+ +
+ +

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

-- cgit v1.2.3-54-g00ecf