From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../instructions/async_function/index.html | 271 --------------- .../reference/instructions/bloc/index.html | 148 -------- .../reference/instructions/break/index.html | 156 --------- .../reference/instructions/class/index.html | 114 ------- .../reference/instructions/const/index.html | 144 -------- .../reference/instructions/continue/index.html | 163 --------- .../reference/instructions/debugger/index.html | 79 ----- .../reference/instructions/default/index.html | 124 ------- .../reference/instructions/do...while/index.html | 91 ----- .../reference/instructions/export/index.html | 182 ---------- .../instructions/for-await...of/index.html | 142 -------- .../reference/instructions/for...in/index.html | 159 --------- .../reference/instructions/for...of/index.html | 316 ------------------ .../reference/instructions/for/index.html | 148 -------- .../reference/instructions/function/index.html | 179 ---------- .../instructions/function_star_/index.html | 248 -------------- .../reference/instructions/if...else/index.html | 174 ---------- .../reference/instructions/import.meta/index.html | 70 ---- .../reference/instructions/import/index.html | 242 -------------- .../javascript/reference/instructions/index.html | 155 --------- .../reference/instructions/label/index.html | 206 ------------ .../reference/instructions/let/index.html | 371 --------------------- .../reference/instructions/return/index.html | 169 ---------- .../reference/instructions/switch/index.html | 317 ------------------ .../reference/instructions/throw/index.html | 201 ----------- .../reference/instructions/try...catch/index.html | 306 ----------------- .../reference/instructions/var/index.html | 223 ------------- .../reference/instructions/vide/index.html | 108 ------ .../reference/instructions/while/index.html | 102 ------ .../reference/instructions/with/index.html | 135 -------- 30 files changed, 5443 deletions(-) delete mode 100644 files/fr/web/javascript/reference/instructions/async_function/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/bloc/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/break/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/class/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/const/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/continue/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/debugger/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/default/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/do...while/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/export/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/for-await...of/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/for...in/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/for...of/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/for/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/function/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/function_star_/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/if...else/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/import.meta/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/import/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/label/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/let/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/return/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/switch/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/throw/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/try...catch/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/var/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/vide/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/while/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/with/index.html (limited to 'files/fr/web/javascript/reference/instructions') diff --git a/files/fr/web/javascript/reference/instructions/async_function/index.html b/files/fr/web/javascript/reference/instructions/async_function/index.html deleted file mode 100644 index 45c7f441b8..0000000000 --- a/files/fr/web/javascript/reference/instructions/async_function/index.html +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: async function -slug: Web/JavaScript/Reference/Instructions/async_function -tags: - - Experimental - - Function - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/async_function ---- -
{{jsSidebar("Statements")}}
- -

La déclaration async function définit une fonction asynchrone qui renvoie un objet {{jsxref("Objets_globaux/AsyncFunction","AsyncFunction")}}. Une fonction asynchrone est une fonction qui s'exécute de façon asynchrone grâce à la boucle d'évènement en utilisant une promesse ({{jsxref("Promise")}}) comme valeur de retour.

- -
-

On peut également définir des fonctions asynchrones grâce au constructeur {{jsxref("AsyncFunction")}} et via une {{jsxref("Opérateurs/async_function", "expression de fonction asynchrone","",1)}}.

-
- -
{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}
- - - -

Syntaxe

- -
async function name([param[, param[, ... param]]]) {
-   instructions
-}
-
- -

Paramètres

- -
-
name
-
Le nom de la fonction.
-
- -
-
param
-
Le nom d'un argument à passer à la fonction.
-
- -
-
instructions
-
Les instructions qui composent le corps de la fonction.
-
- -

Valeur de retour

- -

Une promesse ({{jsxref("Promise")}}) qui sera résolue avec la valeur renvoyée par la fonction asynchrone ou qui sera rompue s'il y a une exception non interceptée émise depuis la fonction asynchrone.

- -

Description

- -

Une fonction async peut contenir une expression {{jsxref("Opérateurs/await", "await")}} qui interrompt l'exécution de la fonction asynchrone et attend la résolution de la promesse passée Promise. La fonction asynchrone reprend ensuite puis renvoie la valeur de résolution.
-
- Le mot-clé await est uniquement valide au sein des fonctions asynchrones. Si ce mot-clé est utilisé en dehors du corps d'une fonction asynchrone, cela provoquera une exception {{jsxref("SyntaxError")}}.

- -
-

Note : Lorsqu'une fonction aysnchrone est mise en pause, la fonction appelante continue son exécution (car elle a reçu la promesse implicite renvoyée par la fonction async).

-
- -
-

Note : Le but des fonctions async/await est de simplifier l'utilisation synchrone des promesses et d'opérer sur des groupes de promesses. De la même façon que les promesses sont semblables à des callbacks structurés, async/await est semblable à la combinaison des générateurs et des promesses.

-
- -

Exemples

- -

Exemple simple

- -
var resolveAfter2Seconds = function() {
-  console.log("Initialisation de la promesse lente");
-  return new Promise(resolve => {
-    setTimeout(function() {
-      resolve("lente");
-      console.log("La promesse lente est terminée");
-    }, 2000);
-  });
-};
-
-var resolveAfter1Second = function() {
-  console.log("Initialisation de la promesse rapide");
-  return new Promise(resolve => {
-    setTimeout(function() {
-      resolve("rapide");
-      console.log("La promesse rapide est terminée");
-    }, 1000);
-  });
-};
-
-var sequentialStart = async function() {
-  console.log('==Début séquentiel==');
-
-  // 1. L'exécution atteint ce point quasi-instantanément
-  const lente = await resolveAfter2Seconds();
-  console.log(lente); // 2. cela s'exécute 2s après 1.
-
-  const rapide = await resolveAfter1Second();
-  console.log(rapide); // 3. cela s'exécute 3s après 1.
-}
-
-var concurrentStart = async function() {
-  console.log('==Début concurrentiel avec await==');
-  const lente = resolveAfter2Seconds(); // le minuteur démarre immédiatement
-  const rapide = resolveAfter1Second();  // le minuteur démarre immédiatement
-
-  // 1. L'exécution atteint ce point quasi-instantanément
-  console.log(await lente); // 2. s'exécute 2s après 1.
-  console.log(await rapide); // 3. s'exécute 2s après 1., immédiatement après 2.,
-                             // car "rapide" est déjà résolue
-}
-
-var concurrentPromise = function() {
-  console.log('==Début concurrentiel avec Promise.all==');
-  return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => {
-    console.log(messages[0]); // lente
-    console.log(messages[1]); // rapide
-  });
-}
-
-var parallel = async function() {
-  console.log('==Exécution parallèle avec await Promise.all==');
-
-  // Démarre 2 tâches en parallèle et on attend que les deux soient finies
-  await Promise.all([
-      (async()=>console.log(await resolveAfter2Seconds()))(),
-      (async()=>console.log(await resolveAfter1Second()))()
-  ]);
-}
-
-// Cette fonction ne gère pas les erreurs
-// voir les avertissement ci-après !
-var parallelPromise = function() {
-  console.log('==Exécution parallèle avec Promise.then==');
-  resolveAfter2Seconds().then((message)=>console.log(message));
-  resolveAfter1Second().then((message)=>console.log(message));
-}
-
-sequentialStart(); // après 2 secondes, "lente" est affichée, après une
-                   // autre seconde, c'est "rapide" qui est affichée
-
-// on attend que l'étape précédente soit terminée
-setTimeout(concurrentStart, 4000); // 2s avant d'afficher "lente" puis "rapide"
-
-// on attend à nouveau
-setTimeout(concurrentPromise, 7000); // identique à concurrentStart
-
-// on attend à nouveau
-setTimeout(parallel, 10000); // réellement parallele : après 1 seconde,
-                             // affiche "rapide" et après une autre seconde
-                             // affiche "lente"
-
-// on attend à nouveau
-setTimeout(parallelPromise, 13000); // identique à parallel
-
- -
-

await et l'exécution parallèle

- -

Dans sequentialStart, l'exécution est arrêtée pendant deux secondes avant le premier await puis encore une autre seconde avant le deuxième await. Le deuxième minuteur n'est pas créé tant que le premier n'est pas écoulé. Le code s'exécute donc au moins en 3 secondes.

- -

Avec concurrentStart, les deux minuteurs sont créés puis attendus derrière un await Les minuteurs sont exécutés de façon concurrente. L'ensemble du code se termine donc en au moins 2 secondes plutôt qu'en 3 secondes.
- Toutefois, les appels utilisant  await sont exécutés séquentiellement et la deuxième instruction avec await attendra que la première ait été  traitée. Le minuteur le plus rapide est donc créé juste après le premier.

- -

Si on souhaite avoir deux tâches qui s'exécutent réellement en parallèle, on pourra utiliser  await Promise.all([job1(), job2()]) comme illustré ci-avant avec parallel.

-
- -
-

async/await, Promise.prototype.then() et la gestion des erreurs

- -

La plupart des fonctions asynchrones peuvent être écrites avec des promesses. Toutefois, les fonctions asynchrones qui utilisent async se prêtent mieux à la gestion des erreurs.

- -

concurrentStart et concurrentPromise sont fonctionnellement équivalentes.
- Avec concurrentStart, si l'un des deux appels échoue, l'exception sera immédiatement interceptée et l'exécution de la fonction asynchrone sera interrompue. L'erreur sera propagée à la fonction appelante via la valeur de retour qui est une promesse implicite.
- Pour obtenir les mêmes sécurités avec les promesses, il faut s'assurer que la fonction renvoie une promesse qui gère ce cas d'échec. Pour concurrentPromise cela signifie qu'il faut renvoyer la promesse de Promise.all([]).then().

- -

Bien entendu, il est toutefois possible d'avoir des fonctions asynchrones (avec async) qui gobent des erreurs involontairement. Si on considère la fonction parallel ci-avant, s'il n'y avait eu aucun await ou return pour le résultat de Promise.all([]), aucune erreur n'aurait été propagée.
- Bien que l'exemple parallelPromise paraisse simple, il ne gère aucune erreur du tout. Il aurait fallu utiliser un return Promise.all([]) analogue.

-
- -

Réécrire une chaîne de promesses avec une fonction asynchrone

- -

Lorsqu'on utilise une API qui renvoie des promesses ({{jsxref("Promise")}}), on construit une chaîne de promesses et on divise la fonction en de nombreuses branches :

- -
function getProcessedData(url) {
-  return downloadData(url) // renvoie une promesse
-    .catch(e => {
-      return downloadFallbackData(url);  // renvoie une promesse
-    })
-    .then(v => {
-      return processDataInWorker(v); // renvoie une promesse
-    });
-}
-
- -

Cela peut être réécrit avec une seule fonction asynchrone, de la façon suivante :

- -
async function getProcessedData(url) {
-  let v;
-  try {
-    v = await downloadData(url);
-  } catch(e) {
-    v = await downloadFallbackData(url);
-  }
-  return processDataInWorker(v);
-}
-
- -

On voit dans l'exemple précédent qu'il n'y a pas de await pour l'instruction return car la valeur de retour d'une fonction asynchrone est implicitement enveloppée dans un appel à {{jsxref("Promise.resolve")}}.

- -

Différences entre return et return await

- -

La conversion automatique des valeurs en promesses avec {{jsxref("Promise.resolve")}} ne signifie pas que return await valeurPromesse sera équivalent à return valeurPromesse.

- -

Si on reprend l'exemple précédent et qu'on le réécrit avec return await et qu'on intercepte une éventuelle erreur de la promesse :

- -
async function getProcessedData(url) {
-  let v;
-  try {
-     v = await downloadData(url);
-  } catch(e) {
-    v = await downloadFallbackData(url);
-  }
-  try {
-    return await processDataInWorker(v); // et non plus simplement return
-  } catch(e) {
-    return null;
-  }
-}
- -

Si on avait simplement écrit return processDataInWorker(v);, la promesse renvoyée par la fonction aurait déclenché une exception plutôt que d'être résolue avec la valeur null.

- -

Lorsqu'on utilise return toto;, la valeur toto sera immédiatement renvoyée (sans lever d'exception, quel que soit le cas), tandis que return await toto; attendra la résolution de toto ou son échec et lèvera une exception si besoin avant de parvenir à renvoyer une valeur.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}{{Spec2('ESDraft')}}
{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}{{Spec2('ES8')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.async_function")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/bloc/index.html b/files/fr/web/javascript/reference/instructions/bloc/index.html deleted file mode 100644 index 5ea869f037..0000000000 --- a/files/fr/web/javascript/reference/instructions/bloc/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: bloc -slug: Web/JavaScript/Reference/Instructions/bloc -tags: - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/block ---- -
{{jsSidebar("Statements")}}
- -

Une instruction de bloc est utilisée afin de grouper zéro ou plusieurs instructions. Le bloc est délimité par une paire d'accolades. On peut éventuellement « étiqueter » un bloc avec un label.

- -
{{EmbedInteractiveExample("pages/js/statement-block.html")}}
- - - -

Syntaxe

- -

Instruction de bloc

- -
{
-  instruction_1;
-  instruction_2;
-  ...
-  instruction_n;
-}
-
- -

Instruction de bloc étiquetée

- -
// ou, avec une étiquette :
-label {
-  instruction_1;
-  instruction_2;
-  instruction_n;
-}
-
- -
-
instruction_1, instruction_2, instruction_n
-
Les instructions qu'on souhaite regrouper au sein du bloc.
-
label {{optional_inline}}
-
Une étiquette qui permet une identification visuelle de la cible d'une instruction break.
-
- -

Description

- -

Cette instruction est le plus souvent utilisée avec les instructions de contrôle (ex. {{jsxref("Instructions/if...else")}}, {{jsxref("Instructions/for")}}, {{jsxref("Instructions/while")}}). On verra ainsi :

- -
while (x < 10) {
-  x++;
-}
-
- -

On peut voir dans cet exemple que cette instruction se termine sans point-virgule.

- -

L'instruction de bloc est souvent appelée instruction composée (compound statement) dans d'autres langages. En effet, elle permet d'utiliser plusieurs instructions là où JavaScript n'attend qu'une instruction. C'est une pratique courante que de combiner plusieurs instructions grâce aux blocs. À l'opposé, on peut utiliser une {{jsxref("Instructions/vide","instruction vide","",1)}} pour ne rien faire là où JavaScript attend une instruction.

- -

Gestion des portées

- -

Avec var

- -

Important : Le bloc n'introduit aucune portée pour les variables déclarées avec var ou pour les déclarations de fonction. Les variables introduites dans un bloc font partie de la portée de la fonction ou du script, elles persisteront donc en dehors du bloc. Autrement dit, aucune portée n'est introduite par les blocs. Bien qu'il soit tout à fait possible d'utiliser des blocs hors de tout contexte, il est fortement déconseillé de coder de cette façon. En effet, les blocs ne se comportent pas comme d'autres langages tels que C ou Java et il pourrait être surprenant de lire un tel code. Par exemple :

- -
var x = 1;
-{
-  var x = 2;
-}
-console.log(x); // affiche 2
-
- -

Cela affiche 2 dans la console car l'instruction var x au sein du bloc partage la même portée que l'instruction var x précédente en dehors du bloc. Un code C ou Java équivalent aurait produit 1.

- -

Avec let et const

- -

En revanche, les identifiants déclarés avec let et const appartiennent à la portée du bloc : 

- -
let x = 1;
-{
-  let x = 2;
-}
-console.log(x); // affiche 1
-
- -

On voit ici que l'instruction x = 2 est limitée à la portée du bloc dans laquelle elle est présente.

- -

On a le même résultat avec const.

- -
const c = 1;
-{
-  const c = 2;
-}
-console.log(c); // affiche 1, il n'y a pas de SyntaxError
-
- -

On notera que l'instruction const c = 2 ne lève pas d'exception SyntaxError car on a une seule déclaration de c pour ce bloc.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-block', 'instruction de bloc')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-block', 'instruction de bloc')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-12.1', 'instruction de bloc')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-12.1', 'instruction de bloc')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-12.1', 'instruction de bloc')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.block")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/break/index.html b/files/fr/web/javascript/reference/instructions/break/index.html deleted file mode 100644 index bc3a1c12df..0000000000 --- a/files/fr/web/javascript/reference/instructions/break/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: break -slug: Web/JavaScript/Reference/Instructions/break -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/break ---- -
{{jsSidebar("Statements")}}
- -

L'instruction break permet de terminer la boucle en cours ou l'instruction {{jsxref("Instructions/switch", "switch")}} ou {{jsxref("Instructions/label", "label")}} en cours et de passer le contrôle du programme à l'instruction suivant l'instruction terminée.

- -
{{EmbedInteractiveExample("pages/js/statement-break.html")}}
- - - -

Syntaxe

- -
break [label];
- -
-
label {{optional_inline}}
-
Un identifiant optionnel associé avec l'étiquette (label) de l'instruction. Si l'instruction à terminer n'est pas une boucle ou une instruction {{jsxref("Instructions/switch", "switch")}}, ce paramètre est nécessaire.
-
- -

Description

- -

L'instruction break peut être utilisée avec une étiquette (label) optionnelle qui permet d'interrompre une instruction étiquetée. L'instruction break doit être imbriquée au sein de l'instruction référencée. L'instruction étiquetée peut correspondre à n'importe quel instruction de {{jsxref("Instructions/bloc", "bloc","",1)}} ; il n'est pas nécessaire qu'elle soit précédée par une instruction de boucle.

- -

Une instruction break, suivie ou non d'une étiquette, ne peut pas être utilisée dans le corps d'une fonction appartenant elle-même à une boucle, à une instruction {{jsxref("Instructions/switch")}} ou à une instruction label.

- -

Exemples

- -

Exemple simple utilisant break

- -

La fonction qui suit utilise une instruction break qui interrompt la boucle {{jsxref("Instructions/while", "while")}} lorsque i vaut 3, grâce à l'instruction qui suit, la fonction renvoie 3 * x.

- -
function testBreak(x) {
-   var i = 0;
-
-   while (i < 6) {
-      if (i == 3) {
-         break;
-      }
-      i += 1;
-   }
-   return i * x;
-}
- -

Utiliser break avec les labels

- -

Dans le code suivant, on utilise les instructions break avec des blocs étiquetés. Une instruction break doit être présente à l'intérieur du bloc auquel elle fait référence. Ici, on voit que bloc_interne est compris dans bloc_externe.

- -
bloc_externe: {
-
-  bloc_interne: {
-    console.log ('1');
-    break bloc_externe;  // interrompt bloc_externe ET bloc_interne
-    console.log (':-('); // ignoré
-  }
-
-  console.log ('2');     // ignoré
-}
-
- -

Dans le code qui suit, on utilise également des instructions break avec des blocs étiquetés mais on obtient une exception SyntaxError car l'instruction break au sein de bloc_1 référence bloc_2, or bloc_1 n'est pas compris dans bloc_2 :

- -
bloc_1: {
-  console.log ('1');
-  break bloc_2;  // SyntaxError: label not found
-}
-
-bloc_2: {
-  console.log ('2');
-}
-
- -

Utiliser break dans des fonctions imbriquées dans des boucles

- -

Dans le cas d'une fonction imbriquée dans une boucle while :

- -
function testBreak(x){
-  var i = 0;
-  while (i < 6) {
-    if (i === 3) {
-      (function() {
-        break;
-      })();
-    }
-    i += 1;
-  }
-  return i * x;
-}
-
-testBreak(1); // SyntaxError: Illegal break statement
- -

Dans le cas d'une fonction imbriquée dans une instruction label :

- -
bloc_1: {
-  console.log('1');
-  (function() {
-    break bloc_1; // SyntaxError: Undefined label 'bloc_1'
-  })();
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Version non étiquetée.
{{SpecName('ES3')}}{{Spec2('ES3')}}Version étiquetée ajoutée.
{{SpecName('ES5.1', '#sec-12.8', 'instruction break')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-break-statement', 'instruction break')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.break")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/class/index.html b/files/fr/web/javascript/reference/instructions/class/index.html deleted file mode 100644 index 3fbbc7cb28..0000000000 --- a/files/fr/web/javascript/reference/instructions/class/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: class -slug: Web/JavaScript/Reference/Instructions/class -tags: - - Classes - - ECMAScript 2015 - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/class ---- -
{{jsSidebar("Statements")}}
- -

La déclaration class crée une nouvelle classe avec le nom fourni en utilisant l'héritage à base de prototypes pour émuler le fonctionnement de classe.

- -
{{EmbedInteractiveExample("pages/js/statement-class.html")}}
- - - -

Il est aussi possible de définir une classe avec une {{jsxref("Opérateurs/class", "expression class","",1)}}.

- -

Syntaxe

- -
class nom [extends]{
-  // corps de la classe
-}
-
- -

Description

- -

Les déclarations qui composent le corps de la classe sont exécutées en mode strict. La propriété du constructeur est optionnelle.

- -

Les déclarations utilisées dans les classes ne sont pas remontées (hoisted) (à la différence des déclarations de fonctions).

- -

Exemples

- -

Déclarer une classe simple

- -

Dans l'exemple qui suit, on définit une classe Polygone pour laquelle on crée un sous-classe Carré. On note ici que la méthode super() ne peut être utilisée qu'au sein d'un constructeur et doit être appelée avant l'utilisation du mot-clé this.

- -
class Polygone {
-  constructor(hauteur, largeur) {
-    this.nom = 'Polygone';
-    this.hauteur = hauteur;
-    this.largeur = largeur;
-  }
-}
-
-class Carré extends Polygone {
-  constructor(longueur) {
-    super(longueur,longueur);
-    this.nom = 'Carré';
-  }
-}
-
- -
-

Attention : Déclarer une classe deux fois lèvera une exception SyntaxError. De même, on ne pourra pas réutiliser un nom qui a déjà été utilisé dans une expression de classe.

- -
// Deux déclarations avec le même nom
-class Toto {};
-class Toto {}; // Uncaught SyntaxError: Identifier 'Toto' has already been declared
-
-// Expression puis déclaration
-var Truc = class {};
-class Truc {}; // Uncaught TypeError: Identifier 'Truc' has already been declared
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-class-definitions', 'Définitions de classe')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2016')}} 
{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2017')}} 
{{SpecName('ESDraft', '#sec-class-definitions', 'Définitions de classe')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.class")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/const/index.html b/files/fr/web/javascript/reference/instructions/const/index.html deleted file mode 100644 index 1431986d29..0000000000 --- a/files/fr/web/javascript/reference/instructions/const/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: const -slug: Web/JavaScript/Reference/Instructions/const -tags: - - ECMAScript 2015 - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/const ---- -
{{jsSidebar("Statements")}}
- -

La déclaration const permet de créer une constante nommée accessible uniquement en lecture. Cela ne signifie pas que la valeur contenue est immuable, uniquement que l'identifiant ne peut pas être réaffecté. Autrement dit la valeur d'une constante ne peut pas être modifiée par des réaffectations ultérieures. Une constante ne peut pas être déclarée à nouveau.

- -
{{EmbedInteractiveExample("pages/js/statement-const.html")}}
- - - -

Syntaxe

- -
const nom1 = valeur1 [, nom2 = valeur2 [, ... [, nomN = valeurN]]];
- -
-
nomN
-
Le nom de la constante. Ce nom peut être n'importe quel identifiant valide.
-
valeurN
-
La valeur à associer à la constante. Cette valeur peut être n'importe quelle expression valide (éventuellement une expression de fonction).
-
- -

Description

- -

Cette déclaration permet de créer une constante qui peut être globale ou locale pour la fonction dans laquelle elle a été déclarée. Les constantes font partie de la portée du bloc (comme les variables définies avec let). À la différence des variables définies avec var, les constantes déclarées au niveau global ne sont pas des propriétés de l'objet global ({{domxref("window")}} dans le cas du navigateur). Il est nécessaire d'initialiser une constante lors de sa déclaration. Au sein d'une même portée, il est impossible d'avoir une constante qui partage le même nom qu'une variable ou qu'une fonction.

- -

Attention, la déclaration const crée une référence en lecture seule vers une valeur. Cela ne signifie pas que la valeur référencée ne peut pas être modifiée ! Ainsi, si le contenu de la constante est un objet, l'objet lui-même pourra toujours être modifié.

- -
-

Note : Les aspects liés à la zone morte temporelle de let s'appliquent également à const.

-
- -

Exemples

- -

Les instructions suivantes illustrent comment fonctionne cette déclaration. On pourra tester ces instructions dans la console afin d'observer le comportement obtenu :

- -
// On définit ma_fav comme une constante
-// et on lui affecte la valeur 7
-// Généralement, par convention, les
-// constantes sont en majuscules
-const MA_FAV = 7;
-
-// Cette réaffectation lèvera une exception TypeError
-MA_FAV = 20;
-
-// affichera 7
-console.log("mon nombre favori est : " + MA_FAV);
-
-// toute tentative de redéclaration renvoie une erreur
-// SyntaxError: Identifier 'MY_FAV' has already been declared
-const MA_FAV = 20;
-
-// le nom ma_fav est réservé par la constante ci-dessus
-// cette déclaration échouera donc également
-var MA_FAV = 20;
-
-// cela renvoie également une erreur
-let MA_FAV = 20;
-
-
-// On notera l'importance de la portée de bloc :
-if (MA_FAV === 7) {
-  // cela fonctionne sans problème et crée
-  // une nouvelle variable dans cette portée
-  let MA_FAV =  20;
-
-  // Ici, MA_FAV vaut 20
-  console.log("mon nombre préféré est " + MA_FAV);
-
-  // L'instruction suivante est remontée dans le
-  // contexte global et provoque une erreur !
-  var MA_FAV = 20;
-
-}
-
-// MA_FAV vaut toujours 7
-console.log("mon nombre favori est " + MA_FAV);
-
-// const nécessite une initialisation
-const TOTO; // SyntaxError: Missing initializer in const
-
-// const fonctionne également avec les objects
-const monObjet = {"clé": "valeur"};
-
-// Écraser l'objet échouera comme précédemment
-monObjet = {"autreClé": "valeur"};
-
-// En revanche, les clés d'un objet ne sont pas
-// protégés et on peut donc, de façon valide, avoir
-monObjet.clé = "autreValeur";
-// On utilisera Object.freeze() afin qu'un objet soit immuable
-
-// Il en va de même avec les tableaux
-const mon_tableau = [];
-// On peut ajouter des éléments au tableau
-mon_tableau.push("A"); // ["A"]
-// Mais on ne peut pas affecter une nouvelle valeur
-mon_tableau = ["B"]; // lève une exception
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Déclarations let et const')}}{{Spec2('ESDraft')}}Aucune modification.
{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Déclarations let et const')}}{{Spec2('ES2015')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.const")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/continue/index.html b/files/fr/web/javascript/reference/instructions/continue/index.html deleted file mode 100644 index db9b22e973..0000000000 --- a/files/fr/web/javascript/reference/instructions/continue/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: continue -slug: Web/JavaScript/Reference/Instructions/continue -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/continue ---- -
{{jsSidebar("Statements")}}
- -

L'instruction continue arrête l'exécution des instructions pour l'itération de la boucle courante ou de la boucle étiquetée. L'exécution est reprise à l'itération suivante.

- -
{{EmbedInteractiveExample("pages/js/statement-continue.html")}}
- - - -

Syntaxe

- -
continue [ label ];
- -
-
label
-
Paramètre optionnel. Un identifiant associé à l'étiquette (label) de l'instruction pour laquelle on souhaite finir l'itération en cours.
-
- -

Description

- -

Contrairement à {{jsxref("Instructions/break", "break")}}, continue ne termine pas la boucle complètement :

- - - - - -

L'instruction continue peut éventuellement contenir une étiquette (label) qui permet de tirer parti des instructions de boucles étiquetées (plutôt que de ne traiter que la boucle courante). Dans le cas où l'étiquette est utilisée, il faut que l'instruction continue soit imbriquée dans l'instruction étiquetée.

- -

Exemples

- -

Utiliser continue avec while

- -

L'instruction suivante illustre comment on peut utiliser continue au sein d'une boucle {{jsxref("Instructions/while", "while")}}, ici continue est utilisé lorsque i vaut 3. On a donc n qui prend les valeurs 1, 3, 7, et 12.

- -
var i = 0;
-var n = 0;
-while (i < 5) {
-  i++;
-  if (i === 3) {
-    continue;
-  }
-  n += i;
-}
-
- -

Utiliser continue avec une étiquette

- -

Dans l'exemple suivant, on a une instruction étiquetée vérifIetJ qui contient une autre instruction étiquetée vérifJ. Si l'instruction continue est utilisée, le programme reprend l'exécution au début de l'instruction vérifJ. Chaque fois que continue utilisé, vérifJ réitère jusqu'à ce que sa condition renvoie false. Lorsque c'est le cas, le reste de l'instruction vérifIetJ est exécuté.

- -

Si continue utilisait l'étiquette vérifIetJ, le programme continuerait au début de l'instruction vérifIetJ.

- -

Voir aussi {{jsxref("Instructions/label", "label")}}.

- -
var i = 0;
-var j = 8;
-
-vérifIetJ: while (i < 4) {
-  console.log("i : " + i);
-  i += 1;
-
-  vérifJ: while (j > 4) {
-    console.log("j : "+ j);
-    j -= 1;
-    if ((j % 2) == 0){
-      continue vérifJ;
-    }
-    console.log(j + " est impaire.");
-   }
-   console.log("i = " + i);
-   console.log("j = " + j);
-}
-
- -

En utilisant le fragment ci-avant, on aura le résultat suivant :

- -
"i : 0"
-
-// début de vérifJ
-"j : 8"
-"7 est impair"
-"j : 7"
-"j : 6"
-"5 est impair."
-"j : 5"
-// fin de vérifJ
-
-"i = 1"
-"j = 4"
-
-"i : 1"
-"i = 2"
-"j = 4"
-
-"i : 2"
-"i = 3"
-"j = 4"
-
-"i : 3"
-"i = 4"
-"j = 4"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Pas de version étiquetée.
{{SpecName('ES3')}}{{Spec2('ES3')}}Ajout de la version étiquetée.
{{SpecName('ES5.1', '#sec-12.7', 'instruction continue')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-continue-statement', 'instruction continue')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-continue-statement', 'instruction continue')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.continue")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/debugger/index.html b/files/fr/web/javascript/reference/instructions/debugger/index.html deleted file mode 100644 index bd8f9f0689..0000000000 --- a/files/fr/web/javascript/reference/instructions/debugger/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: debugger -slug: Web/JavaScript/Reference/Instructions/debugger -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/debugger ---- -
{{jsSidebar("Statements")}}
- -

L'instruction debugger permet de faire appel à un outil de débogage (qui peut par exemple permettre de placer un point d'arrêt). Si cette fonctionnalité de débogage n'est pas disponible, l'instruction n'aura aucun effet.

- -

Syntaxe

- -
debugger;
- -

Exemples

- -

Dans l'exemple qui suit, on utilise un code avec l'instruction debugger qui permet de démarrer un débogueur (s'il existe) lorsque la fonction est appelée :

- -
function codeProbablementBogue() {
-    debugger;
-    // exécuter des instructions qu'on veut
-    // examiner, exécuter pas à pas etc.
-}
- -

Lors que le débogueur est lancé, l'exécution est interrompue au niveau de l'instruction debugger. Cela agit comme un point d'arrêt dans le code du script :

- -

Paused at a debugger statement.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-debugger-statement', 'instruction debugger')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.15', 'instruction debugger')}}{{Spec2('ES5.1')}}Définition initiale
{{SpecName('ES3', '#sec-7.5.3', 'instruction debugger')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-7.4.3', 'instruction debugger')}}{{Spec2('ES1')}}Uniquement mentionné comme mot-clé réservé.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.debugger")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/default/index.html b/files/fr/web/javascript/reference/instructions/default/index.html deleted file mode 100644 index e2cc368115..0000000000 --- a/files/fr/web/javascript/reference/instructions/default/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: default -slug: Web/JavaScript/Reference/Instructions/default -tags: - - JavaScript - - Keyword - - Reference -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default ---- -
{{jsSidebar("Statements")}}
- -

Le mot-clé default peut être utilisé à deux endroits en JavaScript : au sein d'une instruction {{jsxref("Instructions/switch", "switch")}} ou dans une instruction {{jsxref("Instructions/export", "export")}}.

- -
{{EmbedInteractiveExample("pages/js/statement-default.html")}}
- - - -

Syntaxe

- -

Dans une instruction {{jsxref("Instructions/switch", "switch")}} :

- -
switch (expression) {
-  case valeur1:
-    // Les instructions exécutées quand le résultat
-    // de l'expression vaut valeur1
-    [break;]
-  default:
-    // Les instructions exécutées quand aucune des valeurs
-    // ne correspond à la valeur de l'expression
-    [break;]
-}
- -

Dans une instruction {{jsxref("Instructions/export", "export")}} :

- -
export default nomN
- -

Description

- -

Pour plus de détails, voir les pages sur :

- - - -

Exemples

- -

Utiliser default dans une instruction switch

- -

Dans l'exemple qui suit, si expr vaut "Bananes" ou "Pommes", le programme exécutera les instructions correspondantes à chacune de ces valeurs. Le mot-clé default permettra d'indiquer des instructions à exécuter dans les autres cas (expr ne correspond à aucun des cas).

- -
switch (expr) {
-  case "Bananes":
-    console.log("Les bananes sont à 1.59€ le kilo.");
-    break;
-  case "Pommes":
-    console.log("Les pommes sont à 0.78€ le kilo.");
-    break;
-  default:
-    console.log("Désolé, nous n'avons plus de " + expr + ".");
-}
- -

Utiliser default avec export

- -

Si on souhaite exporter une seule valeur ou avoir une valeur par défaut dans un module, on peut utiliser un export avec default :

- -
// module "mon-module.js"
-let cube = function cube(x) {
-  return x * x * x;
-}
-export default cube;
- -

Dans un autre script, on pourra simplement faire référence à l'export par défaut :

- -
// module "autre-module.js"
-import maFonction from 'mon-module';
-console.log(maFonction(3)); // 27
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-switch-statement', 'Instruction switch')}}{{Spec2('ES6')}} 
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.default")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/do...while/index.html b/files/fr/web/javascript/reference/instructions/do...while/index.html deleted file mode 100644 index 444c82245d..0000000000 --- a/files/fr/web/javascript/reference/instructions/do...while/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: do...while -slug: Web/JavaScript/Reference/Instructions/do...while -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/do...while ---- -
{{jsSidebar("Statements")}}
- -

L'instruction do...while crée une boucle qui exécute une instruction jusqu'à ce qu'une condition de test ne soit plus vérifiée. La condition est testée après que l'instruction soit exécutée, le bloc d'instructions défini dans la boucle est donc exécuté au moins une fois.

- -
{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}
- - - -

Syntaxe

- -
do
-   instruction
-while (condition);
-
- -
-
instruction
-
Une instruction exécutée au moins une fois et ré-exécutée chaque fois que la condition de test est évaluée à true. On peut exécuter plusieurs instructions au sein d'une boucle grâce à l'instruction {{jsxref("Instructions/block", "block")}} ({ ... }) qui permet de grouper différentes instructions en une seule.
-
- -
-
condition
-
Une expression évaluée après chaque passage dans la boucle. Si l'évaluation de la condition donne true (la condition est vérifiée), instruction sera exécutée à nouveau. Lorsque condition donne false, le contrôle passe à l'instruction suivant la boucle do...while.
-
- -

Exemples

- -

Utiliser do...while

- -

Dans l'exemple suivant, la boucle do...while est parcourue au moins une fois et répétée jusqu'à ce que i ne soit plus strictement inférieur à 5.

- -
var i = 0;
-do {
-   i += 1;
-   console.log(i);
-} while (i < 5);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2
{{SpecName('ES5.1', '#sec-12.6.1', 'instruction do-while')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-do-while-statement', 'instruction do-while')}}{{Spec2('ES6')}}Le point-virgule de fin est désormais optionnel.
{{SpecName('ESDraft', '#sec-do-while-statement', 'instruction do-while')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.do_while")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/export/index.html b/files/fr/web/javascript/reference/instructions/export/index.html deleted file mode 100644 index bb310cb9be..0000000000 --- a/files/fr/web/javascript/reference/instructions/export/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: export -slug: Web/JavaScript/Reference/Instructions/export -tags: - - ECMAScript 2015 - - Instruction - - JavaScript - - Modules - - export -translation_of: Web/JavaScript/Reference/Statements/export ---- -
{{jsSidebar("Statements")}}
- -

L'instruction export est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction {{jsxref("Instructions/import", "import")}}.

- -

Les modules exportés sont interprétés en mode strict dans tous les cas. L'instruction export ne peut pas être utilisée dans les scripts embarqués.

- -

Syntaxe

- -
// Exporter des propriétés individuelles
-export let nom1, nom2, …, nomN; // utilisable avec var, const
-export let nom1 = …, nom2 = …, …, nomN; // utilisable avec var, const
-export function nomFonction(){...}
-export class NomClasse {...}
-
-// Export d'une liste de valeur
-export { nom1, nom2, …, nomN };
-
-// Renommage des valeurs exportées
-export { variable1 as nom1, variable2 as nom2, …, nomN };
-
-// Renommage avec la décomposition pour l'affectation
-export const { nom1, nom2: truc } = o;
-
-// Exports par défauts
-export default expression;
-export default function (…) { … } // fonctionne avec class, function*
-export default function nom1(…) { … } // fonctionne avec class, function*
-export { nom1 as default, … };
-
-// Agrégation de modules
-export * from …;
-export { nom1, nom2, …, nomN } from …;
-export { import1 as nom1, import2 as nom2, …, nomN } from …;
-export { default } from …;
- -
-
nomN
-
Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script).
-
- -

Description

- -

Il existe deux types d'export différents : les exports nommés et les exports par défaut. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus :

- - - -

Les exports nommés sont utiles pour exporter plusieurs valeurs. Lors de l'importation, il est obligatoire d'utiliser le même nom de l'objet correspondant.

- -

Mais un export par défaut peut être importé avec n'importe quel nom, par exemple :

- -
let k;
-export default k = 12; // dans le fichier test.js
-import m from './test'; // notez que nous avons la liberté d'utiliser import m au lieu de import k, parce que k était l'export par défaut
-console.log (m); // enregistrera 12
- -

La syntaxe suivante n'exporte pas le défaut depuis le module importé :

- -
export * from …;
- -

Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place :

- -
export {default} from 'mod';
- -

Il est possible de renommer un export afin d'éviter des conflits de nommage :

- -
export { maFonction as fonction1
-         maVariable as variable1 };
- -

On peut également agréger les valeurs exportées à celles d'autres modules qu'on aurait importés :

- -
// Dans moduleParent.js
-export { maFonction, maVariable } from 'moduleFils1.js';
-export { maClasse } from 'moduleFils2.js'
-
-// Dans le module de plus haut niveau
-import { maFonction, maVariable, maClasse } from 'moduleParent.js';
- -

Exemples

- -

Utilisation d'exports nommés

- -

Dans le module, on pourra utiliser le code suivant :

- -
// module "mon-module.js"
-function cube(x) {
-  return x * x * x;
-}
-const machin = Math.PI + Math.SQRT2;
-export { cube, machin };
-
- -

De cette façon, dans un autre script, on pourra avoir :

- -
import { cube, machin } from 'mon-module';
-console.log(cube(3)); // 27
-console.log(machin);    // 4.555806215962888
- -
-

Note : Si l'import est réalisé dans un script HTML, il faut que celui-ci soit chargé avec l'attribut {{htmlattrxref("type")}} "module" : <script type="module" src="./demo.js"></script> sinon il y aura une erreur quant aux origines multiples (CORS).
- Il n'est pas possible de charger des modules JavaScript via une URL file:// pour des raisons de sécurité (voir CORS également). Il faudra utiliser un serveur HTTP.

-
- -

Utilisation d'exports par défaut

- -

Si on souhaite n'exporter qu'une seule valeur ou avoir une valeur de secours pour le module, on peut utiliser un export par défaut :

- -
// module "mon-module.js"
-export default function cube(x) {
-  return x * x * x;
-}
-
- -

Alors, dans un autre script, il sera facile d'importer l'export par défaut :

- -
import cube from './mon-module.js';
-console.log(cube(3)); // 27
-
- -

Notez qu'il n'est pas possible d'utiliser var, let ou const avec export default.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('ES2015', '#sec-exports', 'Exports')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.export")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/for-await...of/index.html b/files/fr/web/javascript/reference/instructions/for-await...of/index.html deleted file mode 100644 index b30668c61c..0000000000 --- a/files/fr/web/javascript/reference/instructions/for-await...of/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: for await...of -slug: Web/JavaScript/Reference/Instructions/for-await...of -tags: - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/for-await...of ---- -
{{jsSidebar("Statements")}}
- -

L'instruction for await...of permet de créer une boucle qui parcourt les objets itérables asynchrones de la même façon qu'on parcourt les itérables synchrones (tels que les chaînes de caractères ({{jsxref("String")}}), les tableaux {{jsxref("Array")}}, les objets semblables aux tableaux comme {{jsxref("Fonctions/arguments", "arguments")}} ou {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}. Cette instruction invoque un mécanisme d'itération spécifique et les instructions à exécuter pour chaque propriété de l'objet.

- - - -

Syntaxe

- -
for await (variable of iterable) {
-  instruction
-}
-
- -
-
variable
-
À chaque itération, la valeur d'une propriété différente est affectée à variable. Cette variable peut être déclarée avec const, let ou var.
-
iterable
-
Un objet pour lequel on parcourt les propriétés itérables.
-
- -

Exemples

- -

Parcourir des itérables asynchrones

- -
var asyncIterable = {
-  [Symbol.asyncIterator]() {
-    return {
-      i: 0,
-      next() {
-        if (this.i < 3) {
-          return Promise.resolve({ value: this.i++, done: false });
-        }
-
-        return Promise.resolve({ done: true });
-      }
-    };
-  }
-};
-
-(async function() {
-   for await (let num of asyncIterable) {
-     console.log(num);
-  }
-})();
-// 0
-// 1
-// 2
-
- -

Parcourir des générateurs asynchrones

- -

Les générateurs asynchrones implémentent le protocole d'itérateur asynchrone et on peut donc les parcourir avec for await...of:

- -
async function* asyncGenerator() {
-  var i = 0;
-  while (i < 3) {
-    yield i++;
-  }
-}
-
-(async function() {
-  for await (let num of asyncGenerator()) {
-    console.log(num);
-  }
-})();
-// 0
-// 1
-// 2
- -

Pour prendre un exemple plus concret, on peut parcourir les données fournies par une API avec un générateur asynchrone grâce à for await... of. Dans cet exemple, on commence par créer un itérateur asynchrone à partir d'un flux de données puis on utilise cet itérateur et for await...of afin de calculer la taille de la réponse fournie par l'API :

- -
async function* streamAsyncIterator(stream) {
-  const reader = stream.getReader();
-  try {
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) {
-        return;
-      }
-      yield value;
-    }
-  } finally {
-    reader.releaseLock();
-  }
-}
-// On récupère les données d'une URL et
-// on calcule la taille de la réponse
-// avec un générateur asynchrone
-async function getResponseSize(url) {
-  const response = await fetch(url);
-  // La taille de la réponse, exprimée en octets.
-  let responseSize = 0;
-  // La boucle for-await-of qui parcourt, de façon asynchrone,
-  // chaque portion de la réponse.
-  for await (const chunk of streamAsyncIterator(response.body)) {
-    responseSize += chunk.length;
-  }
-
-  console.log(`Taille de la réponse : ${responseSize} octets`);
-  return responseSize;
-}
-getResponseSize('https://jsonplaceholder.typicode.com/photos');
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.for_await_of")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/for...in/index.html b/files/fr/web/javascript/reference/instructions/for...in/index.html deleted file mode 100644 index a9bf4ad8b0..0000000000 --- a/files/fr/web/javascript/reference/instructions/for...in/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: for...in -slug: Web/JavaScript/Reference/Instructions/for...in -tags: - - Instruction - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/for...in ---- -
{{jsSidebar("Statements")}}
- -

L'instruction for...in permet d'itérer sur les propriétés énumérables d'un objet qui ne sont pas des symboles. Pour chaque propriété obtenue, on exécute une instruction (ou plusieurs grâce à un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions).

- -
{{EmbedInteractiveExample("pages/js/statement-forin.html")}}
- - - -

Syntaxe

- -
for (variable in objet) {
-  instructions
-}
- -
-
variable
-
Un nom de propriété différent est assigné à la variable à chaque itération de la boucle.
-
objet
-
L'objet dont les propriétés énumérables et qui ne sont pas des symboles sont parcourues par la boucle.
-
- -

Description

- -

Une boucle for...in ne parcourt que les propriétés énumérables et qui ne sont pas des symboles. Les objets qui ont été créés par des constructeurs intégrés comme Array et Object ont hérité de propriétés non énumérables de Object.prototype et String.prototype comme les méthodes {{jsxref("String.prototype.indexOf","indexOf()")}} du type {{jsxref("String")}} ou {{jsxref("Object.prototype.toString","toString()")}} depuis {{jsxref("Object")}}. La boucle parcourera toutes les propriétés énumérables de l'objet et aussi celles dont il hérite du prototype du constructeur (les propriétés les plus proches de l'objet dans la chaîne des prototypes primeront sur les propriétés des prototypes).

- -

Les propriétés ajoutées, modifiées ou supprimées

- -

Une boucle for...in parcourt les propriétés d'un objet dans un ordre arbitraire (voir l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} pour plus d'explications quant à l'impossibilité de se fier à un tel ordre, au moins dans le cas où on souhaite gérer plusieurs navigateurs).

- -

Si une propriété est modifiée dans une des itérations de la boucle et que la boucle itère ensuite sur cette propriété, sa valeur sera celle qui a été modifiée. Une propriété qui a été supprimée avant que la boucle n'itère sur celle-là ne sera pas dans la boucle. Les propriétés qui ont été ajoutées à l'objet pendant la boucle peuvent être ou ne pas être pris en compte.

- -

Une bonne pratique consiste à ne pas ajouter, modifier ou supprimer une propriété d'un objet lors d'une itération qui ne concerne pas cette propriété. Il n'y a aucune certitude concernant la prise en compte d'une propriété ajoutée lors d'une telle boucle et il en va de même pour savoir si on a visité une propriété avant ou après qu'elle ait été modifiée ou de savoir si une itération de la boucle concernera une propriété avant que celle-ci soit supprimée.

- -

Utiliser for...in et parcourir un tableau

- -
-

Note : for...in ne doit pas être utilisée pour parcourir un {{jsxref("Array")}} lorsque l'ordre des éléments est important.

-
- -

Les éléments des indices d'un tableau sont des propriétés énumérables dont les noms sont des entiers, excepté cela, elles sont en tout point identiques aux propriétés des objets en général. Ici aussi, il n'y a aucune certitude que for...in renvoie les indices dans un ordre particulier. Cette instruction listera également les propriétés énumérables dont les noms ne sont pas des entiers et celles qui sont héritées.

- -

L'ordre dans lequel le parcours est effectué dépend de l'implémentation. Dans le cas d'un parcours de tableau utilisant for...in, on pourrait très bien avoir un ordre qui ne soit pas le même entre les différents environnements. Pour cette raison, il est préférable d'utiliser une boucle {{jsxref("Instructions/for","for")}} utilisant un compteur numérique (ou {{jsxref("Array.prototype.forEach","Array.forEach()")}} ou encore {{jsxref("Instructions/for...of","for...of")}}) lorsqu'on souhaite parcourir des tableaux dans un ordre bien défini.

- -

Itérer uniquement sur les propriétés non héritées

- -

Si on souhaite ne parcourir que les propriétés propres d'un objet et pas celles rattachées à ses prototypes, on peut utiliser la méthode {{jsxref("Object.getOwnPropertyNames()")}} ou bien effectuer un test grâce à la méthode {{jsxref("Object.prototype.hasOwnProperty()")}} voire avec {{jsxref("Object.prototype.propertyIsEnumerable()")}}

- -

Exemples

- -

La boucle for...in qui suit utilise parcourt l'objet obj et ses propriétés énumérables qui ne sont pas des symboles en fournissant la chaîne de caractères qui décrit le nom de la propriété et sa valeur.

- -
var obj = {a:1, b:2, c:3};
-
-for (var prop in obj) {
-  console.log(`obj.${prop} = ${obj[prop]}`);
-}
-
-// Affiche dans la console :
-// "obj.a = 1"
-// "obj.b = 2"
-// "obj.c = 3"
- -

La fonction qui suit utilise {{jsxref("Object.hasOwnProperty", "hasOwnProperty()")}} pour ne pas afficher les propriétés héritées :

- -
var triangle = {a:1, b:2, c:3};
-
-function TriangleCouleur() {
-  this.couleur = "rouge";
-}
-
-TriangleCouleur.prototype = triangle;
-
-var obj = new TriangleCouleur();
-
-for (var prop in obj) {
-  if( obj.hasOwnProperty( prop ) ) {
-    console.log(`obj.${prop} = ${obj[prop]}`);
-  }
-}
-
-// Affichera dans la console :
-// "obj.couleur = rouge"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.for_in")}}

- -

Expressions avec initialisateur

- -

Avant SpiderMonkey 40 {{geckoRelease(40)}}, il était possible d'utiliser un initialisateur (i=0) dans un boucle for...in :

- -
var obj = {a:1, b:2, c:3};
-for(var i=0 in obj) {
-  console.log(obj[i]);
-}
-// 1
-// 2
-// 3
-
- -

Ce comportement non-standard a été retiré avec la version 40. Cela provoquera désormais une exception {{jsxref("SyntaxError")}} ("for-in loop head declarations may not have initializers") en mode strict (cf. {{bug(748550)}} et {{bug(1164741)}}).

- -

Les autres moteurs, tels que v8 (Chrome), Chakra (IE/Edge) et JSC (WebKit/Safari) recherchent également comment retirer ce comportement non standard.

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/for...of/index.html b/files/fr/web/javascript/reference/instructions/for...of/index.html deleted file mode 100644 index 0fc7deb1f6..0000000000 --- a/files/fr/web/javascript/reference/instructions/for...of/index.html +++ /dev/null @@ -1,316 +0,0 @@ ---- -title: for...of -slug: Web/JavaScript/Reference/Instructions/for...of -tags: - - ECMAScript 2015 - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/for...of ---- -
{{jsSidebar("Statements")}}
- -

L'instruction for...of permet de créer une boucle {{jsxref("Array")}} qui parcourt un {{jsxref("Les_protocoles_iteration","objet itérable","#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB",1)}} (ce qui inclut les objets {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, l'objet {{jsxref("Fonctions/arguments","arguments")}}, etc.) et qui permet d'exécuter une ou plusieurs instructions pour la valeur de chaque propriété.

- -
{{EmbedInteractiveExample("pages/js/statement-forof.html")}}
- - - -

Syntaxe

- -
for (variable of iterable)
-  instruction
-
- -
-
variable
-
À chaque itération, la valeur d'une propriété différente est affectée à variable (cette variable peut être déclarée avec const, let ou var).
-
iterable
-
L'objet dont on parcourt les propriétés énumérables.
-
instruction
-
Une instruction à exécuter pour chaque propriété, cette instruction peut être composée de plusieurs instructions en utilisant un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions.
-
- -

Exemples

- -

Utiliser for...of sur un tableau

- -
let tableauItérable = [1, 2, 3];
-
-for (let valeur of tableauItérable) {
-  console.log(valeur);
-}
-// 1
-// 2
-// 3
- -

Si la variable n'est pas réaffectée dans la boucle, on pourra également utiliser const à la place de let :

- -
let tableauItérable = [1, 2, 3];
-
-for (const valeur of tableauItérable) {
-  console.log(valeur);
-}
-// 1
-// 2
-// 3
- -

Parcourir une chaîne de caractères avec for...of

- -
let iterable = 'pixel';
-
-for (let valeur of iterable) {
-  console.log(valeur);
-}
-// p
-// i
-// x
-// e
-// l
- -

Parcourir un tableau typé ({{jsxref("TypedArray")}})

- -
let iterable = new Uint8Array([0x00, 0xff]);
-
-for (let valeur of iterable) {
-  console.log(valeur);
-}
-// 0
-// 255
- -

Parcourir une {{jsxref("Map")}}

- -
let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);
-
-for (let element of iterable) {
-  console.log(element);
-}
-// ['a', 1]
-// ['b', 2]
-// ['c', 3]
-
-for (let [clef, valeur] of iterable) {
-  console.log(valeur);
-}
-// 1
-// 2
-// 3
- -

Utiliser Array.prototype.forEach()

- -

Pour obtenir les mêmes valeurs qu'avec une boucle for...of, on peut utiliser la méthode {{jsxref("Array.prototype.forEach()")}} :

- -
let arr = [3, 5, 7];
-arr.toto = "coucou";
-
-arr.forEach(function (element, index) {
-  console.log(element); // affiche "3", "5", "7"
-  console.log(index);  // affiche "0", "1", "2"
-});
-
-// ou avec Object.keys()
-
-Object.keys(arr).forEach(function (element, index) {
-  console.log(arr[element]); // affiche "3", "5", "7", "coucou"
-  console.log(arr[index]);  // affiche "3", "5", "7", undefined
-});
- -

Parcourir l'objet arguments

- -

Il est possible de parcourir l'objet {{jsxref("Fonctions/arguments", "arguments")}} afin d'examiner l'ensemble des paramètres passés à la fonction :

- -
(function() {
-  for (let argument of arguments){
-    console.log(argument);
-  }
-})(1, 2, 3);
-
-// 1
-// 2
-// 3
-
- -

Parcourir des collections DOM

- -

Il est possible de parcourir des collections DOM telles que {{domxref("NodeList")}}. Dans cet exemple, on ajoute une classe read aux paragraphes qui sont des descendants directs d'un article :

- -
// Note : Cela ne fonctionnera que pour les plates-formes
-// qui implémentent NodeList.prototype[Symbol.iterator]
-let articleParagraphs = document.querySelectorAll("article > p");
-
-for (let paragraph of articleParagraphs) {
-  paragraph.classList.add("read");
-}
-
- -

Clôturer les itérateurs

- -

Dans les boucles for...of, on peut provoquer la fin de l'itérateur avec break, continue, throw, ou return. Dans ces cas, l'itérateur est fermé.

- -
function* toto() {
-  yield 1;
-  yield 2;
-  yield 3;
-};
-
-for (let o of toto()) {
-  console.log(o);
-  break; // L'itérateur est fermé
-}
-
- -

Itérer sur les générateurs

- -

Grâce à cette instruction, on peut également itérer sur les {{jsxref("Instructions/function*","générateurs","",1)}} :

- -
function* fibonacci() { // une fonction génératrice
-  let [prev, curr] = [0, 1];
-  while (true) {
-    [prev, curr] = [curr, prev + curr];
-    yield curr;
-  }
-}
-
-for (let n of fibonacci()) {
-  console.log(n);
-  // on arrête la séquence à 1000
-  if (n >= 1000){
-    break;
-  }
-}
-
- -

Itérer sur les autres objets itérables

- -

Il est aussi possible d'itérer sur un objet qui implémente le protocole itérable de façon explicite :

- -
var iterable = {
-  [Symbol.iterator]() {
-    return {
-      i: 0,
-      next() {
-        if (this.i < 3) {
-          return { value: this.i++, done: false };
-        }
-        return { value: undefined, done: true };
-      }
-    };
-  }
-};
-
-for (let value of iterable) {
-  console.log(value);
-}
-console.log("fini !");
-// 0
-// 1
-// 2
- -

Les différences entre for...of et for...in

- -

Les deux instructions for...in et for...of permettent de parcourir un ensemble. Mais elles ne parcourent pas le même ensemble.

- -

L'instruction {{jsxref("Instructions/for...in", "for...in")}} permet de parcourir les propriétés énumérables d'un objet dans un ordre arbitraire.

- -

L'instruction for...of permet quant à elle de parcourir les données contenues dans l'objet itérable visé.

- -

Dans l'exemple qui suit, on illustre la différence de comportement entre une boucle for...of et une boucle for...in utilisées sur un tableau ({{jsxref("Array")}}).

- -
Object.prototype.objCustom = function() {};
-Array.prototype.arrCustom = function() {};
-
-let iterable = [3, 5, 7];
-iterable.toto = 'coucou';
-
-for (let i in iterable) {
-  console.log(i); // affiche 0, 1, 2, "toto",
-                  // "arrCustom", "objCustom"
-}
-
-for (let i in iterable) {
-  if (iterable.hasOwnProperty(i)) {
-    console.log(i); // affiche 0, 1, 2, "toto"
-  }
-}
-
-for (let i of iterable) {
-  console.log(i); // affiche 3, 5, 7
-}
-
- -

Chaque objet héritera de la propriété objCustom et chaque objet qui est un tableau ({{jsxref("Array")}}) héritera de la propriété arrCustom car on les ajoute aux prototypes {{jsxref("Object.prototype")}} et {{jsxref("Array.prototype")}}. L'objet iterable hérite donc des propriétés objCustom et arrCustom grâce à l'héritage et à la chaîne de prototypes.

- -
for (let i in iterable) {
-  console.log(i); // affiche 0, 1, 2, "toto",
-                  // "arrCustom" et "objCustom"
-}
- -

Cette boucle ne parcourt que les propriétés énumérables de l'objet iterable dans un ordre arbitraire. Les éléments du tableau 3, 5, 7 ou hello ne sont pas affichés car ce ne sont pas des propriétés (et encore moins des propriétés énumérables). En revanche, on retrouve bien les indices du tableau et les propriétés arrCustom et objCustom. Pour décrire plus précisément ce comportement, vous pouvez consulter {{jsxref("Instructions/for...in", "for...in", "#/fr/docs/Web/JavaScript/Reference/Instructions/for...in#Utiliser_for...in_et_parcourir_un_tableau")}}.

- -
for (let i in iterable) {
-  if (iterable.hasOwnProperty(i)) {
-    console.log(i); // affiche 0, 1, 2, "toto"
-  }
-}
- -

Cette boucle ressemble à la première mais ajoute la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} qui permet de vérifier si la propriété énumérable recensée est directement disponible sur l'objet (c'est-à-dire si elle n'est pas héritée). La console affiche donc les propriétés 0, 1, 2 et toto car ce sont des propriétés directement rattachées à l'objet iterable. En revanche, les propriétés arrCustom et objCustom ne sont pas affichées car elles proviennent de l'héritage.

- -
for (let i of iterable) {
-  console.log(i); // affiche 3, 5, 7
-}
- -

Cette boucle parcourt les valeurs définies comme itérables par l'objet itérable et dans ce cas ce sont les éléments du tableau 3, 5, 7 et pas les propriétés de l'objet.

- -

Attention à ne pas réutiliser les générateurs

- -

Les générateurs ne doivent pas être réutilisés, même lorsque la boucle for...of a été interrompue (par exemple lorsque {{jsxref("Instructions/break","break")}} est utilisé). Lorsqu'on quitte une boucle, le générateur est clôturé et si on l'utilise à nouveau, il ne fournira aucun résultat. Firefox n'a pas encore implémenté ce comportement standard (cf. {{bug("1147371")}}).

- -
var gen = (function *(){
-  yield 1;
-  yield 2;
-  yield 3;
-})();
-for (let o of gen) {
-  console.log(o);
-  break; // L'itérateur est fermé
-}
-
-// Le générateur ne doit pas être réutilisé !
-for (let o of gen){
-  console.log(o); // Ceci n'est jamais exécuté
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'instruction for...of')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'instruction for...of')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.for_of")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/for/index.html b/files/fr/web/javascript/reference/instructions/for/index.html deleted file mode 100644 index ac60a49710..0000000000 --- a/files/fr/web/javascript/reference/instructions/for/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: for -slug: Web/JavaScript/Reference/Instructions/for -tags: - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/for ---- -
{{jsSidebar("Statements")}}
- -

L'instruction for crée une boucle composée de trois expressions optionnelles séparées par des points-virgules et encadrées entre des parenthèses qui sont suivies par une instruction (généralement une instruction de bloc) à exécuter dans la boucle.

- -
{{EmbedInteractiveExample("pages/js/statement-for.html")}}
- - - -

Syntaxe

- -
for ([initialisation]; [condition]; [expression_finale])
-   instruction
-
- -

Paramètres

- -
-
initialisation
-
Une expression (pouvant être une expression d'affectation) ou une déclaration de variable. Cette expression est évaluée une fois avant que la boucle démarre. On utilise généralement une variable qui agit comme un compteur. Cette expression peut éventuellement déclarer de nouvelles variables avec le mot-clé var ou let. Les variables déclarées avec var se situent dans la même portée que la boucle for (elles ne sont pas locales au sein de la boucle), les variables déclarées avec let sont locales à la boucle. Le résultat de l'expression n'est pas utilisé.
-
condition
-
Une expression qui est évaluée avant chaque itération de la boucle. Si cette expression est vérifiée, l'instruction est exécutée. Ce test est optionnel. S'il n'est pas présent, la condition sera toujours vérifiée. Si l'expression n'est pas vérifiée (i.e. vaut false), l'exécution se poursuivra à la première expression qui suit la boucle for.
-
expression_finale
-
Une expression qui est évaluée à la fin de chaque itération. Cela se produit avant l'évaluation de l'expression condition. Cette expression est généralement utilisée pour mettre à jour ou incrémenter le compteur qu'est la variable d'initialisation.
-
instruction
-
Une instruction qui est exécutée tant que la condition de la boucle est vérifiée. Afin d'exécuter plusieurs instructions au sein d'une telle boucle, il faudra utiliser une instruction de bloc ({ ... }) qui regroupera ces différentes instructions.
-
- -

Exemples

- -

Utiliser for

- -

L'instruction for qui suit débute en déclarant la variable i et en l'initialisant à 0. Elle vérifie que i est inférieur (strictement) à 9 et exécute ensuite les deux instructions contenues dans la boucle, ensuite elle incrémente i de 1, ce qui sera fait à chaque passage dans la boucle.

- -
for (var i = 0; i < 9; i++) {
-   n += i;
-   myfunc(n);
-}
-
- -

Expressions optionnelles pour for

- -

Les trois expressions qui composent l'instruction for sont optionnelles :

- -

Par exemple, le bloc pour l'initialisation peut ne pas être utilisé :

- -
var i = 0;
-for (; i < 9; i++) {
-    console.log(i);
-    // d'autres instructions
-}
-
- -

De même que pour le bloc d'initialisation, l'expression de condition est optionnelle. Attention, si l'expression de condition n'est pas utilisée, il faut s'assurer d'interrompre la boucle et de ne pas créer une boucle infinie.

- -
for (var i = 0;; i++) {
-   console.log(i);
-   if (i > 3) break;
-   // d'autres instructions
-}
- -

Les trois blocs d'expressions peuvent être omis. Encore une fois, il faudra utiliser une instruction {{jsxref("Instructions/break")}} pour terminer la boucle. Si le test se fait sur un seuil, on veillera à incrémenter la variable pour que la condition d'arrêt modifiée soit respectée.

- -
var i = 0;
-
-for (;;) {
-  if (i > 3) break;
-  console.log(i);
-  i++;
-}
-
- -

Utiliser for avec une instruction vide

- -

L'instruction for qui suit calcule le décalage d'un nœud et le fait dans la section qui correspond à l'expression finale. Il n'y a donc aucun intérêt à ajouter une instruction ou un bloc d'instruction dans la boucle pour faire ce calcul.

- -
function showOffsetPos (sId) {
-  var nLeft = 0, nTop = 0;
-
-  for (var oItNode = document.getElementById(sId); oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
-
-  console.log("Décalage de position : \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
-}
- -
Note : Dans cas, où on n'utilise pas la section d'instruction, il faut mettre un point-virgule immédiatement après la déclaration de la boucle.
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-for-statement', 'instruction for')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.6.3', 'instruction for')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.6.3', 'instruction for')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.6.2', 'instruction for')}}{{Spec2('ES1')}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.for")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/function/index.html b/files/fr/web/javascript/reference/instructions/function/index.html deleted file mode 100644 index d4faad9451..0000000000 --- a/files/fr/web/javascript/reference/instructions/function/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: function -slug: Web/JavaScript/Reference/Instructions/function -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/function ---- -
{{jsSidebar("Statements")}}
- -

La déclaration function (ou l'instruction function) permet de définir une fonction et les paramètres que celle-ci utilise.

- -
{{EmbedInteractiveExample("pages/js/statement-function.html")}}
- - - -

Il est également possible de définir des fonctions en utilisant le constructeur {{jsxref("Function")}} et une {{jsxref("Opérateurs/L_opérateur_function", "expression de fonction","",1)}}.

- -

Syntaxe

- -
function nom([param1[, param2,[..., paramN]]]) {
-   [instructions]
-}
-
- -
-
nom
-
Le nom de la fonction.
-
- -
-
paramN
-
Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments (cela peut varier en fonction des moteurs).
-
- -
-
instructions
-
Les instructions qui constituent le corps de la fonctio.
-
- -

Description

- -

Une fonction créée via une déclaration de fonction est un objet Function et possède toutes les caractéristiques (propriétés, méthodes et comportement) d'un objet Function. Voir la page {{jsxref("Function")}} pour plus d'informations sur ces caractéristiques.

- -

Une fonction peut également être créée en utilisant une expression (voir {{jsxref("Opérateurs/L_opérateur_function", "les expressions de fonctions","",1)}}).

- -

Par défaut, une fonction renvoie {{jsxref("undefined")}}. Pour renvoyer une autre valeur en résultat, une fonction doit utiliser une instruction {{jsxref("Instructions/return", "return")}} qui définit la valeur à retourner.

- -

Fonctions créées conditionnellement

- -

Il est possible de déclarer des fonctions de façon conditionnelle (c'est-à-dire qu'on peut placer une instruction de déclaration de fonction au sein d'une instruction if). La plupart des navigateurs, autres que ceux basés sur Gecko, traiteront cette déclaration conditionnelle comme si elle était inconditionnelle (que la condition souhaitée soit vérifiée ou non) (voir cet article (en anglais) pour un aperçu). Pour cette raison, les déclarations de fonctions ne devraient pas être utilisées pour créer des fonctions de façon conditionnelle. Pour ce faire, il faut privilégier les expressions de fonctions.

- -
var remontee = "toto" in this;
-console.log(`'toto' ${remontee ? "est" : "n'est pas"} remontée. typeof toto vaut ${typeof toto}`);
-if (false) {
-  function toto(){ return 1; }
-}
-
-// Pour Chrome:
-// 'toto' est remontée. typeof toto vaut undefined
-//
-// Pour Firefox:
-// 'toto' est remontée. typeof toto vaut undefined
-//
-// Pour Edge:
-// 'toto' n'est pas remontée. typeof toto vaut undefined
-//
-// Pour Safari:
-// 'toto' est remontée. typeof toto vaut function
-
- -

On obtient exactement les mêmes résultats si la condition est vérifiée (ici avec true) :

- -
var remontee = "toto" in this;
-console.log(`'toto' ${remontee ? "est" : "n'est pas"} remontée. typeof toto vaut ${typeof toto}`);
-if (true) {
-  function toto(){ return 1; }
-}
-
-// Pour Chrome:
-// 'toto' est remontée. typeof toto vaut undefined
-//
-// Pour Firefox:
-// 'toto' est remontée. typeof toto vaut undefined
-//
-// Pour Edge:
-// 'toto' n'est pas remontée. typeof toto vaut undefined
-//
-// Pour Safari:
-// 'toto' est remontée. typeof toto vaut function
- -

La « remontée » des déclarations de fonction

- -

Lorsqu'on utilise une déclaration de fonction pour créer une fonction, la définition de la fonction est « remontée ». Il devient donc possible d'utiliser la fonction avant de l'avoir déclarée :

- -
remontée(); // affiche "toto" dans la console
-
-function remontée() {
-  console.log("toto");
-}
-
- -

On notera que les {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",1)}} ne sont pas remontées :

- -
nonRemontée(); // TypeError: nonRemontée is not a function
-
-var nonRemontée = function() {
-   console.log("truc");
-};
-
- -

Exemples

- -

Utiliser function

- -

Dans l'exemple qui suit, on déclare une fonction qui renvoie le total des ventes en fonction des nombres d'unités vendues pour les produits a, b, et c.

- -
function calc_ventes(nb_produits_a, nb_produits_b, nb_produits_c) {
-   return nb_produits_a*79 + nb_produits_b * 129 + nb_produits_c * 699;
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Définition de fonction')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Définition de fonction')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Définition de fonction')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-13', 'Définition de fonction')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.function")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/function_star_/index.html b/files/fr/web/javascript/reference/instructions/function_star_/index.html deleted file mode 100644 index 5a55641ed3..0000000000 --- a/files/fr/web/javascript/reference/instructions/function_star_/index.html +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: function* -slug: Web/JavaScript/Reference/Instructions/function* -tags: - - ECMAScript 2015 - - Function - - Generator - - Instruction - - Iterator - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/function* ---- -
{{jsSidebar("Statements")}}
- -

La déclaration function* (le mot-clé function suivi par un astérisque) permet de définir un générateur (aussi appelé une fonction génératrice) (un générateur est un objet {{jsxref("Generator")}}).

- -
{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}
- - - -
-

Il est également possible de définir un générateur en utilisant le constructeur {{jsxref("GeneratorFunction")}} et une expression {{jsxref("Opérateurs/function*", "function*")}}.

-
- -

Syntaxe

- -
function* nom([param1[, param2[, ... paramN]]]) {
-   instructions
-}
-
- -
-
nom
-
Le nom de la fonction.
-
- -
-
paramN
-
Le nom d'un paramètre formel passé à la fonction.
-
- -
-
instructions
-
Les instructions qui constituent le corps de la fonction.
-
- -

Description

- -

Les générateurs sont des fonctions qu'il est possible de quitter puis de reprendre. Le contexte d'un générateur (les liaisons avec ses variables) est sauvegardé entre les reprises successives.

- -

Les générateurs, combinés avec les promesses, sont des outils de programmation asynchrones puissants qui permettent de réduire les inconvénients causés par les callbacks (fonctions de rappel) et l'inversion de contrôle.

- -

Lorsqu'on appelle une fonction génératrice, son corps n'est pas exécuté immédiatement, c'est un {{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}} qui est renvoyé pour la fonction. Lorsque la méthode next() de l'itérateur est appelée, le corps de la fonction génératrice est utilisé jusqu'à ce que la première expression {{jsxref("Opérateurs/yield", "yield")}} soit trouvée. Cette expression définira la valeur à renvoyer pour l'itérateur. Si on utilise {{jsxref("Opérateurs/yield*", "yield*")}}, on pourra déléguer la génération des valeurs à une autre fonction génératrice. La méthode next() renvoie un objet dont la propriété value contient la valeur générée et une propriété done qui indique si le générateur a produit sa dernière valeur ou non. Lorsqu'on appelle la méthode next() avec un argument, cela reprendra l'exécution de la fonction génératrice et remplacera la valeur de l'expression yield (là où l'exécution avait été interrompue) avec la valeur de l'argument passé à next().

- -

On peut utiliser une instruction return dans un générateur. Lorsque cette instruction sera exécutée, le générateur sera terminé (done vaudra true). La valeur renvoyée par l'instruction return sera la valeur de terminaison du générateur. Une fois qu'un générateur est terminé, il ne peut plus produire d'autres valeurs.

- -

À l'instar d'une instruction return, une exception levée à l'intérieur du générateur entraînera la terminaison du générateur sauf si cette exception est interceptée. Lorsqu'un générateur est terminé, les appels suivants à next() n'exécuteront aucun code provenant du générateur, ils renverront simplement un objet de la forme {value: undefined, done: true}.

- -

Exemples

- -

Exemple simple

- -
function* creerID(){
-  var index = 0;
-  while (true) {
-    yield index++;
-  }
-}
-
-var gen = creerID();
-
-console.log(gen.next().value); // 0
-console.log(gen.next().value); // 1
-console.log(gen.next().value); // 2
-console.log(gen.next().value); // 3
-
- -

Exemple utilisant des arguments

- -
function* logGenerator() {
-  console.log(yield);
-  console.log(yield);
-  console.log(yield);
-}
-
-var gen = logGenerator();
-
-// le premier appel à next exécute la fonction depuis son
-// début jusqu'au premier yield rencontré
-gen.next();
-gen.next('bretzel');    // bretzel
-gen.next('california'); // california
-gen.next('mayonnaise'); // mayonnaise
-
- -

Exemple utilisant yield*

- -
function* autreGenerateur(i) {
-  yield i + 1;
-  yield i + 2;
-  yield i + 3;
-}
-function* generateur(i){
-  yield i;
-  yield* autreGenerateur(i);
-  yield i + 10;
-}
-
-var gen = generateur(10);
-
-console.log(gen.next().value); // 10
-console.log(gen.next().value); // 11
-console.log(gen.next().value); // 12
-console.log(gen.next().value); // 13
-console.log(gen.next().value); // 20
-
- -

Utilisation de return

- -
function* yieldAndReturn() {
-  yield "Y";
-  return "R";
-  yield "inaccessible";
-}
-
-var gen = yieldAndReturn();
-
-console.log(gen.next()); // { value: "Y", done: false }
-console.log(gen.next()); // { value: "R", done: true }
-console.log(gen.next()); // { value: undefined, done: true }
-
- -

Utiliser un générateur comme propriété

- -
const monObj = {
-  *generator () {
-    yield "a";
-    yield "b";
-  }
-}
-
-const gen = monObj.generator();
-
-console.log(gen.next()); // { value: "a", done: false }
-console.log(gen.next()); // { value: "b", done: false }
-console.log(gen.next()); // { value: undefined, done: true }
- -

Utiliser un générateur comme propriété calculée

- -
class Toto {
-  *[Symbol.iterator] () {
-    yield 1;
-    yield 2;
-  }
-}
-
-const monObj = {
-  *[Symbol.iterator] () {
-    yield "a";
-    yield "b";
-  }
-}
-
-console.log(Array.from(new Toto)); // [1, 2]
-console.log(Array.from(monObj));   // [ "a", "b"]
- -

Les générateurs ne sont pas constructibles

- -
function* f() {}
-var obj = new f; // lève une TypeError: f n'est pas un constructeur
-
- -

Générateur défini avec une expression

- -
const toto = function* () {
-  yield 10;
-  yield 20;
-};
-const truc = toto();
-console.log(truc.next()); // {value: 10, done: false}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ES2016')}}Les générateurs ne doivent pas gérer la trappe [[Construct]] et déclencher une exception s'ils sont utilisés avec new.
{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.generator_function")}}

- -

Notes spécifiques à Firefox

- -

Les générateurs et itérateurs dans Firefox pour les versions antérieures à Firefox 26

- -

Les anciennes versions de Firefox implémentaient une ancienne version de la proposition pour les générateurs. Dans cette version, les générateurs étaient définis avec le mot-clé function (sans astérisque) et étaient différents selon d'autres aspects. Voir la page sur les générateurs historiques pour plus d'informations.

- -

IteratorResult au lieu d'une exception

- -

À partir de Gecko 29 {{geckoRelease(29)}}, lorsqu'un générateur est terminé, il ne renvoie plus une exception {{jsxref("TypeError")}} « generator has already finished ». Il renvoie désormais un objet IteratorResult comme { value: undefined, done: true } ({{bug(958951)}}).

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/if...else/index.html b/files/fr/web/javascript/reference/instructions/if...else/index.html deleted file mode 100644 index 1b2cbf6497..0000000000 --- a/files/fr/web/javascript/reference/instructions/if...else/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: if...else -slug: Web/JavaScript/Reference/Instructions/if...else -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/if...else ---- -
{{jsSidebar("Statements")}}
- -

L'instruction if exécute une instruction si une condition donnée est vraie ou équivalente à vrai. Si la condition n'est pas vérifiée, il est possible d'utiliser une autre instruction.

- -
{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}
- - - -

Syntaxe

- -
if (condition)
-   instruction1
-[else
-   instruction2]
-
- -
-
condition
-
Une expression qui est évaluée à true ou false.
-
- -
-
instruction1
-
L'instruction qui est exécutée si la condition est vérifiée (i.e. est évaluée à true). Cette instruction peut être n'importe quelle instruction valide, y compris une imbrication d'autres instructions if. Pour exécuter plusieurs instructions, on pourra utiliser un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} ({ ... }) qui permet de les regrouper. Pour n'exécuter aucune instruction, on pourra utiliser {{jsxref("Instructions/Vide","l'instruction vide","",1)}}.
-
- -
-
instruction2
-
Si la clause else existe, l'instruction qui est exécutée si la condition est évaluée à false. Comme pour la première, cette instruction peut être n'importe quelle instruction valide : une autre instruction if imbriquée, un bloc d'instruction, une instruction vide, etc.
-
- -

Description

- -

Plusieurs instructions if...else peuvent être imbriquées afin de créer une structure else if (on notera qu'il n'y a pas de mot-clé elseif en JavaScript).

- -
if (condition1)
-  instruction1
-else if (condition2)
-  instruction2
-else if (condition3)
-  instruction3
-...
-else
-  instructionN
-
- -

Si on indente correctement le code, on retrouve la structure exactement équivalente :

- -
if (condition1)
-  instruction1
-else
-  if (condition2)
-    instruction2
-  else
-    if (condition3)
-...
-
- -

Afin d'exécuter plusieurs instructions, on utilisera un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} ({ ... }) pour regrouper les instructions souhaitées. Utiliser les blocs d'instructions est une bonne façon d'organiser son code, surtout lorsque celui-ci comporte des instructions conditionnelles imbriquées.

- -
if (condition) {
-  instructions1
-} else {
-  instructions2
-}
-
- -

Attention à ne pas confondre les valeurs booléennes « primitives » true et false avec les valeurs true et false d'un objet {{jsxref("Boolean")}}. Toute valeur qui n'est pas false, {{jsxref("undefined")}}, {{jsxref("null")}}, 0, -0, {{jsxref("NaN")}} ou la chaîne vide (""), et tout objet, y compris un objet Boolean dont la valeur est false, seront évalués à true lors d'une instruction conditionnelle if. Ainsi :

- -
var b = new Boolean(false);
-if (b) // la condition sera évaluée à true
-
- -

Exemples

- -

Utiliser if...else

- -
if (cipher_char == from_char) {
-  result = result + to_char;
-  x++;
-} else {
-  result = result + clear_char;
-}
-
- -

Utiliser else if

- -

Bien qu'il n'y ait pas de mot-clé elseif dans le langage JavaScript, il est possible d'imbriquer des instructions if...else à la suite les une des autres en plaçant un espace entre else et le début de l'instruction if imbriquée :

- -
if (x > 50){
-  // faire quelque chose
-} else if (x > 5) {
-  // faire autre chose
-} else {
-  // faire encore autre chose
-}
-
- -

Affectation de variable dans l'expression conditionnelle

- -

Il est conseillé de ne pas utiliser d'affectation au sein des expressions conditionnelles. En effet, l'affectation peut être confondue avec un test d'égalité lorsqu'on analyse le code. Il ne faut donc pas utiliser le code suivant (bien qu'il fonctionne) :

- -
if (x = y) {
-  /* exécuter les instructions */
-}
-
- -

S'il est nécessaire d'effectuer une telle affectation, une pratique courante consiste à ajouter des parenthèses de cette manière afin d'alerter le lecteur du code (exemple à utiliser) :

- -
if ((x = y)) {
-  /* exécuter les instructions */
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-if-statement', 'instruction if')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-if-statement', 'instruction if')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.5', 'instruction if')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.5', 'instruction if')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.5', 'instruction if')}}{{Spec2('ES1')}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.if_else")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/import.meta/index.html b/files/fr/web/javascript/reference/instructions/import.meta/index.html deleted file mode 100644 index 4acb0c1029..0000000000 --- a/files/fr/web/javascript/reference/instructions/import.meta/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: import.meta -slug: Web/JavaScript/Reference/Instructions/import.meta -tags: - - JavaScript - - Modules - - Reference -translation_of: Web/JavaScript/Reference/Statements/import.meta ---- -
{{JSSidebar("Statements")}}
- -

L'objet import.meta est une méta-propriété qui expose des métadonnées d'un module JavaScript spécifiques au contexte. Cet objet contient des informations à propos du module, telles que l'URL du module.

- -

Syntaxe

- -
import.meta
- -

Description

- -

L'objet import.meta se compose d'un mot-clé "import", suivi d'un point, puis du nom de propriété "meta". En temps normal, "import." serait utilisé comme contexte pour un accès à une propriété mais, dans ce cas, "import." n'est pas, à proprement parler, un objet.

- -

L'objet import.meta est créé par l'implémentation ECMAScript avec un prototype qui vaut {{jsxref("null")}}. Cet objet est extensible et ses propriétés sont accessibles en écriture, configurables et énumérables.

- -

Exemples

- -

Soit un module mon-module.js

- -
<script type="module" src="mon-module.js"></script>
-
- -

Il est possible d'accéder aux métadonnées du module grâce à l'objet import.meta.

- -
console.log(import.meta); // { url: "file:///home/user/mon-module.js" }
- -

Cet objet contient une propriété url qui indique l'URL de base du module. Dans le cas des scripts externes, celle-ci sera l'URL à partir de laquelle le script a été obtenu. Pour les scripts écrits dans le document, ce sera l'URL de base du document englobant.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour import.metaNiveau 3Définition initiale.
{{SpecName("HTML WHATWG","webappapis.html#hostgetimportmetaproperties","import.meta")}}{{Spec2("HTML WHATWG")}}Définition des propriétés import.meta en HTML.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.import_meta")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/import/index.html b/files/fr/web/javascript/reference/instructions/import/index.html deleted file mode 100644 index 37c904eb10..0000000000 --- a/files/fr/web/javascript/reference/instructions/import/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: import -slug: Web/JavaScript/Reference/Instructions/import -tags: - - ECMAScript 2015 - - Instruction - - JavaScript - - Modules - - import -translation_of: Web/JavaScript/Reference/Statements/import ---- -
{{jsSidebar("Statements")}}
- -

L'instruction import est utilisée pour importer des liens qui sont exportés par un autre module. Les modules importés sont interprétés en mode strict dans tous les cas. L'instruction import ne peut pas être utilisée dans les scripts embarqués sauf si ceux-ci proviennent de ressources avec type="module".

- -
-

Note : Il existe également une forme fonctionnelle, import() (cf. ci-après) qui permet d'avoir des chargements dynamiques. La compatibilité ascendante peut être atteinte en utilisant l'attribut nomodule sur la balise {{HTMLElement("script")}}.

-
- -

Syntaxe

- -
import exportParDefaut from "nom-module";
-import * as nom from "nom-module";
-import { export } from "nom-module";
-import { export as alias } from "nom-module";
-import { export1 , export2 } from "nom-module";
-import { export1 , export2 as alias2 , [...] } from "nom-module";
-import exportParDefaut, { export [ , [...] ] } from "nom-module";
-import exportParDefaut, * as nom from "nom-module";
-import "nom-module";
-import { toto , truc } from "nom-module/chemin/vers/fichier-non-exporte";
-let promesse = import("nom-module");
- -
-
exportParDefaut
-
Nom qui fera référence à l'export par défaut du module.
-
nom-module
-
Le module depuis lequel importer. C'est souvent un chemin absolu ou relatif vers le fichier .js contenant le module. Certains empaqueteurs peuvent permettre ou requérir l'utilisation de l'extension ; vérifier votre environnement. Seules les String à apostrophes simples ou doubles sont autorisées.
-
nom
-
Nom de l'objet module qui sera utilisé comme un genre d'espace de noms lors de références aux imports.
-
export, exportN
-
Nom des exports à importer.
-
alias, aliasN
-
Noms qui feront référence aux imports nommés.
-
- -

Description

- -

Le paramètre nom est le nom de l'"objet module" qui sera utilisé comme un genre d'espace de noms lors de références aux exports. Les paramètres export indiquent les exports nommés individuellement, tandis que la syntaxe import * as nom les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe.

- -

Importer l'intégralité du contenu d'un module

- -

Ce qui suit insère monModule dans la portée courante, contenant tous les exports  du module dans le fichier situé dans /modules/mon-module.js.

- -
import * as monModule from '/modules/mon-module.js';
-
- -

Ici, accéder aux exports signifie utiliser le nom du module (ici monModule) comme un espace de noms. Par exemple, si le module importé ci-dessus incluait un export faireToutesLesChosesIncroyables(), vous l'écririez comme ceci :

- -
monModule.faireToutesLesChosesIncroyables();
- -

Importer un seul export depuis un module

- -

Étant donné un objet ou une valeur nommé(e) monExport qui est exporté(e) depuis le module mon-module, soit implicitement (parce que l'intégralité du module est exportée), soit explicitement (en utilisant l'instruction {{jsxref("Statements/export", "export")}}), ce qui suit insére monExport dans la portée courante.

- -
import {monExport} from '/modules/mon-module.js';
- -

Importer plusieurs éléments exportés depuis un module

- -

Ce qui suit insère à la fois machin et truc dans la portée courante.

- -
import {machin, truc} from '/modules/mon-module.js';
- -

Importer un élément exporté avec un alias

- -

Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insére nomCourt dans la portée courante.

- -
import {nomDExportDeModuleVraimentVraimentLong as nomCourt}
-  from '/modules/mon-module.js';
- -

Renommer plusieurs exports pendant l'import

- -

Importe des exports multiples depuis un module avec des alias commodes :

- -
import {
-  nomDExportDeModuleVraimentVraimentLong as nomCourt,
-  unAutreNomDeModuleLong as court
-} from '/modules/mon-module.js';
- -

Importer un module uniquement pour ses effets de bord

- -

Importe un module complet pour ses effets de bord seulement, sans importer quoi que ce soit. Ce qui suit exécute le code global du module, mais n'importe en fait aucune valeur.

- -
import '/modules/mon-module.js';
-
- -

Importation des défauts

- -

Il est possible d'avoir un {{jsxref("Statements/export", "export")}} par défaut (que ce soit un objet, une fonction, une classe, etc.). L'instruction import peut alors être utilisée pour importer ces défauts.

- -

La version la plus simple importe directement le défaut :

- -
import monDefaut from '/modules/mon-module.js';
- -

Il est également possible d'utiliser la syntaxe de défaut avec celles vues ci-dessus (imports d'espaces de noms ou imports nommés). Dans de tels cas, l'import par défaut devra être déclaré en premier. Par exemple :

- -
import monDefaut, * as monModule from '/modules/mon-module.js';
-// monModule utilisé comme un espace de noms
- -

ou

- -
import monDefaut, {machin, truc} from '/modules/mon-module.js';
-// imports nommés spécifiques
-
- -

Imports dynamiques

- -

Le mot-clé import peut être utilisé comme une fonction afin d'importer dynamiquement un module (utile lorsqu'on souhaite charger un module selon une condition donnée ou faire du chargement à la demande). Lorsqu'il est utilisé de cette façon, il renvoie une promesse :

- -
import('/modules/mon-module.js')
-  .then((module) => {
-    // Faire quelque chose avec le module
-  });
- -

On peut utiliser cette forme avec le mot-clé await :

- -
let module = await import('/modules/mon-module.js');
- -

Exemples

- -

Importation depuis un module secondaire pour aider le traitement d'une requête AJAX JSON.

- -

Le module : fichier.js

- -
function getJSON(url, rappel) {
-  let xhr = new XMLHttpRequest();
-  xhr.onload = function () {
-    rappel(this.responseText)
-  };
-  xhr.open('GET', url, true);
-  xhr.send();
-}
-
-export function recupererContenuUtile(url, rappel) {
-  getJSON(url, donnees => rappel(JSON.parse(donnees)));
-}
- -

Le programme principal : principal.js

- -
import { recupererContenuUtile } from '/modules/fichier.js';
-
-recupererContenuUtile('http://www.example.com',
-    donnees => { faireQuelqueChoseDUtile(donnees); });
- -

Import dynamique

- -

Dans cet exemple, on voit comment charger une fonctionnalité sur une page lorsqu'un utilisateur effectue une certaine action. Ici, lorsque l'utilisateur clique sur un bouton, cela déclenche l'appel d'une fonction dans le module.

- -
const main = document.querySelector("main");
-for (const link of document.querySelectorAll("nav > a")) {
-  link.addEventListener("click", e => {
-    e.preventDefault();
-
-    import('/modules/mon-module.js')
-      .then(module => {
-        module.loadPageInto(main);
-      })
-      .catch(err => {
-        main.textContent = err.message;
-      });
-  });
-}
-
-;
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour les imports dynamiques « fonctionnels »Proposition de niveau 4Fera partie de ECMAScript 2020
{{SpecName("ESDraft", "#sec-imports", "Imports")}}{{Spec2("ESDraft")}}
{{SpecName("ES2018", "#sec-imports", "Imports")}}{{Spec2("ES2018")}}
{{SpecName("ES2017", "#sec-imports", "Imports")}}{{Spec2("ES2017")}}
{{SpecName("ES2016", "#sec-imports", "Imports")}}{{Spec2("ES2016")}}
{{SpecName("ES2015", "#sec-imports", "Imports")}}{{Spec2("ES2015")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.import")}}

- -

Suivi de l'implémentation

- -

Le tableau qui suit fournit un statut journalier de l'implémentation de cette fonctionnalité car celle-ci n'a pas encore atteint une stabilité sur l'ensemble des navigateurs. Les données sont générées à partir des tests de la fonctionnalité dans Test262 (la suite de tests standard pour JavaScript), exécutée pour les versions nightly ou release des moteurs JavaScript des navigateurs.

- -
{{EmbedTest262ReportResultsTable("dynamic-import")}}
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/index.html b/files/fr/web/javascript/reference/instructions/index.html deleted file mode 100644 index ad89ea7371..0000000000 --- a/files/fr/web/javascript/reference/instructions/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Instructions -slug: Web/JavaScript/Reference/Instructions -tags: - - JavaScript - - Reference - - statements -translation_of: Web/JavaScript/Reference/Statements ---- -
-
{{jsSidebar("Statements")}}
- -

Les applications JavaScript sont composées de plusieurs instructions organisées grâce à une syntaxe. Une instruction peut s'étaler sur plusieurs lignes et on peut avoir plusieurs instructions sur une seule ligne si chaque instruction est séparée de la suivante par un point-virgule.

- -

Instructions et déclarations, par catégorie

- -

Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page.

- -

Contrôle du flux

- -
-
{{jsxref("Instructions/bloc", "Bloc")}}
-
Une instruction de bloc est utilisée pour regrouper zéro ou plusieurs instructions. Un bloc est délimité par une paire d'accolades.
-
{{jsxref("Instructions/break", "break")}}
-
Cette instruction termine la boucle ou l'instruction switch ou l'instruction label en cours et continue l'exécution sur l'instruction suivant l'instruction terminée.
-
{{jsxref("Instructions/continue", "continue")}}
-
Cette instruction termine l'exécution des instructions dans la boucle courante, ou la boucle avec une étiquette correspondante, et continue l'exécution de la boucle dans l'itération suivante.
-
{{jsxref("Instructions/vide", "Vide")}}
-
Une instruction vide est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.
-
{{jsxref("Instructions/if...else","if...else")}}
-
Cette instruction exécute une instruction si une condition donnée est vérifiée. Si la condition n'est pas vérifiée une autre instruction pourra être exécutée.
-
{{jsxref("Instructions/switch", "switch")}}
-
Cette instruction permet d'évaluer une expression et de faire correspondre le résultat de cette expression avec différents cas et d'exécuter les instructions associées aux cas qui ont chacun un identifiant.
-
{{jsxref("Instructions/throw", "throw")}}
-
Cette instruction lève une exception.
-
{{jsxref("Instructions/try...catch","try...catch")}}
-
Cette instruction permet de spécifier un ensemble d'instructions à tenter, et de préciser le traitement à effectuer dans le cas où une exception est produite.
-
- -

Déclarations

- -
-
{{jsxref("Instructions/var", "var")}}
-
-

Cette instruction permet de déclarer une variable, éventuellement en fournissant une valeur pour permettant de l'initialiser.

-
-
{{jsxref("Instructions/let", "let")}}
-
Cette instruction permet de déclarer une variable locale dans une portée d'un bloc et éventuellement d'initialiser sa valeur.
-
{{jsxref("Instructions/const", "const")}}
-
Cette instruction déclare une constante en lecture seule.
-
- -

Fonctions et classes

- -
-
{{jsxref("Instructions/function", "function")}}
-
Cette instruction déclare une fonction avec les paramètres donnés.
-
{{jsxref("Instructions/function*", "function*")}}
-
Les fonctions génératrices permettent de créer des itérateurs plus simplement.
-
{{experimental_inline}} {{jsxref("Instructions/async_function", "async function")}}
-
Cette instruction déclare une fonction asynchrone avec les paramètres associés.
-
{{jsxref("Instructions/return", "return")}}
-
Cette instruction spécifie la valeur de retour renvoyée par une fonction.
-
{{jsxref("Instructions/class", "class")}}
-
Déclare une classe.
-
- -

Itérations

- -
-
{{jsxref("Instructions/do...while", "do...while")}}
-
Cette instruction crée une boucle qui s'exécute tant que la condition est vraie. La condition est évaluée après avoir exécuté une itération de boucle, ce qui fait que cette boucle sera exécutée au moins une fois.
-
{{jsxref("Instructions/for", "for")}}
-
Cette instruction crée une boucle qui se base sur trois expressions facultatives. Ces expressions sont entre parenthèses, séparées par des points virgules et suivies par l'instruction à exécuter dans la boucle.
-
{{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} {{non-standard_inline}}
-
Cette instruction itère une variable donnée sur toutes les propriétés d'un objet. Pour chaque propriété distincte, une instruction spécifique est exécutée.
-
{{jsxref("Instructions/for...in", "for...in")}}
-
Cette instruction effectue, dans un ordre arbitraire, une boucle sur les propriétés énumérables d'un objet. Pour chacune des différentes propriétés, des instructions peuvent être exécutées.
-
{{jsxref("Instructions/for...of", "for...of")}}
-
Cette instruction parcourt les objets sur lesquels on peut itérer (comme les tableaux, les itérateurs et générateurs). Pour ce faire, elle utilise un mécanisme d'itération sur mesure utilisant des instructions à exécuter pour chacune des différentes propriétés.
-
{{jsxref("Instructions/for-await...of","for await...of")}}
-
Cette instruction parcourt les objets itérables asynchrones tels que les tableaux, les itérateurs et générateurs. Elle utilise un mécanisme d'itération spécifique et des instructions sont exécutées pour la valeur de chaque propriété.
-
{{jsxref("Instructions/while", "while")}}
-
Cette instruction permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.
-
- -

Autres

- -
-
{{jsxref("Instructions/debugger", "debugger")}}
-
Cette instruction appelle une fonctionnalité de débogage. Si aucune fonctionnalité de débogage n'est disponible, l'instruction n'a aucun effet.
-
{{jsxref("Instructions/export", "export")}}
-
Cette instruction permet à un script signé de fournir des propriétés, fonctions et des objets à d'autres scripts (signés ou non).
-
{{jsxref("Instructions/import", "import")}}
-
Cette instruction permet à un script d'importer des propriétés, fonctions ou objets depuis un script qui les exporte.
-
import.meta
-
Une méta propriété qui expose des métadonnées à propos du module JavaScript.
-
{{jsxref("Instructions/label", "label")}}
-
Cette instruction fournit un identifiant auquel il est possible de se référer en utilisant une instruction break ou continue.
-
- -
-
{{jsxref("Instructions/with", "with")}} {{deprecated_inline}}
-
Cette instruction permet d'étendre la portée chaînée d'une instruction.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1', '#sec-12', 'Statements')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES3', '#sec-12', 'Statements')}}{{Spec2('ES3')}}
{{SpecName('ES5.1', '#sec-12', 'Statements')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}{{Spec2('ES6')}}Nouveaux éléments : function*, let, for...of, yield, class
{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements")}}

- -

Voir aussi

- - -
diff --git a/files/fr/web/javascript/reference/instructions/label/index.html b/files/fr/web/javascript/reference/instructions/label/index.html deleted file mode 100644 index 2b3fb86d46..0000000000 --- a/files/fr/web/javascript/reference/instructions/label/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: label -slug: Web/JavaScript/Reference/Instructions/label -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/label ---- -
{{jsSidebar("Statements")}}
- -

Une instruction étiquetée (labeled en anglais) peut être utilisée avec les instructions {{jsxref("Instructions/break", "break")}} ou {{jsxref("Instructions/continue", "continue")}}. Un label permet d'identifier une instruction avec un identifiant pour y faire référence plus tard.

- -
{{EmbedInteractiveExample("pages/js/statement-label.html")}}
- - - -
-

Note : Les boucles ou les blocs étiquetés sont très rares et on peut généralement utiliser des appels de fonction plutôt que des sauts de boucle.

-
- -

Syntaxe

- -
label :
-   instruction
-
- -
-
label
-
N'importe quel identifiant JavaScript qui n'est pas un mot-clé réservé.
-
instruction
-
Une instruction. break peut être utilisé avec n'importe quelle instruction identifiée. continue ne peut être utilisé qu'avec des instructions de boucle.
-
- -

Description

- -

Une étiquette (label) peut être utilisée pour identifier une boucle et pour y faire référence à l'intérieur en utilisant les instructions break ou continue afin d'interrompre cette boucle ou de reprendre son exécution.

- -

JavaScript ne possède pas d'instruction goto, les étiquettes ne peuvent être utilisées que par les instructions break ou continue.

- -

En mode strict, on ne peut pas utiliser let comme étiquette, cela lèvera une exception {{jsxref("SyntaxError")}} (let est un identifiant réservé).

- -

Exemples

- -

Faire référence à une étiquette avec continue dans une boucle

- -
var i, j;
-
-boucle1:
-for (i = 0; i < 3; i++) {      //Le premier for correspond à "boucle1"
-   boucle2:
-   for (j = 0; j < 3; j++) {   //Le second for correspond à "boucle2"
-      if (i === 1 && j === 1) {
-         continue boucle1;
-      } else {
-         console.log("i = " + i + ", j = " + j);
-      }
-   }
-}
-
-// On aura les résultats suivants :
-//   "i = 0, j = 0"
-//   "i = 0, j = 1"
-//   "i = 0, j = 2"
-//   "i = 1, j = 0"
-//   "i = 2, j = 0"
-//   "i = 2, j = 1"
-//   "i = 2, j = 2"
-// On voit bien l'absence de "i = 1, j = 1" et "i = 1, j = 2"
-
- -

Second exemple utilisant continue

- -

Étant donné un tableau d'élément et un tableau de tests, cet exemple donne le nombre d'éléments qui ont réussi tous les tests.

- -
var nbItemsReussis = 0;
-var i, j;
-
-top:
-for (i = 0; i < items.length; i++){
-  for (j = 0; j < tests.length; j++){
-    if (!tests[j].reussi(items[i])){
-      continue top;
-    }
-  }
-  nbItemsReussis++;
-}
- -

Utiliser break avec une étiquette au sein d'une boucle for

- -
var i, j;
-
-boucle1:
-for (i = 0; i < 3; i++) { // première boucle étiquetée « boucle1 »
-  boucle2:
-  for (j =0; j < 3; j++) { // seconde boucle étiquetée « boucle2 »
-    if (i == 1 && j == 1) {
-      break boucle1;
-    }
-    console.log("i = " + i + ", j = " + j);
-  }
-}
-
-// Ce qui produira en sortie
-// (dans la console)
-// "i = 0, j = 0"
-// "i = 0, j = 1"
-// "i = 0, j = 2"
-// "i = 1, j = 0"
-// Ici on voit la différence avec l'exemple précédent utilisant continue
-
- -

Second exemple utilisant un label et break

- -

Étant donné un tableau d'éléments et un tableau de tests, cet exemple permet de déterminer si oui ou non tous les éléments ont réussis tous les tests.

- -
var toutReussi = true;
-var i, j;
-
-top:
-for (i = 0; items.length; i++)
-  for (j = 0; j < tests.length; i++)
-    if (!tests[j].reusi(items[i])){
-      toutReussi = false;
-      break top;
-    }
-
- -

Utilise un bloc étiqueté avec break

- -

On peut utiliser des étiquettes dans des blocs simples mais seul break permettra de faire référence à des étiquettes en dehors d'une boucle.

- -
toto: {
-  console.log("face");
-  break toto;
-  console.log("this will not be executed");
-}
-console.log("swap");
-
-// On aura alors dans la console :
-
-// "face"
-// "swap
- -

Déclarations de fonctions étiquetées

- -

À partir d'ECMAScript 2015, les déclarations de fonctions étiquetées sont standardisées pour du code non-strict au sein de l'annexe de la spécification relative à la compatibilité web.

- -
L: function F() {}
- -

En revanche, en mode strict, cela lèvera une exception {{jsxref("SyntaxError")}}:

- -
"use strict";
-L: function F() {}
-// SyntaxError: functions cannot be labelled
- -

Les fonctions génératrices ne peuvent pas être étiquetées, en mode strict, comme en mode non-strict :

- -
L: function* F() {}
-// SyntaxError: generator functions cannot be labelled
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.label")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/let/index.html b/files/fr/web/javascript/reference/instructions/let/index.html deleted file mode 100644 index be39c8ecae..0000000000 --- a/files/fr/web/javascript/reference/instructions/let/index.html +++ /dev/null @@ -1,371 +0,0 @@ ---- -title: let -slug: Web/JavaScript/Reference/Instructions/let -tags: - - ECMAScript 2015 - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/let ---- -
{{jsSidebar("Statements")}}
- -

L'instruction let permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.

- -
{{EmbedInteractiveExample("pages/js/statement-let.html")}}
- - - -

Syntaxe

- -
let var1 [= valeur1] [, var2 [= valeur2]] [, ..., varN [= valeurN]];
- -

Paramètres

- -
-
var1, var2, …, varN
-
Le nom de la ou des variables. Ces noms doivent être des identifiants JavaScript valides.
-
valeur1, valeur2, …, valeurN{{optional_inline}}
-
Pour chaque variable déclaré, on peut indiquer, de façon optionnelle, sa valeur initiale. Ces valeurs peuvent être n'importe quelle expression légale.
-
- -

Description

- -

let permet de déclarer des variables dont la portée est limitée à celle du bloc dans lequel elles sont déclarées. Le mot-clé {{jsxref("Instructions/var","var")}}, quant à lui, permet de définir une variable globale ou locale à une fonction (sans distinction des blocs utilisés dans la fonction).

- -

Une autre différence entre let et var est la façon dont la variable est initialisée : pour let, la variable est initialisée à l'endroit où le parseur évalue son contenu (cf. ci-après).

- -

À l'instar de {{jsxref("instructions/const", "const")}}, let ne crée pas de propriété sur l'objet {{domxref("window")}} quand les variables sont déclarées au niveau global.

- -

L'origine du nom let est décrite dans cette réponse (en anglais).

- -

Les portées de bloc avec let

- -

Le mot-clé let permet de définir des variables au sein d'un bloc et des blocs qu'il contient. var permet quant à lui de définir une variable dont la portée est celle de la fonction englobante.

- -
if (x > y) {
-  let gamma = 12.7 + y;
-  i = gamma * x;
-}
-
-function varTest() {
-  var x = 1;
-  if (true) {
-    var x = 2;  // c'est la même variable !
-    console.log(x);  // 2
-  }
-  console.log(x);  // 2
-}
-
-function letTest() {
-  let x = 1;
-  if (true) {
-    let x = 2;  // c'est une variable différente
-    console.log(x);  // 2
-  }
-  console.log(x);  // 1
-}
-
- -

Une meilleure lisibilité pour les fonctions internes

- -

let peut parfois permettre de rendre le code plus lisible lorsqu'on utilise des fonctions internes.

- -
var list = document.getElementById("list");
-
-for (let i = 1; i <= 5; i++) {
-  var item = document.createElement("li");
-  item.appendChild(document.createTextNode("Élément " + i));
-
-  item.onclick = function (ev) {
-    console.log("Clic sur l'élément " + i + ".");
-  };
-  list.appendChild(item);
-}
-
-// Pour obtenir le même effet avec var
-// il aurait fallu créer un contexte différent
-// avec une fermeture (closure) pour la valeur
-
-for (var i = 1; i <= 5; i++) {
-  var item = document.createElement("li");
-  item.appendChild(document.createTextNode("Item " + i));
-
-  (function(i) {
-    item.onclick = function(ev) {
-      console.log("Item " + i + " a reçu un clic.");
-    };
-  })(i);
-  list.appendChild(item);
-}
-
- -

Dans l'exemple précédent, cela fonctionne comme on l'attend car les cinq instances de la fonction anonyme sont liées à cinq instances différentes de i. Si on remplace let par {{jsxref("Instructions/var","var")}}, on n'obtiendra pas l'effet escompté car on aura une même variable pour cette portée i=6 (au lieu de 5 différentes).

- -

Règles de portées

- -

Les variables déclarées avec let appartiennent à la portée du bloc dans lequel elles sont définies et indirectement aux portées des blocs de ce bloc. D'une certaine façon let fonctionne comme var, la seule différence dans cette analogie est que let fonctionne avec les portées de bloc et var avec les portées des fonctions :

- -
function varTest() {
-  var x = 31;
-  if (true) {
-    var x = 71;  // c'est la même variable !
-    console.log(x);  // 71
-  }
-  console.log(x);  // 71
-}
-
-function letTest() {
-  let x = 31;
-  if (true) {
-    let x = 71;  // c'est une variable différente
-    console.log(x);  // 71
-  }
-  console.log(x);  // 31
-}
-
- -

Au niveau le plus haut (la portée globale), let crée une variable globale alors que var ajoute une propriété à l'objet global :

- -
var x = 'global';
-let y = 'global2';
-console.log(this.x); // "global"
-console.log(this.y); // undefined
-console.log(y);      // "global2"
-
- -

Émuler le fonctionnement des interfaces privées

- -

En utilisant l'instruction let avec des constructeurs, on peut créer des interfaces privées sans avoir à utiliser de fermetures :

- -
var Truc;
-
-{
-  let porteePrivee = new WeakMap();
-  let compteur = 0;
-
-  Truc = function() {
-    this.unePropriete = 'toto';
-
-    porteePrivee.set(this, {
-      cachee: ++compteur,
-    });
-  };
-
-  Truc.prototype.montrerPublique = function() {
-    return this.unePropriete;
-  };
-
-  Truc.prototype.montrerPrivee = function() {
-    return porteePrivee.get(this).cachee;
-  };
-}
-
-console.log(typeof porteePrivee);
-// "undefined"
-
-var truc = new Truc();
-
-console.log(truc);
-// Truc {unePropriete: "toto"}
-
-truc.montrerPublique();
-// "toto"
-
-truc.montrerPrivee();
-// 1
-
- -

Cette technique permet d'obtenir un état privé « statique ». Ainsi, dans l'exemple qui précède, toutes les instances de Truc partageront la même portéePrivée.
- Il était possible d'obtenir un tel isolement avec var mais il fallait passer par des fonctions isolées (généralement des fonctions immédiatement appelées (IIFE)).

- -

Zone morte temporaire (Temporal Dead Zone / TDZ)  et les erreurs liées à let

- -

Lorsqu'on redéclare une même variable au sein d'une même portée de bloc, cela entraîne une exception {{jsxref("SyntaxError")}}.

- -
if (x) {
-  let toto;
-  let toto; // SyntaxError
-}
- -

Avec ECMAScript 2015 (ES6), let remontera (hoisting) la déclaration variable au début de la portée (au début du bloc) mais pas l'initialisation. Si on fait référence à une variable dans un bloc avant la déclaration de celle-ci avec let, cela entraînera une exception {{jsxref("ReferenceError")}}. En effet, la variable est placée dans une « zone morte temporaire » entre le début du bloc et le moment où la déclaration est traitée. Autrement dit, la déclaration est bien remontée mais la variable ne peut pas être utilisée tant que l'affectation (qui n'est pas remontée) n'a pas été effectuée.

- -
function faire_quelque_chose() {
-  console.log(truc); // undefined
-  console.log(toto); // ReferenceError
-  let toto = 2;
-  var truc = 1;
-}
- -

Il est possible d'obtenir des erreurs au sein de l'instruction {{jsxref("Instructions/switch")}}. En effet, il y a un seul bloc implicite pour cette instruction.

- -
switch (x) {
-  case 0:
-    let toto;
-    break;
-
-  case 1:
-    let toto; // SyntaxError for redeclaration.
-    break;
-}
- -

Par contre, si on ajoute une instruction de bloc dans la clause case, cela créera une nouvelle portée et empêchera l'erreur :

- -
let x = 1;
-
-switch(x) {
-  case 0: {
-    let toto;
-    break;
-  }
-  case 1: {
-    let toto;
-    break;
-  }
-}
- -

Autres situations

- -

Lorsqu'on utilise let dans un bloc, sa portée est limitée à celle du bloc. On notera ici la différence avec var dont la portée est celle de la fonction où il est utilisé.

- -
var a = 1;
-var b = 2;
-
-if (a === 1) {
-  var a = 11; // la portée est la portée globale
-  let b = 22; // la portée est celle du bloc if
-
-  console.log(a);  // 11
-  console.log(b);  // 22
-}
-
-console.log(a); // 11
-console.log(b); // 2
-
- -

Cependant, la combinaison utilisée ci-après déclenchera une exception SyntaxError car la déclaration avec var est remontée en haut du bloc et il y a donc une redéclaration implicite de la variable (également utilisée avec let).

- -
let x = 1;
-
-if (true) {
-  var x = 2; // SyntaxError liée à la redéclaration
-}
-
- -

La zone morte temporaire et typeof

- -

Si on utilise typeof sur des variables non déclarées ou qui valent {{jsxref("undefined")}}, on obtiendra la valeur undefined. Mais si on utilise typeof sur une variable au sein de la zone morte temporaire de cette variable, cela déclenchera une {{jsxref("ReferenceError")}} :

- -
console.log(typeof variableNonDeclaree); // affiche 'undefined'
-
-console.log(typeof i); // ReferenceError
-let i = 10;
- -

Autre exemple lié à la zone morte temporaire et aux portées lexicales

- -

Dans l'exemple qui suit, dans l'expression toto + 55, l'identifiant toto fait référence à la variable du bloc courant et non à celle qui est déclarée au dessus et qui a la valeur 33. Dans l'instruction let toto = (toto + 55); l'instruction est bien remontée mais l'endroit où on utilise toto (dans le fragment (toto + 55)) est toujours dans la zone morte temporaire car toto n'a pas encore été affecté.

- -
function test(){
-  var toto = 33;
-  if (true) {
-    let toto = (toto + 55); // ReferenceError: can't access lexical declaration `toto` before initialization
-  }
-}
-test();
-
- -

Si on utilise let avec un nom de variable qui est le même que celui de l'argument passé à la fonction, on aura une erreur due à la confusion des portées :

- -
function go(n) {
-  for (let n of n.a){ // ReferenceError: can't access lexical declaration `n' before initialization
-    console.log(n);
-  }
-}
-go({a:[1, 2, 3]});
-
- -

Les variables déclarées avec let et les boucles for

- -

Le mot-clé let permet de lier des variables localement dans la portée des boucles for. Contrairement au mot-clé var qui lui rend les variables visibles depuis l'ensemble de la fonction qui contient la boucle.

- -
var a = 0;
-for ( let i = a; i < 10; i++ ) {
-  console.log(i);
-}
-
- -

Règles de portées

- -
for (let expr1; expr2; expr3) instruction
- -

Dans cet exemple, expr2, expr3, et instruction sont contenues dans un bloc implicite qui contient la variable de bloc local déclarée avec let expr1.

- -

Exemples

- -

let / var

- -

Lorsqu'il est utilisé dans un bloc, let permet de limiter la portée de la variable à ce bloc. var quant à lui limite la portée de la variable à la fonction.

- -
var a = 5;
-var b = 10;
-
-if (a === 5) {
-  let a = 4; // La portée est celle du bloc if
-  var b = 1; // La portée est celle interne à la fonction
-
-  console.log(a);  // 4
-  console.log(b);  // 1
-}
-
-console.log(a); // 5
-console.log(b); // 1
- -

let utilisé dans les boucles

- -

Le mot-clé let permet de lier des variables à la portée de la boucle plutôt qu'à celle de la fonction (avec var) :

- -
for (let i = 0; i<10; i++) {
-  console.log(i); // 0, 1, 2, 3, 4 ... 9
-}
-
-console.log(i); // i n'est pas défini
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}{{Spec2('ES2015')}}Définition initiale. Cette définition n'inclue pas les expressions et blocs let.
{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.let")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/return/index.html b/files/fr/web/javascript/reference/instructions/return/index.html deleted file mode 100644 index 1972130104..0000000000 --- a/files/fr/web/javascript/reference/instructions/return/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: return -slug: Web/JavaScript/Reference/Instructions/return -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/return ---- -
{{jsSidebar("Statements")}}
- -

L'instruction return met fin à l'exécution d'une fonction et définit une valeur à renvoyer à la fonction appelante.

- -
{{EmbedInteractiveExample("pages/js/statement-return.html")}}
- - - -

Syntaxe

- -
return [[expression]];
- -
-
expression
-
L'expression dont on souhaite renvoyer la valeur. Si elle est absente, la valeur renvoyée par défaut sera {{jsxref("undefined")}}.
-
- -

Description

- -

Lorsqu'une instruction return est utilisée dans une fonction, l'exécution de la fonction se termine. Si une valeur est fournie, elle sera renvoyée à l'appelant de la fonction. Si l'expression définissant la valeur de retour de la fonction est absente, la valeur undefined sera renvoyée. Par exemple, voici une fonction qui renvoie le carré de son argument x (où x est un nombre) :

- -
function carre(x) {
-  return x * x;
-}
-var demo = carre(3);
-// demo vaudra alors 9
-
- -

Les instructions qui suivent causeront chacune l'arrêt de l'exécution d'une fonction :

- -
return;
-return true;
-return false;
-return x;
-return x + y / 3;
-
- -

Ajout automatique de point-virgule

- -

L'instruction return peut être impactée par l'ajout automatique de point-virgule (ASI en anglais). Il est interdit d'avoir un caractère de fin de ligne entre le mot-clé return et l'expression :

- -
return
-a + b;
-
-
- -

Après ASI, cela sera transformé en :

- -
return;
-a + b;
-// Avertissement console : "expression non accessible
-// après une instruction return sans point-virgule"
-
- -
-

Note : À partir de Gecko 40 {{geckoRelease(40)}}, un avertissement sera affiché dans la console si l'analyse du code trouve une instruction semblable à une expression après une instruction return sans point-virgule. Voir le {{bug(1005110)}} pour plus d'informations.

-
- -

Pour éviter ce problème et l'insertion automatique, on peut, si besoin, utiliser des parenthèses.

- -
return (
-  a + b;
-);
- -

Exemples

- -

Utiliser return

- -

La fonction suivante renvoie le carré de son argument :

- -
function carré(x) {
-   return x * x;
-}
-
- -

Interrompre une fonction

- -

Une fonction s'arrête immédiatement à l'instant où l'instruction return est traitée.

- -
function compteur() {
-  for (var compte = 1; ; compte++) {  // boucle infinie
-    console.log(compte + "A"); // jusqu'à 5
-      if (compte === 5) {
-        return;
-      }
-      console.log(compte + "B");  // jusqu'à 4
-    }
-  console.log(compte + "C");  // cette instruction n'est jamais utilisée
-}
-
-compteur();
-
-// Résultat dans la console :
-// 1A
-// 1B
-// 2A
-// 2B
-// 3A
-// 3B
-// 4A
-// 4B
-// 5A
-
- -

Renvoyer une fonction

- -

Pour en savoir plus sur les fermetures (closures), voir cet article sur les fermetures.

- -
function magique() {
-  return function calc(x) { return x * 42 };
-}
-
-var réponse = magique();
-réponse(1337); // 56154
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.return")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/switch/index.html b/files/fr/web/javascript/reference/instructions/switch/index.html deleted file mode 100644 index d3fcc130fa..0000000000 --- a/files/fr/web/javascript/reference/instructions/switch/index.html +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: switch -slug: Web/JavaScript/Reference/Instructions/switch -tags: - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/switch ---- -
{{jsSidebar("Statements")}}
- -

L'instruction switch évalue une expression et, selon le résultat obtenu et le cas associé, exécute les instructions correspondantes.

- -
{{EmbedInteractiveExample("pages/js/statement-switch.html")}}
- - - -

Syntaxe

- -
switch (expression) {
-  case valeur1:
-    // Instructions à exécuter lorsque le résultat
-    // de l'expression correspond à valeur1
-    instructions1;
-    [break;]
-  case valeur2:
-    // Instructions à exécuter lorsque le résultat
-    // de l'expression correspond à valeur2
-    instructions 2;
-    [break;]
-  ...
-  case valeurN:
-    // Instructions à exécuter lorsque le résultat
-    // de l'expression à valeurN
-    instructionsN;
-    [break;]
-  [default:
-    // Instructions à exécuter lorsqu'aucune des valeurs
-    // ne correspond
-    instructions_def;
-    [break;]]
-}
- -
-
expression
-
Une expression à comparer avec chacune des clause case.
-
case expressionN {{optional_inline}}
-
Une clause qu'on compare avec expression.
-
default {{optional_inline}}
-
Une clause exécutée si aucune correspondance n'est trouvée avec les clause case (et/ou s'il n'y a pas de break pour les clauses case précédentes).
-
instructionsN
-
Les instructions à exécuter lorsque l'expression correspond au cas présenté pour cette clause.
-
instructions_def
-
Les instructions à exécuter si l'expression ne correspond à aucun cas de figure précédemment décrit.
-
- -

Description

- -

Une instruction switch commence par évaluer l'expression fournie (cette évaluation ne se produit qu'une fois). Si une correspondance est trouvée, le programme exécutera les instructions associées. Si plusieurs cas de figure correspondent, le premier sera sélectionné (même si les cas sont différents les uns des autres).

- -

Le programme recherche tout d'abord une clause case dont l'expression est évaluée avec la même valeur que l'expression d'entrée (au sens de {{jsxref("Opérateurs/Opérateurs_de_comparaison","l'égalité stricte","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)",1)}}. Si une telle clause est trouvée, les instructions associées sont exécutées. Si aucune clause case n'est trouvée, le programme recherche la clause optionnelle default et si elle existe, les instructions correspondantes sont exécutées. Si cette clause optionnelle n'est pas utilisée, le programme continue son exécution après l'instruction switch. Par convention, la clause default est utilisée en dernière mais cela n'est pas nécessaire.

- -

L'instruction {{jsxref("Instructions/break","break")}} peut optionnellement être utilisée pour chaque cas et permet de s'assurer que seules les instructions associées à ce cas seront exécutées. Si break n'est pas utilisé, le programme continuera son exécution avec les instructions suivantes (des autres cas de l'instruction switch).

- -

Exemples

- -

Utiliser switch

- -

Dans l'exemple suivant, si l'expression expr vaut "Bananes", le programme trouve la correspondance et exécute l'instruction associée. Lorsque l'instruction break est trouvée, le programme « sort » de l'instruction switch et continue l'exécution avec les instructions  suivantes. Si break n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée.

- -
switch (expr) {
-  case "Oranges":
-    console.log("Oranges : 0.59 € le kilo.");
-    break;
-  case "Pommes":
-    console.log("Pommes : 0.32 € le kilo.");
-    break;
-  case "Bananes":
-    console.log("Bananes : 0.48 € le kilo.");
-    break;
-  case "Cerises":
-    console.log("Cerises : 3.00 € le kilo.");
-    break;
-  case "Mangues":
-  case "Papayes":
-    console.log("Mangues et papayes : 2.79 € le kilo.");
-    break;
-  default:
-    console.log("Désolé, nous n'avons plus de " + expr + ".");
-}
-
-console.log("Autre chose ?");
-
- -

Que se passe-t-il si on oublie un break ?

- -

Si on omet une instruction break, le script exécutera les instructions pour le cas correspondant et aussi celles pour les cas suivants jusqu'à la fin de l'instruction switch ou jusqu'à une instruction break. Par exemple :

- -
var toto = 0;
-switch (toto) {
-    case -1:
-        console.log('moins un');
-        break;
-    case 0: // toto vaut 0 donc ce cas correspond
-        console.log(0);
-        // NOTE : le break aurait du être placé ici
-    case 1: // pas de break pour 'case 0:' les instructions de ce cas sont
-            // exécutées aussi
-        console.log(1);
-        break; // on a un break a ce niveau donc les instructions
-               // des cas suivants ne seront pas exécutées
-    case 2:
-        console.log(2);
-        break;
-    default:
-        console.log('default');
-}
- -

Peut-on intercaler la règle par défaut ?

- -

Oui, il est possible de placer le cas default entre deux autres cas. Ainsi, si on a une valeur qui ne correspond pas aux différents cas, elle passera par le bloc default puis par les autres s'il n'y a pas de break. Par exemple :

- -
var toto = 5
-switch (toto) {
-  case 2:
-    console.log(2); // ne sera pas exécuté
-    break;
-  default:
-    console.log("default"); // sera exécuté
-  case 1:
-    console.log("1"); // sera exécuté car il n'y a
-                      // pas de break avant
-}
-// La console affichera "default" puis "1"
-
- -

Méthodes pour regrouper différents cas

- -

Pour la source depuis laquelle les exemples suivants ont été adaptés, voir cette question Stack Overflow.

- -

Regrouper différents cas pour exécuter une unique opération

- -

Cette méthode utilise le fait que s'il n'y a pas d'instruction {{jsxref("Instructions/break","break")}}, l'exécution se poursuivra avec les instructions des cas suivants (même si les expressions de ces cas ne correspondent pas à la valeur de l'expression d'entrée).

- -

On peut donc regrouper différentes valeurs les unes à la suite des autres pour exécuter des instructions pour ces valeurs :

- -
var animal = 'girafe';
-switch (animal) {
-    case 'vache':
-    case 'girafe':
-    case 'chien':
-    case 'cochon':
-        console.log('Cet animal est un mammifère');
-        break;
-    case 'oiseau':
-    default:
-        console.log('Cet animal n\'est pas un mammifère.');
-}
- -

Chaîner des opérations

- -

Dans l'exemple qui suit, on illustre comment exécuter une série d'instructions qui varie en fonction du paramètre (ici un entier) fourni. Cela montre que les différents cas sont testés dans l'ordre dans lequel ils sont mis au sein du switch :

- -
var toto = 1;
-var output = 'Résultat : ';
-switch (toto) {
-    case 0:
-        output += 'Donc ';
-    case 1:
-        output += 'quel ';
-        output += 'est ';
-    case 2:
-        output += 'votre ';
-    case 3:
-        output += 'nom ';
-    case 4:
-        output += '?';
-        console.log(output);
-        break;
-    case 5:
-        output += '!';
-        console.log(output);
-        break;
-    default:
-        console.log('Veuillez choisir un nombre entre 0 et 5 !');
-}
- -

Selon les valeurs fournies à la variable toto, on aura les résultats suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValeurTexte
toto vaut {{jsxref("NaN")}} ou est différent de 1, 2, 3, 4, 5 ou 0Veuillez choisir un nombre entre 0 et 5 !
0Résultat : Donc quel est votre nom ?
1Résultat : quel est votre nom ?
2Résultat : votre nom ?
3Résultat : nom ?
4Résultat : ?
5Résultat : !
- -

switch et les variables avec une portée de bloc

- -

Avec ECMAScript 2015 (ES6), on peut utiliser les instructions let et const pour déclarer des variables dont la portée sera celle du bloc englobant.

- -

Prenons cet exemple :

- -
const action = 'dire_bonjour';
-switch (action) {
-  case 'dire_bonjour':
-    let message = 'bonjour';
-    console.log(message);
-    break;
-  case 'dire_coucou':
-    let message = 'coucou';
-    console.log(message);
-    break;
-  default:
-    console.log('Aucune action reçue.');
-    break;
-}
- -

Si on exécute cet exemple, on aura l'erreur Uncaught SyntaxError: Identifier 'message' has already been declared qui n'est probablement pas le résultat espéré.

- -

Cela se produit car la première instruction let message = 'bonjour'; entre en conflit avec let message = 'coucou'; bien qu'elles soient rattachées à deux instructions case distinctes case 'dire_bonjour': et case 'dire_coucou': mais ces deux instructions s'inscrivent dans le même bloc et on a donc message déclaré deux fois dans le même bloc, soit deux fois dans la même portée.

- -

Pour régler ce problème, il suffit de rajouter des accolades pour définir un bloc d'instructions pour chaque case :

- -
const action = 'dire_bonjour';
-switch (action) {
-  case 'dire_bonjour': { // accolade ajoutée
-    let message = 'bonjour';
-    console.log(message);
-    break;
-  } // accolade ajoutée
-  case 'dire_coucou': { // accolade ajoutée
-    let message = 'coucou';
-    console.log(message);
-    break;
-  } // accolade ajoutée
-  default: { // accolade ajoutée
-    console.log('Aucune action reçue.');
-    break;
-  } // accolade ajoutée
-}
- -

Cette nouvelle version, exécutée, produira "bonjour" dans la console, sans causer d'erreur.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2
{{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.switch")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/throw/index.html b/files/fr/web/javascript/reference/instructions/throw/index.html deleted file mode 100644 index 1465d2f460..0000000000 --- a/files/fr/web/javascript/reference/instructions/throw/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: throw -slug: Web/JavaScript/Reference/Instructions/throw -tags: - - Exception - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/throw ---- -
{{jsSidebar("Statements")}}
- -

L'instruction throw permet de lever une exception définie par l'utilisateur. L'exécution de la fonction courante sera stoppée (les instructions situées après l'instruction throw ne seront pas exécutées) et le contrôle sera passé au premier bloc {{jsxref("Instructions/try...catch","catch")}} de la pile d'appels. Si aucun bloc catch ne se trouve dans les fonctions de la pile d'appels, le programme sera terminé.

- -
{{EmbedInteractiveExample("pages/js/statement-throw.html")}}
- - - -

Syntaxe

- -
throw expression;
- -
-
expression
-
L'expression qui fournit l'exception à lever.
-
- -

Description

- -

L'instruction throw permet de lever (throw en anglais) une exception. Lorsqu'on lève une exception, expression fournit la valeur de l'exception. Chacune des instructions ci-après permet de lever une exception :

- -
throw "monErreur"; // génère une exception étant une chaîne de caractères
-throw 42;          // génère une exception ayant la valeur 42
-throw true;        // génère une exception ayant la valeur true
-throw new Error("Obligatoire");  // génère un objet Error avec le message "Obligatoire"
- -

On notera également que l'instruction throw est affectée par {{jsxref("Grammaire_lexicale","l'insertion automatique de point-virgule","#Insertion_automatique_de_points-virgules",1)}} car il n'est pas permis d'avoir un caractère de fin de ligne entre le mot-clé throw et l'expression.

- -

Exemples

- -

Lever une exception qui est un objet

- -

Il est possible de lever une exception qui est un objet et de faire référence aux propriétés de cet objet au sein du bloc catch. Dans l'exemple suivant, on crée un objet monException du type ExceptionUtilisateur puis on utilise cet objet avec une instruction throw.

- -
function ExceptionUtilisateur(message) {
-   this.message = message;
-   this.name = "ExceptionUtilisateur";
-}
-function getNomMois(mo) {
-   mo = mo-1; // Adjust month number for array index (1=Jan, 12=Dec)
-   var mois = ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil",
-      "Août", "Sept", "Oct", "Nov", "Déc"];
-   if (mois[mo] !== undefined) {
-      return mois[mo];
-   } else {
-      throw new ExceptionUtilisateur("Numéro de mois invalide");
-   }
-}
-
-try {
-   // les instructions à tenter
-   var monMois = 15; // 15 est en dehors des limites prévues
-   var nomMois = getNomMois(monMois);
-} catch (e) {
-   nomMois = "unknown";
-   console.error(e.message, e.name); // on passe les caractéristiques de l'exception
-                                     // à un gestionnaire d'erreur
-}
-
- -

Deuxième exemple avec un objet

- -

Ici, on cherche à valider une chaîne de caractères représentant un code postal américain. Si le format utilisé est invalide, cela provoquera une exception avec un objet du type ZipFormatIncorrectException. (Le mot-clé {{jsxref("Instructions/const","const")}} introduit avec ECMAScript 6 est utilisé dans cet exemple).

- -
/*
- * Crée un objet ZipCode.
- *
- * Les formats acceptés sont :
- *    12345
- *    12345-6789
- *    123456789
- *    12345 6789
- *
- * Si l'argument passé au constructeur ZipCode n'est pas conforme
- * à un de ces formats, une exception sera levée.
- */
-
-function ZipCode(zip) {
-   zip = new String(zip);
-   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
-   if (pattern.test(zip)) {
-      // la valeur du code sera la première correspondance
-      // dans la chaîne
-      this.value = zip.match(pattern)[0];
-      this.valueOf = function() {
-         return this.value
-      };
-      this.toString = function() {
-         return String(this.value)
-      };
-   } else {
-      throw new ZipFormatIncorrectException(zip);
-   }
-}
-
-function ZipFormatIncorrectException(value) {
-   this.value = value;
-   this.message = "le format n'est pas conforme";
-   this.toString = function() {
-      return this.value + this.message;
-   };
-}
-
-/*
- * Cette fonction pourrait être utilisée dans un script
- * pour valider des adresses
- */
-
-const ZIPCODE_INVALID = -1;
-const ZIPCODE_UNKNOWN_ERROR = -2;
-
-function vérifierZipCode(z) {
-   try {
-      z = new ZipCode(z);
-   } catch (e) {
-      if (e instanceof ZipFormatIncorrectException) {
-         return ZIPCODE_INVALID;
-      } else {
-         return ZIPCODE_UNKNOWN_ERROR;
-      }
-   }
-   return z;
-}
-
-a = vérifierZipCode(95060);         // renvoie 95060
-b = vérifierZipCode(9560);          // renvoie -1
-c = vérifierZipCode("a");           // renvoie -1
-d = vérifierZipCode("95060");       // renvoie 95060
-e = vérifierZipCode("95060 1234");  // renvoie 95060 1234
-
- -

Propager une exception

- -

L'instruction throw peut être utilisée pour transmettre une exception qui aurait été interceptée avec {{jsxref("Instructions/try...catch","catch")}}. Dans l'exemple suivant, on intercepte une exception avec une valeur numérique et on propage l'exception si la valeur est supérieure à 50. L'exception qui est levée se propage dans la fonction appelante ou au niveau le plus haut, visible par l'utilisateur.

- -
try {
-   throw n; // lève une exception avec une valeur numérique
-} catch (e) {
-   if (e <= 50) {
-      // des instructions pour gérer les cas entre 1 et 50
-   } else {
-      // ce cas ne peut pas être géré maintenant, on transmet l'exception
-      throw e;
-   }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.4
{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.throw")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/try...catch/index.html b/files/fr/web/javascript/reference/instructions/try...catch/index.html deleted file mode 100644 index ae1d13b6d5..0000000000 --- a/files/fr/web/javascript/reference/instructions/try...catch/index.html +++ /dev/null @@ -1,306 +0,0 @@ ---- -title: try...catch -slug: Web/JavaScript/Reference/Instructions/try...catch -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/try...catch ---- -
{{jsSidebar("Statements")}}
- -

L'instruction try...catch regroupe des instructions à exécuter et définit une réponse si l'une de ces instructions provoque une exception.

- -
{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}
- - - -

Syntaxe

- -
try {
-   instructions_try
-}
-[catch (exception_var_1 if condition_1) { // non-standard
-   instructions_catch_1
-}]
-...
-[catch (exception_var_2) {
-   instructions_catch_2
-}]
-[finally {
-   instructions_finally
-}]
-
- -
-
instructions_try
-
Les instructions qu'on souhaite exécuter.
-
- -
-
instructions_catch_1, instructions_catch_2
-
Les instructions à exécuter si une exception est levée dans le bloc try.
-
- -
-
exception_var_1, exception_var_2
-
Un identifiant qui permet de récupérer la valeur de l'exception associée à la clause catch.
-
- -
-
condition_1
-
Une expression conditionnelle.
-
- -
-
instructions_finally
-
Les instructions à exécuter une fois que l'instruction try est terminée. Ces instructions s'exécuteront, qu'il y ait eu une exception ou non.
-
- -

Description

- -

L'instruction try est composée d'un bloc try contenant une ou plusieurs instructions, d'au moins une clause catch ou d'une clause finally ou des deux. On peut donc avoir les trois formes suivantes pour cette instruction :

- -
    -
  1. try...catch
    2. -
  2. try...finally
    3. -
  3. try...catch...finally
    4. -
- -

Une clause catch contient les instructions à exécuter si une exception est levée par une instruction du bloc try. On souhaite généralement que le bloc try se déroule sans problème. Si toutefois une erreur se produit, on veut pouvoir contrôler ce qui se passe et on transmet donc le contrôle au bloc catch. Si une instruction contenue dans le bloc try (ou une fonction appelée depuis le bloc try) renvoie une exception, le contrôle sera immédiatement passé à la clause catch. Si aucune exception n'est levée, la clause catch ne sera pas utilisée.

- -

La clause finally s'exécute après le bloc try et après le bloc catch (si celui-ci a été déclenché) mais avant les instructions qui suivent. Les instructions de cette clause sont toujours exécutées, qu'il y ait eu ou non une exception de déclenchée et/ou d'interceptée.

- -

Il est possible d'imbriquer plusieurs instructions try. Si un try imbriqué ne possède pas de clause catch, la clause catch du try du niveau supérieur sera utilisée (et ainsi de suite).

- -

Pour plus d'informations sur les exceptions et les erreurs en JavaScript, voir le chapitre du Guide JavaScript correspondant.

- -

Clause catch inconditionnelle

- -

Lorsqu'une seule clause catch inconditionnelle est utilisée, le bloc catch est utilisée pour n'importe quelle exception qui est levée. Ainsi, dans le fragment de code qui suit, pour toute exception produite, le contrôle de l'exécution passera à la clause catch.

- -
try {
-   throw "monException"; // génère une exception
-}
-catch (e) {
-   // les instructions utilisées pour gérer les
-   // exceptions
-   logErreurs(e); // on transfère l'objet de l'exception à une méthode
-                  // gestionnaire
-}
-
- -

La clause catch définit un identifiant (dans l'exemple précédent, c'est e) qui contient la valeur définie par l'instruction throw. Ce bloc catch est en quelque sorte unique en JavaScript car l'identifiant est créé lors de l'entrée dans le bloc catch, la valeur est alors ajoutée à la portée courant et la durée de vie de l'identifiant est limitée au bloc catch. Une fois que le bloc catch a été exécuté, l'identifiant n'est plus disponible.

- -

Clauses catch conditionnelles

- -

{{non-standard_header}}

- -

Il est aussi possible d'utiliser une ou plusieurs clauses catch conditionnelles afin de gérer des exceptions spécifiques. Dans ce cas, selon l'exception produite, la clause catch appropriée sera utilisée. Dans l'exemple qui suit, le code contenu dans le bloc try peut produire trois exceptions : {{jsxref("TypeError")}}, {{jsxref("RangeError")}}, et {{jsxref("EvalError")}}. Lorsqu'une exception se produit, le contrôle de l'exécution est passé à la clause catch correspondante. SI l'exception qui est déclenchée ne correspond à aucune des conditions, le contrôle passera à la clause catch non-conditionnelle si elle est trouvée..

- -

Si on utilise une clause catch inconditionnelle avec une ou plusieurs clauses catch conditionnelles, la clause inconditionnelle doit être spécifiée en dernière. Si ce n'est pas le cas, la clause catch inconditionnelle interceptera tous les types d'exceptions avant les autres clauses.

- -
try {
-    maRoutine(); // peut déclencher trois types d'exceptions
-} catch (e if e instanceof TypeError) {
-    // les instructions pour gérer TypeError
-} catch (e if e instanceof RangeError) {
-    // les instructions pour gérer RangeError
-} catch (e if e instanceof EvalError) {
-    // les instructions pour gérer EvalError
-} catch (e) {
-    // les instructions pour gérer les autres exceptions
-}
-
- -

Dans le fragment de code qui suit, on aura le même fonctionnement mais en utilisant uniquement des fonctionnalités standard (selon ECMAScript). Ce code est plus long mais fonctionne pour tous les environnements conformes à ECMAScript :

- -
try {
-    maRoutine(); // may throw three types of exceptions
-} catch (e) {
-    if (e instanceof TypeError) {
-        // les instructions pour gérer TypeError
-    } else if (e instanceof RangeError) {
-        // les instructions pour gérer RangeError
-    } else if (e instanceof EvalError) {
-        // les instructions pour gérer EvalError
-    } else {
-       // les instructions pour gérer les autres exceptions
-    }
-}
-
- -

L'identifiant de l'exception

- -

Lorsqu'une exception est levée dans le bloc try, exception_var (par exemple le e dans « catch (e) ») contient la valeur définie par l'instruction {{jsxref("Instructions/throw","throw")}}. Cet identifiant peut être utilisé pour accéder aux propriétés de l'objet et ainsi obtenir des informations sur l'exception qui a eu lieu. Cet identifiant est local à la clause catch, il est créé lorsqu'on rentre dans la clause catch et n'est plus disponible une fois que la clause a fini son exécution.

- -
function isValidJSON(txt){
-  try {
-    JSON.parse(txt);
-    return true;
-  } catch {
-    return false;
-  }
-}
- -

La clause finally

- -

La clause finally contient les instructions à exécuter après que les instructions du bloc try et éventuellement celles de la clause catch aient été exécutées mais avant que les instructions suivant l'instruction try soient exécutées. La clause finally est exécutée dans tous les cas (si on a eu une exception ou non). Si une exception est levée et qu'il n'y a pas de clause catch, les instructions de la clause finally sont tout de même exécutées.

- -

Cela peut paraître étrange qu'un bloc de code qui s'exécute même lorsqu'il y a une exception… Il faut comprendre que le code qui suit le bloc try...catch ne sera pas exécuté. Aussi, le bloc finally permet de contenir toutes les instructions de clôture/nettoyage nécessaire. On évite donc de dupliquer ce code qui doit toujours être utilisé.

- -

La clause finally peut être utilisée afin d'exécuter les actions nécessaires pour que le script « échoue correctement » en cas d'erreur. On peut par exemple tirer parti de finally pour fermer un flux, libérer une ressource, etc. Dans l'exemple suivant, exécuté côté serveur, le script accède à un fichier. Si une exception se produit lorsque le fichier est ouvert, la clause finally permet de fermer le fichier avant que le script échoue. Le code contenu dans le bloc finally sera exécuté même si on a une instruction return dans la section try ou dans la section catch.

- -
ouvrirMonFichier()
-try {
-   // on utilise une ressource
-   écrireDansMonFichier(mesDonnées);
-}
-finally {
-   fermerMonFichier(); // on ferme toujours la ressource
-}
-
- -

Exemples

- -

Blocs try imbriqués

- -

Tout d'abord, on utilise ce fragment de code, qui produit le résultat suivant :

- -
try {
-  try {
-    throw new Error("oups");
-  }
-  finally {
-    console.log("finally");
-  }
-}
-catch (ex) {
-  console.error("externe", ex.message);
-}
-
-// Produira dans la console :
-// "finally"
-// "externe" "oups"
-
- -

Et maintenant, si on a déjà intercepté l'exception avec une clause catch dans le bloc imbriqué :

- -
try {
-  try {
-    throw new Error("oups");
-  }
-  catch (ex) {
-    console.error("interne", ex.message);
-  }
-  finally {
-    console.log("finally");
-  }
-}
-catch (ex) {
-  console.error("externe", ex.message);
-}
-
-// Produira dans la console:
-// "interne" "oups"
-// "finally"
-
- -

Ensuite, si on propage l'erreur à nouveau :

- -
try {
-  try {
-    throw new Error("oups");
-  }
-  catch (ex) {
-    console.error("interne", ex.message);
-    throw ex;
-  }
-  finally {
-    console.log("finally");
-  }
-}
-catch (ex) {
-  console.error("externe", ex.message);
-}
-
-// Produira dans la console :
-// "interne" "oups"
-// "finally"
-// "externe" "oups"
-
- -

Toute exception ne sera interceptée qu'une seule fois par le bloc catch le plus « proche » à moins qu'elle ne soit retransmise à nouveau. Bien entendu, toute exception qui aura été levée par le bloc interne (il se peut que les instructions d'une clause catch provoquent une erreur) sera interceptée par le bloc externe.

- -

Valeur de retour et bloc finally

- -

Lorsque le bloc finally renvoie une valeur, c'est cette valeur qui devient la valeur de retour pour l'ensemble du bloc try-catch-finally et ce, peu importe, s'il y a des instructions {{jsxref("Instructions/return","return")}} dans les blocs try et catch. Cela inclue également les exceptions levées dans le bloc catch :

- -
try {
-  try {
-    throw new Error("oups");
-  }
-  catch (ex) {
-    console.error("interne", ex.message);
-    throw ex;
-  }
-  finally {
-    console.log("finally");
-    return;
-  }
-}
-catch (ex) {
-  console.error("externe", ex.message);
-}
-
-// Produira dans la console :
-// "interne" "oups"
-// "finally"
-
- -

Le "oups" externe n'est pas renvoyé car l'instruction return est utilisée dans la clause finally du bloc interne. Cela aurait également été le cas avec n'importe quelle valeur renvoyée par le bloc catch.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.4
{{SpecName('ES5.1', '#sec-12.14', 'instruction try')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-try-statement', 'Instruction try')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}{{Spec2('ESDraft')}}Points ne faisant pas partie du standard ECMA-262 actuel : utilisation de plusieurs clauses catch et de plusieurs clauses conditionnelles (extension liée à SpiderMonkey, correspondant à JavaScript 1.5).
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.try_catch")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/var/index.html b/files/fr/web/javascript/reference/instructions/var/index.html deleted file mode 100644 index 31814763b0..0000000000 --- a/files/fr/web/javascript/reference/instructions/var/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: var -slug: Web/JavaScript/Reference/Instructions/var -tags: - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/var ---- -
{{jsSidebar("Statements")}}
- -

L'instruction var (pour variable) permet de déclarer une variable et éventuellement d'initialiser sa valeur.

- -
{{EmbedInteractiveExample("pages/js/statement-var.html")}}
- - - -

Syntaxe

- -
var nomVar1 [= valeur1] [, nomVar2 [= valeur2] ... [, nomVarN [= valeurN]]];
- -
-
nomvarN
-
Le nom de la variable, cela peut être n'importe quel identifiant valide.
-
- -
-
valeurN
-
La valeur initiale à affecter à la variable, cela peut être n'importe quelle expression valide. S'il n'y a aucune valeur fournie, la variable vaudra {{jsxref("undefined")}}.
-
- -

Description

- -

Les déclarations de variables sont traitées avant que le code soit exécuté, quel que soit leur emplacement dans le code. La portée d'une variable déclarée avec var est le contexte d'exécution courant, c'est-à-dire : la fonction qui contient la déclaration ou le contexte global si la variable est déclarée en dehors de toute fonction.

- -

Si on affecte une valeur à une variable qui n'a pas été déclarée (le mot-clé var n'a pas été utilisé), cela devient une variable globale (une propriété de l'objet global) lorsque l'affectation est exécutée. Les différences entre les variables déclarées et les variables non-déclarées sont :

- -
    -
  1. Les variables déclarées sont contraintes dans le contexte d'exécution dans lequel elles sont déclarées. Les variables non-déclarées sont toujours globales. - 
    function x() {
-  y = 1;   // Lève une exception ReferenceError en mode strict
-  var z = 2;
-}
-
-x();
-
-console.log(y); // Affiche "1" dans la console
-console.log(z); // Lève une exception ReferenceError:
-                // z n'est pas définie en dehors de x
-
    -
    2. -
  2. Les variables déclarées sont créées avant que n'importe quel autre code soit exécuté. Les variables non-déclarées n'existent pas tant que leur code n'est pas exécuté. - 
    console.log(a);                // Lève une exception ReferenceError.
-console.log('on continue...'); // N'est jamais exécuté
    - - 
    var a;
-console.log(a);                // Affiche "undefined".
-console.log('on continue...'); // Affiche "on continue...".
    -
    3. -
  3. Les variables déclarées sont des propriétés non-configurables de leur contexte d'exécution (la fonction courante ou le contexte global). Les variables non-déclarées sont configurables (ce qui signifie qu'elles peuvent être supprimées). - 
    var a = 1;
-b = 2;
-
-delete this.a; // Lève une TypeError en mode strict. Échoue silencieusement sinon.
-delete this.b;
-
-console.log(a, b); // Lève une exception ReferenceError.
-// La propriété 'b' a été supprimée et n'existe plus.
    -
    4. -
- -

En raison de ces trois différences, il faut éviter de ne pas déclarer une variable car cela peut provoquer des résultats inattendus. Il est donc fortement recommandé de toujours déclarer les variables, qu'elles soient dans une fonction ou dans la portée globale. Le mode strict, introduit avec ECMAScript 5, lève une exception lorsqu'une variable n'est pas déclarée.

- -

La remontée de variables (hoisting)

- -

Les déclarations de variables (et les déclarations en général) sont traitées avant que n'importe quel autre code soit exécuté. Ainsi, déclarer une variable n'importe où dans le code équivaut à la déclarer au début de son contexte d'exécution. Cela signifie qu'une variable peut également apparaître dans le code avant d'avoir été déclarée. Ce comportement est appelé « remontée » (hoisting en anglais) car la déclaration de la variable est « remontée » au début de la fonction courante ou du contexte global.

- -
bla = 2
-var bla;
-// ...
-
-// est implicitement traité comme :
-
-var bla;
-bla = 2;
-
- -

Étant donné ce comportement, il est recommandé de toujours déclarer les variables au début de leurs portées (le début du code global ou le début du corps de la fonction) afin de mieux (sa)voir quelles variables font partie de la fonction et lesquelles proviennent de la chaîne de portées.

- -

Il est important de noter que la remontée des variables affecte uniquement la déclaration et pas l'initialisation de la valeur. La valeur sera affectée lorsque le moteur accèdera à l'instruction d'affectation. Par exemple :

- -
function faireQuelqueChose() {
-  console.log(truc); // undefined
-  var truc = 111;
-  console.log(truc); // 111
-}
-
-// Correspond en fait à :
-function faireQuelqueChose() {
-  var truc;
-  console.log(truc); // undefined
-  truc = 111;
-  console.log(truc); // 111
-}
-
- -

Exemples

- -

Déclarer et initialiser deux variables

- -
var a = 0, b = 0;
-
- -

Affecter deux variables avec la même chaîne de caractères

- -
var a = "A";
-var b = a;
-
-// est équivalent à :
-
-var a, b = a = "A";
-
- -

Attention à l'ordre :

- -
var x = y, y = 'A';
-console.log(x + y); // undefinedA
-
- -

Ici, x et y sont déclarées avant que n'importe quel code soit exécuté, les affectations sont réalisées après ! Au moment où x = y est évalué, y existe donc on n'a pas d'erreur {{jsxref("ReferenceError")}} mais sa valeur est {{jsxref("undefined")}}. Ainsi, x reçoit la valeur undefined. Ensuite, y reçoit la valeur 'A'. Après la première ligne de code, on a donc la situation où x === undefined && y === 'A', ce qui explique le résultat.

- -

Initialiser plusieurs variables

- -
var x = 0; // Variable dans la portée globale (le fichier)
-
-function f(){
-  var x = y = 1; // x est déclaré localement
-                 // ce qui n'est pas le cas de y !
-}
-f();
-
-console.log(x, y); // 0, 1
-// x a bien la valeur globale attendue
-// y a été contaminé dans la fonction !
-// Une exception ReferenceError sera levée en mode
-// strict car y n'est pas défini dans cette portée
-
- -

Les variables globales implicites

- -

Il est possible de faire référence à des variables qui sont des variables globales implicites depuis la portée d'une fonction externe :

- -
var x = 0;  // Déclare x comme variable globale du fichier, on lui affecte 0
-
-console.log(typeof z); // "undefined", car z n'existe pas encore
-
-function a() {
-  var y = 2;   // Déclare y dans la portée de la fonction a
-               // Affecte 2 comme valeur à y
-
-  console.log(x, y);   // 0 2
-
-  function b() {
-    x = 3;  // Affecte 3 à la variable globale x
-            // Ne crée pas une nouvelle variable globale
-    y = 4;  // Affecte 4 à la variable externe y,
-            // Ne crée pas une nouvelle variable globale
-    z = 5;  // Crée une nouvelle variable globale
-            // et lui affecte la valeur 5.
-  }         // (lève une ReferenceError en mode strict.)
-
-  b();     // Crée z en tant que variable globale
-  console.log(x, y, z);  // 3 4 5
-}
-
-a();                   // l'appel à a() entraîne un appel à b()
-console.log(x, z);     // 3 5
-console.log(typeof y); // "undefined" car y est local à la fonction a
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0
{{SpecName('ES5.1', '#sec-12.2', 'instruction var')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-variable-statement', 'instruction de variable')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.var")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/vide/index.html b/files/fr/web/javascript/reference/instructions/vide/index.html deleted file mode 100644 index de3761892a..0000000000 --- a/files/fr/web/javascript/reference/instructions/vide/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: vide -slug: Web/JavaScript/Reference/Instructions/Vide -tags: - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/Empty ---- -
{{jsSidebar("Statements")}}
- -

Une instruction vide est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.

- -
{{EmbedInteractiveExample("pages/js/statement-empty.html")}}
- - - -

Syntaxe

- -
;
-
- -

Description

- -

L'instruction vide est représentée par un point-virgule (;) qui indique qu'il n'y a aucune instruction à exécuter, même si JavaScript requiert une instruction à cet emplacement. Le comportement réciproque, où on souhaite exécuter plusieurs instructions là où JavaScript en attend une est possible grâce à l'instruction bloc qui permet de combiner plusieurs instructions en une seule.

- -

Exemples

- -

L'instruction vide peut être utilisée dans les boucles. Par exemple, ici on a un corps de boucle totalement vide :

- -
var arr = [1, 2, 3];
-
-// Affecter 0 pour toutes les valeurs du tableau
-for (i = 0; i < arr.length; arr[i++] = 0) /* instruction vide */ ;
-
-console.log(arr)
-// [0, 0, 0]
-
- -
-

Note : Cela peut être raisonnable que de commenter l'utilisation d'une instruction vide pour la rendre visible et l'expliciter. Par exemple, dans le code qui suit, le point-virgule ne semble pas intentionnel :

-
- -
if (condition);  // Attention, ce "if" ne fait rien !
-   finDuMonde()  // Cette méthode est donc toujours lancée !!!
-
- -

Un autre exemple avec une instruction {{jsxref("Instructions/if...else")}} sans accolade ({}). Si trois vaut true, rien ne sera exécuté, peu importera la valeur de quatre, la fonction chargerFusée() ne sera pas exécutée.

- -
if (un)
-  faire1èreEtape();
-else if (deux)
-  faire4èmeEtape();
-else if (trois)
-  ; // rien ici
-else if (quatre)
-  faire4èmeEtape();
-else
-  chargerFusée();
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-empty-statement', 'Instruction vide')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-empty-statement', 'instruction vide')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.3', 'instruction vide')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.3', 'instruction vide')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.3', 'instruction vide')}}{{Spec2('ES1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.empty")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/while/index.html b/files/fr/web/javascript/reference/instructions/while/index.html deleted file mode 100644 index b04851c347..0000000000 --- a/files/fr/web/javascript/reference/instructions/while/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: while -slug: Web/JavaScript/Reference/Instructions/while -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/while ---- -
{{jsSidebar("Statements")}}
- -

L'instruction while permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.

- -
{{EmbedInteractiveExample("pages/js/statement-while.html")}}
- - - -

Syntaxe

- -
while (condition) instruction
- -
-
condition
-
Une expression qui est évaluée avant chaque passage dans la boucle. Si cette expression est évaluée à vrai, instruction est exécutée. Lorsque la condition n'est pas vérifiée, l'exécution se poursuit avec l'instruction qui suit la boucle while.
-
instruction
-
Une instruction optionnelle qui doit être exécutée tant que la condition d'entrée est vérifiée. Afin d'exécuter plusieurs instructions au sein de la boucle, on utilisera généralement un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} ({ ... }) pour les regrouper.
- Note : on pourra utiliser l'instruction break afin d'arrêter une boucle avant que la condition soit vérifiée.
-
- -

Exemples

- -

La boucle while qui suit s'exécute tant que n est strictement inférieur à 3.

- -
var n = 0;
-var x = 0;
-
-while (n < 3) {
-  n++;
-  x += n;
-}
- -

À chaque itération, la boucle incrémente la valeur de n et l'ajoute à x. Ainsi, x et n prennent les valeurs suivantes :

- - - -

Une fois que la troisième itération est exécutée, la condition n < 3 n'est plus vérifiée et donc la boucle se termine.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-while-statement', 'while statement')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}{{Spec2('ES1')}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.while")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/with/index.html b/files/fr/web/javascript/reference/instructions/with/index.html deleted file mode 100644 index 8eec25496e..0000000000 --- a/files/fr/web/javascript/reference/instructions/with/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: with -slug: Web/JavaScript/Reference/Instructions/with -tags: - - Déprécié - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/with ---- -
{{jsSidebar("Statements")}}
- -
Il n'est pas recommandé d'utiliser l'instruction with. En effet, elle est parfois source de problèmes de compatibilité ou de bogues. Se référer au paragraphe « Inconvénient : l'ambiguïté » de la section « Description » pour plus de détails.
- -

L'instruction with permet d'étendre la portée chaînée d'une instruction.

- -

Syntaxe

- -
with (expression) {
-  instruction
-}
-
- -
-
expression
-
L'expression fournie est ajoutée à la portée chaînée utilisée lors de l'évaluation de l'instruction. Les parenthèses sont obligatoires.
-
instruction
-
N'importe quelle instruction. Afin d'utiliser plusieurs instructions, on peut utiliser un bloc d'instructions ({ ... }) pour les regrouper.
-
- -

Description

- -

Dès qu'un nom non-qualifié est utilisé, JavaScript cherche dans la chaîne des portées associée à l'exécution une fonction ou un script qui contiendrait ce nom. L'instruction with ajoute l'objet donné à la tête de la chaîne des portées lors de l'évaluation des instructions qu'elle contient. Si un nom non-qualifié est utilisé parmi ces instructions correspond à une propriété de la chaîne des portées, le nom sera alors lié à la propriété et à l'objet contenant cette propriété, sinon une erreur ReferenceError est renvoyée.

- -
L'utilisation de l'instruction with n'est pas recommandée et est interdite dans le mode strict d'ECMAScript 5. L'alternative recommandée est d'assigner l'objet utilisant les propriétés désirées à une variable temporaire.
- -

Avantages et inconvénients : les performances

- - - -

Inconvénient : l'ambiguïté

- - - -

Exemples

- -

Utiliser with

- -

L'instruction with suivante indique que l'objet {{jsxref("Math")}} est l'objet par défaut. Les instructions qui suivent font référence à la propriété {{jsxref("Math.PI")}} et aux méthodes {{jsxref("Math.cos()")}} et {{jsxref("Math.sin()")}}, sans objet spécifié. JavaScript utilise donc l'objet Math pour ces références.

- -
var a, x, y;
-var r = 10;
-
-with (Math) {
-  a = PI * r * r;
-  x = r * cos(PI);
-  y = r * sin(PI / 2);
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-with-statement', 'with statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-with-statement', 'Instruction with')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.10', 'Instruction with')}}{{Spec2('ES5.1')}}Désormais interdit en mode strict.
{{SpecName('ES3', '#sec-12.10', 'Instruction with')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.10', 'Instruction with')}}{{Spec2('ES1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.with")}}

- -

Voir aussi

- - -- cgit v1.2.3-54-g00ecf