Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
265cb17
Conflict fixed on "An Introduction to JavaScript" page in french
HachemiH Jan 2, 2021
ff5b071
Conflict fixed on Variables solution page in french language
HachemiH Jan 2, 2021
bc86d11
Conflict fixed on "Basic operators, maths" page in french language
HachemiH Jan 2, 2021
0af0514
Conflict fixed on "Conditional branching: if, '?'" page in french
HachemiH Jan 2, 2021
a2184c5
Conflicts fixed on "Polyfills and transpilers" page in french language
HachemiH Jan 2, 2021
f38e102
Conflicts fixed on "Object references and copying" page in french
HachemiH Jan 2, 2021
3f385d1
Conflicts fixed on "Optional chaining '?.'" page in french language
HachemiH Jan 2, 2021
ae5f47a
Conflict fixed on Strings solution page in french language
HachemiH Jan 2, 2021
4d17be9
Conflicts fixed on Strings page in french language
HachemiH Jan 2, 2021
1837a9a
Conflicts fixed on Arrays page and solution in french language
HachemiH Jan 2, 2021
2c3fcf8
Conflict fixed on "Array methods" page in french language
HachemiH Jan 2, 2021
fb0e82f
Conflicts fixed on Iterables page in french language
HachemiH Jan 2, 2021
2ae47d0
Conflicts fixed on "Map and set" page and task in french language
HachemiH Jan 2, 2021
d29623a
Conflicts fixed on "WeakMap and WeakSet" page in french language
HachemiH Jan 2, 2021
ad73cb7
Conflicts fixed on "Date and time" page in french language
HachemiH Jan 2, 2021
61175d2
Conflicts fixed on "JSON methods, toJSON" page in french language
HachemiH Jan 2, 2021
7728e52
Conflicts fixed on "Decorators and forwarding, call/apply" task page in
HachemiH Jan 2, 2021
872408e
Conflicts fixed on "Prototypal inheritance" page in french language
HachemiH Jan 2, 2021
ab9a4a1
Conflicts fixed on "Private and protected properties and methods" page
HachemiH Jan 2, 2021
52d71c4
Conflicts fixed on "Promise API" page in french language
HachemiH Jan 2, 2021
f4cc107
Conflict fixed on Promisification page in french language
HachemiH Jan 2, 2021
204dcf6
Conflict fixed on Generators page in french language
HachemiH Jan 2, 2021
fea16cd
Conflicts fixed on "Proxy and Reflect" page in french language
HachemiH Jan 2, 2021
e1ccfa6
Conflicts fixed on "DOM tree" page in french language
HachemiH Jan 2, 2021
20de727
Conflicts fixed on "Modifying the document" solution page in french
HachemiH Jan 2, 2021
f7ba9ff
Conflicts fixed on "Dispatching custom events" page in french language
HachemiH Jan 2, 2021
51c6675
Conflict fixed on "Mouse events" page in french language
HachemiH Jan 2, 2021
d7e6afc
Conflict fixed on "Moving the mouse: mouseover/out, mouseenter/leave"
HachemiH Jan 2, 2021
7448312
Conflict fixed on "Scripts: async, defer" page in french language
HachemiH Jan 2, 2021
29b60bd
Conflict fixed on "Popups and window methods" page in french language
HachemiH Jan 2, 2021
2d8fc63
Conflicts fixed on "ArrayBuffer, binary arrays" page in french language
HachemiH Jan 2, 2021
5d54816
Conflict fixed on "TextDecoder and TextEncoder" page in french language
HachemiH Jan 2, 2021
a30ea1a
Conflicts fixed on Blob page in french language
HachemiH Jan 2, 2021
6bc4900
Conflict fixed on Fetch page in french language
HachemiH Jan 2, 2021
7b15257
Conflicts fixed on FormData page in french language
HachemiH Jan 2, 2021
af467b7
Conflict fixed on "Fetch: Download progress" page in french language
HachemiH Jan 2, 2021
847c338
Conflict fixed on "Fetch: Abort" page in french language
HachemiH Jan 2, 2021
5eb9c52
Conflicts fixed on "Fetch: Cross-Origin Requests" page in french
HachemiH Jan 2, 2021
2e0f1fa
Conflicts fixed on "Fetch API" page in french language
HachemiH Jan 2, 2021
b1ecc7e
Conflicts fixed on "XMLHttpRequest" page in french language
HachemiH Jan 2, 2021
a614727
Conflict fixed on "Long polling" page in french language
HachemiH Jan 2, 2021
d129d0e
Conflict fixed on "WebSocket" page in french language
HachemiH Jan 2, 2021
1d0c879
Conflict fixed on "Server Sent Events" page in french language
HachemiH Jan 2, 2021
a5fb999
Conflicts fixed on "Patterns and flags" page in french language
HachemiH Jan 2, 2021
c0681f5
Conflicts fixed on "Character classes" page in french language
HachemiH Jan 2, 2021
ae59db5
Conflicts fixed on "Unicode: flag "u" and class \p{...}" page in french
HachemiH Jan 2, 2021
9659c12
Conflict fixed on README page in french language
HachemiH Jan 2, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 1 addition & 9 deletions 1-js/01-getting-started/1-intro/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
11 changes: 3 additions & 8 deletions 1-js/02-first-steps/08-operators/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 1 addition & 5 deletions 1-js/02-first-steps/10-ifelse/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
122 changes: 38 additions & 84 deletions 1-js/03-code-quality/06-polyfills/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
- <https://kangax.github.io/compat-table/es6/> - for pure JavaScript.
- <https://caniuse.com/> - for browser-related functions.
De bonnes ressources qui montrent l'état actuel de la prise en charge de diverses fonctionnalités :
- <https://kangax.github.io/compat-table/es6/> - pour du pur JavaScript.
- <https://caniuse.com/> - 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.

Loading