diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 5579e3b1c..181052309 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -109,19 +109,11 @@ Les outils modernes rendent la [transpilation](https://fr.wiktionary.org/wiki/tr Les exemples de ce genre de langages : -<<<<<<< HEAD - [CoffeeScript](http://coffeescript.org/) est un "sucre syntaxique" pour JavaScript, il introduit une syntaxe plus courte, permettant d’écrire du code plus précis et plus clair. Habituellement, les développeurs Ruby l'aiment bien. - [TypeScript](http://www.typescriptlang.org/) se concentre sur l'ajout de "typage strict des données" pour simplifier le développement et la prise en charge de systèmes complexes. Il est développé par Microsoft. - [Flow](http://flow.org/) ajoute également la saisie de données, mais de manière différente. Développé par Facebook. -- [Dart](https://www.dartlang.org/) est un langage autonome doté de son propre moteur qui s'exécute dans des environnements autres que les navigateurs (comme les applications mobiles). Développé par Google. +- [Dart](https://www.dartlang.org/) est un langage autonome doté de son propre moteur qui s'exécute dans des environnements autres que les navigateurs (comme les applications mobiles), mais peut aussi être transpilé en JavaScript. Développé par Google. - [Brython](https://brython.info/) est un transpilateur Python vers JavaScript qui permet d'écrire des applications en Python pur sans JavaScript. -======= -- [CoffeeScript](http://coffeescript.org/) is a "syntactic sugar" for JavaScript. It introduces shorter syntax, allowing us to write clearer and more precise code. Usually, Ruby devs like it. -- [TypeScript](http://www.typescriptlang.org/) is concentrated on adding "strict data typing" to simplify the development and support of complex systems. It is developed by Microsoft. -- [Flow](http://flow.org/) also adds data typing, but in a different way. Developed by Facebook. -- [Dart](https://www.dartlang.org/) is a standalone language that has its own engine that runs in non-browser environments (like mobile apps), but also can be transpiled to JavaScript. Developed by Google. -- [Brython](https://brython.info/) is a Python transpiler to JavaScript that enables the writing of applications in pure Python without JavaScript. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Il en existe évidemment bien plus, cela dit, même si nous utilisons un de ces langages, nous devrions également connaître le langage JavaScript, pour bien comprendre ce que nous faisons. diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md index 14d655fb3..72e025184 100644 --- a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md +++ b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md @@ -6,11 +6,7 @@ C’est simple : let notrePlanete = "Terre"; ``` -<<<<<<< HEAD Notez que nous pourrions utiliser un nom `planète` plus court, mais la planète à laquelle il fait référence pourrait ne pas être évidente. C’est bien d’être plus verbeux. Au moins jusqu'à ce que la variable n'estPasTropLongue. -======= -Note, we could use a shorter name `planet`, but it might not be obvious what planet it refers to. It's nice to be more verbose. At least until the variable isNotTooLong. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ## le nom du visiteur actuel diff --git a/1-js/02-first-steps/08-operators/article.md b/1-js/02-first-steps/08-operators/article.md index fe3fca948..55de3d8e9 100644 --- a/1-js/02-first-steps/08-operators/article.md +++ b/1-js/02-first-steps/08-operators/article.md @@ -105,20 +105,15 @@ Cependant, notez que les opérations se déroulent de gauche à droite. S'il y a alert(2 + 2 + '1' ); // "41" et non "221" ``` -<<<<<<< HEAD -Ici, les opérateurs travaillent les uns après les autres. Le premier `+` additionne deux nombres, donc il renvoie `4`, puis le `+` suivant ajoute la chaîne `1`, donc c'est comme `4 + '1' = 41`. -======= -Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+` adds the string `1` to it, so it's like `4 + '1' = 41`. +Ici, les opérateurs travaillent les uns après les autres. Le premier `+` additionne deux nombres, donc il renvoie `4`, puis le `+` suivant ajoute la chaîne de caractères `1`, donc c'est comme `4 + '1' = 41`. ```js run alert('1' + 2 + 2); // "122" and not "14" ``` -Here, the first operand is a string, the compiler treats the other two operands as strings too. The `2` gets concatenated to `'1'`, so it's like `'1' + 2 = "12"` and `"12" + 2 = "122"`. +Ici, le premier opérande est une chaîne de caractères, le compilateur traite également les deux autres opérandes comme des chaînes de caractères. Le `2` est concaténé à `'1'`, donc c'est comme `'1'+ 2 = "12"` et `"12" + 2 = "122"`. -The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 -Le binaire `+` est le seul opérateur qui prend en charge les chaînes de cette manière. D'autres opérateurs arithmétiques ne fonctionnent qu'avec des nombres et convertissent toujours leurs opérandes en nombres. +Le binaire `+` est le seul opérateur qui prend en charge les chaînes de caractères de cette manière. D'autres opérateurs arithmétiques ne fonctionnent qu'avec des nombres et convertissent toujours leurs opérandes en nombres. Voici l'exemple pour la soustraction et la division: ```js run diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md index 05a47ea5e..8fa736978 100644 --- a/1-js/02-first-steps/10-ifelse/article.md +++ b/1-js/02-first-steps/10-ifelse/article.md @@ -68,11 +68,7 @@ if (cond) { ## La clause "else" -<<<<<<< HEAD -L'instruction `if` peut contenir un bloc optionnel `else`. Il s'exécute lorsque la condition est incorrecte. -======= -The `if` statement may contain an optional "else" block. It executes when the condition is falsy. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +L'instruction `if` peut contenir un bloc optionnel "else". Il s'exécute lorsque la condition est fausse. Par exemple : ```js run diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md index 046351f98..d632c05a0 100644 --- a/1-js/03-code-quality/06-polyfills/article.md +++ b/1-js/03-code-quality/06-polyfills/article.md @@ -11,128 +11,82 @@ Une bonne page pour voir l’état actuel de la prise en charge des fonctionnali As programmers, we'd like to use most recent features. The more good stuff - the better! -<<<<<<< HEAD -Lorsque nous utilisons des fonctionnalités modernes du langage, certains moteurs peuvent ne pas supporter un tel code. Comme indiqué, toutes les fonctionnalités ne sont pas implémentées partout. +D'un autre côté, comment faire fonctionner le code moderne sur des moteurs plus anciens qui ne comprennent pas encore les fonctionnalités récentes ? -C'est là que Babel vient à la rescousse. +Il existe deux outils pour cela : -[Babel](https://babeljs.io) est un [transpileur](https://fr.wikipedia.org/wiki/Compilateur_source_%C3%A0_source). Il réécrit le code JavaScript moderne dans le standard précédent. +1. Les transpilers. +2. Les polyfills. -Actuellement, Babel comporte deux parties : +Ici, dans ce chapitre, notre objectif est de comprendre l'essentiel de leur fonctionnement et de leur place dans le développement Web. -1. Tout d’abord, le programme transpileur, qui réécrit le code. Le développeur l'exécute sur son propre ordinateur. Il réécrit le code dans l'ancien standard. Et ensuite, le code est transmis au site Web pour les utilisateurs. Des systèmes de construction de projet moderne comme [webpack](http://webpack.github.io/) qui permet de fournir des moyens d’exécuter automatiquement un transpileur à chaque changement de code, de sorte que cela devient très facile à intégrer dans le processus de développement. +## Les transpilers -2. Ensuite, le polyfill. +Un [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler) est un logiciel spécial qui peut analyser ("lire et comprendre") le code moderne et le réécrire en utilisant des constructions de syntaxe plus anciennes, de sorte que le résultat soit le même. - Les nouvelles fonctionnalités du langage peuvent inclure de nouvelles fonctions intégrées et de nouvelles constructions de syntaxe. - Le transpiler réécrit le code en transformant les nouvelles constructions de syntaxe en anciennes. Mais en ce qui concerne les nouvelles fonctions intégrées, nous devons les implémenter. JavaScript est un langage très dynamique, les scripts peuvent ajouter / modifier n’importe quelle fonction, afin qu’ils se comportent conformément au standard moderne. +Par exemple, JavaScript avant l'année 2020 n'avait pas "l'opérateur de coalescence des nuls" `??`. Ainsi, si un visiteur utilise un navigateur obsolète, il peut ne pas comprendre le code tel que `height = height ?? 100`. - Un script qui met à jour / ajoute de nouvelles fonctions s'appelle "polyfill". Il "comble" le vide et ajoute les implémentations manquantes. - -Deux polyfill intéressants sont : - - [core js](https://github.com/zloirock/core-js) qui prend beaucoup en charge, permet d’inclure uniquement les fonctionnalités nécessaires. - - [polyfill.io](http://polyfill.io) service qui fournit un script avec des polyfill, en fonction des fonctionnalités et du navigateur de l'utilisateur. - -Nous devons donc configurer le transpileur et ajouter le polyfill pour les anciens moteurs afin de prendre en charge les fonctionnalités modernes. - -Donc, si nous allons utiliser les fonctionnalités du langage moderne, un transpiler et un polyfill sont nécessaires. - -## Exemples dans le tutoriel -======= -From the other hand, how to make out modern code work on older engines that don't understand recent features yet? - -There are two tools for that: - -1. Transpilers. -2. Polyfills. - -Here, in this chapter, our purpose is to get the gist of how they work, and their place in web development. - -## Transpilers - -A [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler) is a special piece of software that can parse ("read and understand") modern code, and rewrite it using older syntax constructs, so that the result would be the same. - -E.g. JavaScript before year 2020 didn't have the "nullish coalescing operator" `??`. So, if a visitor uses an outdated browser, it may fail to understand the code like `height = height ?? 100`. - -A transpiler would analyze our code and rewrite `height ?? 100` into `(height !== undefined && height !== null) ? height : 100`. +Un transpiler analyserait notre code et réécrirait `height ?? 100` en `(height !== undefined && height !== null) ? height : 100`. ```js -// before running the transpiler +// avant d'exécuter le transpiler height = height ?? 100; -// after running the transpiler +// après avoir exécuté le transpiler height = (height !== undefined && height !== null) ? height : 100; ``` -Now the rewritten code is suitable for older JavaScript engines. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 - -Usually, a developer runs the transpiler on their own computer, and then deploys the transpiled code to the server. +Désormais, le code réécrit convient aux anciens moteurs JavaScript. -<<<<<<< HEAD -````online -La plupart des exemples sont exécutables sur place, comme ceci : -======= -Speaking of names, [Babel](https://babeljs.io) is one of the most prominent transpilers out there. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Habituellement, un développeur exécute le transpiler sur son propre ordinateur, puis déploie le code transpilé sur le serveur. -Modern project build systems, such as [webpack](http://webpack.github.io/), provide means to run transpiler automatically on every code change, so it's very easy to integrate into development process. +En parlant de noms, [Babel](https://babeljs.io) est l'un des transpileurs les plus connus. -## Polyfills +Les systèmes de construction de projets modernes, tels que [webpack](http://webpack.github.io/), fournissent des moyens pour exécuter un transpiler automatiquement à chaque changement de code, il est donc très facile à intégrer dans le processus de développement. -New language features may include not only syntax constructs and operators, but also built-in functions. +## Les polyfills -For example, `Math.trunc(n)` is a function that "cuts off" the decimal part of a number, e.g `Math.trunc(1.23) = 1`. - -<<<<<<< HEAD -Les exemples qui utilisent le JS moderne ne fonctionneront que si votre navigateur le prend en charge. -```` - -```offline -Pendant que vous lisez la version hors connexion, les exemples ne sont pas exécutables. Dans EPUB, certains peuvent fonctionner. -``` +Les nouvelles fonctionnalités du langage peuvent inclure non seulement des constructions de syntaxe et des opérateurs, mais également des fonctions intégrées. -Google Chrome est généralement la version la plus récente des fonctionnalités du langage, il accepte de lancer des démos ultra-sophistiquées sans transpilers, mais les autres navigateurs modernes fonctionnent également très bien. +Par exemple, `Math.trunc(n)` est une fonction qui "coupe" la partie décimale d'un nombre, par exemple `Math.trunc(1.23) = 1`. -======= -In some (very outdated) JavaScript engines, there's no `Math.trunc`, so such code will fail. +Dans certains moteurs JavaScript (très obsolètes), il n'y a pas de `Math.trunc`, donc un tel code échouera. -As we're talking about new functions, not syntax changes, there's no need to transpile anything here. We just need to declare the missing function. +Comme nous parlons de nouvelles fonctions, pas de changements de syntaxe, il n'est pas nécessaire de transpiler quoi que ce soit ici. Nous avons juste besoin de déclarer la fonction manquante. -A script that updates/adds new functions is called "polyfill". It "fills in" the gap and adds missing implementations. +Un script qui met à jour/ajoute de nouvelles fonctions est appelé "polyfill". Il "comble" le vide et ajoute les implémentations manquantes. -For this particular case, the polyfill for `Math.trunc` is a script that implements it, like this: +Pour ce cas particulier, le polyfill pour `Math.trunc` est un script qui l'implémente, comme ceci : ```js -if (!Math.trunc) { // if no such function - // implement it +if (!Math.trunc) { // si une telle fonction n'existe pas + // l'implémenter Math.trunc = function(number) { - // Math.ceil and Math.floor exist even in ancient JavaScript engines - // they are covered later in the tutorial + // Math.ceil et Math.floor existe même dans les anciens moteurs JavaScript + // ils sont traités plus tard dans le tutoriel return number < 0 ? Math.ceil(number) : Math.floor(number); }; } ``` -JavaScript is a highly dynamic language, scripts may add/modify any functions, even including built-in ones. +JavaScript est un langage très dynamique, les scripts peuvent ajouter/modifier toutes les fonctions, y compris celles intégrées. -Two interesting libraries of polyfills are: -- [core js](https://github.com/zloirock/core-js) that supports a lot, allows to include only needed features. -- [polyfill.io](http://polyfill.io) service that provides a script with polyfills, depending on the features and user's browser. +Deux librairies intéressantes de polyfills sont : +- [core js](https://github.com/zloirock/core-js) qui prend en charge beaucoup, permet d'inclure uniquement les fonctionnalités nécessaires. +- [polyfill.io](http://polyfill.io) est un service qui fournit un script avec des polyfills, en fonction des fonctionnalités et du navigateur de l'utilisateur. -## Summary +## Résumé -In this chapter we'd like to motivate you to study modern and even "bleeding-edge" language features, even if they aren't yet well-supported by JavaScript engines. +Dans ce chapitre, nous aimerions vous motiver à étudier les fonctionnalités du langage modernes et même "de pointe", même si elles ne sont pas encore bien prises en charge par les moteurs JavaScript. -Just don't forget to use transpiler (if using modern syntax or operators) and polyfills (to add functions that may be missing). And they'll ensure that the code works. +N'oubliez pas d'utiliser un transpiler (si vous utilisez une syntaxe ou des opérateurs modernes) et des polyfills (pour ajouter des fonctions qui peuvent manquer). Et ils veilleront à ce que le code fonctionne. -For example, later when you're familiar with JavaScript, you can setup a code build system based on [webpack](http://webpack.github.io/) with [babel-loader](https://github.com/babel/babel-loader) plugin. +Par exemple, plus tard, lorsque vous serez familiarisé avec JavaScript, vous pourrez configurer un système de création de code basé sur [webpack](http://webpack.github.io/) avec le plugin [babel-loader](https://github.com/babel/babel-loader). -Good resources that show the current state of support for various features: -- - for pure JavaScript. -- - for browser-related functions. +De bonnes ressources qui montrent l'état actuel de la prise en charge de diverses fonctionnalités : +- - pour du pur JavaScript. +- - pour les fonctions liées au navigateur. -P.S. Google Chrome is usually the most up-to-date with language features, try it if a tutorial demo fails. Most tutorial demos work with any modern browser though. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +P.S. Google Chrome est généralement le plus à jour avec les fonctionnalités du langage, essayez-le si une démonstration d'un tutoriel échoue. La plupart des démos de didacticiels fonctionnent avec n'importe quel navigateur moderne. diff --git a/1-js/04-object-basics/02-object-copy/article.md b/1-js/04-object-basics/02-object-copy/article.md index dc23b3078..8ebe31ac6 100644 --- a/1-js/04-object-basics/02-object-copy/article.md +++ b/1-js/04-object-basics/02-object-copy/article.md @@ -1,14 +1,8 @@ # Les références d'objet et leur copie -<<<<<<< HEAD Une des différences fondamentale des objets avec les primitives est que ceux-ci sont stockés et copiés "par référence", en opposition des valeurs primitives : strings, numbers, booleans, etc. -- qui sont toujours copiés comme "valeur entière". -On comprendra plus facilement en regardant "sous le capot" le fonctionnement de la copie d'une valeur. -======= -One of the fundamental differences of objects versus primitives is that objects are stored and copied "by reference", whereas primitive values: strings, numbers, booleans, etc -- are always copied "as a whole value". - -That's easy to understand if we look a bit under the hood of what happens when we copy a value. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +On comprendra plus facilement en regardant "sous le capot" de ce qui se passe lorsque nous copions une valeure. Commençons avec une primitive, comme une chaîne de caractères. @@ -19,11 +13,7 @@ let message = "Hello!"; let phrase = message; ``` -<<<<<<< HEAD Il en résulte deux variables indépendantes, chacune stockant la chaîne de caractères `"Hello!"`. -======= -As a result we have two independent variables, each one storing the string `"Hello!"`. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ![](variable-copy-value.svg) @@ -31,15 +21,9 @@ Un résultat plutôt évident n'est-ce pas ? Les objets ne fonctionnent pas comme cela. -<<<<<<< HEAD -**Une variable assignée à un objet ne stocke pas l'objet lui-même, mais son "adresse mémoire", en d'autres termes "une référence" à celui-ci.** +**Une variable assignée à un objet ne stocke pas l'objet lui-même, mais son "adresse en mémoire", en d'autres termes "une référence" à celui-ci.** Prenons un exemple d'une telle variable : -======= -**A variable assigned to an object stores not the object itself, but its "address in memory" -- in other words "a reference" to it.** - -Let's look at an example of such a variable: ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ```js let user = { @@ -53,23 +37,13 @@ Et ici comment elle est stockée en mémmoire : L'objet est stocké quelque part dans la mémoire (du coté droit de l'image), tandis que la varaible `user` (du coté gauche) a une référence à celui-ci. -<<<<<<< HEAD -On peut voir la variable d'objet, ici `user`, comme une feuille de papier avec l'adresse. - -Lorque l'on réalise une action avec l'objet, par exemple récupérer la propriété `user.name`, le moteur de Javascript regarde à l'adresse et réalise l'opération sur l'objet. -======= -We may think of an object variable, such as `user`, as like a sheet of paper with the address of the object on it. +On peut imaginer la variable d'objet, ici `user`, comme une feuille de papier avec l'adresse de l'objet écrit dessus. -When we perform actions with the object, e.g. take a property `user.name`, the JavaScript engine looks at what's at that address and performs the operation on the actual object. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Lorque l'on réalise une action avec l'objet, par exemple récupérer la propriété `user.name`, le moteur de Javascript regarde à l'adresse et réalise l'opération sur l'objet actuel. Et voilà pourquoi cela est important. -<<<<<<< HEAD -**Lorsqu'une la variable d'objet est copiée -- la référence est copiée, l'objet n'est pas dupliqué.** -======= -**When an object variable is copied, the reference is copied, but the object itself is not duplicated.** ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +**Lorsqu'une variable d'objet est copiée -- la référence est copiée, l'objet lui-même n'est pas dupliqué.** Par exemple: @@ -79,23 +53,13 @@ let user = { name: "John" }; let admin = user; // copie la référence ``` -<<<<<<< HEAD Maintenant nous avons deux variables, chacune avec la référence vers le même objet : ![](variable-copy-reference.svg) -Comme vous pouvez le voir, il y a toujours qu'un seul objet, avec deux variables qui le référence. - -On peut utiliser n'importe quelle variable pour accéder à l'objet et modifier le contenu : -======= -Now we have two variables, each storing a reference to the same object: - -![](variable-copy-reference.svg) +Comme vous pouvez le voir, il n'y a toujours qu'un seul objet, mais maintenant avec deux variables qui le référence. -As you can see, there's still one object, but now with two variables that reference it. - -We can use either variable to access the object and modify its contents: ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +On peut utiliser n'importe quelle variable pour accéder à l'objet et modifier son contenu : ```js run let user = { name: 'John' }; @@ -109,11 +73,7 @@ admin.name = 'Pete'; // changé par la référence "admin" alert(*!*user.name*/!*); // 'Pete', les changements sont visibles sur la référence "user" ``` -<<<<<<< HEAD -C'est comme si l'on avait un cabinet avec deux clés et que on l'on utilisait l'une d'elles (`admin`) pour y accéder. Puis, si l'on utilise plus tard la clé (`user`) on peut voir les changements. -======= -It's as if we had a cabinet with two keys and used one of them (`admin`) to get into it and make changes. Then, if we later use another key (`user`), we are still opening the same cabinet and can access the changed contents. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +C'est comme si nous avions une armoire avec deux clés et que nous en utilisions une (`admin`) pour y entrer et y apporter des modifications. Ensuite, si nous utilisons plus tard une autre clé (`user`), nous ouvrons toujours la même armoire et pouvons accéder au contenu modifié. ## Comparaison par référence @@ -138,11 +98,7 @@ let b = {}; // 2 objets indépendants alert( a == b ); // false ``` -<<<<<<< HEAD -Pour des comparaisons comme `obj1 > obj2` ou des comparaisons avec une primitive `obj == 5`, les objets sont convertis en primitive. Nous étudierons comment les conversions d'objets fonctionnent bientôt, mais pour dire la vérité, de telles comparaisons sont rarement nécessaires, en général elles sont le résultat d'une erreur de programmation. -======= -For comparisons like `obj1 > obj2` or for a comparison against a primitive `obj == 5`, objects are converted to primitives. We'll study how object conversions work very soon, but to tell the truth, such comparisons are needed very rarely -- usually they appear as a result of a programming mistake. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Pour des comparaisons comme `obj1 > obj2` ou des comparaisons avec une primitive `obj == 5`, les objets sont convertis en primitive. Nous étudierons comment les conversions d'objets fonctionnent très bientôt, mais pour dire la vérité, de telles comparaisons sont rarement nécessaires, en général elles sont le résultat d'une erreur de programmation. ## Clonage et fusionage, Object.assign @@ -150,11 +106,7 @@ Copier une variable object créé une référence en plus vers le même objet. Mais quid si nous voulons dupliquer un objet ? Créer une copie indépendante, un clone ? -<<<<<<< HEAD -C'est aussi faisable, mais un peu plus compliqué, car en Javascript il n'y pas de méthode intégrée pour cela. En fait c'est rarement utile. Copier par référence fonctionne la plupart du temps. -======= -That's also doable, but a little bit more difficult, because there's no built-in method for that in JavaScript. But there is rarely a need -- copying by reference is good most of the time. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +C'est aussi faisable, mais un peu plus compliqué, parce qu'en Javascript il n'y pas de méthode intégrée pour cela. En fait c'est rarement utile. Copier par référence fonctionne la plupart du temps. Mais si nous le voulons, alors nous devons créer un nouvel objet et répliquer sa structure en itérant ses propriétés et en les copiant au niveau primitive. @@ -274,21 +226,12 @@ user.sizes.width++; // on modifie la propriété à un endroit alert(clone.sizes.width); // 51, on peut voir la modification dans un autre endroit ``` -<<<<<<< HEAD Pour régler ça, on doit utiliser la boucle de clonage qui examine chaque valeur de `user[key]` et, si c'est un objet, répliquer sa structure aussi. On appelle cela un "clone réél" (deep clone). On peut utiliser la récursion pour l'implémenter. Ou, pour ne pas réinventer la roue, prendre un implémentation existante. par exemple [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep) de la librairie [lodash](https://lodash.com). ```smart header="Les objets Const peuvent être modifiés" Un "effet secondaire" important du stockage d'objets en tant que références est qu'un objet déclaré comme `const` *peut* être modifié. -======= -To fix that, we should use a cloning loop that examines each value of `user[key]` and, if it's an object, then replicate its structure as well. That is called a "deep cloning". - -We can use recursion to implement it. Or, to not reinvent the wheel, take an existing implementation, for instance [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep) from the JavaScript library [lodash](https://lodash.com). - -````smart header="Const objects can be modified" -An important side effect of storing objects as references is that an object declared as `const` *can* be modified. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Par exemple : @@ -304,29 +247,16 @@ user.name = "Pete"; // (*) alert(user.name); // Pete ``` -<<<<<<< HEAD Il peut sembler que la ligne `(*)` provoquerait une erreur, mais non. La valeur de `user` est constante, elle doit toujours référencer le même objet. Mais les propriétés de cet objet sont libres de changer. En d'autres termes, le `const user` ne donne une erreur que si nous essayons de définir `user = ...` dans son ensemble, et c'est tout. Cela dit, si nous avons vraiment besoin de créer des propriétés d'objet constantes, c'est également possible, mais en utilisant des méthodes totalement différentes, nous le mentionnerons dans le chapitre . ``` -======= -It might seem that the line `(*)` would cause an error, but it does not. The value of `user` is constant, it must always reference the same object, but properties of that object are free to change. - -In other words, the `const user` gives an error only if we try to set `user=...` as a whole. - -That said, if we really need to make constant object properties, it's also possible, but using totally different methods. We'll mention that in the chapter . -```` ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ## Résumé -<<<<<<< HEAD -Les objets sont assignés et copiés par référence. En d'autres mots, une variable ne stocke pas la "valeur de l'objet" mais la "référence" (l'adresse en mémoire) de la valeur. Donc copier cette variable, ou la passer en argument d'une fonction, copie la référence, pas l'objet. -======= -Objects are assigned and copied by reference. In other words, a variable stores not the "object value", but a "reference" (address in memory) for the value. So copying such a variable or passing it as a function argument copies that reference, not the object itself. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Les objets sont assignés et copiés par référence. En d'autres termes, une variable ne stocke pas la "valeur de l'objet" mais la "référence" (l'adresse en mémoire) de la valeur. Donc copier cette variable, ou la passer en argument d'une fonction, copie la référence, pas l'objet lui-même. Toutes les opérations faites par une copie de la référence (comme ajouter/supprimer une propriété) sont faites sur le même objet. diff --git a/1-js/04-object-basics/07-optional-chaining/article.md b/1-js/04-object-basics/07-optional-chaining/article.md index eed7dbfc0..55b748609 100644 --- a/1-js/04-object-basics/07-optional-chaining/article.md +++ b/1-js/04-object-basics/07-optional-chaining/article.md @@ -12,10 +12,6 @@ Le chaînage optionnel `?.` Est un moyen sécurisé d'accéder aux propriétés Si vous venez de commencer à lire le tutoriel et à apprendre JavaScript, peut-être que le problème ne vous a pas encore touché, mais c'est assez courant. -<<<<<<< HEAD -======= -As an example, let's say we have `user` objects that hold the information about our users. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 À titre d'exemple, disons que nous avons des objets `user` qui contiennent les informations sur nos utilisateurs. @@ -30,11 +26,7 @@ let user = {}; // un utilisateur sans propriété "address" alert(user.address.street); // Error! ``` -<<<<<<< HEAD -C'est le résultat attendu. JavaScript fonctionne comme ça. Comme `user.address` est `undefined`, une tentative d'obtention de `user.address.street` échoue avec une erreur. -======= -That's the expected result. JavaScript works like this. As `user.address` is `undefined`, an attempt to get `user.address.street` fails with an error. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +C'est le résultat attendu. JavaScript fonctionne comme cela. Comme `user.address` est `undefined`, une tentative d'obtention de `user.address.street` échoue avec une erreur. Dans de nombreux cas pratiques, nous préférerions obtenir `undefined` au lieu d'une erreur ici (signifiant "pas de rue"). @@ -69,11 +61,7 @@ let user = {}; // l'utilisateur n'a pas d'adresse alert(user.address ? user.address.street ? user.address.street.name : null : null); ``` -<<<<<<< HEAD C'est juste horrible, on peut même avoir des problèmes pour comprendre un tel code. -======= -That's just awful, one may even have problems understanding such code. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Ne vous en souciez même pas, car il existe une meilleure façon de l'écrire, en utilisant l'opérateur `&&` : diff --git a/1-js/05-data-types/03-string/3-truncate/solution.md b/1-js/05-data-types/03-string/3-truncate/solution.md index 4d850af1a..6975240de 100644 --- a/1-js/05-data-types/03-string/3-truncate/solution.md +++ b/1-js/05-data-types/03-string/3-truncate/solution.md @@ -1,10 +1,6 @@ La longueur maximale doit être `maxlength`, il faut donc la couper un peu plus courte pour laisser de la place aux ellipses. -<<<<<<< HEAD -Notez qu'il existe en réalité un seul caractère Unicode pour un ellipse. Ce n’est pas trois points. -======= -Note that there is actually a single Unicode character for an ellipsis. That's not three dots. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Notez qu'il existe en réalité un seul caractère Unicode pour une ellipse. Ce n’est pas trois points. ```js run function truncate(str, maxlength) { diff --git a/1-js/05-data-types/03-string/article.md b/1-js/05-data-types/03-string/article.md index 767be47c0..73671511f 100644 --- a/1-js/05-data-types/03-string/article.md +++ b/1-js/05-data-types/03-string/article.md @@ -50,11 +50,7 @@ let guestList = "Guests: // Error: Unexpected token ILLEGAL Les guillemets simples et doubles proviennent d'anciens temps de la création linguistique lorsque la nécessité de chaînes multilignes n'était pas prise en compte. Les backticks sont apparus beaucoup plus tard et sont donc plus polyvalents. -<<<<<<< HEAD -Les Backticks nous permettent également de spécifier un "modèle de fonction" avant le premier backtick. La syntaxe est la suivante : func`string`. La fonction `func` est appelée automatiquement, elle reçoit la chaîne de caractères et les expressions incorporées et peut les traiter. Vous pouvez en savoir plus à ce sujet dans la [doc](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Litt%C3%A9raux_gabarits#Gabarits_%C3%A9tiquet%C3%A9s_2). Cela s'appelle des "tagged templates" (Gabarits étiquetés). Cette fonctionnalité facilite l'intégration de chaînes de caractères dans des modèles personnalisés ou d'autres fonctionnalités, mais elle est rarement utilisée. -======= -Backticks also allow us to specify a "template function" before the first backtick. The syntax is: func`string`. The function `func` is called automatically, receives the string and embedded expressions and can process them. This is called "tagged templates". This feature makes it easier to implement custom templating, but is rarely used in practice. You can read more about it in the [manual](mdn:/JavaScript/Reference/Template_literals#Tagged_templates). ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Les Backticks nous permettent également de spécifier un "modèle de fonction" avant le premier backtick. La syntaxe est la suivante : func`string`. La fonction `func` est appelée automatiquement, elle reçoit la chaîne de caractères et les expressions incorporées et peut les traiter. Vous pouvez en savoir plus à ce sujet dans la [doc](mdn:/JavaScript/Reference/Template_literals#Tagged_templates). ## Caractères spéciaux @@ -83,7 +79,6 @@ Il existe d'autres caractères "spéciaux" moins courants. Voici la liste complète : -<<<<<<< HEAD | Caractère | Description | |----------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `\n` | Nouvelle ligne | @@ -102,26 +97,6 @@ Exemples avec unicode : alert( "\u00A9" ); // © alert( "\u{20331}" ); // 佫, un rare hiéroglyphe chinois (long unicode) alert( "\u{1F60D}" ); // 😍, un symbole de visage souriant (un autre long unicode) -======= -| Character | Description | -|-----------|-------------| -|`\n`|New line| -|`\r`|Carriage return: not used alone. Windows text files use a combination of two characters `\r\n` to represent a line break. | -|`\'`, `\"`|Quotes| -|`\\`|Backslash| -|`\t`|Tab| -|`\b`, `\f`, `\v`| Backspace, Form Feed, Vertical Tab -- kept for compatibility, not used nowadays. | -|`\xXX`|Unicode character with the given hexadecimal Unicode `XX`, e.g. `'\x7A'` is the same as `'z'`.| -|`\uXXXX`|A Unicode symbol with the hex code `XXXX` in UTF-16 encoding, for instance `\u00A9` -- is a Unicode for the copyright symbol `©`. It must be exactly 4 hex digits. | -|`\u{X…XXXXXX}` (1 to 6 hex characters)|A Unicode symbol with the given UTF-32 encoding. Some rare characters are encoded with two Unicode symbols, taking 4 bytes. This way we can insert long codes. | - -Examples with Unicode: - -```js run -alert( "\u00A9" ); // © -alert( "\u{20331}" ); // 佫, a rare Chinese hieroglyph (long Unicode) -alert( "\u{1F60D}" ); // 😍, a smiling face symbol (another long Unicode) ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ``` Tous les caractères spéciaux commencent par un backslash (barre oblique inversée) `\`. On l'appelle aussi "caractère d'échappement". @@ -266,11 +241,7 @@ alert( str.indexOf('widget') ); // -1, pas trouvé, la recherche est sensible à alert( str.indexOf("id") ); // 1, "id" est trouvé à la position 1 (..idget avec id) ``` -<<<<<<< HEAD Le second paramètre optionnel nous permet de rechercher à partir de la position donnée. -======= -The optional second parameter allows us to start searching from a given position. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Par exemple, la première occurrence de `"id"` est à la position `1`. Pour rechercher l’occurrence suivante, commençons la recherche à partir de la position `2` : @@ -534,11 +505,7 @@ Toutes les chaînes de caractères sont encodées en utilisant [UTF-16](https:// alert( String.fromCodePoint(90) ); // Z ``` -<<<<<<< HEAD Nous pouvons également ajouter des caractères Unicode par leurs codes en utilisant `\u` suivi du code hexadécimal : -======= - We can also add Unicode characters by their codes using `\u` followed by the hex code: ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ```js run // 90 is 5a en système hexadécimal @@ -649,11 +616,7 @@ Dans de nombreuses langues, il existe des symboles composés du caractère de ba Par exemple, la lettre `a` peut être le caractère de base pour : `àáâäãåā`. Les caractères “composites” les plus courants ont leur propre code dans la table UTF-16. Mais pas tous, car il y a trop de combinaisons possibles. -<<<<<<< HEAD Pour prendre en charge des compositions arbitraires, UTF-16 nous permet d’utiliser plusieurs caractères unicode : le caractère de base suivi d’un ou de plusieurs caractères de "marque" qui le "décorent". -======= -To support arbitrary compositions, UTF-16 allows us to use several Unicode characters: the base character followed by one or many "mark" characters that "decorate" it. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Par exemple, si nous avons un `S` suivi du caractère spécial "point au-dessus" (code `\u0307`), il est affiché comme `Ṡ`. @@ -671,11 +634,7 @@ Par exemple : alert( 'S\u0307\u0323' ); // Ṩ ``` -<<<<<<< HEAD -Cela offre une grande flexibilité, mais aussi un problème intéressant: deux caractères peuvent se ressembler visuellement mais être représentés avec des compositions unicode différentes. -======= -This provides great flexibility, but also an interesting problem: two characters may visually look the same, but be represented with different Unicode compositions. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Cela offre une grande flexibilité, mais aussi un problème intéressant : deux caractères peuvent se ressembler visuellement mais être représentés avec des compositions unicode différentes. Par exemple : @@ -688,11 +647,7 @@ alert( `s1: ${s1}, s2: ${s2}` ); alert( s1 == s2 ); // false bien que les caractères soient identiques (?!) ``` -<<<<<<< HEAD Pour résoudre ce problème, il existe un algorithme de "normalisation unicode" qui amène chaque chaîne de caractères à une seule forme "normale". -======= -To solve this, there exists a "Unicode normalization" algorithm that brings each string to the single "normal" form. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Il est traité par [str.normalize()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/normalize). @@ -715,7 +670,6 @@ Si vous souhaitez en savoir plus sur les règles de normalisation et leurs varia ## Résumé -<<<<<<< HEAD - Il existe 3 types de quotes. Les Backticks permettent à une chaîne de s'étendre sur plusieurs lignes et d'intégrer des expressions `${…}`. - Les chaînes de caracètres en JavaScript sont encodées en UTF-16. - Nous pouvons utiliser des caractères spéciaux comme `\n` et insérer des lettres par leur unicode en utilisant `\u...`. @@ -724,16 +678,6 @@ Si vous souhaitez en savoir plus sur les règles de normalisation et leurs varia - Pour mettre une chaîne de caractères en minuscule ou en majuscule, utilisez : `toLowerCase/toUpperCase`. - Pour rechercher un substring utilisez : `indexOf`, ou `includes/startsWith/endsWith` pour de simple vérifications. - Pour comparer les chaînes de caractères en fonction de la langue, utilisez : `localeCompare`, sinon, ils sont comparés par les codes de caractères. -======= -- There are 3 types of quotes. Backticks allow a string to span multiple lines and embed expressions `${…}`. -- Strings in JavaScript are encoded using UTF-16. -- We can use special characters like `\n` and insert letters by their Unicode using `\u...`. -- To get a character, use: `[]`. -- To get a substring, use: `slice` or `substring`. -- To lowercase/uppercase a string, use: `toLowerCase/toUpperCase`. -- To look for a substring, use: `indexOf`, or `includes/startsWith/endsWith` for simple checks. -- To compare strings according to the language, use: `localeCompare`, otherwise they are compared by character codes. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Il existe plusieurs autres méthodes utiles dans les strings : diff --git a/1-js/05-data-types/04-array/10-maximal-subarray/solution.md b/1-js/05-data-types/04-array/10-maximal-subarray/solution.md index c4b2cdee8..06309f8d0 100644 --- a/1-js/05-data-types/04-array/10-maximal-subarray/solution.md +++ b/1-js/05-data-types/04-array/10-maximal-subarray/solution.md @@ -57,11 +57,7 @@ alert( getMaxSubSum([1, 2, 3]) ); // 6 alert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100 ``` -<<<<<<< HEAD La solution a une complexité temporelle de [O(n2)](https://en.wikipedia.org/wiki/Big_O_notation). En d'autres termes, si nous augmentons la taille du tableau 2 fois, l'algorithme fonctionnera 4 fois plus longtemps. -======= -The solution has a time complexity of [O(n2)](https://en.wikipedia.org/wiki/Big_O_notation). In other words, if we increase the array size 2 times, the algorithm will work 4 times longer. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Pour les grands tableaux (1000, 10000 ou plus), de tels algorithmes peuvent conduire à une grande lenteur. diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md index 8ec879b7e..a14348cd0 100644 --- a/1-js/05-data-types/04-array/article.md +++ b/1-js/05-data-types/04-array/article.md @@ -209,11 +209,7 @@ arr.push("Pear"); // modifie le tableau par référence alert( fruits ); // Banana, Pear - 2 items maintenant ``` -<<<<<<< HEAD -...Mais ce qui rend les tableaux vraiment spéciaux, c'est leur représentation interne. Le moteur tente de stocker ses éléments dans la zone de mémoire contiguë, l'un après l'autre, exactement comme le montrent les illustrations de ce chapitre. Il existe également d'autres optimisations permettant de faire fonctionner les tableaux très rapidement. -======= -...But what makes arrays really special is their internal representation. The engine tries to store its elements in the contiguous memory area, one after another, just as depicted on the illustrations in this chapter, and there are other optimizations as well, to make arrays work really fast. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +...Mais ce qui rend les tableaux vraiment spéciaux, c'est leur représentation interne. Le moteur tente de stocker ses éléments dans une zone de mémoire contiguë, l'un après l'autre, exactement comme le montrent les illustrations de ce chapitre. Il existe également d'autres optimisations permettant de faire fonctionner les tableaux très rapidement. Mais ils se cassent tous si nous arrêtons de travailler avec un tableau comme avec une "collection ordonnée" et commençons à le travailler comme s'il s'agissait d'un objet normal. diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md index 8e96cb52a..b5b48f197 100755 --- a/1-js/05-data-types/05-array-methods/article.md +++ b/1-js/05-data-types/05-array-methods/article.md @@ -749,15 +749,9 @@ Ces méthodes sont les plus utilisées, elles couvrent 99% des cas d'utilisation La fonction `fn` est appelée sur chaque élément du tableau comme pour `map`. Si n'importe quel/tous les résultats sont `true`, il retourne vrai, sinon il retourne `false`. -<<<<<<< HEAD La fonction `fn` est appelée sur chaque élément du tableau similaire à `map`. Si un/tous les résultats sont `true`, renvoie `true`, sinon `false`. - Ces méthodes se comportent en quelque sorte comme les opérateurs `||` et `&&` : si `fn` renvoie une valeur de vérité, `arr.some()` renvoie immédiatement `true` et arrête de parcourir les autres éléments ; si `fn` renvoie une valeur falsifiée, `arr.every()`retourne immédiatement `false` et arrête également d'itérer sur les autres éléments. -======= - The function `fn` is called on each element of the array similar to `map`. If any/all results are `true`, returns `true`, otherwise `false`. - - These methods behave sort of like `||` and `&&` operators: if `fn` returns a truthy value, `arr.some()` immediately returns `true` and stops iterating over the rest of items; if `fn` returns a falsy value, `arr.every()` immediately returns `false` and stops iterating over the rest of items as well. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 + Ces méthodes se comportent en quelque sorte comme les opérateurs `||` et `&&` : si `fn` renvoie une valeur vraie, `arr.some()` renvoie immédiatement `true` et arrête de parcourir les autres éléments ; si `fn` renvoie une valeur fausse, `arr.every()`retourne immédiatement `false` et arrête également d'itérer sur les autres éléments. On peut utiliser `every` pour compaere les tableaux : ```js run diff --git a/1-js/05-data-types/06-iterable/article.md b/1-js/05-data-types/06-iterable/article.md index adee51c28..244de2d92 100644 --- a/1-js/05-data-types/06-iterable/article.md +++ b/1-js/05-data-types/06-iterable/article.md @@ -1,11 +1,7 @@ # Iterables -<<<<<<< HEAD Les objets *Iterable* sont une généralisation des tableaux. C'est un concept qui permet de rendre n'importe quel objet utilisable dans une boucle `for..of`. -======= -*Iterable* objects are a generalization of arrays. That's a concept that allows us to make any object useable in a `for..of` loop. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Bien sûr, les tableaux sont itérables. Mais il existe de nombreux autres objets intégrés, qui sont également itérables. Par exemple, les chaînes de caractères sont également itérables. @@ -30,11 +26,7 @@ let range = { // for(let num of range) ... num=1,2,3,4,5 ``` -<<<<<<< HEAD Pour rendre la `range` itérable (et donc laisser `for..of` faire sont travail), nous devons ajouter une méthode à l'objet nommé `Symbol.iterator` (un symbole intégré spécial que pour cela). -======= -To make the `range` object iterable (and thus let `for..of` work) we need to add a method to the object named `Symbol.iterator` (a special built-in symbol just for that). ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 1. Lorsque `for..of` démarre, il appelle cette méthode une fois (ou des erreurs si il n'est pas trouvé). La méthode doit retourner un *iterator* -- un objet avec la méthode `next`. 2. À partir de là, `for..of` ne fonctionne *qu'avec cet objet retourné*. @@ -148,11 +140,7 @@ for (let char of str) { ## Appeler explicitement un itérateur -<<<<<<< HEAD -Pour mieux comprendre, voyons comment utiliser explicitement un itérateur. -======= -For deeper understanding, let's see how to use an iterator explicitly. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Pour une compréhension plus approfondie, voyons comment utiliser explicitement un itérateur. Nous allons parcourir une chaîne de caractères de la même manière que `for..of`, mais avec des appels directs. Ce code crée un itérateur de chaîne de caractères et en récupère la valeur "manuellement": @@ -177,28 +165,16 @@ Cela est rarement nécessaire, mais nous donne plus de contrôle sur le processu ## Iterables et array-likes [#array-like] -<<<<<<< HEAD Il existe deux termes officiels qui se ressemblent mais qui sont très différents. Assurez-vous de bien les comprendre pour éviter la confusion. -======= -Two official terms look similar, but are very different. Please make sure you understand them well to avoid the confusion. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 - *Iterables* sont des objets qui implémentent la méthode `Symbol.iterator`, comme décrit ci-dessus. - *Array-likes* sont des objets qui ont des index et des `length`, ils ressemblent donc à des tableaux. -<<<<<<< HEAD Lorsque nous utilisons JavaScript pour des tâches pratiques dans un navigateur ou d'autres environnements, il est possible que nous rencontrions des objets qui sont iterables ou des array-like, ou les deux. -======= -When we use JavaScript for practical tasks in a browser or any other environment, we may meet objects that are iterables or array-likes, or both. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Par exemple, les chaînes de caractères sont à la fois iterables (`for..of` fonctionne dessus) et des array-likes (elles ont des index numériques et une longueur). -<<<<<<< HEAD Mais un itérable peut ne pas ressembler à un tableau. Et inversement, un tableau peut ne pas être itérable. -======= -But an iterable may not be array-like. And vice versa an array-like may not be iterable. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Par exemple, la `range` dans l'exemple ci-dessus est itérable, mais pas comme un array-like (comme-un-tableau), car elle n'a pas de propriétés indexées et de `length`. @@ -316,21 +292,12 @@ alert( str.slice(1, 3) ); // ordures (deux pièces de paires de substitution dif Les objets pouvant être utilisés dans `for..of` s'appellent *iterable*. -<<<<<<< HEAD - Techniquement, les iterables doivent implémenter la méthode nommée `Symbol.iterator`. - Le résultat de `obj[Symbol.iterator]()` s'appelle un *itérateur*. Il gère le processus d'itération ultérieur. - Un itérateur doit avoir la méthode nommée `next()` qui retourne un objet `{done: Boolean, value: any}`, ici `done: true` dénote la fin du processus de l'itération, sinon `value` est la valeur suivante. - La méthode `Symbol.iterator` est appelée automatiquement par `for..of`, mais nous pouvons aussi le faire directement. - Les iterables intégrés tels que des chaînes de caractères ou des tableaux implémentent également `Symbol.iterator`. - L'itérateur de chaîne de caractères connaît les paires de substitution. -======= -- Technically, iterables must implement the method named `Symbol.iterator`. - - The result of `obj[Symbol.iterator]()` is called an *iterator*. It handles further iteration process. - - An iterator must have the method named `next()` that returns an object `{done: Boolean, value: any}`, here `done:true` denotes the end of the iteration process, otherwise the `value` is the next value. -- The `Symbol.iterator` method is called automatically by `for..of`, but we also can do it directly. -- Built-in iterables like strings or arrays, also implement `Symbol.iterator`. -- String iterator knows about surrogate pairs. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Les objets qui ont des propriétés indexées et des `length` sont appelés *array-like (comme-un-tableau)*. De tels objets peuvent également avoir d'autres propriétés et méthodes, mais ne possèdent pas les méthodes intégrées des tableaux. diff --git a/1-js/05-data-types/07-map-set/03-iterable-keys/task.md b/1-js/05-data-types/07-map-set/03-iterable-keys/task.md index 3ebf08e80..46745c487 100644 --- a/1-js/05-data-types/07-map-set/03-iterable-keys/task.md +++ b/1-js/05-data-types/07-map-set/03-iterable-keys/task.md @@ -4,11 +4,7 @@ importance: 5 # Clés Iterables -<<<<<<< HEAD -Nous voulons obtenir un tableau de `map.keys()` dans une variable puis lui appliquer des méthodes spécifiques aux tableaux, par ex: `push`. -======= -We'd like to get an array of `map.keys()` in a variable and then apply array-specific methods to it, e.g. `.push`. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Nous voulons obtenir un tableau de `map.keys()` dans une variable puis lui appliquer des méthodes spécifiques aux tableaux, par ex: `.push`. Mais cela ne fonctionne pas : diff --git a/1-js/05-data-types/07-map-set/article.md b/1-js/05-data-types/07-map-set/article.md index c3e882530..6bbdde423 100644 --- a/1-js/05-data-types/07-map-set/article.md +++ b/1-js/05-data-types/07-map-set/article.md @@ -1,19 +1,10 @@ # Map and Set -<<<<<<< HEAD -Nous avons découvert les structures de données complexes suivantes : +Jusqu'à présent, nous avons découvert les structures de données complexes suivantes : -- Objects (les objets) pour stocker des valeurs par clés. -- Arrays (les tableaux) pour stocker des valeurs en conservant l'ordre d'insertion. - -Il existe aussi `Map` (les dictionnaires de données) et `Set` (les ensembles) qui sont très utiles dans notre quotidien de développeur. -======= -Till now, we've learned about the following complex data structures: - -- Objects are used for storing keyed collections. -- Arrays are used for storing ordered collections. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +- Les objets sont utilisés pour stocker des collections de clés. +- Les tableaux sont utilisés pour stocker des collections ordonnées. ## Map @@ -52,13 +43,8 @@ alert( map.size ); // 3 Au travers de cet exemple nous pouvons voir, qu'à la différence des `Objects`, les clés ne sont pas converties en chaîne de caractère. Il est donc possible d'utiliser n'importe quel type. -<<<<<<< HEAD ```smart header="`map[key]` n'est pas la bonne façon d'utiliser un `Map`" -Bien que `map[key]` fonctionne également, par exemple nous pouvons définir `map[key] = 2`, cela traite `map` comme un objet JavaScript simple, ce qui implique toutes les limitations correspondantes (pas de clés d'objet, etc.). -======= -```smart header="`map[key]` isn't the right way to use a `Map`" -Although `map[key]` also works, e.g. we can set `map[key] = 2`, this is treating `map` as a plain JavaScript object, so it implies all corresponding limitations (only string/symbol keys and so on). ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Bien que `map[key]` fonctionne également, par exemple nous pouvons définir `map[key] = 2`, cela traite `map` comme un objet JavaScript simple, ce qui implique toutes les limitations correspondantes (uniquement des clés chaîne de caractères/symbol etc...). Nous devons donc utiliser les méthodes `map`: `set`, `get` et ainsi de suite. ``` @@ -79,12 +65,7 @@ visitsCountMap.set(john, 123); alert( visitsCountMap.get(john) ); // 123 ``` -<<<<<<< HEAD -Pourvoir utiliser un `Object` comme une clé est l'une des raisons principales d'utiliser une `Map`. -`Map` est à privilégier à `Object` lorsque que l'on utilise autre chose que des chaînes de caractères comme clé. -======= -Using objects as keys is one of the most notable and important `Map` features. The same does not count for `Object`. String as a key in `Object` is fine, but we can't use another `Object` as a key in `Object`. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Utiliser des objets comme clés est l'une des fonctionnalités les plus notables et les plus importantes de `Map`. La même chose ne compte pas pour `Object`. Une chaîne de caractères comme clé dans `Object` est très bien, mais nous ne pouvons pas utiliser un autre `Object` comme clé dans `Object`. Essayons de faire comme l'exemple précédent directement avec un `Object`: @@ -94,30 +75,17 @@ let ben = { name: "Ben" }; let visitsCountObj = {}; // on créé notre object -<<<<<<< HEAD -visitsCountObj[john] = 123; // on souhaite utiliser john comme clé - -*!* -// Et voilà ce que l'on obtient ! -alert( visitsCountObj["[object Object]"] ); // 123 -======= -visitsCountObj[ben] = 234; // try to use ben object as the key -visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced +visitsCountObj[ben] = 234; // essayez d'utiliser l'objet ben comme clé +visitsCountObj[john] = 123; // essayez d'utiliser l'objet john comme clé, l'objet ben sera remplacé *!* -// That's what got written! +// C'est ce qui a été écrit! alert( visitsCountObj["[object Object]"] ); // 123 ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 */!* ``` -`visitsCountObj` est un objet, de ce fait, toutes les clés, comme `john`, sont transformées en chaîne de caractères. -C'est pourquoi nous obtenons comme valeur de clé `"[object Object]"`. Ce n'est clairement pas ce que l'on souhaite. +Comme `visitesCountObj` est un objet, il convertit toutes les clés `Object`, telles que `john` et `ben` ci-dessus, en la même chaîne de caractères `"[object Object]"`. Certainement pas ce que nous voulons. -<<<<<<< HEAD ```smart header="Comment `Map` compare les clés" -======= -As `visitsCountObj` is an object, it converts all `Object` keys, such as `john` and `ben` above, to same string `"[object Object]"`. Definitely not what we want. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Pour tester l'égalité entre les clés, `Map` se base sur l'algorithme [SameValueZero](https://tc39.github.io/ecma262/#sec-samevaluezero). C'est grosso modo la même chose que l'opérateur de stricte égalité `===`, à la différence que `NaN` est considéré comme étant égal à `NaN`. @@ -348,23 +316,13 @@ Les méthodes pour parcourir les éléments d'une `Map` peuvent être utilisées Méthodes et propriétés: -<<<<<<< HEAD - `new Map([iterable])` -- créé une map, potentiellement initialisée avec un `iterable` (ex: un array) de couple clé valeur `[key, value]`. -- `map.set(key, value)` -- définie la valeur `value` pour la clé `key`. +- `map.set(key, value)` -- stocke la valeur par la clé, renvoie la carte elle-même. - `map.get(key)` -- retourne la valeur associée à `key`, `undefined` si `key` n'existe pas. - `map.has(key)` -- retourne `true` si `key` existe sinon `false`. -- `map.delete(key)` -- supprime la valeur associé à `key` dans la map. +- `map.delete(key)` -- supprime la valeur par la clé, retourne `true` si `key` existait au moment de l'appel, sinon `false`. - `map.clear()` -- supprime tous les éléments dans la map. - `map.size` -- retourne le nombre d'éléments. -======= -- `new Map([iterable])` -- creates the map, with optional `iterable` (e.g. array) of `[key,value]` pairs for initialization. -- `map.set(key, value)` -- stores the value by the key, returns the map itself. -- `map.get(key)` -- returns the value by the key, `undefined` if `key` doesn't exist in map. -- `map.has(key)` -- returns `true` if the `key` exists, `false` otherwise. -- `map.delete(key)` -- removes the value by the key, returns `true` if `key` existed at the moment of the call, otherwise `false`. -- `map.clear()` -- removes everything from the map. -- `map.size` -- returns the current element count. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 La différence entre `Map` avec un objet traditionel : diff --git a/1-js/05-data-types/08-weakmap-weakset/article.md b/1-js/05-data-types/08-weakmap-weakset/article.md index 970173bc8..53f273f9a 100644 --- a/1-js/05-data-types/08-weakmap-weakset/article.md +++ b/1-js/05-data-types/08-weakmap-weakset/article.md @@ -30,15 +30,9 @@ let array = [ john ]; john = null; // écraser la référence *!* -<<<<<<< HEAD // l'objet précédemment référencé par john est stocké dans le tableau // donc il ne sera pas nettoyé // nous pouvons l'obtenir sous forme de array[0] -======= -// the object previously referenced by john is stored inside the array -// therefore it won't be garbage-collected -// we can get it as array[0] ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 */!* ``` @@ -66,11 +60,7 @@ Voyons ce que cela signifie sur des exemples. ## WeakMap -<<<<<<< HEAD -La première différence avec `Map` est que les clés `WeakMap` doivent être des objets, pas des valeurs primitives : -======= -The first difference between `Map` and `WeakMap` is that keys must be objects, not primitive values: ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +La première différence entre `Map` et `WeakMap` est que les clés doivent être des objets, pas des valeurs primitives : ```js run let weakMap = new WeakMap(); @@ -111,15 +101,9 @@ Comparez-le avec l'exemple du `Map` ci-dessus. Maintenant, si `john` n'existe qu Pourquoi une telle limitation ? C'est pour des raisons techniques. Si un objet a perdu toutes les autres références (comme `john` dans le code ci-dessus), il doit être automatiquement nettoyé. Mais techniquement, ce n'est pas exactement spécifié *quand le nettoyage a lieu*. -<<<<<<< HEAD Le moteur JavaScript décide de cela. Il peut choisir d'effectuer le nettoyage de la mémoire immédiatement ou d'attendre et de faire le nettoyage plus tard lorsque d'autres suppressions se produisent. Donc, techniquement, le nombre d'éléments actuel d'un `WeakMap` n'est pas connu. Le moteur peut l'avoir nettoyé ou non, ou l'a fait partiellement. Pour cette raison, les méthodes qui accèdent à toutes les clés/valeurs ne sont pas prises en charge. Maintenant, où avons-nous besoin d'une telle structure de données ? -======= -The JavaScript engine decides that. It may choose to perform the memory cleanup immediately or to wait and do the cleaning later when more deletions happen. So, technically, the current element count of a `WeakMap` is not known. The engine may have cleaned it up or not, or did it partially. For that reason, methods that access all keys/values are not supported. - -Now, where do we need such a data structure? ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ## Cas d'utilisation : données supplémentaires @@ -163,11 +147,7 @@ countUser(john); // compter ses visites john = null; ``` -<<<<<<< HEAD Maintenant, l'objet `john` doit être nettoyé, mais cependant, il reste en mémoire, parce que c'est une clé dans `visitesCountMap`. -======= -Now, `john` object should be garbage collected, but remains in memory, as it's a key in `visitsCountMap`. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Nous devons nettoyer `visitesCountMap` lorsque nous supprimons des utilisateurs, sinon il augmentera indéfiniment en mémoire. Un tel nettoyage peut devenir une tâche fastidieuse dans des architectures complexes. @@ -184,23 +164,13 @@ function countUser(user) { } ``` -<<<<<<< HEAD Maintenant, nous n'avons plus à nettoyer `visitesCountMap`. Après que l'objet `john` devienne inaccessible autrement que en tant que clé de `WeakMap`, il est supprimé de la mémoire, en même temps que les informations de cette clé dans `WeakMap`. -======= -Now we don't have to clean `visitsCountMap`. After `john` object becomes unreachable, by all means except as a key of `WeakMap`, it gets removed from memory, along with the information by that key from `WeakMap`. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ## Cas d'utilisation : mise en cache -<<<<<<< HEAD -Un autre exemple courant est la mise en cache : quand un résultat de fonction doit être mémorisé ("mis en cache"), afin que les futurs appels sur le même objet le réutilisent. - -Nous pouvons utiliser `Map` pour stocker les résultats, comme ceci : -======= -Another common example is caching. We can store ("cache") results from a function, so that future calls on the same object can reuse it. +Un autre exemple courant est la mise en cache. Nous pouvons stocker ("cache") les résultats d'une fonction, afin que les futurs appels sur le même objet puissent le réutiliser. -To achieve that, we can use `Map` (not optimal scenario): ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Pour y parvenir, nous pouvons utiliser `Map` (scénario non optimal) : ```js run // 📁 cache.js @@ -237,11 +207,7 @@ alert(cache.size); // 1 (Ouch ! L'objet est toujours dans le cache, prenant de l Pour plusieurs appels de `process(obj)` avec le même objet, il ne calcule le résultat que la première fois, puis le prend simplement dans `cache`. L'inconvénient est que nous devons nettoyer le `cache` lorsque l'objet n'est plus nécessaire. -<<<<<<< HEAD Si nous remplaçons `Map` par `WeakMap`, alors ce problème disparaît : le résultat mis en cache sera automatiquement supprimé de la mémoire une fois que l'objet sera nettoyé. -======= -If we replace `Map` with `WeakMap`, then this problem disappears. The cached result will be removed from memory automatically after the object gets garbage collected. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ```js run // 📁 cache.js @@ -282,11 +248,7 @@ obj = null; - Un objet existe dans le set tant qu'il est accessible ailleurs. - Comme `Set`, il prend en charge `add`, `has` et `delete`, mais pas `size`, `keys()` et aucune itération. -<<<<<<< HEAD Étant "weak" (faible), il sert également de stockage supplémentaire. Mais pas pour des données arbitraires, mais plutôt pour des faits "oui/non". Une appartenance à `WeakSet` peut signifier quelque chose à propos de l'objet. -======= -Being "weak", it also serves as additional storage. But not for arbitrary data, rather for "yes/no" facts. A membership in `WeakSet` may mean something about the object. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Par exemple, nous pouvons ajouter des utilisateurs à `WeakSet` pour garder une trace de ceux qui ont visité notre site : @@ -314,11 +276,7 @@ john = null; // visitedSet sera nettoyé automatiquement ``` -<<<<<<< HEAD La limitation la plus notable de `WeakMap` et `WeakSet` est l'absence d'itérations et l'impossibilité d'obtenir tout le contenu actuel. Cela peut sembler gênant, mais n'empêche pas `WeakMap/WeakSet` de faire leur travail principal -- être un stockage "supplémentaire" de données pour les objets qui sont stockés/gérés à un autre endroit. -======= -The most notable limitation of `WeakMap` and `WeakSet` is the absence of iterations, and the inability to get all current content. That may appear inconvenient, but does not prevent `WeakMap/WeakSet` from doing their main job -- be an "additional" storage of data for objects which are stored/managed at another place. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ## Résumé @@ -326,14 +284,8 @@ The most notable limitation of `WeakMap` and `WeakSet` is the absence of iterati `WeakSet` est une sorte de collection `Set` qui ne stocke que des objets et les supprime une fois qu'ils deviennent inaccessibles par d'autres moyens. -<<<<<<< HEAD -Les deux ne prennent pas en charge les méthodes et les propriétés qui font référence à toutes les clés ou à leur nombre. Seules les opérations individuelles sont autorisées. +Leurs principaux avantages sont qu'ils ont une faible référence aux objets, de sorte qu'ils peuvent facilement être supprimés par le garbage collector. -`WeakMap` et `WeakSet` sont utilisées comme structures de données "secondaires" en plus du stockage d'objets "principal". Une fois que l'objet est retiré du stockage principal, s'il n'est trouvé que comme clé de `WeakMap` ou dans un `WeakSet`, il sera nettoyé automatiquement. -======= -Their main advantages are that they have weak reference to objects, so they can easily be removed by garbage collector. +Cela se fait au prix de ne pas avoir de support pour `clear`,` size`, `keys`,` values` ... -That comes at the cost of not having support for `clear`, `size`, `keys`, `values`... - -`WeakMap` and `WeakSet` are used as "secondary" data structures in addition to the "primary" object storage. Once the object is removed from the primary storage, if it is only found as the key of `WeakMap` or in a `WeakSet`, it will be cleaned up automatically. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +`WeakMap` et `WeakSet` sont utilisées comme structures de données "secondaires" en plus du stockage d'objets "principal". Une fois que l'objet est retiré du stockage principal, s'il n'est trouvé que comme clé de `WeakMap` ou dans un `WeakSet`, il sera nettoyé automatiquement. diff --git a/1-js/05-data-types/11-date/article.md b/1-js/05-data-types/11-date/article.md index 3a056351d..d3597f24f 100644 --- a/1-js/05-data-types/11-date/article.md +++ b/1-js/05-data-types/11-date/article.md @@ -390,17 +390,10 @@ La methode [Date.parse(str)](https://developer.mozilla.org/fr/docs/Web/JavaScrip Le format de la chaîne de caractères doit être: `YYYY-MM-DDTHH:mm:ss.sssZ`, où: -<<<<<<< HEAD -- `YYYY-MM-DD` -- est la date: année-mois-jour. -- Le caractère `T` est utilisé comme délimiteur. -- `HH:mm:ss.sss` - correspond à l'heure: heures, minutes, secondes et millisecondes. +- `YYYY-MM-DD` -- est la date : année-mois-jour. +- Le caractère `"T"` est utilisé comme délimiteur. +- `HH:mm:ss.sss` - correspond à l'heure : heures, minutes, secondes et millisecondes. - La partie optionnelle `Z` indique le fuseau horaire au format `+-hh:mm`. Une seule lettre `Z` qui signifierait UTC + 0. -======= -- `YYYY-MM-DD` -- is the date: year-month-day. -- The character `"T"` is used as the delimiter. -- `HH:mm:ss.sss` -- is the time: hours, minutes, seconds and milliseconds. -- The optional `'Z'` part denotes the time zone in the format `+-hh:mm`. A single letter `Z` would mean UTC+0. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Des variantes plus courtes sont également possibles, telles que `AAAA-MM-JJ` ou `AAAA-MM` ou même `AAAA`. @@ -438,16 +431,10 @@ De plus, nous avons parfois besoin de mesures de temps plus précises. JavaScrip ```js run alert(`Loading started ${performance.now()}ms ago`); -<<<<<<< HEAD // Quelque chose comme: "Le chargement a commencé il y a 34731.26000000001ms" // .26 est en microsecondes (260 microsecondes) // plus de 3 chiffres après le point décimal sont des erreurs de précision, seuls les 3 premiers sont corrects -======= -// Something like: "Loading started 34731.26000000001ms ago" -// .26 is microseconds (260 microseconds) -// more than 3 digits after the decimal point are precision errors, only the first 3 are correct ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ``` Node.js a un module microtime. Techniquement, tout appareil ou environnement permet d’obtenir plus de précision, il n’est tout simplement pas dans Date. diff --git a/1-js/05-data-types/12-json/article.md b/1-js/05-data-types/12-json/article.md index 55b282991..25c37d426 100644 --- a/1-js/05-data-types/12-json/article.md +++ b/1-js/05-data-types/12-json/article.md @@ -104,15 +104,9 @@ JSON est une spécification indépendante du langage et ne contenant que des don À savoir: -<<<<<<< HEAD - Propriétés de fonction (méthodes). -- Propriétés symboliques. +- Clés et valeurs symboliques. - Propriétés qui stockent `undefined`. -======= -- Function properties (methods). -- Symbolic keys and values. -- Properties that store `undefined`. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ```js run let user = { @@ -335,13 +329,9 @@ alert(JSON.stringify(user, null, 2)); */ ``` -<<<<<<< HEAD -Le paramètre `space` est utilisé uniquement à des fins de journalisation et de fins de belles sorties. -======= -The third argument can also be a string. In this case, the string is used for indentation instead of a number of spaces. +Le troisième argument peut également être une chaîne de caractères. Dans ce cas, la chaîne de caractères est utilisée pour l'indentation au lieu d'un certain nombre d'espaces. -The `space` parameter is used solely for logging and nice-output purposes. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Le paramètre `space` est utilisé uniquement à des fins de journalisation et de sortie agréable. ## "toJSON" Personnalisé diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 38b80c8d8..ee5236d49 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -23,13 +23,8 @@ let f = _.debounce(alert, 1000); f("a"); setTimeout( () => f("b"), 200); -<<<<<<< HEAD setTimeout( () => f("c"), 500); // la fonction debounce attend 1000ms après le dernier appel puis exécute : alert("c") -======= -setTimeout( () => f("c"), 500); -// debounced function waits 1000ms after the last call and then runs: alert("c") ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ``` diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md index a9df353dc..5dfb574a1 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/article.md +++ b/1-js/08-prototypes/01-prototype-inheritance/article.md @@ -12,11 +12,7 @@ En JavaScript, les objets ont une propriété cachée spéciale `[[Prototype]]` ![prototype](object-prototype-empty.svg) -<<<<<<< HEAD Lorsque nous lisons une propriété depuis `object`, et qu'elle est manquante, JavaScript la prend automatiquement du prototype. En programmation, une telle chose est appelée "héritage prototypal". Et bientôt, nous étudierons de nombreux exemples d'un tel héritage, ainsi que des fonctionnalités de langage plus cool qui en découlent. -======= -When we read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, such thing is called "prototypal inheritance". And soon we'll study many examples of such inheritance, as well as cooler language features built upon it. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 La propriété `[[Prototype]]` est interne et cachée, mais il y a plusieurs façons de la définir. @@ -136,21 +132,12 @@ Il n'y a que deux limitations : Cela peut aussi être évident, mais quand même: il ne peut y avoir qu'un seul `[[Prototype]]`. Un objet ne peut pas hériter de deux autres. -<<<<<<< HEAD ```smart header="`__proto__` est un getter/setter historique pour [[Prototype]]`" C'est une erreur courante des développeurs novices de ne pas connaître la différence entre les deux. Veuillez noter que `__proto__` n'est *pas la même* que la propriété interne `[[Prototype]]`. C'est un getter/setter pour `[[Prototype]]`. Plus tard, nous verrons des situations où cela compte, pour l'instant gardons cela à l'esprit, alors que nous construisons notre compréhension du langage JavaScript. -La propriété `__proto__` est un peu obsolète. Il existe pour des raisons historiques, le JavaScript moderne suggère que nous devrions utiliser les fonctions `Object.getPrototypeOf/Object.setPrototypeOf` à la place pour obtenir/définir le prototype. Nous aborderons également ces fonctions plus tard. -======= -```smart header="`__proto__` is a historical getter/setter for `[[Prototype]]`" -It's a common mistake of novice developers not to know the difference between these two. - -Please note that `__proto__` is *not the same* as the internal `[[Prototype]]` property. It's a getter/setter for `[[Prototype]]`. Later we'll see situations where it matters, for now let's just keep it in mind, as we build our understanding of JavaScript language. - -The `__proto__` property is a bit outdated. It exists for historical reasons, modern JavaScript suggests that we should use `Object.getPrototypeOf/Object.setPrototypeOf` functions instead that get/set the prototype. We'll also cover these functions later. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +La propriété `__proto__` est un peu obsolète. Elle existe pour des raisons historiques, le JavaScript moderne suggère que nous devrions utiliser les fonctions `Object.getPrototypeOf/Object.setPrototypeOf` à la place pour obtenir/définir le prototype. Nous aborderons également ces fonctions plus tard. Selon la spécification, `__proto__` ne doit être pris en charge que par les navigateurs. En fait cependant, tous les environnements, y compris côté serveur, prennent en charge `__proto__`, donc nous sommes assez sûrs de l'utiliser. diff --git a/1-js/09-classes/04-private-protected-properties-methods/article.md b/1-js/09-classes/04-private-protected-properties-methods/article.md index 1b88294f1..34176e146 100644 --- a/1-js/09-classes/04-private-protected-properties-methods/article.md +++ b/1-js/09-classes/04-private-protected-properties-methods/article.md @@ -121,11 +121,7 @@ let coffeeMachine = new CoffeeMachine(100); coffeeMachine.waterAmount = -10; // Error: Negative water ``` -<<<<<<< HEAD Maintenant, l'accès est sous contrôle, donc le réglage de l'eau en dessous de zéro échoue. -======= -Now the access is under control, so setting the water amount below zero becomes impossible. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ## "power" en lecture seule @@ -222,13 +218,8 @@ class CoffeeMachine { let coffeeMachine = new CoffeeMachine(); *!* -<<<<<<< HEAD // ne peut pas accéder aux propriétés privées de l'extérieur de la classe -coffeeMachine.#checkWater(); // Error -======= -// can't access privates from outside of the class coffeeMachine.#fixWaterAmount(123); // Error ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 coffeeMachine.#waterLimit = 1000; // Error */!* ``` diff --git a/1-js/11-async/05-promise-api/article.md b/1-js/11-async/05-promise-api/article.md index d1a496926..e261bd56b 100644 --- a/1-js/11-async/05-promise-api/article.md +++ b/1-js/11-async/05-promise-api/article.md @@ -309,29 +309,15 @@ En pratique, cette méthode n'est presque jamais utilisée. ## Résumé -<<<<<<< HEAD -Il y a 5 méthodes statiques de la classe `Promise`: +Il y a 6 méthodes statiques de la classe `Promise`: 1. `Promise.all(promises)` -- attend que toutes les promesses se résolvent et retourne un tableau de leurs résultats. Si l'une des promesses données est rejetée, alors elle devient l'erreur de `Promise.all`, et tous les autres résultats sont ignorés. 2. `Promise.allSettled(promises)` (méthode récemment ajoutée) -- attend que toutes les promesses se règlent et retourne leurs résultats sous forme de tableau d'objets avec: - `state`: `"fulfilled"` ou `"rejected"` - `value` (si rempli) ou `reason` (en cas de rejet). 3. `Promise.race(promises)` -- attend que la première promesse soit réglée, et son résultat/erreur devient le résultat. -4. `Promise.resolve(value)` -- fait une promesse résolue avec la valeur donnée. -5. `Promise.reject(error)` -- fait une promesse rejetée avec l'erreur donnée. - -De ces cinq, " Promise.all " est probablement le plus courant en pratique. -======= -There are 6 static methods of `Promise` class: - -1. `Promise.all(promises)` -- waits for all promises to resolve and returns an array of their results. If any of the given promises rejects, it becomes the error of `Promise.all`, and all other results are ignored. -2. `Promise.allSettled(promises)` (recently added method) -- waits for all promises to settle and returns their results as an array of objects with: - - `status`: `"fulfilled"` or `"rejected"` - - `value` (if fulfilled) or `reason` (if rejected). -3. `Promise.race(promises)` -- waits for the first promise to settle, and its result/error becomes the outcome. -4. `Promise.any(promises)` (recently added method) -- waits for the first promise to fulfill, and its result becomes the outcome. If all of the given promises are rejected, [`AggregateError`](mdn:js/AggregateError) becomes the error of `Promise.any`. -5. `Promise.resolve(value)` -- makes a resolved promise with the given value. -6. `Promise.reject(error)` -- makes a rejected promise with the given error. - -Of all these, `Promise.all` is probably the most common in practice. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +4. `Promise.any(promises)` (méthode récemment ajoutée) -- attend que la première promesse se réalise, et son résultat devient le résultat. Si toutes les promesses données sont rejetées, [`AggregateError`](mdn:js/AggregateError) devient l'erreur de `Promise.any`. +5. `Promise.resolve(value)` -- fait une promesse résolue avec la valeur donnée. +6. `Promise.reject(error)` -- fait une promesse rejetée avec l'erreur donnée. + +De tous ceux-ci, `Promise.all` est probablement le plus courant dans la pratique. diff --git a/1-js/11-async/06-promisify/article.md b/1-js/11-async/06-promisify/article.md index 9a69c785f..851c6fb77 100644 --- a/1-js/11-async/06-promisify/article.md +++ b/1-js/11-async/06-promisify/article.md @@ -50,11 +50,7 @@ Comme nous pouvons le voir, la nouvelle fonction est un wrapper autour de la fon Dorénavant `loadScriptPromise` s'intègre bien dans le code basé sur la promesse. Si nous aimons les promesses plus que les rappels (et bientôt nous verrons plus de raisons à cela), alors nous les utiliserons à la place. -<<<<<<< HEAD Dans la pratique, nous pouvons avoir besoin de promettre plus d'une fonction, il est donc logique d'utiliser un assistant. -======= -In practice we may need to promisify more than one function, so it makes sense to use a helper. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Nous l'appellerons `promisify (f)` : il accepte une fonction à promettre `f` et renvoie une fonction wrapper. diff --git a/1-js/12-generators-iterators/2-async-iterators-generators/article.md b/1-js/12-generators-iterators/2-async-iterators-generators/article.md index 51c694e5c..2aa0b7802 100644 --- a/1-js/12-generators-iterators/2-async-iterators-generators/article.md +++ b/1-js/12-generators-iterators/2-async-iterators-generators/article.md @@ -359,7 +359,6 @@ Plus d'explications sur son fonctionnement : 1. Nous utilisons la méthode du navigateur [fetch](info:fetch) pour télécharger les commits. -<<<<<<< HEAD - L'URL initiale est `https://api.github.com/repos//commits`, et la page suivante sera dans l'en-tête `Link` de la réponse. - La méthode `fetch` nous permet de fournir une autorisation et d'autres en-têtes si nécessaire - ici GitHub nécessite `User-Agent`. 2. Les commits sont renvoyés au format JSON. @@ -367,14 +366,6 @@ Plus d'explications sur son fonctionnement : pour cela. - L'URL de la page suivante peut ressembler à `https://api.github.com/repositories/93253246/commits?page=2`. Elle est générée par GitHub lui-même. 4. Ensuite, nous donnons les commits reçus un par un, et quand ils se terminent, la prochaine itération `while(url)` se déclenchera, faisant une demande de plus. -======= - - The initial URL is `https://api.github.com/repos//commits`, and the next page will be in the `Link` header of the response. - - The `fetch` method allows us to supply authorization and other headers if needed -- here GitHub requires `User-Agent`. -2. The commits are returned in JSON format. -3. We should get the next page URL from the `Link` header of the response. It has a special format, so we use a regular expression for that (we will learn this feature in [Regular expressions](info:regular-expressions)). - - The next page URL may look like `https://api.github.com/repositories/93253246/commits?page=2`. It's generated by GitHub itself. -4. Then we yield the received commits one by one, and when they finish, the next `while(url)` iteration will trigger, making one more request. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Un exemple d'utilisation (montrant les auteurs de chaque commit en console) : diff --git a/1-js/99-js-misc/01-proxy/article.md b/1-js/99-js-misc/01-proxy/article.md index 12e5cae66..862af3342 100644 --- a/1-js/99-js-misc/01-proxy/article.md +++ b/1-js/99-js-misc/01-proxy/article.md @@ -55,27 +55,12 @@ Pour chaque méthode interne, il y a un piège dans ce tableau: le nom de la mé | Méthode interne | Méthode d'handler | Se déclenche lorsque... | |-----------------|----------------|-------------| -<<<<<<< HEAD | `[[Get]]` | `get` | lit une propriété | | `[[Set]]` | `set` | écrit une propriété | | `[[HasProperty]]` | `has` | utilise l'opérateur `in` | | `[[Delete]]` | `deleteProperty` | utilise l'opérateur `delete` | | `[[Call]]` | `apply` | appel une fonction | | `[[Construct]]` | `construct` | utilise l'opérateur `new` | -| `[[GetPrototypeOf]]` | `getPrototypeOf` | [Object.getPrototypeOf](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getPrototypeOf) | -| `[[SetPrototypeOf]]` | `setPrototypeOf` | [Object.setPrototypeOf](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/setPrototypeOf) | -| `[[IsExtensible]]` | `isExtensible` | [Object.isExtensible](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/isExtensible) | -| `[[PreventExtensions]]` | `preventExtensions` | [Object.preventExtensions](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/preventExtensions) | -| `[[DefineOwnProperty]]` | `defineProperty` | [Object.defineProperty](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty), [Object.defineProperties](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperties) | -| `[[GetOwnProperty]]` | `getOwnPropertyDescriptor` | [Object.getOwnPropertyDescriptor](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyDescriptor), `for..in`, `Object.keys/values/entries` | -| `[[OwnPropertyKeys]]` | `ownKeys` | [Object.getOwnPropertyNames](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames), [Object.getOwnPropertySymbols](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols), `for..in`, `Object/keys/values/entries` | -======= -| `[[Get]]` | `get` | reading a property | -| `[[Set]]` | `set` | writing to a property | -| `[[HasProperty]]` | `has` | `in` operator | -| `[[Delete]]` | `deleteProperty` | `delete` operator | -| `[[Call]]` | `apply` | function call | -| `[[Construct]]` | `construct` | `new` operator | | `[[GetPrototypeOf]]` | `getPrototypeOf` | [Object.getPrototypeOf](mdn:/JavaScript/Reference/Global_Objects/Object/getPrototypeOf) | | `[[SetPrototypeOf]]` | `setPrototypeOf` | [Object.setPrototypeOf](mdn:/JavaScript/Reference/Global_Objects/Object/setPrototypeOf) | | `[[IsExtensible]]` | `isExtensible` | [Object.isExtensible](mdn:/JavaScript/Reference/Global_Objects/Object/isExtensible) | @@ -83,7 +68,6 @@ Pour chaque méthode interne, il y a un piège dans ce tableau: le nom de la mé | `[[DefineOwnProperty]]` | `defineProperty` | [Object.defineProperty](mdn:/JavaScript/Reference/Global_Objects/Object/defineProperty), [Object.defineProperties](mdn:/JavaScript/Reference/Global_Objects/Object/defineProperties) | | `[[GetOwnProperty]]` | `getOwnPropertyDescriptor` | [Object.getOwnPropertyDescriptor](mdn:/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor), `for..in`, `Object.keys/values/entries` | | `[[OwnPropertyKeys]]` | `ownKeys` | [Object.getOwnPropertyNames](mdn:/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames), [Object.getOwnPropertySymbols](mdn:/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols), `for..in`, `Object.keys/values/entries` | ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ```warn header="Invariants" JavaScript applique certains invariants -- conditions qui doivent être remplies par des méthodes et des pièges internes. @@ -979,19 +963,13 @@ revoke(); alert(proxy.data); // Erreur ``` -<<<<<<< HEAD -Un appel à `revoke()` supprime toutes les références internes à l'objet cible du proxy, afin qu'elles ne soient plus connectées. L'objet cible peut être nettoyé (garbage-collected) après cela. +Un appel à `revoke()` supprime toutes les références internes à l'objet cible du proxy, de sorte qu'ils ne sont plus connectés. -Nous pouvons également stocker `revoke` dans un `WeakMap`, pour pouvoir le retrouver facilement par un objet proxy: -======= -A call to `revoke()` removes all internal references to the target object from the proxy, so they are no longer connected. +Initialement, `revoke` est séparé de `proxy`, de sorte que nous pouvons passer `proxy` tout en laissant `revoke` dans la portée actuelle. -Initially, `revoke` is separate from `proxy`, so that we can pass `proxy` around while leaving `revoke` in the current scope. +Nous pouvons également lier la méthode `revoke` au proxy en définissant `proxy.revoke = revoke`. -We can also bind `revoke` method to proxy by setting `proxy.revoke = revoke`. - -Another option is to create a `WeakMap` that has `proxy` as the key and the corresponding `revoke` as the value, that allows to easily find `revoke` for a proxy: ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Une autre option est de créer une `WeakMap` qui a `proxy` comme clé et la valeur `revoke` correspondante, qui permet de trouver facilement `revoke` pour un proxy : ```js run *!* @@ -1006,24 +984,14 @@ let {proxy, revoke} = Proxy.revocable(object, {}); revokes.set(proxy, revoke); -<<<<<<< HEAD -// ..plus tard dans le code.. -======= -// ..somewhere else in our code.. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +// ..plus tard dans notre code.. revoke = revokes.get(proxy); revoke(); alert(proxy.data); // Erreur (révoqué) ``` -<<<<<<< HEAD -L'avantage d'une telle approche est que nous n'avons pas à nous préoccuper du `revoke`. Nous pouvons l'obtenir par `proxy` à partir du `map` si nécessaire. - Nous utilisons ici `WeakMap` au lieu de `Map` car cela ne bloquera pas le "garbage collection". Si un objet proxy devient "inaccessible" (par exemple si plus aucune variable ne le référence), `WeakMap` permet de l'effacer de la mémoire en même temps que `revoke` dont nous n'aurons plus besoin. -======= -We use `WeakMap` instead of `Map` here because it won't block garbage collection. If a proxy object becomes "unreachable" (e.g. no variable references it any more), `WeakMap` allows it to be wiped from memory together with its `revoke` that we won't need any more. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ## Références diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 2075c20ee..db755b28d 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -142,13 +142,8 @@ let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node4, 'div.domtree', 690, 360); -<<<<<<< HEAD ````warn header="Les tableaux ont toujours ``" Un "cas spécial" intéressant est celui des tableaux. Selon la spécification DOM, ils doivent avoir un ``, mais le texte HTML peut (officiellement) l'omettre. Ensuite, le navigateur crée automatiquement le `` dans le DOM. -======= -````warn header="Tables always have ``" -An interesting "special case" is tables. By DOM specification they must have `` tag, but HTML text may omit it. Then the browser creates `` in the DOM automatically. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Pour le HTML : @@ -165,11 +160,7 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType": drawHtmlTree(node5, 'div.domtree', 600, 200); -<<<<<<< HEAD Vous voyez ? Le `` est sorti de nulle part. Vous devez garder cela à l'esprit lorsque vous travaillez avec des tableaux pour éviter les surprises. -======= -You see? The `` appeared out of nowhere. We should keep this in mind while working with tables to avoid surprises. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ```` ## Autres types de nœuds @@ -208,11 +199,7 @@ Nous pouvons penser - pourquoi un commentaire est-il ajouté au DOM ? Cela n'aff **Tout en HTML, même les commentaires, devient une partie du DOM.** -<<<<<<< HEAD -Même la directive `` au tout début du html est également un noeud du dom. C'est dans l'arborescence du DOM juste avant ``. Nous n'allons pas toucher ce nœud, nous ne le dessinons même pas sur les diagrammes pour cette raison, mais il est là. -======= -Even the `` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before ``. Few people know about that. We are not going to touch that node, we even don't draw it on diagrams, but it's there. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Même la directive `` au tout début du html est également un noeud du dom. C'est dans l'arborescence du DOM juste avant ``. Peu de gens le savent. Nous n'allons pas toucher ce nœud, nous ne le dessinons même pas sur les diagrammes pour cette raison, mais il est là. L'objet `document` qui représente l'ensemble du document est également, formellement, un nœud dom. diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md index fd9937415..45d968066 100644 --- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md +++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md @@ -39,15 +39,10 @@ Les fonctions de gestion d'horloge : ```js let timerId; -<<<<<<< HEAD function clockStart() { // exécute l'horloge - timerId = setInterval(update, 1000); -======= -function clockStart() { // run the clock - if (!timerId) { // only set a new interval if the clock is not running + if (!timerId) { // défini un nouvel intervalle uniquement si l'horloge ne fonctionne pas timerId = setInterval(update, 1000); } ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 update(); // (*) } @@ -57,10 +52,6 @@ function clockStop() { } ``` -<<<<<<< HEAD Veuillez noter que l'appel à `update()` est non seulement planifié dans `clockStart()`, mais s'exécute immédiatement dans la ligne `(*)`. Sinon, le visiteur devra attendre la première exécution de `setInterval`. Et l'horloge serait vide jusque-là. -======= -Please note that the call to `update()` is not only scheduled in `clockStart()`, but immediately run in the line `(*)`. Otherwise the visitor would have to wait till the first execution of `setInterval`. And the clock would be empty till then. -Also it is important to set a new interval in `clockStart()` only when the clock is not running. Otherways clicking the start button several times would set multiple concurrent intervals. Even worse - we would only keep the `timerID` of the last interval, losing references to all others. Then we wouldn't be able to stop the clock ever again! Note that we need to clear the `timerID` when the clock is stopped in the line `(**)`, so that it can be started again by running `clockStart()`. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Il est également important de définir un nouvel intervalle dans `clockStart()` uniquement lorsque l'horloge ne fonctionne pas. Sinon, cliquer plusieurs fois sur le bouton de démarrage définirait plusieurs intervalles simultanés. Pire encore, nous ne garderions que le `timerID` du dernier intervalle, perdant ainsi les références à tous les autres. Alors nous ne pourrions plus jamais arrêter le chronomètre! Notez que nous devons effacer le `timerID` lorsque l'horloge est arrêtée dans la ligne `(**)`, afin qu'elle puisse être redémarrée en exécutant `clockStart()`. diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index f05983723..1f15f2ef4 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -8,11 +8,7 @@ Nous pouvons générer non seulement des événements complètement nouveaux, qu ## Constructeur d'événements -<<<<<<< HEAD Les classes d'événements intégrées forment une hiérarchie, similaire aux classes d'éléments DOM. La racine est la classe intégrée [Event](http://www.w3.org/TR/dom/#event). -======= -Built-in event classes form a hierarchy, similar to DOM element classes. The root is the built-in [Event](http://www.w3.org/TR/dom/#event) class. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Nous pouvons créer des objets `Event` comme ceci: @@ -276,15 +272,11 @@ Alors, nous pouvons soit mettre le `dispatchEvent` (ou un autre appel déclenche ``` -<<<<<<< HEAD Désormais, `dispatchEvent` s'exécute de manière asynchrone une fois l'exécution du code en cours terminée, y compris `mouse.onclick`, les gestionnaires d'événements sont donc totalement séparés. L'ordre de sortie devient: 1 -> 2 -> imbriqué. ## Résumé -======= -Now `dispatchEvent` runs asynchronously after the current code execution is finished, including `menu.onclick`, so event handlers are totally separate. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Pour générer un événement à partir du code, nous devons d'abord créer un objet événement. @@ -307,4 +299,4 @@ Des événements natifs peuvent être générés: - En tant que bidouille pour faire fonctionner les bibliothèques tierces de la manière nécessaire, si elles ne fournissent pas d'autres moyens d'interaction. - Pour les tests automatisés, pour "cliquer sur le bouton" dans le script et voir si l'interface réagit correctement. -Les événements personnalisés avec nos propres noms sont souvent générés à des fins architecturales, pour signaler ce qui se passe dans nos menus, curseurs, carrousels, etc. \ No newline at end of file +Les événements personnalisés avec nos propres noms sont souvent générés à des fins architecturales, pour signaler ce qui se passe dans nos menus, curseurs, carrousels, etc. diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index eccbd3373..2a18557c5 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -52,11 +52,7 @@ Les événements liés aux clics ont toujours la propriété `button`, qui perme Nous ne l'utilisons généralement pas pour les événements `click` et `contextmenu`, car le premier se produit uniquement lors d'un clic gauche, et le second - uniquement lors d'un clic droit. -<<<<<<< HEAD D'un autre côté, les gestionnaires `mousedown` et `mouseup` peuvent avoir besoin de `event.button`, car ces événements se déclenchent sur n'importe quel bouton, donc` button` permet de faire la distinction entre "right-mousedown" et "left-mousedown". -======= -From the other hand, `mousedown` and `mouseup` handlers may need `event.button`, because these events trigger on any button, so `button` allows to distinguish between "right-mousedown" and "left-mousedown". ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 Les valeurs possibles de `event.button` sont : diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md index 35d4c8b2b..efc1cac54 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md @@ -80,11 +80,7 @@ Une caractéristique importante de `mouseout` -- il se déclenche lorsque le poi ``` -<<<<<<< HEAD -Si nous sommes sur `# parent`, puis déplaçons le pointeur plus profondément dans `#enfant`, nous obtenons `mouseout` sur `#parent`! -======= -If we're on `#parent` and then move the pointer deeper into `#child`, we get `mouseout` on `#parent`! ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +Si nous sommes sur `#parent`, puis déplaçons le pointeur plus profondément dans `#enfant`, nous obtenons `mouseout` sur `#parent` ! ![](mouseover-to-child.svg) diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md index a5babe25c..bc6fe20d4 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -102,11 +102,7 @@ L'attribut `defer` est ignoré si la balise ` ``` -<<<<<<< HEAD Dans cet exemple, le code du serveur n'est pas présenté, car il dépasse notre portée. Le serveur accepte la requête POST et répond "User saved". -======= -In this example, the server code is not presented, as it's beyond our scope. The server accepts the POST request and replies "User saved". ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ## Méthodes FormData @@ -79,11 +75,7 @@ formData.append('key2', 'value2'); // List key/value pairs for(let [name, value] of formData) { -<<<<<<< HEAD - alert(`${name} = ${value}`); // key1=value1, ensuite key2=value2 -======= - alert(`${name} = ${value}`); // key1 = value1, then key2 = value2 ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 + alert(`${name} = ${value}`); // key1 = value1, ensuite key2 = value2 } ``` diff --git a/5-network/03-fetch-progress/article.md b/5-network/03-fetch-progress/article.md index 8d273b659..8a38c75cc 100644 --- a/5-network/03-fetch-progress/article.md +++ b/5-network/03-fetch-progress/article.md @@ -109,10 +109,6 @@ Expliquons cela étape par étape : À la fin, nous avons le résultat (sous forme de chaîne de caractères ou d'objet blob, selon ce qui est pratique) et le suivi des progrès dans le processus. -<<<<<<< HEAD Encore une fois, veuillez noter que ce n'est pas pour la progression en *upload* (pas de possibilité actuellement avec `fetch`), seulement pour la progression en *download*. -======= -Once again, please note, that's not for *upload* progress (no way now with `fetch`), only for *download* progress. -Also, if the size is unknown, we should check `receivedLength` in the loop and break it once it reaches a certain limit. So that the `chunks` won't overflow the memory. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +De plus, si la taille est inconnue, nous devrions vérifier `receiveLength` dans la boucle et la briser une fois qu'elle atteint une certaine limite. Pour que les `chunks` ne débordent pas de mémoire. diff --git a/5-network/04-fetch-abort/article.md b/5-network/04-fetch-abort/article.md index 8a1ca3bc5..893b5c6ff 100644 --- a/5-network/04-fetch-abort/article.md +++ b/5-network/04-fetch-abort/article.md @@ -50,11 +50,7 @@ As we can see, `AbortController` is just a means to pass `abort` events when `ab Nous pourrions implémenter le même type d'écoute d'événement dans notre code par nous-mêmes, sans objet `AbortController` du tout. -<<<<<<< HEAD Mais ce qui est précieux, c'est que `fetch` sait comment travailler avec l'objet `AbortController`, il est intégré avec lui. -======= -But what's valuable is that `fetch` knows how to work with `AbortController` object, it's integrated with it. ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 ## Using with fetch diff --git a/5-network/05-fetch-crossorigin/article.md b/5-network/05-fetch-crossorigin/article.md index 3cd6700bf..054111ebc 100644 --- a/5-network/05-fetch-crossorigin/article.md +++ b/5-network/05-fetch-crossorigin/article.md @@ -97,73 +97,39 @@ Après un certain temps, les méthodes de mise en réseau en JavaScript sont app Au début, les requêtes cross-origin étaient interdites. Mais à la suite de longues discussions, les requêtes cross-origin ont été autorisées, mais avec de nouvelles capacités nécessitant une autorisation explicite du serveur, exprimées en en-têtes spéciaux. -<<<<<<< HEAD -## Requêtes simples -======= -## Safe requests ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +## Requêtes sécurisées Il existe deux types de requêtes cross-origin : -<<<<<<< HEAD -1. Les requêtes simples +1. Les requêtes sécurisées 2. Toutes les autres. -Les requêtes simples sont bien plus simples à faire, alors commençons par elles. +Les requêtes sécurisées sont bien plus simples à faire, alors commençons par elles. -Une [requête simple](http://www.w3.org/TR/cors/#terminology) est une requête qui remplit deux conditions : +Une requête est sécurisée si elle remplit deux conditions : -1. [Méthode simple](http://www.w3.org/TR/cors/#simple-method): GET, POST ou HEAD -2. [En-têtes simples](http://www.w3.org/TR/cors/#simple-header) -- les seuls en-têtes personnalisés autorisés sont : -======= -1. Safe requests. -2. All the others. - -Safe Requests are simpler to make, so let's start with them. - -A request is safe if it satisfies two conditions: - -1. [Safe method](https://fetch.spec.whatwg.org/#cors-safelisted-method): GET, POST or HEAD -2. [Safe headers](https://fetch.spec.whatwg.org/#cors-safelisted-request-header) -- the only allowed custom headers are: ->>>>>>> 13da056653754765b50aa5a9f706f84a4a0d6293 +1. [Méthode sécurisée](https://fetch.spec.whatwg.org/#cors-safelisted-method) : GET, POST ou HEAD +2. [En-têtes simples](https://fetch.spec.whatwg.org/#cors-safelisted-request-header) -- les seuls en-têtes personnalisés autorisés sont : - `Accept`, - `Accept-Language`, - `Content-Language`, - `Content-Type` avec la valeur `application/x-www-form-urlencoded`, `multipart/form-data` ou `text/plain`. -<<<<<<< HEAD -Toute autre demande est considérée comme "non simple". Par exemple, une demande avec la méthode `PUT` ou avec un en-tête `API-Key` ne correspond pas aux limitations. - -**La différence essentielle est qu’une "simple requête" peut être faite avec un `
` ou un `