From 110a7a1592789759f0f427f40856899ea2c3cfd7 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Wed, 14 Jul 2021 10:39:25 +0200 Subject: fixes fr #1440 (#1448) * fixes #1440 for fr * UPDT: Update Backgrounds_and_borders * UPDT: Update The_web_and_web_standards * UPDT: Update First_steps/Arrays * UPDT: Update First_steps/Math * UPDT: Update Silly_story_generator * UPDT: Update Django/development_environment * UPDT: Update Client-side_JavaScript_frameworks * UPDT: Update Command_line * UPDT: Update API/tabs * RMV: Removing tags * UPDT: Cleanup html of Add-ons/WebExtensions * UPDT: Fix flaws on WebExtensions/Native_messaging * FIX: Fix flaws on Accessibility_inspector/Simulation * UPDT: Html cleanup on Color_contrast * UPDT: Mega html cleanup for Document_Object_Model/Introduction * FIX: Fix flaws for API/Element * UPDT: Update BCD * FIX: Wrong link lang * UPDT: Fix flaws/links * FIX: Img flaws and link lang * FIX: links error and html * UPDT: Links and cleanup html * FIX: link lang * FIX: link lang * FIX: broken example * FIX: fix broken example and html Co-authored-by: tristantheb --- .../learn/javascript/first_steps/arrays/index.html | 55 +++++++------- .../learn/javascript/first_steps/math/index.html | 85 +++++++++++----------- .../first_steps/silly_story_generator/index.html | 26 +++---- 3 files changed, 83 insertions(+), 83 deletions(-) (limited to 'files/fr/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 index df8d360351..f38aeee181 100644 --- a/files/fr/learn/javascript/first_steps/arrays/index.html +++ b/files/fr/learn/javascript/first_steps/arrays/index.html @@ -2,17 +2,19 @@ title: Les tableaux slug: Learn/JavaScript/First_steps/Arrays tags: - - Apprendre + - Arrays - Article - - Codage - - Débutants + - Beginner + - CodingScripting - JavaScript - - Lier + - Join + - Learn - Pop - Push - - Tableaux - - décalage - - séparer + - l10n:priority + - shift + - split + - unshift translation_of: Learn/JavaScript/First_steps/Arrays original_slug: Learn/JavaScript/First_steps/tableaux --- @@ -41,7 +43,7 @@ original_slug: Learn/JavaScript/First_steps/tableaux

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

+

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

-

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.

+

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
    +  
    10 + 7
     9 * 8
     60 % 3
  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 num1 = 10;
     var num2 = 50;
     9 * num1;
     num2 / num1;
  3. Pour terminer cette partie, entrez quelques expressions plus compliquées, comme : -
    5 + 10 * 3;
    +  
    5 + 10 * 3;
     num2 % 9 * num1;
     num2 + num1 / 8 + 2;
  4. @@ -197,50 +198,50 @@ num2 + num1 / 8 + 2;

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

    +

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

    +

    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);
    +
    (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.

    +

    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.

    +

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

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

    +

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

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

    -
    3++;
    +
    3++;

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

    -
    var num1 = 4;
    +
    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;
    +
    num1;

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

    -
    var num2 = 6;
    +
    var num2 = 6;
     num2--;
     num2;
    @@ -252,7 +253,7 @@ num2;

    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 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
    @@ -312,12 +313,12 @@ x = y; // x contient maintenant la même valeur que y, 4

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

    +

    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

    @@ -393,7 +394,7 @@ x *= y; // x contient maintenant la valeur 12
    -

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

    +

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

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

    @@ -407,11 +408,11 @@ x *= y; // x contient maintenant la valeur 12

    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>
    +
    <button>Démarrer la machine</button>
     <p>La machine est arrêtée.</p>
     
    -
    var btn = document.querySelector('button');
    +
    var btn = document.querySelector('button');
     var txt = document.querySelector('p');
     
     btn.addEventListener('click', updateBtn);
    @@ -443,7 +444,7 @@ function updateBtn() {
     

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

    -

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

    +

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

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

    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 index b2eae8fff5..ebc7230da3 100644 --- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html +++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html @@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
    -

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

    +

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

    Résumé du projet

    @@ -52,9 +52,9 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator

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

    +

    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

    @@ -119,7 +119,7 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
  5. document.querySelector('html').style.backgroundColor = 'red';
  6. -
  7. Math.round() est une méthode JavaScript intégrée qui arrondit simplement le résultat d'un calcul à l'entier le plus proche.
  8. +
  9. Math.round() est une méthode JavaScript intégrée qui arrondit simplement le résultat d'un calcul à l'entier le plus proche.
  10. Évaluation

    @@ -131,13 +131,13 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator

    Dans ce module

    -- cgit v1.2.3-54-g00ecf