Skip to content

Commit

Permalink
fr: Format /web/javascript using Prettier (part 1)
Browse files Browse the repository at this point in the history
  • Loading branch information
@queengooborg
queengooborg committed Jul 27, 2023
1 parent 48bc9e2 commit 2ccc8a5
Show file tree
Hide file tree
Showing 100 changed files with 1,828 additions and 1,637 deletions.
155 changes: 78 additions & 77 deletions files/fr/web/javascript/closures/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@ Dans l'exemple suivant :
```js
function init() {
var nom = "Mozilla"; // nom est une variable locale de init
function afficheNom() { // afficheNom est une fonction interne de init
function afficheNom() {
// afficheNom est une fonction interne de init
console.log(nom); // ici nom est une variable libre (définie dans la fonction parente)
}
afficheNom();
};
}
init();
```

Expand Down Expand Up @@ -48,21 +49,21 @@ Ce code produit le même résultat que l'appel à `init()` étudié précédemme

Le code continue à fonctionner, ce qui peut paraître contre-intuitif au regard de la syntaxe utilisée. Usuellement, les variables locales d'une fonction n'existent que pendant l'exécution d'une fonction. Une fois que `creerFonction()` a fini son exécution, on aurait pu penser que la variable `nom` n'est plus accessible. Cependant, le code fonctionne : en JavaScript, la variable est donc accessible d'une certaine façon.

L'explication est la suivante : `maFonction` est une fermeture. La fermeture combine la fonction `afficheNom` et son environnement. Cet environnement est composé de toutes les variables locales accessibles (dans la portée) à la création de la fermeture. Ici `maFonction` est une fermeture qui contient la fonction `afficheNom` et une référence à la variable `var nom = "Mozilla"` qui existait lorsque la fermeture a été créée. L'instance de `afficheNom` conserve une référence à son environnement lexical, dans lequel `nom` existe. Pour cette raison, lorsque `maFonction` est invoquée, la variable `nom` reste disponible et "Mozilla" est transmis à `console.log`.
L'explication est la suivante : `maFonction` est une fermeture. La fermeture combine la fonction `afficheNom` et son environnement. Cet environnement est composé de toutes les variables locales accessibles (dans la portée) à la création de la fermeture. Ici `maFonction` est une fermeture qui contient la fonction `afficheNom` et une référence à la variable `var nom = "Mozilla"` qui existait lorsque la fermeture a été créée. L'instance de `afficheNom` conserve une référence à son environnement lexical, dans lequel `nom` existe. Pour cette raison, lorsque `maFonction` est invoquée, la variable `nom` reste disponible et "Mozilla" est transmis à `console.log`.

Voici un exemple un peu plus intéressant, une fonction `ajouterA` :

```js
function ajouterA(x) {
return function(y) {
return function (y) {
return x + y;
};
};
}

var ajouter_5 = ajouterA(5);
var ajouter_10 = ajouterA(10);

console.log(ajouter_5(2)); // 7
console.log(ajouter_5(2)); // 7
console.log(ajouter_10(2)); // 12
```

Expand Down Expand Up @@ -100,10 +101,10 @@ Voici le code JavaScript qui correspond :

```js
function fabriqueRedimensionneur(taille) {
return function() {
document.body.style.fontSize = taille + 'px';
return function () {
document.body.style.fontSize = taille + "px";
};
};
}

var taille12 = fabriqueRedimensionneur(12);
var taille14 = fabriqueRedimensionneur(14);
Expand All @@ -113,9 +114,9 @@ var taille16 = fabriqueRedimensionneur(16);
`taille12`, `taille14`, et `taille16` sont désormais des fermetures qui peuvent, respectivement, redimensionner le texte de l'élément `body` à 12, 14, ou 16 pixels. On peut les attacher aux boutons de la façon suivantes :

```js
document.getElementById('taille-12').onclick = taille12;
document.getElementById('taille-14').onclick = taille14;
document.getElementById('taille-16').onclick = taille16;
document.getElementById("taille-12").onclick = taille12;
document.getElementById("taille-14").onclick = taille14;
document.getElementById("taille-16").onclick = taille16;
```

```html
Expand All @@ -135,21 +136,21 @@ JavaScript ne permet pas de faire cela de façon native. En revanche, on peut é
Voici comment définir une fonction publique accédant à des fonctions et des variables privées en utilisant des fermetures. Cette façon de procéder est également connue comme le patron de conception [module](https://en.wikipedia.org/wiki/Module_pattern) :

```js
var compteur = (function() {
var compteur = (function () {
var compteurPrive = 0;
function changeValeur(val) {
compteurPrive += val;
}
return {
increment: function() {
increment: function () {
changeValeur(1);
},
decrement: function() {
decrement: function () {
changeValeur(-1);
},
valeur: function() {
valeur: function () {
return compteurPrive;
}
},
};
})();

Expand All @@ -172,21 +173,21 @@ Ces trois fonctions publiques sont des fermetures qui partagent le même environ
On remarquera qu'on définit une fonction anonyme qui crée un compteur puis qu'on l'appelle immédiatement pour assigner le résultat à la variable `compteur`. On pourrait stocker cette fonction dans une variable puis l'appeler plusieurs fois afin de créer plusieurs compteurs.

```js
var creerCompteur = function() {
var creerCompteur = function () {
var compteurPrive = 0;
function changeValeur(val) {
compteurPrive += val;
}
return {
increment: function() {
increment: function () {
changeValeur(1);
},
decrement: function() {
decrement: function () {
changeValeur(-1);
},
valeur: function() {
valeur: function () {
return compteurPrive;
}
},
};
};

Expand Down Expand Up @@ -221,16 +222,16 @@ On peut oublier parfois, dans le cas de fonctions imbriquées, qu'une fonction a
```js
// Portée globale
var e = 10;
function somme(a){
return function(b){
return function(c){
function somme(a) {
return function (b) {
return function (c) {
// Portée des autres fonctions (externes)
return function(d){
return function (d) {
// Portée locale
return a + b + c + d + e;
}
}
}
};
};
};
}

console.log(somme(1)(2)(3)(4)); // affiche 20
Expand All @@ -239,23 +240,23 @@ console.log(somme(1)(2)(3)(4)); // affiche 20

// Portée globale
var e = 10;
function somme(a){
return function somme2(b){
return function somme3(c){
function somme(a) {
return function somme2(b) {
return function somme3(c) {
// Portée des autres fonctions
return function somme4(d){
return function somme4(d) {
// Portée locale
return a + b + c + d + e;
}
}
}
};
};
};
}

var somme2 = somme(1);
var somme3 = somme2(2);
var somme4 = somme3(3);
var resultat = somme4(4);
console.log(resultat) // affiche 20
console.log(resultat); // affiche 20
```

Dans l'exemple qui précède, on a une suite de fonctions imbriquées dont chacune accède à la portée des fonctions extérieures. Dans ce contexte, on peut dire que les fermetures ont accès à _l'ensemble_ des portées des fonctions extérieures.
Expand All @@ -266,28 +267,28 @@ Avant que le mot clé [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let)

```html
<p id="aide">Des aides seront affichées ici</p>
<p>E-mail&nbsp;: <input type="text" id="email" name="email"></p>
<p>Nom&nbsp;: <input type="text" id="nom" name="nom"></p>
<p>Âge&nbsp;: <input type="text" id="âge" name="âge"></p>
<p>E-mail&nbsp;: <input type="text" id="email" name="email" /></p>
<p>Nom&nbsp;: <input type="text" id="nom" name="nom" /></p>
<p>Âge&nbsp;: <input type="text" id="âge" name="âge" /></p>
```

```js
function afficherAide(aide) {
document.getElementById('aide').innerHTML = aide;
document.getElementById("aide").innerHTML = aide;
}

function preparerAide() {
var texteAide = [
{'id': 'email', 'aide': 'Votre adresse e-mail'},
{'id': 'nom', 'aide': 'Vos prénom et nom'},
{'id': 'âge', 'aide': 'Votre âge (plus de 16 ans requis)'}
];
{ id: "email", aide: "Votre adresse e-mail" },
{ id: "nom", aide: "Vos prénom et nom" },
{ id: "âge", aide: "Votre âge (plus de 16 ans requis)" },
];

for (var i = 0; i < texteAide.length; i++) {
var item = texteAide[i];
document.getElementById(item.id).onfocus = function() {
document.getElementById(item.id).onfocus = function () {
afficherAide(item.aide);
}
};
}
}

Expand All @@ -304,21 +305,21 @@ Une solution consiste à utiliser plus de fermetures et à appliquer une fabriqu

```js
function afficheAide(aide) {
document.getElementById('aide').innerHTML = aide;
document.getElementById("aide").innerHTML = aide;
}

function creerCallbackAide(aide) {
return function() {
return function () {
afficheAide(aide);
};
}

function prepareAide() {
var texteAide = [
{'id': 'email', 'aide': 'Votre adresse e-mail'},
{'id': 'nom', 'aide': 'Votre prénom et nom'},
{'id': 'âge', 'aide': 'Your age (you must be over 16)'}
];
{ id: "email", aide: "Votre adresse e-mail" },
{ id: "nom", aide: "Votre prénom et nom" },
{ id: "âge", aide: "Your age (you must be over 16)" },
];

for (var i = 0; i < texteAide.length; i++) {
var item = texteAide[i];
Expand All @@ -333,21 +334,21 @@ Voici une autre solution qui permet de ne pas utiliser plus de fermetures&nbsp;:

```js
function afficheAide(aide) {
document.getElementById('aide').innerHTML = aide;
document.getElementById("aide").innerHTML = aide;
}

function prepareAide() {
var texteAide = [
{'id': 'email', 'aide': 'Votre adresse e-mail'},
{'id': 'nom', 'aide': 'Votre prénom et nom'},
{'id': 'âge', 'aide': 'Votre âge (vous devez être majeur)'}
];
{ id: "email", aide: "Votre adresse e-mail" },
{ id: "nom", aide: "Votre prénom et nom" },
{ id: "âge", aide: "Votre âge (vous devez être majeur)" },
];

for (var i = 0; i < texteAide.length; i++) {
let item = texteAide[i];
document.getElementById(item.id).onfocus = function() {
document.getElementById(item.id).onfocus = function () {
afficheAide(item.aide);
}
};
}
}

Expand All @@ -362,20 +363,20 @@ Autrement, on aurait pu utiliser `forEach()` afin de parcourir le tableau `texte

```js
function afficheAide(aide) {
document.getElementById('aide').innerHTML = aide;
document.getElementById("aide").innerHTML = aide;
}

function prepareAide() {
var texteAide = [
{'id': 'email', 'aide': 'Votre adresse e-mail'},
{'id': 'nom', 'aide': 'Votre prénom et nom'},
{'id': 'âge', 'aide': 'Votre âge (vous devez être majeur)'}
];

texteAide.forEach(function(texte) {
document.getElementById(texte.id).onfocus = function() {
afficheAide(texte.help);
}
{ id: "email", aide: "Votre adresse e-mail" },
{ id: "nom", aide: "Votre prénom et nom" },
{ id: "âge", aide: "Votre âge (vous devez être majeur)" },
];

texteAide.forEach(function (texte) {
document.getElementById(texte.id).onfocus = function () {
afficheAide(texte.help);
};
});
}

Expand All @@ -394,11 +395,11 @@ Voici un exemple de la mauvaise façon de procéder&nbsp;:
function MonObjet(nom, message) {
this.nom = nom.toString();
this.message = message.toString();
this.getNom = function() {
this.getNom = function () {
return this.nom;
};

this.getMessage = function() {
this.getMessage = function () {
return this.message;
};
}
Expand All @@ -412,12 +413,12 @@ function MonObjet(nom, message) {
this.message = message.toString();
}
MonObjet.prototype = {
getNom: function() {
getNom: function () {
return this.nom;
},
getMessage: function() {
getMessage: function () {
return this.message;
}
},
};
```

Expand All @@ -428,10 +429,10 @@ function MonObjet(nom, message) {
this.nom = nom.toString();
this.message = message.toString();
}
MonObjet.prototype.getNom = function() {
MonObjet.prototype.getNom = function () {
return this.nom;
};
MonObjet.prototype.getMessage = function() {
MonObjet.prototype.getMessage = function () {
return this.message;
};
```
Expand Down
11 changes: 6 additions & 5 deletions files/fr/web/javascript/data_structures/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,17 @@ Les langages de programmation disposent de structures de données natives. Selon
JavaScript est un langage dont le typage est _faible_ et _dynamique_. Cela signifie qu'il n'est pas nécessaire de déclarer le type d'une variable avant de l'utiliser. Le type de la variable sera automatiquement déterminé lorsque le programme sera exécuté. Cela signifie également que la même variable pourra avoir différents types au cours de son existence&nbsp;:

```js
let toto = 42; // toto est un nombre
toto = 'truc'; // toto est désormais une chaîne de caractères
toto = true; // toto est désormais un booléen
let toto = 42; // toto est un nombre
toto = "truc"; // toto est désormais une chaîne de caractères
toto = true; // toto est désormais un booléen
```

## Les types de données JavaScript

L'ensemble des types disponible en JavaScript se compose [_des valeurs primitives_](#les_valeurs_primitives) et [_des objets_](#les_objects).

- [Les valeurs primitives](#les_valeurs_primitives) (des données immuables, représentées au niveau le plus bas du langage)

- [Le type booléen](#le_type_booléen)
- [Le type nul](#le_type_nul)
- [Le type indéfini](#le_type_indéfini)
Expand Down Expand Up @@ -145,7 +146,7 @@ En JavaScript, les objets peuvent être considérés comme des collections de pr

Il existe deux types de propriétés qui ont certains attributs&nbsp;: des [propriétés de _données_](#propriétés_de_données) (<i lang="en">data property</i>) et des [propriétés d'_accesseur_](#propriétés_daccesseur).

> **Note :** Chaque propriété est décrite par des *attributs* correspondants. Ceux-ci sont utilisés par le moteur JavaScript et ne peuvent pas être manipulés depuis le code. Pour les identifier, les attributs sont indiqués entre double crochets.
> **Note :** Chaque propriété est décrite par des _attributs_ correspondants. Ceux-ci sont utilisés par le moteur JavaScript et ne peuvent pas être manipulés depuis le code. Pour les identifier, les attributs sont indiqués entre double crochets.
>
> Voir la page [`Object.defineProperty()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) pour en savoir plus.
Expand Down Expand Up @@ -219,7 +220,7 @@ Elles possèdent les attributs suivants&nbsp;:
| ------------------ | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- |
| `[[Get]]` | Un objet `Function` ou `undefined` | La fonction qui est appelée sans argument afin de récupérer la valeur de la propriété quand on souhaite y accéder. Voir aussi la page sur [`get`](/fr/docs/Web/JavaScript/Reference/Functions/get). | `undefined` |
| `[[Set]]` | Un objet `Function` ou `undefined` | La fonction, appelée avec un argument qui contient la valeur qu'on souhaite affecter à la valeur et qui est exécutée à chaque fois qu'on souhaite modifier la valeur. Voir aussi la page sur [`set`](/fr/docs/Web/JavaScript/Reference/Functions/set). | `undefined` |
| `[[Enumerable]]` | Booléen | S'il vaut `true`, la propriété sera listée dans les boucles [`for…in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in). | `false` |
| `[[Enumerable]]` | Booléen | S'il vaut `true`, la propriété sera listée dans les boucles [`for…in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in). | `false` |
| `[[Configurable]]` | Booléen | S'il vaut `false`, la propriété ne pourra pas être supprimée et ne pourra pas être transformée en une propriété de données. | `false` |

### Les objets «&nbsp;normaux&nbsp;» et les fonctions
Expand Down
Loading

0 comments on commit 2ccc8a5

Please sign in to comment.