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/02-first-steps/01-hello-world/article.md
+4-5Lines changed: 4 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,15 @@
1
1
# Hello, world!
2
-
2
+
3
3
<iframewidth="560"height="315"src="https://www.youtube.com/embed/0WS0zqhT5fM"title="YouTube video player"frameborder="0"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe>
4
4
5
-
Cette partie du tutoriel est à propos du coeur de JavaScript, le langage lui même.
5
+
Cette partie du tutoriel est à propos du coeur de JavaScript, le langage lui même.
6
6
7
7
Mais nous avons besoin d'un environnement de travail pour exécuter nos scripts et, étant donné que ce guide est en ligne, le navigateur est un bon choix. Nous allons nous efforcer d'utiliser les commandes spécifiques au navigateur (comme `alert`) au minimum afin de ne pas y consacrer du temps si vous prévoyez de vous concentrer sur un autre environnement tel que Node.JS. Par ailleurs, les détails du navigateur sont expliqués dans [la partie suivante](/ui) du didacticiel.
8
8
9
9
Alors, voyons d'abord comment intégrer un script à une page Web. Pour les environnements côté serveur, vous pouvez simplement l'exécuter avec une commande comme `"node mon.js"` pour Node.JS.
10
10
11
11
12
-
## La balise "script"
12
+
## La balise "script"
13
13
14
14
Les programmes JavaScript peuvent être insérés dans n'importe quelle partie d'un document HTML à l'aide de la balise `<script>`.
15
15
@@ -50,9 +50,8 @@ La balise `<script>` a quelques attributs qui sont rarement utilisés de nos jou
: L’ancien standard HTML4, nécessitait pour chaque script d'avoir un `type`. Habiutellement c'était `type="text/javascript"`. Dorénavant ce n’est plus nécessaire. De plus, le standard HTML moderne a totalement changé la signification de cet attribut. Maintenant, il peut être utilisé pour les modules JavaScript. Mais c’est un sujet avancé, nous parlerons de modules dans une autre partie du tutoriel.
: Cet attribut était destiné à afficher la langue du script. Pour l'instant, cet attribut n'a aucun sens, le langage est le JavaScript par défaut. Pas besoin de l'utiliser.
54
+
: Cet attribut était destiné à afficher le langage du script. Pour l'instant, cet attribut n'a aucun sens, le langage est le JavaScript par défaut. Pas besoin de l'utiliser.
56
55
57
56
Commentaires avant et après les scripts.
58
57
: Dans des livres et des guides vraiment anciens, on peut trouver des commentaires dans `<script>`, comme ceci :
Copy file name to clipboardExpand all lines: 1-js/02-first-steps/05-types/article.md
+5-4Lines changed: 5 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -135,14 +135,15 @@ alert( `the result is *!*${1 + 2}*/!*` ); // le résultat est 3
135
135
L'expression à l'intérieur de `${…}` est évaluée et le résultat devient une partie de la chaîne. On peut y mettre n'importe quoi : une variable comme `name` ou une expression arithmétique comme `1+2` ou quelque chose de plus complexe.
136
136
137
137
Veuillez noter que cela ne peut être fait que dans les backticks. Les autres guillemets ne permettent pas une telle intégration !
138
+
138
139
```js run
139
140
alert( "the result is ${1 + 2}" ); // le résultat est ${1 + 2} (les doubles quotes ne font rien)
140
141
```
141
142
142
143
Nous couvrirons les chaînes de caractères plus en détails dans le chapitre <info:string>.
143
144
144
145
```smart header="Il n'y a pas de type *character*."
145
-
Dans certaines langues, il existe un type spécial "character" pour un seul caractère. Par exemple, en langage C et en Java, il s'agit de "char".
146
+
Dans certains langages, il existe un type spécial "character" pour un seul caractère. Par exemple, en langage C et en Java, il s'agit de "char".
146
147
147
148
En JavaScript, ce type n'existe pas. Il n'y a qu'un seul type:`string`. Une chaîne de caractères peut être composée de zéro caractère (être vide), d'un caractère ou de plusieurs d'entre eux.
148
149
```
@@ -170,7 +171,7 @@ alert( isGreater ); // true (le résultat de la comparaison est "oui")
170
171
171
172
Nous couvrirons plus profondément les booléens plus tard dans le chapitre <info:logical-operators>.
172
173
173
-
## La valeur "null"
174
+
## La valeur "null"
174
175
175
176
La valeur spéciale `null` n'appartient à aucun type de ceux décrits ci-dessus.
176
177
@@ -186,7 +187,7 @@ C’est juste une valeur spéciale qui a le sens de "rien", "vide" ou "valeur in
186
187
187
188
Le code ci-dessus indique que l'`age` est inconnu.
188
189
189
-
## La valeur "undefined"
190
+
## La valeur "undefined"
190
191
191
192
La valeur spéciale `undefined` se distingue des autres. C'est un type à part entière, comme `null`.
192
193
@@ -217,7 +218,7 @@ alert(age); // "undefined"
217
218
218
219
Le type `object` est spécial.
219
220
220
-
Tous les autres types sont appelés "primitifs", car leurs valeurs ne peuvent contenir qu’une seule chose (que ce soit une chaîne de caractères, un nombre ou autre). À contrario, les objets servent à stocker des collections de données et des entités plus complexes.
221
+
Tous les autres types sont appelés "primitifs", car leurs valeurs ne peuvent contenir qu’une seule chose (que ce soit une chaîne de caractères, un nombre ou autre). À contrario, les objets servent à stocker des collections de données et des entités plus complexes.
221
222
222
223
Étant aussi important, les objets méritent un traitement spécial. Nous les traiterons plus tard dans le chapitre <info:object>, après en savoir plus sur les primitifs.
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/03-closure/article.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -197,7 +197,7 @@ Tout semble simple pour l'instant, non ?
197
197
- Travailler avec des variables, c'est travailler avec les propriétés de cet objet.
198
198
199
199
```smart header="L'environnement lexical est un objet de spécification"
200
-
"L'environnement lexical" est un objet de spécification : il n'existe que "théoriquement" dans la [spécification du language](https://tc39.es/ecma262/#sec-lexical-environments) pour décrire comment les choses fonctionnent. nous ne pouvons pas obtenir cet objet dans notre code et le manipuler directement.
200
+
"L'environnement lexical" est un objet de spécification : il n'existe que "théoriquement" dans la [spécification du langage](https://tc39.es/ecma262/#sec-lexical-environments) pour décrire comment les choses fonctionnent. nous ne pouvons pas obtenir cet objet dans notre code et le manipuler directement.
201
201
202
202
Les moteurs JavaScript peuvent également l'optimiser, supprimer les variables inutilisées pour économiser de la mémoire et effectuer d'autres opérations internes, tant que le comportement visible reste conforme à la description.
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/task.md
+1-2Lines changed: 1 addition & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ importance: 5
6
6
7
7
Créer une fonction `runOnKeys(func, code1, code2, ... code_n)` exécutant la fonction `func` lorsqu’on appuie simultanément sur les touches avec les codes suivant `code1`, `code2`, ..., `code_n`.
8
8
9
-
Par exemple, le code en dessous montre`alert` lorsque `"Q"` et `"W"` sont appuyées ensemble (dans n'importe quelle langue, avec ou sans l'activation de La touche Majuscule, CapsLock)
9
+
Par exemple, le code ci-dessous montre `alert` lorsque `"Q"` et `"W"` sont appuyées ensemble (dans n'importe quelle langue, avec ou sans l'activation de La touche Majuscule, CapsLock)
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/7-keyboard-events/article.md
+1-17Lines changed: 1 addition & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,11 @@
1
-
# Le Clavier: les évènements keydown et keyup
1
+
# Le Clavier: les évènements keydown et keyup
2
2
3
3
Avant que nous en arrivions au clavier, veuillez noter que sur des appareils modernes il y a d'autres manières de “récupérer quelque chose". Par exemple, les gens utilisent la reconnaissance vocale (en particulier sur les appareils mobiles) oubien le copier/coller avec la souris.
4
4
5
-
6
5
Donc si nous voulons contrôler une entrée dans un champ `<input>`, alors les évènements du clavier ne sont pas assez suffisants. Il y a un autre évènement nommé `input` pour gérer les changements d'un champ `<input>`, par n'importe quelle moyen. Et il peut être un meilleur choix pour une telle tâche. Nous allons traiter cela plus tard dans le chapitre <info:events-change-input>.
7
6
8
-
9
7
Les évènements du clavier doivent être utilisés lorsqu'on veut gérer les actions sur le clavier (Le clavier virtuel compte aussi). Par exemple, pour réagir sur les touches de directions `key:Up` et `key:Down` oubien les touches de raccourcis (y compris les combinaisons de touches).
10
8
11
-
12
9
## Teststand [#keyboard-test-stand]
13
10
14
11
```offline
@@ -23,7 +20,6 @@ Essayez les différentes combinaisons de touches dans la zone de texte.
23
20
[codetabs src="keyboard-dump" height=480]
24
21
```
25
22
26
-
27
23
## Keydown et keyup
28
24
29
25
Les évènements `keydown` surviennent lorsqu'une touche est appuyée, et ensuite intervient `keyup` -- lorsqu'elle est relâchée.
@@ -32,18 +28,15 @@ Les évènements `keydown` surviennent lorsqu'une touche est appuyée, et ensui
32
28
33
29
La propriété `key` de l’objet évènement permet d'obtenir un caractère, tandis que la propriété `code` de l'objet évènement objet permet d'obtenir le "code de la touche physique".
34
30
35
-
36
31
Par exemple, la même touche `key:Z` peut être appuyée avec ou sans `key:Shift`. Cela nous donne deux caractères différents : minuscule `z` et majuscule `Z`.
37
32
38
-
39
33
La propriété `event.key` est exactement le caractère, et il sera diffèrent. Cependant `event.code` est la même:
40
34
41
35
| Touche |`event.key`|`event.code`|
42
36
|--------------|-------------|--------------|
43
37
|`key:Z`|`z` (minuscule) |`KeyZ`|
44
38
|`key:Shift+Z`|`Z` (majuscule) |`KeyZ`|
45
39
46
-
47
40
Si un utilisateur travaille avec des langues différentes, alors le fait de changer vers une autre langue aura pour effet de créer un caractère totalement diffèrent de `"Z"`. Cela va devenir la valeur de `event.key`, tandis que `event.code` est toujours la même que: `"KeyZ"`.
48
41
49
42
```smart header="\"KeyZ\" et autres codes de touches"
@@ -56,7 +49,6 @@ Par exemple:
56
49
57
50
Il existe plusieurs formats de claviers usuels, différents de par la présentation, et la spécification donne des codes pour les touches pour chacun d'entre eux.
58
51
59
-
60
52
voir [la section alphanumérique de la specification](https://www.w3.org/TR/uievents-code/#key-alphanumeric-section) pour plus de codes, ou essayez juste le [teststand](#keyboard-test-stand) au-dessus.
61
53
62
54
```
@@ -67,7 +59,6 @@ Semble être évident, mais beaucoup de gens font toujours des fautes.
67
59
S'il vous plait éviter les fautes de frappes: c'est `KeyZ`, pas `keyZ`. Le control tel que `event.code=="keyZ"` ne vas pas fonctionner: la première lettre de `"Key"` doit être une majuscule.
68
60
```
69
61
70
-
71
62
Et si une touche ne donne aucun caractère ? Par exemple, `key:Shift` ou `key:F1` ou autres. Pour ces touches, `event.key` est approximativement la même chose que `event.code` :
72
63
73
64
| Key | `event.key` | `event.code` |
@@ -87,7 +78,6 @@ Il existe un dilemme ici: Dans cet écouteur d’évènement, devons-nous contr
87
78
88
79
D'une part, la valeur de `event.key` est un caractère, elle change en fonction de la langue. Si le visiteur a plusieurs langues dans le système d'exploitation et bascule entre elles, la même clé donne des caractères différents. Il est donc logique de vérifier `event.code`, c'est toujours pareil.
D'autre part, il existe un problème avec `event.code`. Pour des dispositions de clavier différentes, la même touche peut avoir des caractères différents.
103
92
104
93
Par exemple, voici la disposition du clavier Américain ("QWERTY") et Allemand ("QWERTZ") dessous (de Wikipedia) :
105
94
106
-
107
95

108
96
109
97

110
98
111
99
Pour la même touche, le clavier Américain a un "Z", tandis que celui Allemand a un "Y" (les lettres sont échanges).
112
100
113
-
114
101
Donc, `event.code` sera égal à `KeyZ` pour les gens utilisant le clavier Allemand lorsqu'ils appuient sur `key:Y`.
115
102
116
103
Si on vérifie `event.code == 'KeyZ'` dans notre code, alors pour les personnes avec la disposition allemande ce genre de test passera quand ils appuient sur `key:Y`.
@@ -127,14 +114,12 @@ Voulons-nous gérer des clés dépendantes de la disposition ? Alors `event.key`
127
114
128
115
Ou voulons-nous un raccourci clavier même après un changement de langue ? Alors, `event.code` peut être une meilleure option.
129
116
130
-
131
117
## Auto-repeat
132
118
133
119
Si une touche est appuyée assez longtemps, elle commence la répétition avec la propriété "auto-repeat": l'évènement `keydown` se déclenche de manière répétitive, et ensuite lorsqu'elle est relâchée nous obtenons finalement l'évènement `keyup`. Donc c'est normal d'avoir plusieurs `keydown` et un unique évènement `keyup`.
134
120
135
121
Pour les évènements déclenchés par auto-repeat, l'évènement objet a une propriété `event.repeat` dont la valeur est assignée à `true`.
136
122
137
-
138
123
## Actions par défaut
139
124
140
125
Les actions par défaut varient, comme il y a beaucoup de possibilités pouvant être initiées par le clavier.
@@ -190,7 +175,6 @@ Dans le passé, il y'avait un évènement `keypress`, et aussi les propriétés
190
175
191
176
Il y avait tellement d'incompatibilités au niveau des navigateurs en travaillant avec eux que les développeurs de la spécification n'avaient autre moyen que de les déprécier tous et d’en créer de nouveaux et plus modernes (tels que ceux décrits en haut dans ce chapitre). L'ancien code marche encore, étant donné que les navigateurs continuent de les supporter, mais nous n'avons nullement besoin de les utiliser maintenant.
192
177
193
-
194
178
## Claviers mobiles
195
179
196
180
Lors de l'utilisation de claviers virtuels / mobiles, officiellement appelés IME (Input-Method Editor), la norme W3C indique qu'un KeyboardEvent [`e.keyCode` devrait être `229`](https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode) et [`e.key` devrait être `"Unidentified"`](https://www.w3.org/TR/uievents-key/#key-attr-values).
Copy file name to clipboardExpand all lines: 9-regular-expressions/08-regexp-character-sets-and-ranges/article.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -90,7 +90,7 @@ Cet ensemble est bien sûr encore modifiable : on peut y ajouter ou retirer des
90
90
```warn header="Les propriétés Unicode ne sont pas supportées par IE"
91
91
Les propriétés Unicode `pattern:p{…}` ne sont pas implémentées dans IE. Si nous en avons vraiment besoin, nous pouvons utiliser la librairie [XRegExp](https://xregexp.com/).
92
92
93
-
Ou simplement utiliser des intervalles de caractères dans la langue qui nous intéresse, p. ex. `pattern:[а-я]` pour les lettres cyrilliques.
93
+
Ou simplement utiliser des intervalles de caractères dans la langue qui nous intéresse, p. ex. `pattern:[а-я]` pour les lettres cyrilliques.
0 commit comments