You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/01-getting-started/1-intro/article.md
+9Lines changed: 9 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -109,11 +109,20 @@ Les outils modernes rendent la [transpilation](https://fr.wiktionary.org/wiki/tr
109
109
110
110
Les exemples de ce genre de langages :
111
111
112
+
<<<<<<< HEAD
112
113
-[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.
113
114
-[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.
114
115
-[Flow](http://flow.org/) ajoute également la saisie de données, mais de manière différente. Développé par Facebook.
115
116
-[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.
116
117
-[Brython](https://brython.info/) est un transpilateur Python vers JavaScript qui permet d'écrire des applications en Python pur sans JavaScript.
118
+
=======
119
+
-[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.
120
+
-[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.
121
+
-[Flow](http://flow.org/) also adds data typing, but in a different way. Developed by Facebook.
122
+
-[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.
123
+
-[Brython](https://brython.info/) is a Python transpiler to JavaScript that enables the writing of applications in pure Python without JavaScript.
124
+
-[Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) is a modern, concise and safe programming language that can target the browser or Node.
125
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
117
126
118
127
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.
Copy file name to clipboardExpand all lines: 1-js/02-first-steps/18-javascript-specials/article.md
+6Lines changed: 6 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -272,9 +272,15 @@ Nous avons couvert trois manières de créer une fonction en JavaScript :
272
272
```
273
273
274
274
275
+
<<<<<<< HEAD
275
276
- Les fonctions peuvent avoir des variables locales: celles déclarées dans son corps. De telles variables ne sont visibles qu'à l'intérieur de la fonction.
276
277
- Les paramètres peuvent avoir des valeurs par défaut : `function sum(a = 1, b = 2) {...}`.
277
278
- Les fonctions retournent toujours quelque chose. Si aucune instruction `return` n’est renvoyée, le résultat est `undefined`.
279
+
=======
280
+
- Functions may have local variables: those declared inside its body or its parameter list. Such variables are only visible inside the function.
281
+
- Parameters can have default values: `function sum(a = 1, b = 2) {...}`.
282
+
- Functions always return something. If there's no `return` statement, then the result is `undefined`.
Copy file name to clipboardExpand all lines: 1-js/03-code-quality/01-debugging-chrome/article.md
+5Lines changed: 5 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -134,8 +134,13 @@ Il y a des boutons pour cela en haut du volet de droite. Actionnons-les.
134
134
135
135
En cliquant dessus encore et encore, vous parcourrez toutes les instructions de script une par une.
136
136
137
+
<<<<<<< HEAD
137
138
<spanclass="devtools"style="background-position:-62px-192px"></span> -- "Step over": lance la commande suivante, mais *n'entre pas dans une fonction*, raccourci clavier `key:F10`.
138
139
: Semblable à la précédente commande "Step", mais se comporte différemment si l'instruction suivante est un appel de fonction. C’est-à-dire qu’il ne s’agit pas d’une fonction intégrée, comme `alert`, mais d’une fonction propre.
140
+
=======
141
+
<spanclass="devtools"style="background-position:-62px-192px"></span> -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`.
142
+
: Similar to the previous "Step" command, but behaves differently if the next statement is a function call. That is: not a built-in, like `alert`, but a function of our own.
143
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
139
144
140
145
La commande "Step" y pénètre et met en pause l'exécution à la première ligne, tandis que "Step over" exécute l'appel de fonction imbriqué de manière invisible, en ignorant les éléments internes de la fonction.
Copy file name to clipboardExpand all lines: 1-js/04-object-basics/07-optional-chaining/article.md
+4Lines changed: 4 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -236,3 +236,7 @@ Une chaîne de `?.` permet d'accéder en toute sécurité aux propriétés imbri
236
236
237
237
Néanmoins, nous devons appliquer «?.» Avec soin, uniquement s'il est acceptable que la partie gauche n'existe pas. Pour ne pas nous cacher les erreurs de programmation, si elles se produisent.
238
238
239
+
<<<<<<<HEAD
240
+
=======
241
+
Still, we should apply `?.` carefully, only where it's acceptable that the left part doesn't exist. So that it won't hide programming errors from us, if they occur.
Copy file name to clipboardExpand all lines: 1-js/05-data-types/06-iterable/article.md
+4Lines changed: 4 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -174,7 +174,11 @@ Lorsque nous utilisons JavaScript pour des tâches pratiques dans un navigateur
174
174
175
175
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).
176
176
177
+
<<<<<<< HEAD
177
178
Mais un itérable peut ne pas ressembler à un tableau. Et inversement, un tableau peut ne pas être itérable.
179
+
=======
180
+
But an iterable may be not array-like. And vice versa an array-like may be not iterable.
181
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
178
182
179
183
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`.
Les deux structures de données les plus utilisées en JavaScript sont `Object` et `Array`.
4
4
5
+
<<<<<<< HEAD
5
6
Les objets nous permettent de créer une seule entité qui stocke les éléments de données par clé, et les tableaux nous permettent de rassembler des éléments de données dans une collection ordonnée.
6
7
7
8
Mais lorsque nous transmettons ceux-ci à une fonction, il se peut que celle-ci n'ait pas besoin d'un objet / tableau dans son ensemble, mais plutôt de morceaux individuels.
8
9
9
10
*L'affectation par décomposition* est une syntaxe spéciale qui nous permet de "décompresser" des tableaux ou des objets dans un ensemble de variables, ce qui est parfois plus pratique. La décomposition fonctionne également très bien avec des fonctions complexes comportant de nombreux paramètres, valeurs par défaut, etc.
11
+
=======
12
+
- Objects allow us to create a single entity that stores data items by key.
13
+
- Arrays allow us to gather data items into an ordered list.
14
+
15
+
Although, when we pass those to a function, it may need not an object/array as a whole. It may need individual pieces.
16
+
17
+
*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient.
18
+
19
+
Destructuring also works great with complex functions that have a lot of parameters, default values, and so on. Soon we'll see that.
20
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
10
21
11
22
## Décomposition d'un tableau
12
23
24
+
<<<<<<< HEAD
13
25
Un exemple de la façon dont un tableau est décomposé en variables :
14
26
15
27
```js
16
28
// nous avons un tableau avec le nom et le prénom
17
29
let arr = ["Ilya", "Kantor"]
30
+
=======
31
+
Here's an example of how an array is destructured into variables:
32
+
33
+
```js
34
+
// we have an array with the name and surname
35
+
let arr = ["John", "Smith"]
36
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
18
37
19
38
*!*
20
39
// l'affectation par décomposition
@@ -23,20 +42,29 @@ let arr = ["Ilya", "Kantor"]
23
42
let [firstName, surname] = arr;
24
43
*/!*
25
44
26
-
alert(firstName); //Ilya
27
-
alert(surname); //Kantor
45
+
alert(firstName); //John
46
+
alert(surname); //Smith
28
47
```
29
48
30
49
Maintenant, nous pouvons travailler avec des variables plutôt que des parties du tableau.
31
50
32
51
Cela a l'air pas mal quand c'est combiné avec `split` ou tout autre méthode de renvoi de tableau :
33
52
34
-
```js
35
-
let [firstName, surname] ="Ilya Kantor".split('');
53
+
```js run
54
+
let [firstName, surname] ="John Smith".split('');
55
+
alert(firstName); // John
56
+
alert(surname); // Smith
36
57
```
37
58
59
+
<<<<<<< HEAD
38
60
````smart header="\"Décomposition\" ne veut pas dire \"destruction\"."
39
61
Cette manipulation est appelée "affectation par décomposition"", car elle "se décompose"" en copiant ses éléments dans des variables. Mais le tableau lui-même n'est pas modifié.
62
+
=======
63
+
As you can see, the syntax is simple. There are several peculiar details though. Let's see more examples, to better understand it.
64
+
65
+
````smart header="\"Destructuring\" does not mean \"destructive\"."
66
+
It's called "destructuring assignment," because it "destructurizes" by copying items into variables. But the array itself is not modified.
67
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
40
68
41
69
C’est juste une façon plus courte d’écrire :
42
70
```js
@@ -69,27 +97,38 @@ Dans le code ci-dessus, le deuxième élément du tableau est ignoré, le troisi
69
97
let [a, b, c] = "abc"; // ["a", "b", "c"]
70
98
let [one, two, three] = new Set([1, 2, 3]);
71
99
```
72
-
100
+
That works, because internally a destructuring assignment works by iterating over the right value. It's kind of syntax sugar for calling `for..of` over the value to the right of `=` and assigning the values.
73
101
````
74
102
75
103
104
+
<<<<<<< HEAD
76
105
````smart header="Attribuer à n'importe quoi à gauche"
77
106
78
107
Nous pouvons utiliser n'importe quel "assignable" à gauche.
108
+
=======
109
+
````smart header="Assign to anything at the left-side"
Dans le chapitre précédent, nous avons vu les méthodes [Object.entries(obj)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/entries).
128
+
=======
129
+
````smart header="Looping with .entries()"
130
+
In the previous chapter we saw the [Object.entries(obj)](mdn:js/Object/entries) method.
131
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
93
132
94
133
Nous pouvons l'utiliser avec la décomposition pour boucler sur les clés et valeurs d'un objet :
95
134
@@ -107,62 +146,111 @@ for (let [key, value] of Object.entries(user)) {
107
146
}
108
147
```
109
148
149
+
<<<<<<< HEAD
110
150
...Et la même chose pour un map :
151
+
=======
152
+
The similar code for a `Map` is simpler, as it's iterable:
153
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
111
154
112
155
```js run
113
156
let user = new Map();
114
157
user.set("name", "John");
115
158
user.set("age", "30");
116
159
117
160
*!*
161
+
// Map iterates as [key, value] pairs, very convenient for destructuring
118
162
for (let [key, value] of user) {
119
163
*/!*
120
164
alert(`${key}:${value}`); // name:John, ensuite age:30
121
165
}
122
166
```
123
167
````
124
168
169
+
<<<<<<< HEAD
125
170
```smart header="Astuce d'échange de variables"
126
171
Une astuce bien connue pour permuter les valeurs de deux variables :
172
+
=======
173
+
````smart header="Swap variables trick"
174
+
There's a well-known trick for swapping values of two variables using a destructuring assignment:
175
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
127
176
128
177
```js run
129
178
let guest = "Jane";
130
179
let admin = "Pete";
131
180
181
+
<<<<<<< HEAD
132
182
// Permuter les valeurs : faire guest=Pete, admin=Jane
183
+
=======
184
+
// Let's swap the values: make guest=Pete, admin=Jane
185
+
*!*
186
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
133
187
[guest, admin] = [admin, guest];
188
+
*/!*
134
189
135
190
alert(`${guest} ${admin}`); // Pete Jane (échangé avec succès !)
136
191
```
137
192
138
193
Ici, nous créons un tableau temporaire de deux variables et le déstructurons immédiatement dans l'ordre permuté.
139
194
195
+
<<<<<<< HEAD
140
196
Nous pouvons échanger plus de deux variables de cette façon.
141
197
198
+
=======
199
+
We can swap more than two variables this way.
200
+
````
201
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
142
202
143
203
### Le rest '...'
144
204
205
+
<<<<<<< HEAD
145
206
Si nous voulons non seulement obtenir les premières valeurs, mais aussi rassembler tout ce qui suit, nous pouvons ajouter un paramètre supplémentaire qui obtient "le reste" à l'aide de trois points `"..."`:
207
+
=======
208
+
Usually, if the array is longer when the list at the left, the "extra" items are omitted.
209
+
210
+
For example, here only two items are taken, and the rest is just ignored:
211
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
146
212
147
213
```js run
148
-
let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*];
214
+
let [name1, name2] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
149
215
150
216
alert(name1); // Julius
151
217
alert(name2); // Caesar
218
+
// Furher items aren't assigned anywhere
219
+
```
220
+
221
+
If we'd like also to gather all that follows -- we can add one more parameter that gets "the rest" using three dots `"..."`:
222
+
223
+
```js run
224
+
let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*];
152
225
153
226
*!*
154
-
//Note that type of `rest` is Array.
227
+
// rest is array of items, starting from the 3rd one
155
228
alert(rest[0]); // Consul
156
229
alert(rest[1]); // of the Roman Republic
157
230
alert(rest.length); // 2
158
231
*/!*
159
232
```
160
233
234
+
<<<<<<< HEAD
161
235
La valeur de `rest` est le tableau des éléments du tableau restants. Nous pouvons utiliser n’importe quel autre nom de variable à la place de `rest`, assurez-vous simplement qu’il a trois points devant lui et soit placé en dernier dans l’affectation par décomposition.
236
+
=======
237
+
The value of `rest` is the array of the remaining array elements.
238
+
239
+
We can use any other variable name in place of `rest`, just make sure it has three dots before it and goes last in the destructuring assignment.
240
+
241
+
```js run
242
+
let [name1, name2, *!*...titles*/!*] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
243
+
// now titles = ["Consul", "of the Roman Republic"]
244
+
```
245
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
162
246
163
247
### Les valeurs par défaut
164
248
249
+
<<<<<<< HEAD
165
250
S'il y a moins de valeurs dans le tableau que de variables dans l'affectation, il n'y aura pas d'erreur. Les valeurs absentes sont considérées comme non définies :
251
+
=======
252
+
If the array is shorter than the list of variables at the left, there'll be no errors. Absent values are considered undefined:
Les valeurs par défaut peuvent être des expressions plus complexes ou même des appels de fonction. Ils ne sont évalués que si la valeur n'est pas fournie.
189
277
278
+
<<<<<<< HEAD
190
279
Par exemple, nous utilisons ici la fonction `prompt` pour deux valeurs par défaut. Mais cela ne fonctionnera que pour celle qui manque :
280
+
=======
281
+
For instance, here we use the `prompt` function for two defaults:
282
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
191
283
192
284
```js run
193
285
// runs only prompt for surname
@@ -197,7 +289,7 @@ alert(name); // Julius (from array)
197
289
alert(surname); // whatever prompt gets
198
290
```
199
291
200
-
292
+
Please note: the `prompt` will run only for the missing value (`surname`).
201
293
202
294
## Décomposition d'object
203
295
@@ -209,7 +301,11 @@ La syntaxe de base est la suivante :
209
301
let {var1, var2} = {var1:…, var2:…}
210
302
```
211
303
304
+
<<<<<<< HEAD
212
305
Nous avons un objet existant à droite que nous souhaitons scinder en variables. Le côté gauche contient un "pattern" pour les propriétés correspondantes. Dans ce cas simple, c’est une liste de noms de variables dans `{...}`.
306
+
=======
307
+
We should have an existing object at the right side, that we want to split into variables. The left side contains an object-like "pattern" for corresponding properties. In the simplest case, that's a list of variable names in `{...}`.
308
+
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
213
309
214
310
Par exemple :
215
311
@@ -229,7 +325,13 @@ alert(width); // 100
229
325
alert(height); // 200
230
326
```
231
327
328
+
<<<<<<< HEAD
232
329
Les propriétés `options.title`, `options.width` et `options.height` sont affectés aux variables correspondantes. L'ordre n'a pas d'importance. Cela fonctionne aussi :
330
+
=======
331
+
Properties `options.title`, `options.width` and `options.height` are assigned to the corresponding variables.
Le pattern à gauche peut être plus complexe et spécifier le mapping entre propriétés et variables.
240
342
343
+
<<<<<<< HEAD
241
344
Si nous voulons affecter une propriété à une variable portant un autre nom, par exemple, `options.width` pour aller dans la variable nommée `w`, alors nous pouvons la définir en utilisant deux points :
345
+
=======
346
+
If we want to assign a property to a variable with another name, for instance, make `options.width` go into the variable named `w`, then we can set the variable name using a colon:
0 commit comments