◐ Shell
reader mode source ↗
Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
File filter
Conversations
Jump to
Diff view
Apply and reload
Show whitespace
Diff view
Apply and reload
5 changes: 5 additions & 0 deletions 1-js/01-getting-started/1-intro/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,12 @@ Les exemples de telles restrictions sont :

- Différents onglets / fenêtres ne se connaissent généralement pas. Parfois, ils se croisent, par exemple lorsqu'une fenêtre utilise JavaScript pour ouvrir l'autre. Mais même dans ce cas, le JavaScript d'une page ne peut pas accéder à l'autre si elle provient de sites différents (provenant d'un autre domaine, protocole ou port).

C'est ce qu'on appelle la "politique de même origine" (“Same Origin Policy”). Pour contourner cette sécurité, _les deux pages_ doivent se mettre d'accord et contenir un code JavaScript spécial qui gère l'échange de données. Nous verrons cela plus loin dans ce tutoriel.

Cette limitation concerne également la sécurité de l'utilisateur. Une page de `http://autresite.com` qu'un utilisateur a ouvert ne doit pas pouvoir accéder à un autre onglet du navigateur avec l'URL `http://gmail.com` et y voler des informations.

Expand Down
6 changes: 5 additions & 1 deletion 1-js/01-getting-started/4-devtools/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Les outils de développement s'ouvriront sous l'onglet Console par défaut.

Cela ressemble un peu à ceci :

![chrome](chrome.png)

L'aspect exact des outils de développement dépend de votre version de Chrome. Cela change de temps en temps, mais devrait être similaire.

@@ -51,7 +51,11 @@ Leur apparence est assez similaire. Une fois que vous savez comment utiliser l'u

Safari (navigateur Mac, non pris en charge par Windows / Linux) est un peu spécial ici. Nous devons d'abord activer le menu "Développement".

Ouvrez les préférences et accédez au volet "Avancé". Il y a une case à cocher en bas :

![safari](safari.png)

Expand Down
Binary file added 1-js/01-getting-started/4-devtools/chrome.webp
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 1-js/01-getting-started/4-devtools/chrome@2.webp
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed 1-js/01-getting-started/4-devtools/chrome@2x.png
Binary file not shown.
Binary file modified 1-js/01-getting-started/4-devtools/safari@2x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 52 additions & 0 deletions 1-js/02-first-steps/04-variables/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,16 +88,26 @@ Dans les anciens scripts, vous pouvez également trouver un autre mot-clé : `v
*!*var*/!* message = 'Hello';
```

Le mot-clé `var` est *presque* identique à `let`. Il déclare également une variable, mais d'une manière légèrement différente, à la mode "old school".

Il y a des différences subtiles entre `let` et `var`, mais elles n'ont pas encore d'importance pour nous. Nous les couvrirons en détails plus tard, dans le chapitre <info:var>.
````

## Une analogie avec la vie réelle

Nous pouvons facilement saisir le concept d'une "variable" si nous l'imaginons comme une "boîte" pour les données, avec un autocollant portant un nom unique.

Par exemple, la variable message peut être imaginée comme une boîte étiquetée "message" avec la valeur "Hello!" à l'intérieur :

![](variable.svg)

Expand Down Expand Up @@ -172,7 +182,11 @@ let userName;
let test123;
```

Lorsque le nom contient plusieurs mots, le [camelCase](https://fr.wikipedia.org/wiki/Camel_case) est couramment utilisé. C'est-à-dire que les mots se succèdent, chaque mot à l'exception du premier commence par une majuscule : `monTresLongNom`.

Ce qui est intéressant -- le signe dollar `'$'` et l'underscore `'_'` peuvent également être utilisé dans les noms. Ce sont des symboles réguliers, tout comme les lettres, sans aucune signification particulière.

Expand All @@ -197,16 +211,25 @@ let mon-nom; // un trait d'union '-' n'est pas autorisé dans le nom
Des variables nommées `apple` et `APPLE` sont deux variables différentes.
```

````smart header="Les lettres non latines sont autorisées mais non recommandées"
Il est possible d'utiliser n'importe quelle langue, y compris les lettres cyrilliques, les logogrammes chinois, etc., comme ceci :

```js
let имя = '...';
let 我 = '...';
```

Techniquement, il n'y a pas d'erreur ici, ces noms sont autorisés, mais il existe une convention internationale d'utiliser l'anglais dans les noms de variables. Même si nous écrivons un petit script, sa vie peut être longue. Les personnes d'autres pays peuvent avoir besoin de les lire quelque temps.

````

````warn header="Noms réservés"
Expand Down Expand Up @@ -262,10 +285,18 @@ const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // erreur, ne peut pas réaffecter la constante !
```

Lorsqu'un programmeur est certain que la variable ne doit jamais changer, il peut utiliser `const` pour le garantir et également le montrer clairement à tout le monde.


### Les constantes en majuscules

Il existe une pratique répandue d’utiliser des constantes comme alias pour des valeurs difficiles à mémoriser, qui sont connues avant leur exécution.

Expand All @@ -292,15 +323,23 @@ Bénéfices:

Quand devrions-nous utiliser les majuscules pour une constante et quand devrions-nous les nommer normalement ? Soyons clairs.

Être une "constante" signifie simplement que la valeur ne change jamais. Mais il existe des constantes connues avant l'exécution (comme une valeur hexadécimale pour le rouge), et il y a celles qui sont *calculées* en temps réel, pendant l'exécution, mais ne changent pas après l'affectation.

Par exemple :

```js
const pageLoadTime = /* temps pris par une page Web pour charger */;
```

La valeur de `pageLoadTime` n’est pas connue avant le chargement de la page, elle est donc nommée normalement. Mais cela reste une constante, car elle ne change pas après l’affectation.

En d'autres termes, les constantes nommées en majuscules ne sont utilisées que comme alias pour les valeurs "codées en dur".

Expand All @@ -310,18 +349,31 @@ En parlant de variables, il y a une autre chose extrêmement importante.

Un nom de variable doit avoir une signification claire et évidente, décrivant les données qu'elle stocke.

Le nommage de variables est l’une des compétences les plus importantes et les plus complexes de la programmation. Un rapide coup d’œil sur les noms de variables peut révéler quel code est écrit par un débutant et par un développeur expérimenté.

Dans un projet réel, la majeure partie du temps est consacrée à la modification et à l'extension de la base de code existant, plutôt que d'écrire quelque chose de complètement séparé de zéro. Et lorsque nous revenons au code après un certain temps, il est beaucoup plus facile de trouver des informations bien étiquetées. Ou, en d'autres termes, lorsque les variables ont de bons noms.

Veuillez prendre le temps de réfléchir à un nom pertinent pour une variable avant de la déclarer. Cela vous facilitera énormément la vie.

Voici quelques règles à suivre :

- Utilisez des noms lisibles par des humains comme `userName` ou `shoppingCart`.
- Restez à l’écart des abréviations ou des noms courts tels que `a`, `b`, `c`, à moins que vous ne sachiez vraiment ce que vous faites.
- Faire en sorte que le nom soit le plus descriptif et concis possible. Des exemples de noms incorrects sont `data` et `value`. Un tel nom ne dit rien. C’est tout à fait acceptable de les utiliser si le contexte dans lequel les données ou les valeurs sont impliquées est particulièrement évident.
- S'accorder avec son équipe (et soi-même) sur les termes utilisés. Si un visiteur du site est appelé un "utilisateur", nous devrions nommer les variables connexes comme `currentUser` ou `newUser`, mais non `currentVisitor` ou encore `newManInTown`.

Cela semble simple ? En effet, ça l'est, mais la création de noms descriptifs et concis dans la pratique ne l'est pas. Fonce.

Expand Down
4 changes: 4 additions & 0 deletions 1-js/02-first-steps/08-operators/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,11 @@ alert( c ); // 4

Les affectations en chaîne sont évaluées de droite à gauche. D'abord, l'expression la plus à droite `2 + 2` est évaluée puis assignée aux variables de gauche : `c`, `b` et `a`. À la fin, toutes les variables partagent une seule valeur.

Encore une fois, pour des raisons de lisibilité, il est préférable de diviser ce code en quelques lignes :

```js
c = 2 + 2;
Expand Down
8 changes: 8 additions & 0 deletions 1-js/02-first-steps/09-comparison/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -208,10 +208,18 @@ Il suffit de traiter toute comparaison avec `null`/`undefined` (à l'exception d

N'utilisez pas de comparaisons `=>`, `>`, `<`, `<=` avec une variable qui peut être `null`/`undefined`, sauf si vous êtes vraiment sûr de ce que vous faites. Si une variable peut avoir de telles valeurs, vérifiez-les séparément.

## Résumé

- Les opérateurs de comparaison renvoient une valeur logique.
- Les chaînes de caractères sont comparées lettre par lettre dans l'ordre "dictionnaire".
- Lorsque des valeurs de différents types sont comparées, elles sont converties en nombres (à l'exclusion d'un contrôle d'égalité strict).
- Les valeurs `null` et `undefined` sont égales (`==`) et ne correspondent à aucune autre valeur.
- Soyez prudent lorsque vous utilisez des comparaisons telles que `>` ou `<` avec des variables pouvant parfois être `null`/`undefined`. Faire une vérification séparée pour `null`/`undefined` est une bonne idée.
2 changes: 1 addition & 1 deletion 1-js/02-first-steps/16-function-expressions/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ let sayHi = function() { // (1) create
alert( "Hello" );
};

let func = sayHi;
// ...
```

Expand Down
16 changes: 16 additions & 0 deletions 1-js/03-code-quality/02-coding-style/1-style-errors/solution.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
Vous pouvez noter ce qui suit :

```js no-beautify
function pow(x,n) // <- pas d'espace entre les arguments
{ // <- accolade sur une ligne séparée
let result=1; // <- pas d'espaces des deux côtés de =
Expand All @@ -15,6 +16,21 @@ let x=prompt("x?",''), n=prompt("n?",'') // <-- techniquement possible,
if (n<=0) // <- pas d'espaces à l'intérieur (n <= 0), et devrait être une ligne supplémentaire au-dessus
{ // <- accolade sur une ligne séparée
// ci-dessous - une longue ligne, peut être utile de la scinder en 2 lignes
alert(`Power ${n} is not supported, please enter an integer number greater than zero`);
}
else // <- pourrait l'écrire sur une seule ligne comme "} else {"
Expand Down
Loading
Toggle all file notes Toggle all file annotations