diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
commit | 39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch) | |
tree | 66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/web/javascript/reference/instructions | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2 translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip |
unslug fr: move
Diffstat (limited to 'files/fr/web/javascript/reference/instructions')
30 files changed, 0 insertions, 5443 deletions
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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>La déclaration <code><strong>async function</strong></code> 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.</p> - -<div class="noinclude"> -<p>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)}}.</p> -</div> - -<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { - <em>instructions</em> -} -</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>name</code></dt> - <dd>Le nom de la fonction.</dd> -</dl> - -<dl> - <dt><code>param</code></dt> - <dd>Le nom d'un argument à passer à la fonction.</dd> -</dl> - -<dl> - <dt><code>instructions</code></dt> - <dd>Les instructions qui composent le corps de la fonction.</dd> -</dl> - -<h3 id="Valeur_de_retour">Valeur de retour</h3> - -<p>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.</p> - -<h2 id="Description">Description</h2> - -<p>Une fonction <code>async</code> 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 <code>Promise</code>. La fonction asynchrone reprend ensuite puis renvoie la valeur de résolution.<br> - <br> - Le mot-clé <code>await</code> 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")}}.</p> - -<div class="blockIndicator note"> -<p><strong>Note :</strong> 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 <code>async</code>).</p> -</div> - -<div class="note"> -<p><strong>Note </strong><strong>:</strong> Le but des fonctions <code>async</code>/<code>await</code> 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 <em>callbacks</em> structurés, <code>async</code>/<code>await</code> est semblable à la combinaison des générateurs et des promesses.</p> -</div> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Exemple_simple">Exemple simple</h3> - -<pre class="brush: js">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 -</pre> - -<div class="note"> -<h4 id="await_et_lexécution_parallèle"><code>await</code> et l'exécution parallèle</h4> - -<p>Dans <code>sequentialStart</code>, l'exécution est arrêtée pendant deux secondes avant le premier <code>await</code> puis encore une autre seconde avant le deuxième <code>await</code>. 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.</p> - -<p>Avec <code>concurrentStart</code>, les deux minuteurs sont créés puis attendus derrière un <code>await</code> 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.<br> - Toutefois, les appels utilisant <code>await</code> sont exécutés séquentiellement et la deuxième instruction avec <code>await</code> attendra que la première ait été traitée. Le minuteur le plus rapide est donc créé juste après le premier.</p> - -<p>Si on souhaite avoir deux tâches qui s'exécutent réellement en parallèle, on pourra utiliser <code>await Promise.all([job1(), job2()])</code> comme illustré ci-avant avec <code>parallel</code>.</p> -</div> - -<div class="warning"> -<h4 id="asyncawait_Promise.prototype.then_et_la_gestion_des_erreurs"><code>async</code>/<code>await</code>, <code>Promise.prototype.then()</code> et la gestion des erreurs</h4> - -<p>La plupart des fonctions asynchrones peuvent être écrites avec des promesses. Toutefois, les fonctions asynchrones qui utilisent <code>async</code> se prêtent mieux à la gestion des erreurs.</p> - -<p><code>concurrentStart</code> et <code>concurrentPromise</code> sont fonctionnellement équivalentes.<br> - Avec <code>concurrentStart</code>, 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.<br> - 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 <code>concurrentPromise</code> cela signifie qu'il faut renvoyer la promesse de <code>Promise.all([]).then()</code>.</p> - -<p>Bien entendu, il est toutefois possible d'avoir des fonctions asynchrones (avec <code>async</code>) qui gobent des erreurs involontairement. Si on considère la fonction <code>parallel</code> ci-avant, s'il n'y avait eu aucun <code>await</code> ou <code>return</code> pour le résultat de <code>Promise.all([])</code>, aucune erreur n'aurait été propagée.<br> - Bien que l'exemple <code>parallelPromise</code> paraisse simple, il ne gère aucune erreur du tout. Il aurait fallu utiliser un <code>return </code><code>Promise.all([])</code> analogue.</p> -</div> - -<h3 id="Réécrire_une_chaîne_de_promesses_avec_une_fonction_asynchrone">Réécrire une chaîne de promesses avec une fonction asynchrone</h3> - -<p>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 :</p> - -<pre class="brush: js">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 - }); -} -</pre> - -<p>Cela peut être réécrit avec une seule fonction asynchrone, de la façon suivante :</p> - -<pre class="brush: js">async function getProcessedData(url) { - let v; - try { - v = await downloadData(url); - } catch(e) { - v = await downloadFallbackData(url); - } - return processDataInWorker(v); -} -</pre> - -<p>On voit dans l'exemple précédent qu'il n'y a pas de <code>await</code> pour l'instruction <code>return</code> car la valeur de retour d'une fonction asynchrone est implicitement enveloppée dans un appel à {{jsxref("Promise.resolve")}}.</p> - -<h3 id="Différences_entre_return_et_return_await">Différences entre <code>return</code> et <code>return await</code></h3> - -<p>La conversion automatique des valeurs en promesses avec {{jsxref("Promise.resolve")}} ne signifie pas que <code>return await valeurPromesse</code> sera équivalent à <code>return valeurPromesse</code>.</p> - -<p>Si on reprend l'exemple précédent et qu'on le réécrit avec <code>return await</code> et qu'on intercepte une éventuelle erreur de la promesse :</p> - -<pre class="brush: js">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; - } -}</pre> - -<p>Si on avait simplement écrit <code>return processDataInWorker(v);</code>, la promesse renvoyée par la fonction aurait déclenché une exception plutôt que d'être résolue avec la valeur <code>null</code>.</p> - -<p>Lorsqu'on utilise <code>return toto;</code>, la valeur <code>toto</code> sera immédiatement renvoyée (sans lever d'exception, quel que soit le cas), tandis que <code>return await toto;</code> attendra la résolution de <code>toto</code> ou son échec et lèvera une exception si besoin <strong>avant de parvenir à renvoyer une valeur</strong>.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}</td> - <td>{{Spec2('ES8')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.async_function")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Operators/async_function", "async function expression")}}</li> - <li>{{jsxref("AsyncFunction")}} object</li> - <li>{{jsxref("Operators/await", "await")}}</li> - <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">Créer des décorateurs asynchrones en JavaScript (billet en anglais sur innolitics.com)</a></li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>Une <strong>instruction de bloc</strong> 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.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-block.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<h3 id="Instruction_de_bloc">Instruction de bloc</h3> - -<pre class="brush: js">{ - <em><var>instruction_1</var></em>; - <em><var>instruction_2</var></em>; - ... - <em><var>instruction_n</var></em>; -} -</pre> - -<h3 id="Instruction_de_bloc_étiquetée">Instruction de bloc étiquetée</h3> - -<pre class="brush: js">// ou, avec une étiquette : -label { - instruction_1; - instruction_2; - instruction_n; -} -</pre> - -<dl> - <dt><code>instruction_1</code>, <code>instruction_2</code>, <code>instruction_n</code></dt> - <dd>Les instructions qu'on souhaite regrouper au sein du bloc.</dd> - <dt><code>label</code> {{optional_inline}}</dt> - <dd>Une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/label">étiquette</a> qui permet une identification visuelle de la cible d'une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a></code>.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>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 :</p> - -<pre class="brush: js">while (x < 10) { - x++; -} -</pre> - -<p>On peut voir dans cet exemple que cette instruction se termine sans point-virgule.</p> - -<p>L'instruction de bloc est souvent appelée <strong>instruction composée (<em>compound statement</em>)</strong> 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.</p> - -<h3 id="Gestion_des_portées">Gestion des portées</h3> - -<h4 id="Avec_var">Avec <code>var</code></h4> - -<p><strong>Important </strong>: Le bloc n'introduit <strong>aucune portée pour les variables déclarées avec <code>var</code></strong> ou pour <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">les déclarations de fonction</a>. 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 :</p> - -<pre class="brush: js example-bad">var x = 1; -{ - var x = 2; -} -console.log(x); // affiche 2 -</pre> - -<p>Cela affiche 2 dans la console car l'instruction <code>var x</code> au sein du bloc partage la même portée que l'instruction <code>var x</code> précédente en dehors du bloc. Un code C ou Java équivalent aurait produit 1.</p> - -<h4 id="Avec_let_et_const">Avec <code>let</code> et <code>const</code></h4> - -<p>En revanche, les identifiants déclarés avec <code>let</code> et <code>const</code> appartiennent à la portée du bloc : </p> - -<pre class="brush: js">let x = 1; -{ - let x = 2; -} -console.log(x); // affiche 1 -</pre> - -<p>On voit ici que l'instruction <code>x = 2</code> est limitée à la portée du bloc dans laquelle elle est présente.</p> - -<p>On a le même résultat avec <code>const</code>.</p> - -<pre class="brush: js">const c = 1; -{ - const c = 2; -} -console.log(c); // affiche 1, il n'y a pas de SyntaxError -</pre> - -<p>On notera que l'instruction <code>const c = 2</code> ne lève pas d'exception <code>SyntaxError</code> car on a une seule déclaration de <code>c</code> pour ce bloc.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-block', 'instruction de bloc')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-block', 'instruction de bloc')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.1', 'instruction de bloc')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12.1', 'instruction de bloc')}}</td> - <td>{{Spec2('ES3')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12.1', 'instruction de bloc')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.0.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.block")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/while", "while")}}</li> - <li>{{jsxref("Instructions/if...else", "if...else")}}</li> - <li>{{jsxref("Instructions/let", "let")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <strong><code>break</code></strong> 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.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox"><code>break [label];</code></pre> - -<dl> - <dt><code>label</code> {{optional_inline}}</dt> - <dd>Un identifiant optionnel associé avec l'étiquette (<em>label</em>) 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.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>L'instruction <code>break</code> peut être utilisée avec une étiquette (<em>label</em>) optionnelle qui permet d'interrompre une instruction étiquetée. L'instruction <code>break</code> 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.</p> - -<p>Une instruction <code>break</code>, 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 <code>label</code>.</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Exemple_simple_utilisant_break">Exemple simple utilisant <code>break</code></h3> - -<p>La fonction qui suit utilise une instruction <code>break</code> qui interrompt la boucle {{jsxref("Instructions/while", "while")}} lorsque <code>i</code> vaut 3, grâce à l'instruction qui suit, la fonction renvoie 3 * <code>x</code>.</p> - -<pre class="brush:js;highlight:[6];">function testBreak(x) { - var i = 0; - - while (i < 6) { - if (i == 3) { - break; - } - i += 1; - } - return i * x; -}</pre> - -<h3 id="Utiliser_break_avec_les_labels">Utiliser <code>break</code> avec les labels</h3> - -<p>Dans le code suivant, on utilise les instructions <code>break</code> avec des blocs étiquetés. Une instruction <code>break</code> doit être présente à l'intérieur du bloc auquel elle fait référence. Ici, on voit que <code>bloc_interne</code> est compris dans <code>bloc_externe</code>.</p> - -<pre class="brush:js;highlight:[1,3,5];">bloc_externe: { - - bloc_interne: { - console.log ('1'); - break bloc_externe; // interrompt bloc_externe ET bloc_interne - console.log (':-('); // ignoré - } - - console.log ('2'); // ignoré -} -</pre> - -<p>Dans le code qui suit, on utilise également des instructions <code>break</code> avec des blocs étiquetés mais on obtient une exception <code>SyntaxError</code> car l'instruction <code>break</code> au sein de <code>bloc_1</code> référence <code>bloc_2</code>, or <code>bloc_1</code> n'est pas compris dans <code>bloc_2</code> :</p> - -<pre class="brush:js;highlight:[1,3,6];">bloc_1: { - console.log ('1'); - break bloc_2; // SyntaxError: label not found -} - -bloc_2: { - console.log ('2'); -} -</pre> - -<h3 id="Utiliser_break_dans_des_fonctions_imbriquées_dans_des_boucles">Utiliser <code>break</code> dans des fonctions imbriquées dans des boucles</h3> - -<p>Dans le cas d'une fonction imbriquée dans une boucle <code>while</code> :</p> - -<pre class="brush: js">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</pre> - -<p>Dans le cas d'une fonction imbriquée dans une instruction <code>label</code> :</p> - -<pre class="brush: js">bloc_1: { - console.log('1'); - (function() { - break bloc_1; // SyntaxError: Undefined label 'bloc_1' - })(); -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Version non étiquetée.</td> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Version étiquetée ajoutée.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.8', 'instruction break')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-break-statement', 'instruction break')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.break")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/continue", "continue")}}</li> - <li>{{jsxref("Instructions/label", "label")}}</li> - <li>{{jsxref("Instructions/switch", "switch")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>La <strong>déclaration class</strong> crée une nouvelle classe avec le nom fourni en utilisant l'héritage à base de prototypes pour émuler le fonctionnement de classe.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-class.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Il est aussi possible de définir une classe avec une {{jsxref("Opérateurs/class", "expression class","",1)}}.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">class <em>nom</em> [extends]{ - // corps de la classe -} -</pre> - -<h2 id="Description">Description</h2> - -<p>Les déclarations qui composent le corps de la classe sont exécutées en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>. La propriété du constructeur est optionnelle.</p> - -<p>Les déclarations utilisées dans les classes ne sont pas remontées (<em>hoisted</em>) (à la différence des <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">déclarations de fonctions</a>).</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Déclarer_une_classe_simple">Déclarer une classe simple</h3> - -<p>Dans l'exemple qui suit, on définit une classe <code>Polygone</code> pour laquelle on crée un sous-classe <code>Carré</code>. On note ici que la méthode <code>super()</code> ne peut être utilisée qu'au sein d'un constructeur et doit être appelée avant l'utilisation du mot-clé <code>this</code>.</p> - -<pre class="brush: js">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é'; - } -} -</pre> - -<div class="warning"> -<p><strong>Attention :</strong> Déclarer une classe deux fois lèvera une exception <code>SyntaxError</code>. De même, on ne pourra pas réutiliser un nom qui a déjà été utilisé dans une expression de classe.</p> - -<pre class="brush: js">// 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 -</pre> -</div> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-class-definitions', 'Définitions de classe')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES2017')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Définitions de classe')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.class")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">Les déclarations <code>function</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/class">Les expressions <code>class</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>La <strong>déclaration <code>const</code></strong> 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.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">const <var>nom1</var> = <var>valeur1</var> [, <var>nom2</var> = <var>valeur2</var> [, ... [, <var>nomN</var> = <var>valeurN</var>]]];</pre> - -<dl> - <dt><code>nomN</code></dt> - <dd>Le nom de la constante. Ce nom peut être n'importe quel identifiant valide.</dd> - <dt><code>valeurN</code></dt> - <dd>La valeur à associer à la constante. Cette valeur peut être n'importe quelle <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#new">expression</a> valide (éventuellement <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">une expression de fonction</a>).</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>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 <code>let</code>). À la différence des variables définies avec <code>var</code>, les constantes déclarées au niveau global <strong>ne sont pas</strong> 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.</p> - -<p>Attention, la déclaration <code>const</code> 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é.</p> - -<div class="note"> -<p><strong>Note :</strong> Les aspects liés à la <a href="/fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">zone morte temporelle</a> de <code>let</code> s'appliquent également à <code>const</code>.</p> -</div> - -<h2 id="Exemples">Exemples</h2> - -<p>Les instructions suivantes illustrent comment fonctionne cette déclaration. On pourra tester ces instructions dans la console afin d'observer le comportement obtenu :</p> - -<pre class="brush:js">// 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 -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Déclarations let et const')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Aucune modification.</td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Déclarations let et const')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.const")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/var","var")}}</li> - <li>{{jsxref("Instructions/let","let")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Constantes">Les constantes dans le guide JavaScript</a></li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <code><strong>continue</strong></code> 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.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-continue.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">continue [ <em><var>label</var></em> ];</pre> - -<dl> - <dt><code>label</code></dt> - <dd>Paramètre optionnel. Un identifiant associé à l'étiquette (<em>label</em>) de l'instruction pour laquelle on souhaite finir l'itération en cours.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Contrairement à {{jsxref("Instructions/break", "break")}}, <code>continue</code> ne termine pas la boucle complètement :</p> - -<ul> - <li>au sein d'une boucle {{jsxref("Instructions/while", "while")}}, elle repart à la phase de la condition.</li> -</ul> - -<ul> - <li>au sein d'une boucle {{jsxref("Instructions/for", "for")}}, elle repart à l'expression de mise à jour de la boucle.</li> -</ul> - -<p>L'instruction <code>continue</code> peut éventuellement contenir une étiquette (<em>label</em>) 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 <code>continue</code> soit imbriquée dans l'instruction étiquetée.</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_continue_avec_while">Utiliser <code>continue</code> avec <code>while</code></h3> - -<p>L'instruction suivante illustre comment on peut utiliser continue au sein d'une boucle {{jsxref("Instructions/while", "while")}}, ici <code>continue</code> est utilisé lorsque <code>i</code> vaut 3. On a donc <code>n</code> qui prend les valeurs 1, 3, 7, et 12.</p> - -<pre class="brush: js">var i = 0; -var n = 0; -while (i < 5) { - i++; - if (i === 3) { - continue; - } - n += i; -} -</pre> - -<h3 id="Utiliser_continue_avec_une_étiquette">Utiliser <code>continue</code> avec une étiquette</h3> - -<p>Dans l'exemple suivant, on a une instruction étiquetée <code>vérifIetJ</code> qui contient une autre instruction étiquetée <code>vérifJ</code>. Si l'instruction <code>continue</code> est utilisée, le programme reprend l'exécution au début de l'instruction <code>vérifJ</code>. Chaque fois que <code>continue</code> utilisé, <code>vérifJ</code> réitère jusqu'à ce que sa condition renvoie <code>false</code>. Lorsque c'est le cas, le reste de l'instruction <code>vérifIetJ</code> est exécuté.</p> - -<p>Si <code>continue</code> utilisait l'étiquette <code>vérifIetJ</code>, le programme continuerait au début de l'instruction <code>vérifIetJ</code>.</p> - -<p>Voir aussi {{jsxref("Instructions/label", "label")}}.</p> - -<pre class="brush: js">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); -} -</pre> - -<p>En utilisant le fragment ci-avant, on aura le résultat suivant :</p> - -<pre class="brush: js">"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" -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Pas de version étiquetée.</td> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Ajout de la version étiquetée.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.7', 'instruction continue')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-continue-statement', 'instruction continue')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-continue-statement', 'instruction continue')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.continue")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/break", "break")}}</li> - <li>{{jsxref("Instructions/label", "label")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <strong><code>debugger</code> </strong>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.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox"><code>debugger;</code></pre> - -<h2 id="Exemples">Exemples</h2> - -<p>Dans l'exemple qui suit, on utilise un code avec l'instruction <code>debugger</code> qui permet de démarrer un débogueur (s'il existe) lorsque la fonction est appelée :</p> - -<pre class="brush:js">function codeProbablementBogue() { - debugger; - // exécuter des instructions qu'on veut - // examiner, exécuter pas à pas etc. -}</pre> - -<p>Lors que le débogueur est lancé, l'exécution est interrompue au niveau de l'instruction <code>debugger</code>. Cela agit comme un point d'arrêt dans le code du script :</p> - -<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-debugger-statement', 'instruction debugger')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.15', 'instruction debugger')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-7.5.3', 'instruction debugger')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-7.4.3', 'instruction debugger')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Uniquement mentionné comme mot-clé réservé.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.debugger")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Outils/Debugger">Le débogueur des outils de développement Firefox</a></li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>Le mot-clé <strong><code>default</code> </strong>peut être utilisé à deux endroits en JavaScript : au sein d'une instruction {{jsxref("Instructions/switch", "switch")}} ou dans une instruction {{jsxref("Instructions/export", "export")}}.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<p>Dans une instruction {{jsxref("Instructions/switch", "switch")}} :</p> - -<pre class="syntaxbox">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;] -}</pre> - -<p>Dans une instruction {{jsxref("Instructions/export", "export")}} :</p> - -<pre class="syntaxbox">export default <em>nomN</em> </pre> - -<h2 id="Description">Description</h2> - -<p>Pour plus de détails, voir les pages sur :</p> - -<ul> - <li>L'instruction {{jsxref("Instructions/switch", "switch")}} et</li> - <li>L'instruction {{jsxref("Instructions/export", "export")}}.</li> -</ul> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_default_dans_une_instruction_switch">Utiliser <code>default</code> dans une instruction <code>switch</code></h3> - -<p>Dans l'exemple qui suit, si <code>expr</code> vaut "Bananes" ou "Pommes", le programme exécutera les instructions correspondantes à chacune de ces valeurs. Le mot-clé <code>default</code> permettra d'indiquer des instructions à exécuter dans les autres cas (<code>expr</code> ne correspond à aucun des cas).</p> - -<pre class="brush: js">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 + "."); -}</pre> - -<h3 id="Utiliser_default_avec_export">Utiliser <code>default</code> avec <code>export</code></h3> - -<p>Si on souhaite exporter une seule valeur ou avoir une valeur par défaut dans un module, on peut utiliser un export avec <code>default</code> :</p> - -<pre class="brush: js">// module "mon-module.js" -let cube = function cube(x) { - return x * x * x; -} -export default cube;</pre> - -<p>Dans un autre script, on pourra simplement faire référence à l'export par défaut :</p> - -<pre class="brush: js">// module "autre-module.js" -import maFonction from 'mon-module'; -console.log(maFonction(3)); // 27 -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-switch-statement', 'Instruction switch')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.default")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/export", "export")}}</li> - <li>{{jsxref("Instructions/switch", "switch")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <strong><code>do...while</code></strong> 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.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">do - <em>instruction</em> -while (<em>condition</em>); -</pre> - -<dl> - <dt><code>instruction</code></dt> - <dd>Une instruction exécutée au moins une fois et ré-exécutée chaque fois que la condition de test est évaluée à <code>true</code>. On peut exécuter plusieurs instructions au sein d'une boucle grâce à l'instruction {{jsxref("Instructions/block", "block")}} (<code>{ ... }</code>) qui permet de grouper différentes instructions en une seule.</dd> -</dl> - -<dl> - <dt><code>condition</code></dt> - <dd>Une expression évaluée après chaque passage dans la boucle. Si l'évaluation de la <code>condition</code> donne <code>true</code> (la condition est vérifiée), <code>instruction</code> sera exécutée à nouveau. Lorsque <code>condition</code> donne <code>false</code>, le contrôle passe à l'instruction suivant la boucle <code>do...while</code>.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_do...while">Utiliser <code>do...while</code></h3> - -<p>Dans l'exemple suivant, la boucle <code>do...while</code> est parcourue au moins une fois et répétée jusqu'à ce que <code>i</code> ne soit plus strictement inférieur à 5.</p> - -<pre class="brush: js">var i = 0; -do { - i += 1; - console.log(i); -} while (i < 5); -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.2</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.6.1', 'instruction do-while')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-do-while-statement', 'instruction do-while')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Le point-virgule de fin est désormais optionnel.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-do-while-statement', 'instruction do-while')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - - -<p>{{Compat("javascript.statements.do_while")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/while", "while")}}</li> - <li>{{jsxref("Instructions/for", "for")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <strong><code>export</code></strong> 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")}}.</p> - -<p>Les modules exportés sont interprétés en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> dans tous les cas. L'instruction <code>export</code> ne peut pas être utilisée dans les scripts embarqués.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">// Exporter des propriétés individuelles -export let <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var>; // utilisable avec var, const -export let <var>nom1</var> = …, <var>nom2</var> = …, …, <var>nomN</var>; // utilisable avec var, const -export function nomFonction(){...} -export class NomClasse {...} - -// Export d'une liste de valeur -export { <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var> }; - -// Renommage des valeurs exportées -export { <var>variable1</var> as <var>nom1</var>, <var>variable2</var> as <var>nom2</var>, …, <var>nomN</var> }; - -// Renommage avec la décomposition pour l'affectation -export const { <var>nom1</var>, <var>nom2: truc</var><var> </var>} = o; - -// Exports par défauts -export default <em>expression</em>; -export default function (…) { … } // fonctionne avec class, function* -export default function nom1(…) { … } // fonctionne avec class, function* -export { <var>nom1</var> as default, … }; - -// Agrégation de modules -export * from …; -export { <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var> } from …; -export { <var>import1</var> as <var>nom1</var>, <var>import2</var> as <var>nom2</var>, …, <var>nomN</var> } from …; -export { default } from …;</pre> - -<dl> - <dt><code>nomN</code></dt> - <dd>Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script).</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Il existe deux types d'export différents : les exports <strong>nommés</strong> et les exports <strong>par défaut</strong>. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus :</p> - -<ul> - <li>Les exports nommés : - <pre class="brush: js">// exporte une fonction déclarée précédemment -export { maFonction }; - -// exporte une constante -export const machin = Math.sqrt(2);</pre> - </li> - <li>Les exports par défaut (fonction) : - <pre class="brush: js">export default function() {} </pre> - </li> - <li>Les exports par défaut (classe) : - <pre class="brush: js">export default class {} </pre> - </li> -</ul> - -<p>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.</p> - -<p>Mais un export par défaut peut être importé avec n'importe quel nom, par exemple :</p> - -<pre class="brush: js">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</pre> - -<p>La syntaxe suivante n'exporte pas le défaut depuis le module importé :</p> - -<pre class="brush: js">export * from …;</pre> - -<p>Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place :</p> - -<pre class="brush: js">export {default} from 'mod';</pre> - -<p>Il est possible de renommer un export afin d'éviter des conflits de nommage :</p> - -<pre class="brush: js">export { maFonction as fonction1 - maVariable as variable1 };</pre> - -<p>On peut également agréger les valeurs exportées à celles d'autres modules qu'on aurait importés :</p> - -<pre class="brush: js">// 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';</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utilisation_d'exports_nommés">Utilisation d'exports nommés</h3> - -<p>Dans le module, on pourra utiliser le code suivant :</p> - -<pre class="brush: js">// module "mon-module.js" -function cube(x) { - return x * x * x; -} -const machin = Math.PI + Math.SQRT2; -export { cube, machin }; -</pre> - -<p>De cette façon, dans un autre script, on pourra avoir :</p> - -<pre class="brush: js">import { cube, machin } from 'mon-module'; -console.log(cube(3)); // 27 -console.log(machin); // 4.555806215962888</pre> - -<div class="note"> -<p><strong>Note : </strong>Si l'import est réalisé dans un script HTML, il faut que celui-ci soit chargé avec l'attribut {{htmlattrxref("type")}} <code>"module"</code> : <code><script type="module" src="./demo.js"></script></code> sinon il y aura une erreur quant aux origines multiples (<a href="/fr/docs/Web/HTTP/CORS">CORS</a>).<br> - Il n'est pas possible de charger des modules JavaScript via une URL <code>file://</code> pour des raisons de sécurité (voir <a href="/fr/docs/Web/HTTP/CORS">CORS</a> également). Il faudra utiliser un serveur HTTP.</p> -</div> - -<h3 id="Utilisation_d'exports_par_défaut">Utilisation d'exports par défaut</h3> - -<p>Si on souhaite n'exporter qu'une seule valeur ou avoir une valeur de secours<em> </em>pour le module, on peut utiliser un export par défaut :</p> - -<pre class="brush: js">// module "mon-module.js" -export default function cube(x) { - return x * x * x; -} -</pre> - -<p>Alors, dans un autre script, il sera facile d'importer l'export par défaut :</p> - -<pre class="brush: js">import cube from './mon-module.js'; -console.log(cube(3)); // 27 -</pre> - -<p>Notez qu'il n'est pas possible d'utiliser <code>var</code>, <code>let</code> ou <code>const</code> avec <code>export default</code>.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer aux données, voyez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> SVP, et envoyez-nous une <em>pull request.</em></div> - -<p>{{Compat("javascript.statements.export")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/import", "import")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Modules">Guide sur les modules JavaScript</a></li> - <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post par Jason Orendorff</li> - <li><a href="https://exploringjs.com/es6/ch_modules.html">Livre d'Axel Rauschmayer : "Exploring JS: Modules"</a></li> - <li><a href="https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript">Un billet illustré de Lin Clark, traduit en français, sur les modules</a></li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <strong><code>for await...of</code> </strong>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.</p> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">for await (<em>variable</em> of <em>iterable</em>) { - <em>instruction -</em>} -</pre> - -<dl> - <dt><code>variable</code></dt> - <dd>À chaque itération, la valeur d'une propriété différente est affectée à <em>variable</em>. Cette variable peut être déclarée avec <code>const</code>, <code>let</code> ou <code>var</code>.</dd> - <dt><code>iterable</code></dt> - <dd>Un objet pour lequel on parcourt les propriétés itérables.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Parcourir_des_itérables_asynchrones">Parcourir des itérables asynchrones</h3> - -<pre class="brush:js">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 -</pre> - -<h3 id="Parcourir_des_générateurs_asynchrones">Parcourir des générateurs asynchrones</h3> - -<p>Les générateurs asynchrones implémentent le protocole d'itérateur asynchrone et on peut donc les parcourir avec <code>for await...of</code>:</p> - -<pre>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</pre> - -<p>Pour prendre un exemple plus concret, on peut parcourir les données fournies par une API avec un générateur asynchrone grâce à <code>for await... of</code>. 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 <code>for await...of</code> afin de calculer la taille de la réponse fournie par l'API :</p> - -<pre class="brush: js">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');</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.statements.for_await_of")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/for...of")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'<strong>instruction <code>for...in</code></strong> permet d'itérer sur les <a href="/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement">propriétés énumérables</a> d'un objet qui ne sont pas <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol">des symboles</a>. Pour chaque propriété obtenue, on exécute une instruction (ou plusieurs grâce à un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions).</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">for (<var>variable</var> in <var>objet</var>) { -<em> instructions</em> -}</pre> - -<dl> - <dt><code>variable</code></dt> - <dd>Un nom de propriété différent est assigné à la variable à chaque itération de la boucle.</dd> - <dt><code>objet</code></dt> - <dd>L'objet dont les propriétés énumérables et qui ne sont pas des symboles sont parcourues par la boucle.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Une boucle <code>for...in</code> 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 <code>Object.prototype</code> et <code>String.prototype</code> 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).</p> - -<h3 id="Les_propriétés_ajoutées_modifiées_ou_supprimées">Les propriétés ajoutées, modifiées ou supprimées</h3> - -<p>Une boucle <code>for...in</code> 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).</p> - -<p>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.</p> - -<p>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.</p> - -<h3 id="Utiliser_for...in_et_parcourir_un_tableau">Utiliser <code>for...in</code> et parcourir un tableau</h3> - -<div class="note"> -<p><strong>Note :</strong> <code>for...in</code> ne doit pas être utilisée pour parcourir un {{jsxref("Array")}} lorsque l'ordre des éléments est important.</p> -</div> - -<p>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 <code>for...in</code> 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.</p> - -<p>L'ordre dans lequel le parcours est effectué dépend de l'implémentation. Dans le cas d'un parcours de tableau utilisant <code>for...in</code>, 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.</p> - -<h3 id="Itérer_uniquement_sur_les_propriétés_non_héritées">Itérer uniquement sur les propriétés non héritées</h3> - -<p>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()")}}</p> - -<h2 id="Exemples">Exemples</h2> - -<p>La boucle <code>for...in</code> qui suit utilise parcourt l'objet <code>obj</code> 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.</p> - -<pre class="brush: js">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"</pre> - -<p>La fonction qui suit utilise {{jsxref("Object.hasOwnProperty", "hasOwnProperty()")}} pour ne pas afficher les propriétés héritées :</p> - -<pre class="brush: js">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"</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.for_in")}}</p> - -<h3 id="Expressions_avec_initialisateur">Expressions avec initialisateur</h3> - -<p>Avant SpiderMonkey 40 {{geckoRelease(40)}}, il était possible d'utiliser un initialisateur (<code>i=0</code>) dans un boucle <code>for...in</code> :</p> - -<pre class="brush: js example-bad">var obj = {a:1, b:2, c:3}; -for(var i=0 in obj) { - console.log(obj[i]); -} -// 1 -// 2 -// 3 -</pre> - -<p>Ce comportement non-standard a été retiré avec la version 40. Cela provoquera désormais une exception {{jsxref("SyntaxError")}} ("<em><a href="/fr/docs/Web/JavaScript/Reference/Erreurs/Invalid_for-in_initializer">for-in loop head declarations may not have initializers</a></em>") en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> (cf. {{bug(748550)}} et {{bug(1164741)}}).</p> - -<p>Les autres moteurs, tels que v8 (Chrome), Chakra (IE/Edge) et JSC (WebKit/Safari) recherchent également comment retirer ce comportement non standard.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/for...of","for...of")}} : une instruction semblable qui permet d'itérer sur les valeurs des propriétés</li> - <li>{{jsxref("Instructions/for","for")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Le rattachement et le caractère énumérable des propriétés</a></li> - <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> - <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} : une instruction semblable, dépréciée, qui parcourt les valeurs des propriétés d'un objet plutôt que les noms.</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'<strong>instruction <code>for...of</code></strong> 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é.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-forof.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">for (<em><var>variable</var></em> of iterable) - <em>instruction</em> -</pre> - -<dl> - <dt><code>variable</code></dt> - <dd>À chaque itération, la valeur d'une propriété différente est affectée à <code><em>variable</em></code> (cette variable peut être déclarée avec <code>const</code>, <code>let</code> ou <code>var</code>).</dd> - <dt><code>iterable</code></dt> - <dd>L'objet dont on parcourt les propriétés énumérables.</dd> - <dt><code>instruction</code></dt> - <dd>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.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_for...of_sur_un_tableau">Utiliser <code>for...of</code> sur un tableau</h3> - -<pre class="brush: js">let tableauItérable = [1, 2, 3]; - -for (let valeur of tableauItérable) { - console.log(valeur); -} -// 1 -// 2 -// 3</pre> - -<p>Si la variable n'est pas réaffectée dans la boucle, on pourra également utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code> à la place de <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> :</p> - -<pre class="brush: js">let tableauItérable = [1, 2, 3]; - -for (const valeur of tableauItérable) { - console.log(valeur); -} -// 1 -// 2 -// 3</pre> - -<h3 id="Parcourir_une_chaîne_de_caractères_avec_for...of">Parcourir une chaîne de caractères avec <code>for...of</code></h3> - -<pre class="brush: js">let iterable = 'pixel'; - -for (let valeur of iterable) { - console.log(valeur); -} -// p -// i -// x -// e -// l</pre> - -<h3 id="Parcourir_un_tableau_typé_(jsxref(TypedArray))">Parcourir un tableau typé ({{jsxref("TypedArray")}})</h3> - -<pre class="brush: js">let iterable = new Uint8Array([0x00, 0xff]); - -for (let valeur of iterable) { - console.log(valeur); -} -// 0 -// 255</pre> - -<h3 id="Parcourir_une_jsxref(Map)">Parcourir une {{jsxref("Map")}}</h3> - -<pre class="brush: js">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</pre> - -<h3 id="Utiliser_Array.prototype.forEach()">Utiliser <code>Array.prototype.forEach()</code></h3> - -<p>Pour obtenir les mêmes valeurs qu'avec une boucle <code>for...of</code>, on peut utiliser la méthode {{jsxref("Array.prototype.forEach()")}} :</p> - -<pre class="brush: js">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 -});</pre> - -<h3 id="Parcourir_l'objet_arguments">Parcourir l'objet <code>arguments</code></h3> - -<p>Il est possible de parcourir l'objet {{jsxref("Fonctions/arguments", "arguments")}} afin d'examiner l'ensemble des paramètres passés à la fonction :</p> - -<pre class="brush: js">(function() { - for (let argument of arguments){ - console.log(argument); - } -})(1, 2, 3); - -// 1 -// 2 -// 3 -</pre> - -<h3 id="Parcourir_des_collections_DOM">Parcourir des collections DOM</h3> - -<p>Il est possible de parcourir des collections DOM telles que {{domxref("NodeList")}}. Dans cet exemple, on ajoute une classe <code>read</code> aux paragraphes qui sont des descendants directs d'un article :</p> - -<pre class="brush:js">// 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"); -} -</pre> - -<h3 id="Clôturer_les_itérateurs">Clôturer les itérateurs</h3> - -<p>Dans les boucles <code>for...of</code>, on peut provoquer la fin de l'itérateur avec <code>break</code>, <code>continue</code>, <code>throw</code>, ou <code>return</code>. Dans ces cas, l'itérateur est fermé.</p> - -<pre class="brush: js">function* toto() { - yield 1; - yield 2; - yield 3; -}; - -for (let o of toto()) { - console.log(o); - break; // L'itérateur est fermé -} -</pre> - -<h3 id="Itérer_sur_les_générateurs">Itérer sur les générateurs</h3> - -<p>Grâce à cette instruction, on peut également itérer sur les {{jsxref("Instructions/function*","générateurs","",1)}} :</p> - -<pre class="brush:js">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; - } -} -</pre> - -<h3 id="Itérer_sur_les_autres_objets_itérables">Itérer sur les autres objets itérables</h3> - -<p>Il est aussi possible d'itérer sur un objet qui implémente <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">le protocole itérable</a> de façon explicite :</p> - -<pre class="brush: js">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</pre> - -<h3 id="Les_différences_entre_for...of_et_for...in">Les différences entre <code>for...of</code> et <code>for...in</code></h3> - -<p>Les deux instructions <code>for...in</code> et <code>for...of</code> permettent de parcourir un ensemble. Mais elles ne parcourent pas le même ensemble.</p> - -<p>L'instruction {{jsxref("Instructions/for...in", "for...in")}} permet de parcourir <a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">les propriétés énumérables</a> d'un objet dans un ordre arbitraire.</p> - -<p>L'instruction <code>for...of</code> permet quant à elle de parcourir les données contenues dans l'<a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérables">objet itérable</a> visé.</p> - -<p>Dans l'exemple qui suit, on illustre la différence de comportement entre une boucle <code>for...of</code> et une boucle <code>for...in</code> utilisées sur un tableau ({{jsxref("Array")}}).</p> - -<pre class="brush:js">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 -} -</pre> - -<p>Chaque objet héritera de la propriété <code>objCustom</code> et chaque objet qui est un tableau ({{jsxref("Array")}}) héritera de la propriété <code>arrCustom</code> car on les ajoute aux prototypes {{jsxref("Object.prototype")}} et {{jsxref("Array.prototype")}}. L'objet <code>iterable</code> hérite donc des propriétés <code>objCustom</code> et <code>arrCustom</code> grâce <a href="/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes">à l'héritage et à la chaîne de prototypes</a>.</p> - -<pre class="brush: js">for (let i in iterable) { - console.log(i); // affiche 0, 1, 2, "toto", - // "arrCustom" et "objCustom" -}</pre> - -<p>Cette boucle ne parcourt que les <a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">propriétés énumérables</a> de l'objet <code>iterable</code> dans un ordre arbitraire. Les éléments du tableau <code>3</code>, <code>5</code>, <code>7</code> ou <code>hello</code> 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 <code>arrCustom</code> et <code>objCustom</code>. 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")}}.</p> - -<pre class="brush: js">for (let i in iterable) { - if (iterable.hasOwnProperty(i)) { - console.log(i); // affiche 0, 1, 2, "toto" - } -}</pre> - -<p>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 <code>0</code>, <code>1</code>, <code>2</code> et <code>toto</code> car ce sont des propriétés directement rattachées à l'objet <code>iterable</code>. En revanche, les propriétés <code>arrCustom</code> et <code>objCustom</code> ne sont pas affichées car elles proviennent de l'héritage.</p> - -<pre class="brush: js">for (let i of iterable) { - console.log(i); // affiche 3, 5, 7 -}</pre> - -<p>Cette boucle parcourt les valeurs définies comme itérables par <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB">l'objet itérable</a><strong> </strong>et dans ce cas ce sont les éléments du tableau <code>3</code>, <code>5</code>, <code>7</code> et pas les propriétés de l'objet.</p> - -<h3 id="Attention_à_ne_pas_réutiliser_les_générateurs">Attention à ne pas réutiliser les générateurs</h3> - -<p>Les générateurs ne doivent pas être réutilisés, même lorsque la boucle <code>for...of</code> 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")}}).</p> - -<pre class="brush: js">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é -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'instruction for...of')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'instruction for...of')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.for_of")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Map.prototype.forEach()")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <code><strong>for</strong></code> 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 <a href="/fr/docs/Web/JavaScript/Reference/Instructions/bloc">une instruction de bloc</a>) à exécuter dans la boucle.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-for.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">for ([<em>initialisation</em>]; [<em>condition</em>]; [<em>expression_finale</em>]) - <em>instruction</em> -</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>initialisation</code></dt> - <dd>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é <code>var</code> ou <code>let</code>. Les variables déclarées avec <code>var</code> se situent dans la même portée que la boucle <code>for</code> (elles ne sont pas locales au sein de la boucle), les variables déclarées avec <code>let</code> sont locales à la boucle. Le résultat de l'expression n'est pas utilisé.</dd> - <dt><code>condition</code></dt> - <dd>Une expression qui est évaluée avant chaque itération de la boucle. Si cette expression est vérifiée, l'<code>instruction </code>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 <code>false</code>), l'exécution se poursuivra à la première expression qui suit la boucle <code>for</code>.</dd> - <dt><code>expression_finale</code></dt> - <dd>Une expression qui est évaluée à la fin de chaque itération. Cela se produit avant l'évaluation de l'expression <code>condition</code>. Cette expression est généralement utilisée pour mettre à jour ou incrémenter le compteur qu'est la variable d'initialisation.</dd> - <dt><code>instruction</code></dt> - <dd>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 <a href="/fr/docs/JavaScript/Rérence_JavaScript/Instructions/block">bloc</a> (<code>{ ... }</code>) qui regroupera ces différentes instructions.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_for">Utiliser <code>for</code></h3> - -<p>L'instruction <code>for</code> qui suit débute en déclarant la variable <code>i</code> et en l'initialisant à 0. Elle vérifie que <code>i</code> est inférieur (strictement) à 9 et exécute ensuite les deux instructions contenues dans la boucle, ensuite elle incrémente <code>i</code> de 1, ce qui sera fait à chaque passage dans la boucle.</p> - -<pre class="brush: js">for (var i = 0; i < 9; i++) { - n += i; - myfunc(n); -} -</pre> - -<h3 id="Expressions_optionnelles_pour_for">Expressions optionnelles pour <code>for</code></h3> - -<p>Les trois expressions qui composent l'instruction <code>for</code> sont optionnelles :</p> - -<p>Par exemple, le bloc pour l'initialisation peut ne pas être utilisé :</p> - -<pre class="brush: js">var i = 0; -for (; i < 9; i++) { - console.log(i); - // d'autres instructions -} -</pre> - -<p>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.</p> - -<pre class="brush: js">for (var i = 0;; i++) { - console.log(i); - if (i > 3) break; - // d'autres instructions -}</pre> - -<p>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.</p> - -<pre class="brush: js">var i = 0; - -for (;;) { - if (i > 3) break; - console.log(i); - i++; -} -</pre> - -<h3 id="Utiliser_for_avec_une_instruction_vide">Utiliser <code>for</code> avec une instruction vide</h3> - -<p>L'instruction <code>for</code> 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.</p> - -<pre class="brush: js">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;"); -}</pre> - -<div class="note"><strong>Note :</strong> Dans cas, où on n'utilise pas la section d'instruction,<strong> il faut mettre un point-virgule immédiatement après la déclaration de la boucle.</strong></div> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-for-statement', 'instruction for')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.6.3', 'instruction for')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12.6.3', 'instruction for')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12.6.2', 'instruction for')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.for")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/break", "break")}}</li> - <li>{{jsxref("Instructions/continue", "continue")}}</li> - <li>{{jsxref("Instructions/vide", "Instruction vide","",1)}}</li> - <li>{{jsxref("Instructions/while", "while")}}</li> - <li>{{jsxref("Instructions/do...while", "do...while")}}</li> - <li>{{jsxref("Instructions/for...in", "for...in")}}</li> - <li>{{jsxref("Instructions/for...of", "for...of")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>La déclaration <strong><code>function</code></strong> (ou l'instruction <code>function</code>) permet de définir une fonction et les paramètres que celle-ci utilise.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-function.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>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)}}.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">function <em>nom</em>([<em>param1</em>[, <em>param2</em>,[..., <em>paramN</em>]]]) { - [<em>instructions</em>] -} -</pre> - -<dl> - <dt><code>nom</code></dt> - <dd>Le nom de la fonction.</dd> -</dl> - -<dl> - <dt><code>param</code>N</dt> - <dd>Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments (cela peut varier en fonction des moteurs).</dd> -</dl> - -<dl> - <dt><code>instructions</code></dt> - <dd>Les instructions qui constituent le corps de la fonctio.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Une fonction créée via une déclaration de fonction est un objet <code>Function</code> et possède toutes les caractéristiques (propriétés, méthodes et comportement) d'un objet <code>Function</code>. Voir la page {{jsxref("Function")}} pour plus d'informations sur ces caractéristiques.</p> - -<p>Une fonction peut également être créée en utilisant une expression (voir {{jsxref("Opérateurs/L_opérateur_function", "les expressions de fonctions","",1)}}).</p> - -<p>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.</p> - -<h3 id="Fonctions_créées_conditionnellement">Fonctions créées conditionnellement</h3> - -<p>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 <code>if</code>). 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 <a href="https://kangax.github.io/nfe/#function-statements">cet article</a> (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.</p> - -<pre class="brush: js">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 -</pre> - -<p>On obtient exactement les mêmes résultats si la condition est vérifiée (ici avec <code>true</code>) :</p> - -<pre class="brush: js">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</pre> - -<h3 id="La_«_remontée_»_des_déclarations_de_fonction">La « remontée » des déclarations de fonction</h3> - -<p>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 :</p> - -<pre class="brush: js">remontée(); // affiche "toto" dans la console - -function remontée() { - console.log("toto"); -} -</pre> - -<p>On notera que les {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",1)}} ne sont pas remontées :</p> - -<pre class="brush: js">nonRemontée(); // TypeError: nonRemontée is not a function - -var nonRemontée = function() { - console.log("truc"); -}; -</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_function">Utiliser <code>function</code></h3> - -<p>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 <code>a</code>, <code>b</code>, et <code>c</code>.</p> - -<pre class="brush: js">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; -} -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-function-definitions', 'Définition de fonction')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-13', 'Définition de fonction')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-13', 'Définition de fonction')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-13', 'Définition de fonction')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.0.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.function")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Fonctions", "Les fonctions","",1)}}</li> - <li>{{jsxref("Function")}}</li> - <li>{{jsxref("Opérateurs/L_opérateur_function", "Les expressions de fonction","",1)}}</li> - <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li> - <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li> - <li>{{jsxref("Fonctions/Fonctions_fléchées", "Les fonctions fléchées","",1)}}</li> - <li>{{jsxref("GeneratorFunction")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">L'instruction <code>async function</code> (les déclarations des fonctions asynchrones)</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/async_function">L'opérateur <code>async function</code> (les expressions de fonctions asynchrones)</a></li> -</ul> 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* ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>La déclaration <code><strong>function*</strong></code> (le mot-clé <code>function</code> 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")}}).</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div> -<p>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*")}}.</p> -</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox notranslate">function* <em>nom</em>([<em>param1</em>[, <em>param2</em>[, ... <em>paramN</em>]]]) { - <em>instructions</em> -} -</pre> - -<dl> - <dt><code>nom</code></dt> - <dd>Le nom de la fonction.</dd> -</dl> - -<dl> - <dt><code>paramN</code></dt> - <dd>Le nom d'un paramètre formel passé à la fonction.</dd> -</dl> - -<dl> - <dt><code>instructions</code></dt> - <dd>Les instructions qui constituent le corps de la fonction.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>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.</p> - -<p>Les générateurs, combinés avec <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses">les promesses</a>, sont des outils de programmation asynchrones puissants qui permettent de réduire les inconvénients causés par les <em>callbacks</em> (fonctions de rappel) et <a href="https://frontendmasters.com/courses/rethinking-async-js/callback-problems-inversion-of-control/">l'inversion de contrôle</a>.</p> - -<p>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 <code>next()</code> 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 <code>next()</code> renvoie un objet dont la propriété <code>value</code> contient la valeur générée et une propriété <code>done</code> qui indique si le générateur a produit sa dernière valeur ou non. Lorsqu'on appelle la méthode <code>next()</code> avec un argument, cela reprendra l'exécution de la fonction génératrice et remplacera la valeur de l'expression <code>yield</code> (là où l'exécution avait été interrompue) avec la valeur de l'argument passé à <code>next()</code>.</p> - -<p>On peut utiliser une instruction <code>return</code> dans un générateur. Lorsque cette instruction sera exécutée, le générateur sera terminé (<code>done</code> vaudra <code>true</code>). La valeur renvoyée par l'instruction <code>return</code> 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.</p> - -<p>À l'instar d'une instruction <code>return</code>, 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 à <code>next()</code> n'exécuteront aucun code provenant du générateur, ils renverront simplement un objet de la forme <code>{value: undefined, done: true}</code>.</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Exemple_simple">Exemple simple</h3> - -<pre class="brush: js notranslate">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 -</pre> - -<h3 id="Exemple_utilisant_des_arguments">Exemple utilisant des arguments</h3> - -<pre class="brush: js notranslate">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 -</pre> - -<h3 id="Exemple_utilisant_yield*">Exemple utilisant <code>yield*</code></h3> - -<pre class="brush: js notranslate">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 -</pre> - -<h3 id="Utilisation_de_return">Utilisation de <code>return</code></h3> - -<pre class="brush: js notranslate">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 } -</pre> - -<h3 id="Utiliser_un_générateur_comme_propriété">Utiliser un générateur comme propriété</h3> - -<pre class="brush: js notranslate">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 }</pre> - -<h3 id="Utiliser_un_générateur_comme_propriété_calculée">Utiliser un générateur comme propriété calculée</h3> - -<pre class="brush: js notranslate">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"]</pre> - -<h3 id="Les_générateurs_ne_sont_pas_constructibles">Les générateurs ne sont pas constructibles</h3> - -<pre class="brush: js example-bad notranslate">function* f() {} -var obj = new f; // lève une TypeError: f n'est pas un constructeur -</pre> - -<h3 id="Générateur_défini_avec_une_expression">Générateur défini avec une expression</h3> - -<pre class="brush: js notranslate">const toto = function* () { - yield 10; - yield 20; -}; -const truc = toto(); -console.log(truc.next()); // {value: 10, done: false}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td>Les générateurs ne doivent pas gérer la trappe [[Construct]] et déclencher une exception s'ils sont utilisés avec <code>new</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.generator_function")}}</p> - -<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2> - -<h3 id="Les_générateurs_et_itérateurs_dans_Firefox_pour_les_versions_antérieures_à_Firefox_26">Les générateurs et itérateurs dans Firefox pour les versions antérieures à Firefox 26</h3> - -<p>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é <code>function</code> (sans astérisque) et étaient différents selon d'autres aspects. Voir <a href="/fr/docs/Web/JavaScript/Reference/Instructions/Fonction_génératrice_historique">la page sur les générateurs historiques</a> pour plus d'informations.</p> - -<h3 id="IteratorResult_au_lieu_dune_exception"><code>IteratorResult</code> au lieu d'une exception</h3> - -<p>À 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 <code>IteratorResult</code> comme <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li> - <li>L'objet {{jsxref("GeneratorFunction")}}</li> - <li>{{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}}</li> - <li>{{jsxref("Opérateurs/yield", "yield")}}</li> - <li>{{jsxref("Opérateurs/yield*", "yield*")}}</li> - <li>L'objet {{jsxref("Function")}}</li> - <li>{{jsxref("Instructions/function", "Les déclarations de fonction","",1)}}</li> - <li>{{jsxref("Opérateurs/L_opérateur_function", "Les expressions de fonction","",1)}}</li> - <li>{{jsxref("Fonctions", "Les fonctions","",1)}}</li> - <li>D'autres ressources disponibles sur le Web : - <ul> - <li><a href="https://facebook.github.io/regenerator/">Regenerator</a> un compilateur permettant de traduire des générateurs ES2015 en du code JavaScript basé sur ES5</li> - <li><a href="https://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a> (vidéo en anglais)</li> - <li><a href="https://github.com/mozilla/task.js">Task.js</a></li> - <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch4.md#iterating-generators-asynchronously">Itérer de façon asynchrone sur des générateurs</a></li> - </ul> - </li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <strong><code>if</code></strong> 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.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">if (<em>condition</em>) - <em>instruction1</em> -[else - <em>instruction2</em>] -</pre> - -<dl> - <dt><code>condition</code></dt> - <dd>Une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Expressions">expression</a> qui est évaluée à <code>true</code> ou <code>false</code>.</dd> -</dl> - -<dl> - <dt><code>instruction1</code></dt> - <dd>L'instruction qui est exécutée si la condition est vérifiée (i.e. est évaluée à <code>true</code>). Cette instruction peut être n'importe quelle instruction valide, y compris une imbrication d'autres instructions <code>if</code>. 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)}}.</dd> -</dl> - -<dl> - <dt><code>instruction2</code></dt> - <dd>Si la clause <code>else</code> existe, l'instruction qui est exécutée si la <code>condition</code> est évaluée à <code>false</code>. Comme pour la première, cette instruction peut être n'importe quelle instruction valide : une autre instruction <code>if</code> imbriquée, un bloc d'instruction, une instruction vide, etc.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Plusieurs instructions <code>if...else</code> peuvent être imbriquées afin de créer une structure <code>else if</code> (on notera qu'il n'y a pas de mot-clé <code>elseif</code> en JavaScript).</p> - -<pre class="eval">if (<em>condition1</em>) - <em>instruction1</em> -else if (<em>condition2</em>) - <em>instruction2</em> -else if (<em>condition3</em>) - <em>instruction3</em> -... -else - <em>instructionN</em> -</pre> - -<p>Si on indente correctement le code, on retrouve la structure exactement équivalente :</p> - -<pre class="eval">if (<em>condition1</em>) - <em>instruction1</em> -else - if (<em>condition2</em>) - <em>instruction2</em> - else - if (<em>condition3</em>) -... -</pre> - -<p>Afin d'exécuter plusieurs instructions, on utilisera un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} (<code>{ ... }</code>) 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.</p> - -<pre class="eval">if (<em>condition</em>) { - <em>instructions1</em> -} else { - <em>instructions2</em> -} -</pre> - -<p>Attention à ne pas confondre les valeurs booléennes « primitives » <code>true</code> et <code>false</code> avec les valeurs true et false d'un objet {{jsxref("Boolean")}}. Toute valeur qui n'est pas <code>false</code>, {{jsxref("undefined")}}, {{jsxref("null")}}, <code>0</code>, <code>-0</code>, {{jsxref("NaN")}} ou la chaîne vide (<code>""</code>), et tout objet, y compris un objet <code>Boolean</code> dont la valeur est <code>false</code>, seront évalués à <code>true</code> lors d'une instruction conditionnelle <code>if</code>. Ainsi :</p> - -<pre class="brush: js">var b = new Boolean(false); -if (b) // la condition sera évaluée à true -</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_if...else">Utiliser <code>if...else</code></h3> - -<pre class="brush: js">if (cipher_char == from_char) { - result = result + to_char; - x++; -} else { - result = result + clear_char; -} -</pre> - -<h3 id="Utiliser_else_if">Utiliser <code>else if</code></h3> - -<p>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 :</p> - -<pre class="brush: js">if (x > 50){ - // faire quelque chose -} else if (x > 5) { - // faire autre chose -} else { - // faire encore autre chose -} -</pre> - -<h3 id="Affectation_de_variable_dans_l'expression_conditionnelle">Affectation de variable dans l'expression conditionnelle</h3> - -<p>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) :</p> - -<pre class="brush: js example-bad">if (x = y) { - /* exécuter les instructions */ -} -</pre> - -<p>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) :</p> - -<pre class="brush: js example-good">if ((x = y)) { - /* exécuter les instructions */ -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-if-statement', 'instruction if')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-if-statement', 'instruction if')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.5', 'instruction if')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12.5', 'instruction if')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12.5', 'instruction if')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.if_else")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/bloc", "bloc")}}</li> - <li>{{jsxref("Instructions/switch", "switch")}}</li> - <li>{{jsxref("Opérateurs/L_opérateur_conditionnel", "L'opérateur conditionnel","",1)}}</li> -</ul> 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 ---- -<div>{{JSSidebar("Statements")}}</div> - -<p>L'objet<strong> <code>import.meta</code></strong> 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.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">import.meta</pre> - -<h2 id="Description">Description</h2> - -<p>L'objet <code>import.meta</code> se compose d'un mot-clé <code>"import</code>", suivi d'un point, puis du nom de propriété <code>"meta"</code>. En temps normal, "<code>import."</code> serait utilisé comme contexte pour un accès à une propriété mais, dans ce cas, <code>"import."</code> n'est pas, à proprement parler, un objet.</p> - -<p>L'objet <code>import.meta</code> 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.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Soit un module <code>mon-module.js</code></p> - -<pre class="brush: html"><script type="module" src="mon-module.js"></script> -</pre> - -<p>Il est possible d'accéder aux métadonnées du module grâce à l'objet <code>import.meta</code>.</p> - -<pre class="brush: js">console.log(import.meta); // { url: "file:///home/user/mon-module.js" }</pre> - -<p>Cet objet contient une propriété <code>url</code> 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.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td><a href="https://github.com/tc39/proposal-import-meta/#importmeta">Proposition pour <code>import.meta</code></a></td> - <td>Niveau 3</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG","webappapis.html#hostgetimportmetaproperties","import.meta")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Définition des propriétés <code>import.meta</code> en HTML.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("javascript.statements.import_meta")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/import","import")}}</li> - <li>{{jsxref("Instructions/export","export")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <code><strong>import</strong></code> est utilisée pour importer des liens qui sont exportés par un autre module. Les modules importés sont interprétés en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> dans tous les cas. L'instruction <code>import</code> ne peut pas être utilisée dans les scripts embarqués sauf si ceux-ci proviennent de ressources avec <code><a href="/fr/docs/Web/HTML/Element/script#Attributs">type="module"</a></code>.</p> - -<div class="note"> -<p><strong>Note :</strong> Il existe également une forme fonctionnelle, <code>import()</code> (cf. <a href="#dyn">ci-après</a>) qui permet d'avoir des chargements dynamiques. La compatibilité ascendante peut être atteinte en utilisant l'attribut <code>nomodule</code> sur la balise {{HTMLElement("script")}}.</p> -</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">import <em>exportParDefaut</em> from "<em>nom-module</em>"; -import * as <em>nom</em> from "<em>nom-module</em>"; -import { <em>export </em>} from "<em>nom-module</em>"; -import { <em>export</em> as <em>alias </em>} from "<em>nom-module</em>"; -import { <em>export1 , export2</em> } from "<em>nom-module</em>"; -import { <em>export1 , export2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>nom-module</em>"; -import <em>exportParDefaut</em>, { <em>export</em> [ , <em>[...]</em> ] } from "<em>nom-module</em>"; -import <em>exportParDefaut</em>, * as <em>nom</em> from "<em>nom-module</em>"; -import "<em>nom-module</em>"; -import { <em>toto , truc</em> } from "<em>nom-module/chemin/vers/fichier-non-exporte</em>"; -let <em>promesse</em> = import("<em>nom-module</em>");</pre> - -<dl> - <dt><code>exportParDefaut</code></dt> - <dd>Nom qui fera référence à l'export par défaut du module.</dd> - <dt><code>nom-module</code></dt> - <dd>Le module depuis lequel importer. C'est souvent un chemin absolu ou relatif vers le fichier <code>.js</code> 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.</dd> - <dt><code>nom</code></dt> - <dd>Nom de l'objet module qui sera utilisé comme un genre d'espace de noms lors de références aux imports.</dd> - <dt><code>export</code>, <code>exportN</code></dt> - <dd>Nom des exports à importer.</dd> - <dt><code>alias</code>, <code>aliasN</code></dt> - <dd>Noms qui feront référence aux imports nommés.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Le paramètre <code>nom</code> 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 <code>export</code> indiquent les exports nommés individuellement, tandis que la syntaxe <code>import * as nom</code> les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe.</p> - -<h3 id="Importer_lintégralité_du_contenu_dun_module">Importer l'intégralité du contenu d'un module</h3> - -<p>Ce qui suit insère <code>monModule</code> dans la portée courante, contenant tous les exports du module dans le fichier situé dans <code>/modules/mon-module.js</code>.</p> - -<pre class="brush: js">import * as monModule from '/modules/mon-module.js'; -</pre> - -<p>Ici, accéder aux exports signifie utiliser le nom du module (ici <code>monModule</code>) comme un espace de noms. Par exemple, si le module importé ci-dessus incluait un export <code>faireToutesLesChosesIncroyables()</code>, vous l'écririez comme ceci :</p> - -<pre class="brush: js">monModule.faireToutesLesChosesIncroyables();</pre> - -<h3 id="Importer_un_seul_export_depuis_un_module">Importer un seul export depuis un module</h3> - -<p>Étant donné un objet ou une valeur nommé(e) <code>monExport</code> qui est exporté(e) depuis le module <code>mon-module</code>, 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 <code>monExport</code> dans la portée courante.</p> - -<pre class="brush: js">import {monExport} from '/modules/mon-module.js';</pre> - -<h3 id="Importer_plusieurs_éléments_exportés_depuis_un_module">Importer plusieurs éléments exportés depuis un module</h3> - -<p>Ce qui suit insère à la fois <code>machin</code> et <code>truc</code> dans la portée courante.</p> - -<pre class="brush: js">import {machin, truc} from '/modules/mon-module.js';</pre> - -<h3 id="Importer_un_élément_exporté_avec_un_alias">Importer un élément exporté avec un alias</h3> - -<p>Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insére <code>nomCourt</code> dans la portée courante.</p> - -<pre class="brush: js">import {nomDExportDeModuleVraimentVraimentLong as nomCourt} - from '/modules/mon-module.js';</pre> - -<h3 id="Renommer_plusieurs_exports_pendant_limport">Renommer plusieurs exports pendant l'import</h3> - -<p>Importe des exports multiples depuis un module avec des alias commodes :</p> - -<pre class="brush: js">import { - nomDExportDeModuleVraimentVraimentLong as nomCourt, - unAutreNomDeModuleLong as court -} from '/modules/mon-module.js';</pre> - -<h3 id="Importer_un_module_uniquement_pour_ses_effets_de_bord">Importer un module uniquement pour ses effets de bord</h3> - -<p>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.</p> - -<pre class="brush: js">import '/modules/mon-module.js'; -</pre> - -<h3 id="Importation_des_défauts">Importation des défauts</h3> - -<p>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 <code>import</code> peut alors être utilisée pour importer ces défauts.</p> - -<p>La version la plus simple importe directement le défaut :</p> - -<pre class="brush: js">import monDefaut from '/modules/mon-module.js';</pre> - -<p>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 :</p> - -<pre class="brush: js">import monDefaut, * as monModule from '/modules/mon-module.js'; -// monModule utilisé comme un espace de noms</pre> - -<p>ou</p> - -<pre class="brush: js">import monDefaut, {machin, truc} from '/modules/mon-module.js'; -// imports nommés spécifiques -</pre> - -<h3 id="Imports_dynamiques"><a id="dyn" name="dyn">Imports dynamiques</a></h3> - -<p>Le mot-clé <code>import</code> 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 :</p> - -<pre class="brush: js">import('/modules/mon-module.js') - .then((module) => { - // Faire quelque chose avec le module - });</pre> - -<p>On peut utiliser cette forme avec le mot-clé <code>await</code> :</p> - -<pre class="brush: js">let module = await import('/modules/mon-module.js');</pre> - -<h2 id="Exemples">Exemples</h2> - -<p>Importation depuis un module secondaire pour aider le traitement d'une requête AJAX JSON.</p> - -<h3 id="Le_module_fichier.js">Le module : fichier.js</h3> - -<pre class="brush: js; highlight: [14]">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))); -}</pre> - -<h3 id="Le_programme_principal_principal.js">Le programme principal : principal.js</h3> - -<pre class="brush: js">import { recupererContenuUtile } from '/modules/fichier.js'; - -recupererContenuUtile('http://www.example.com', - donnees => { faireQuelqueChoseDUtile(donnees); });</pre> - -<h3 id="Import_dynamique">Import dynamique</h3> - -<p>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.</p> - -<pre class="brush: js">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; - }); - }); -} - -;</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://github.com/tc39/proposal-dynamic-import/#import">Proposition pour les imports dynamiques « fonctionnels »</a></td> - <td>Proposition de niveau 4</td> - <td>Fera partie de ECMAScript 2020</td> - </tr> - <tr> - <td>{{SpecName("ESDraft", "#sec-imports", "Imports")}}</td> - <td>{{Spec2("ESDraft")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("ES2018", "#sec-imports", "Imports")}}</td> - <td>{{Spec2("ES2018")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("ES2017", "#sec-imports", "Imports")}}</td> - <td>{{Spec2("ES2017")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("ES2016", "#sec-imports", "Imports")}}</td> - <td>{{Spec2("ES2016")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("ES2015", "#sec-imports", "Imports")}}</td> - <td>{{Spec2("ES2015")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer aux données, voyez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une <em>pull request</em>.</div> - -<p>{{Compat("javascript.statements.import")}}</p> - -<h3 id="Suivi_de_limplémentation">Suivi de l'implémentation</h3> - -<p>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 <em>nightly</em> ou <em>release</em> des moteurs JavaScript des navigateurs.</p> - -<div>{{EmbedTest262ReportResultsTable("dynamic-import")}}</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/export", "export")}}</li> - <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/import.meta">import.meta</a></code></li> - <li>Limin Zhu, Brian Terlson et l'équipe Microsoft Edge : <a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li> - <li><a href="https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules">Jason Orendorff : ES6 en détails : les modules</a></li> - <li><a class="external" href="https://exploringjs.com/es6/ch_modules.html">Le livre d'Axel Rauschmayer : Exploring JS: Modules</a></li> - <li><a href="https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript">Un billet illustré de Lin Clark, traduit en français, sur les modules</a></li> - <li><a href="https://javascript.info/import-export">Tutoriel JavaScript sur <code>export</code> et <code>import</code></a></li> -</ul> 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 ---- -<div class="boxed translate-rendered"> -<div>{{jsSidebar("Statements")}}</div> - -<p>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.</p> - -<h2 id="Instructions_et_déclarations_par_catégorie">Instructions et déclarations, par catégorie</h2> - -<p>Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page.</p> - -<h3 id="Contrôle_du_flux">Contrôle du flux</h3> - -<dl> - <dt>{{jsxref("Instructions/bloc", "Bloc")}}</dt> - <dd>Une instruction de bloc est utilisée pour regrouper zéro ou plusieurs instructions. Un bloc est délimité par une paire d'accolades.</dd> - <dt>{{jsxref("Instructions/break", "break")}}</dt> - <dd>Cette instruction termine la boucle ou l'instruction <code>switch</code> ou l'instruction <code>label</code> en cours et continue l'exécution sur l'instruction suivant l'instruction terminée.</dd> - <dt>{{jsxref("Instructions/continue", "continue")}}</dt> - <dd>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.</dd> - <dt>{{jsxref("Instructions/vide", "Vide")}}</dt> - <dd>Une instruction vide est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.</dd> - <dt>{{jsxref("Instructions/if...else","if...else")}}</dt> - <dd>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.</dd> - <dt>{{jsxref("Instructions/switch", "switch")}}</dt> - <dd>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.</dd> - <dt>{{jsxref("Instructions/throw", "throw")}}</dt> - <dd>Cette instruction lève une exception.</dd> - <dt>{{jsxref("Instructions/try...catch","try...catch")}}</dt> - <dd>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.</dd> -</dl> - -<h3 id="Déclarations">Déclarations</h3> - -<dl> - <dt>{{jsxref("Instructions/var", "var")}}</dt> - <dd> - <p>Cette instruction permet de déclarer une variable, éventuellement en fournissant une valeur pour permettant de l'initialiser.</p> - </dd> - <dt>{{jsxref("Instructions/let", "let")}}</dt> - <dd>Cette instruction permet de déclarer une variable locale dans une portée d'un bloc et éventuellement d'initialiser sa valeur.</dd> - <dt>{{jsxref("Instructions/const", "const")}}</dt> - <dd>Cette instruction déclare une constante en lecture seule.</dd> -</dl> - -<h3 id="Fonctions_et_classes">Fonctions et classes</h3> - -<dl> - <dt>{{jsxref("Instructions/function", "function")}}</dt> - <dd>Cette instruction déclare une fonction avec les paramètres donnés.</dd> - <dt>{{jsxref("Instructions/function*", "function*")}}</dt> - <dd>Les fonctions génératrices permettent de créer des <a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">itérateurs</a> plus simplement.</dd> - <dt>{{experimental_inline}} {{jsxref("Instructions/async_function", "async function")}}</dt> - <dd>Cette instruction déclare une fonction asynchrone avec les paramètres associés.</dd> - <dt>{{jsxref("Instructions/return", "return")}}</dt> - <dd>Cette instruction spécifie la valeur de retour renvoyée par une fonction.</dd> - <dt>{{jsxref("Instructions/class", "class")}}</dt> - <dd>Déclare une classe.</dd> -</dl> - -<h3 id="Itérations">Itérations</h3> - -<dl> - <dt>{{jsxref("Instructions/do...while", "do...while")}}</dt> - <dd>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.</dd> - <dt>{{jsxref("Instructions/for", "for")}}</dt> - <dd>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.</dd> - <dt>{{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} {{non-standard_inline}}</dt> - <dd>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.</dd> - <dt>{{jsxref("Instructions/for...in", "for...in")}}</dt> - <dd>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.</dd> - <dt>{{jsxref("Instructions/for...of", "for...of")}}</dt> - <dd>Cette instruction parcourt les objets sur lesquels on peut itérer (comme les tableaux, les <a class="new" href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateurs et générateurs</a>). 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.</dd> - <dt>{{jsxref("Instructions/for-await...of","for await...of")}}</dt> - <dd>Cette instruction parcourt les objets itérables asynchrones tels que les tableaux, les <a class="new" href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateurs et générateurs</a>. Elle utilise un mécanisme d'itération spécifique et des instructions sont exécutées pour la valeur de chaque propriété.</dd> - <dt>{{jsxref("Instructions/while", "while")}}</dt> - <dd>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.</dd> -</dl> - -<h3 id="Autres">Autres</h3> - -<dl> - <dt>{{jsxref("Instructions/debugger", "debugger")}}</dt> - <dd>Cette instruction appelle une fonctionnalité de débogage. Si aucune fonctionnalité de débogage n'est disponible, l'instruction n'a aucun effet.</dd> - <dt>{{jsxref("Instructions/export", "export")}}</dt> - <dd>Cette instruction permet à un script signé de fournir des propriétés, fonctions et des objets à d'autres scripts (signés ou non).</dd> - <dt>{{jsxref("Instructions/import", "import")}}</dt> - <dd>Cette instruction permet à un script d'importer des propriétés, fonctions ou objets depuis un script qui les exporte.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Instructions/import.meta"><code>import.meta</code></a></dt> - <dd>Une méta propriété qui expose des métadonnées à propos du module JavaScript.</dd> - <dt>{{jsxref("Instructions/label", "label")}}</dt> - <dd>Cette instruction fournit un identifiant auquel il est possible de se référer en utilisant une instruction <code>break</code> ou <code>continue</code>.</dd> -</dl> - -<dl> - <dt>{{jsxref("Instructions/with", "with")}} {{deprecated_inline}}</dt> - <dd>Cette instruction permet d'étendre la portée chaînée d'une instruction.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> - <td>{{Spec2('ES3')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Nouveaux éléments : <code>function*</code>, <code>let</code>, <code>for...of</code>, <code>yield</code>, <code>class</code></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Le chapitre de cette référence sur les <a href="/fr/docs/JavaScript/Reference/Op%C3%A9rateurs">opérateurs JavaScript</a>.</li> -</ul> -</div> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>Une <strong>instruction étiquetée (<em>labeled</em> en anglais)</strong> 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.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-label.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"> -<p><strong>Note :</strong> 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.</p> -</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox"><em>label</em> : - <em>instruction</em> -</pre> - -<dl> - <dt><code>label</code></dt> - <dd>N'importe quel identifiant JavaScript qui n'est pas un mot-clé réservé.</dd> - <dt><code>instruction</code></dt> - <dd>Une instruction. <code>break</code> peut être utilisé avec n'importe quelle instruction identifiée. <code>continue</code> ne peut être utilisé qu'avec des instructions de boucle.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Une étiquette (<em>label</em>) peut être utilisée pour identifier une boucle et pour y faire référence à l'intérieur en utilisant les instructions <code>break</code> ou <code>continue</code> afin d'interrompre cette boucle ou de reprendre son exécution.</p> - -<p>JavaScript <em>ne possède pas</em> d'instruction <code>goto</code>, les étiquettes ne peuvent être utilisées que par les instructions <code>break</code> ou <code>continue</code>.</p> - -<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, on ne peut pas utiliser <code>let</code> comme étiquette, cela lèvera une exception {{jsxref("SyntaxError")}} (<code>let</code> est un identifiant réservé).</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Faire_référence_à_une_étiquette_avec_continue_dans_une_boucle">Faire référence à une étiquette avec <code>continue</code> dans une boucle</h3> - -<pre class="brush: js">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" -</pre> - -<h3 id="Second_exemple_utilisant_continue">Second exemple utilisant <code>continue</code></h3> - -<p>É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.</p> - -<pre class="brush: js">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++; -}</pre> - -<h3 id="Utiliser_break_avec_une_étiquette_au_sein_d'une_boucle_for">Utiliser <code>break</code> avec une étiquette au sein d'une boucle <code>for</code></h3> - -<pre class="brush: js">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 -</pre> - -<h3 id="Second_exemple_utilisant_un_label_et_break">Second exemple utilisant un label et <code>break</code></h3> - -<p>É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.</p> - -<pre class="brush: js">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; - } -</pre> - -<h3 id="Utilise_un_bloc_étiqueté_avec_break">Utilise un bloc étiqueté avec <code>break</code></h3> - -<p>On peut utiliser des étiquettes dans des blocs simples mais seul <code>break</code> permettra de faire référence à des étiquettes en dehors d'une boucle.</p> - -<pre class="brush: js">toto: { - console.log("face"); - break toto; - console.log("this will not be executed"); -} -console.log("swap"); - -// On aura alors dans la console : - -// "face" -// "swap </pre> - -<h3 id="Déclarations_de_fonctions_étiquetées">Déclarations de fonctions étiquetées</h3> - -<p>À partir d'ECMAScript 2015, les déclarations de fonctions étiquetées sont standardisées pour du code non-strict <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations">au sein de l'annexe de la spécification relative à la compatibilité web</a>.</p> - -<pre class="brush: js">L: function F() {}</pre> - -<p>En revanche, en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, cela lèvera une exception {{jsxref("SyntaxError")}}:</p> - -<pre class="brush: js">"use strict"; -L: function F() {} -// SyntaxError: functions cannot be labelled</pre> - -<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">Les fonctions génératrices</a> ne peuvent pas être étiquetées, en mode strict, comme en mode non-strict :</p> - -<pre class="brush: js">L: function* F() {} -// SyntaxError: generator functions cannot be labelled -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.2.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.label")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/break", "break")}}</li> - <li>{{jsxref("Instructions/continue", "continue")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <strong><code>let</code></strong> permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-let.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">let var1 [= valeur1] [, var2 [= valeur2]] [, ..., varN [= valeurN]];</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt> - <dd>Le nom de la ou des variables. Ces noms doivent être des identifiants JavaScript valides.</dd> - <dt><code>valeur1</code>, <code>valeur2</code>, …, <code>valeurN</code>{{optional_inline}}</dt> - <dd>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.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p><code>let</code> permet de déclarer des variables dont la portée est limitée à celle du <a href="/fr/docs/Web/JavaScript/Reference/Instructions/bloc">bloc</a> 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).</p> - -<p>Une autre différence entre <code>let</code> et <code>var</code> est la façon dont la variable est initialisée : pour <code>let</code>, la variable est initialisée à l'endroit où le parseur évalue son contenu (cf. ci-après).</p> - -<p>À l'instar de {{jsxref("instructions/const", "const")}}, <code>let</code> ne crée pas de propriété sur l'objet {{domxref("window")}} quand les variables sont déclarées au niveau global.</p> - -<p>L'origine du nom <code>let</code> est décrite <a href="https://stackoverflow.com/questions/37916940/why-was-the-name-let-chosen-for-block-scoped-variable-declarations-in-javascri">dans cette réponse (en anglais)</a>.</p> - -<h3 id="Les_portées_de_bloc_avec_let">Les portées de bloc avec <code>let</code></h3> - -<p>Le mot-clé <code>let</code> permet de définir des variables au sein d'un bloc et des blocs qu'il contient. <code>var</code> permet quant à lui de définir une variable dont la portée est celle de la fonction englobante.</p> - -<pre class="brush:js">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 -} -</pre> - -<h3 id="Une_meilleure_lisibilité_pour_les_fonctions_internes">Une meilleure lisibilité pour les fonctions internes</h3> - -<p><code>let</code> peut parfois permettre de rendre le code plus lisible lorsqu'on utilise des fonctions internes.</p> - -<pre class="brush:js">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); -} -</pre> - -<p>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 <code>i</code>. Si on remplace <code>let</code> par {{jsxref("Instructions/var","var")}}, on n'obtiendra pas l'effet escompté car on aura une même variable pour cette portée <code>i=6</code> (au lieu de 5 différentes).</p> - -<h4 id="Règles_de_portées">Règles de portées</h4> - -<p>Les variables déclarées avec <code>let</code> 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 <code>let</code> fonctionne comme <code>var</code>, la seule différence dans cette analogie est que <code>let</code> fonctionne avec les portées de bloc et <code>var</code> avec les portées des fonctions :</p> - -<pre class="brush:js">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 -} -</pre> - -<p>Au niveau le plus haut (la portée globale), <code>let</code> crée une variable globale alors que <code>var</code> ajoute une propriété à l'objet global :</p> - -<pre class="brush:js">var x = 'global'; -let y = 'global2'; -console.log(this.x); // "global" -console.log(this.y); // undefined -console.log(y); // "global2" -</pre> - -<h3 id="Émuler_le_fonctionnement_des_interfaces_privées">Émuler le fonctionnement des interfaces privées</h3> - -<p>En utilisant l'instruction <code>let</code> avec <a href="/fr/docs/Glossaire/Constructeur">des constructeurs</a>, on peut créer des <em>interfaces privées</em> sans avoir à utiliser <a href="/fr/docs/Web/JavaScript/Closures">de fermetures</a> :</p> - -<pre class="brush: js">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 -</pre> - -<p>Cette technique permet d'obtenir un état privé « statique ». Ainsi, dans l'exemple qui précède, toutes les instances de <code>Truc</code> partageront la même <code>portéePrivée</code>.<br> - Il était possible d'obtenir un tel isolement avec <code>var</code> mais il fallait passer par des fonctions isolées (généralement des fonctions immédiatement appelées (<em>IIFE</em>)).</p> - -<h3 id="Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">Zone morte temporaire (<em>Temporal Dead Zone</em> / TDZ) et les erreurs liées à <code>let</code></h3> - -<p>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")}}.</p> - -<pre class="brush: js example-bad">if (x) { - let toto; - let toto; // SyntaxError -}</pre> - -<p>Avec ECMAScript 2015 (ES6), <code>let</code><strong> remontera</strong> (<em>hoisting</em>) 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 <code>let</code>, 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.</p> - -<pre class="brush: js example-bad">function faire_quelque_chose() { - console.log(truc); // undefined - console.log(toto); // ReferenceError - let toto = 2; - var truc = 1; -}</pre> - -<p>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.</p> - -<pre class="brush: js example-bad">switch (x) { - case 0: - let toto; - break; - - case 1: - let toto; // SyntaxError for redeclaration. - break; -}</pre> - -<p>Par contre, si on ajoute une instruction de bloc dans la clause <code>case</code>, cela créera une nouvelle portée et empêchera l'erreur :</p> - -<pre class="brush: js">let x = 1; - -switch(x) { - case 0: { - let toto; - break; - } - case 1: { - let toto; - break; - } -}</pre> - -<h3 id="Autres_situations">Autres situations</h3> - -<p>Lorsqu'on utilise <code>let</code> dans un bloc, sa portée est limitée à celle du bloc. On notera ici la différence avec <code>var</code> dont la portée est celle de la fonction où il est utilisé.</p> - -<pre class="brush: js">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 -</pre> - -<p>Cependant, la combinaison utilisée ci-après déclenchera une exception <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError">SyntaxError</a></code> car la déclaration avec <code>var</code> est remontée en haut du bloc et il y a donc une redéclaration implicite de la variable (également utilisée avec <code>let</code>).</p> - -<pre class="brush: js example-bad">let x = 1; - -if (true) { - var x = 2; // SyntaxError liée à la redéclaration -} -</pre> - -<h3 id="La_zone_morte_temporaire_et_typeof">La zone morte temporaire et <code>typeof</code></h3> - -<p>Si on utilise <code>typeof</code> sur des variables non déclarées ou qui valent {{jsxref("undefined")}}, on obtiendra la valeur <code>undefined</code>. Mais si on utilise <code>typeof</code> sur une variable au sein de la zone morte temporaire de cette variable, cela déclenchera une {{jsxref("ReferenceError")}} :</p> - -<pre class="brush: js">console.log(typeof variableNonDeclaree); // affiche 'undefined' - -console.log(typeof i); // ReferenceError -let i = 10;</pre> - -<h3 id="Autre_exemple_lié_à_la_zone_morte_temporaire_et_aux_portées_lexicales">Autre exemple lié à la zone morte temporaire et aux portées lexicales</h3> - -<p>Dans l'exemple qui suit, dans l'expression <code>toto + 55</code>, l'identifiant <code>toto</code> 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 <code>let toto = (toto + 55);</code> l'instruction est bien remontée mais l'endroit où on utilise <code>toto</code> (dans le fragment <code>(toto + 55</code>)) est toujours dans la zone morte temporaire car <code>toto</code> n'a pas encore été affecté.</p> - -<pre class="brush: js example-bad">function test(){ - var toto = 33; - if (true) { - let toto = (toto + 55); // ReferenceError: can't access lexical declaration `toto` before initialization - } -} -test(); -</pre> - -<p>Si on utilise <code>let</code> 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 :</p> - -<pre class="brush: js example-bad">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]}); -</pre> - -<h3 id="Les_variables_déclarées_avec_let_et_les_boucles_for">Les variables déclarées avec <code>let</code> et les boucles <code>for</code></h3> - -<p>Le mot-clé <code>let</code> 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.</p> - -<pre class="brush:js">var a = 0; -for ( let i = a; i < 10; i++ ) { - console.log(i); -} -</pre> - -<h4 id="Règles_de_portées_2">Règles de portées</h4> - -<pre class="eval">for (let <var>expr1</var>; <var>expr2</var>; <var>expr3</var>) instruction</pre> - -<p>Dans cet exemple, <code><var>expr2</var></code>, <code><var>expr3</var></code>, et <code>instruction</code> sont contenues dans un bloc implicite qui contient la variable de bloc local déclarée avec <code>let <var>expr1</var></code>.</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="let_var"><code>let</code> / <code>var</code></h3> - -<p>Lorsqu'il est utilisé dans un bloc, <code>let</code> permet de limiter la portée de la variable à ce bloc. <em>var </em>quant à lui limite la portée de la variable à la fonction.</p> - -<pre class="brush: js">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</pre> - -<h3 id="let_utilisé_dans_les_boucles"><code>let</code> utilisé dans les boucles</h3> - -<p>Le mot-clé let permet de lier des variables à la portée de la boucle plutôt qu'à celle de la fonction (avec <code>var</code>) :</p> - -<pre class="brush: js">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</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale. Cette définition n'inclue pas les expressions et blocs <code>let</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.let")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/var","var")}}</li> - <li>{{jsxref("Instructions/const","const")}}</li> - <li><a href="https://tech.mozfr.org/post/2015/08/06/ES6-en-details-%3A-let-et-const">ES6 en détails : <code>let</code> et <code>const</code></a></li> - <li><a href="https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/">Changements liés à <code>let</code> et <code>const</code> dans Firefox 44 (en anglais)</a></li> - <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md">Le chapitre de <em>You Don't Know JS</em> sur la portée des fonctions et des blocs</a> (en anglais)</li> - <li><a href="https://stackoverflow.com/a/33198850/1125029">StackOverflow : qu'est-ce que la zone morte temporaire ?</a></li> - <li><a href="https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable">StackOverflow : quelle est la différence entre <code>let</code> et <code>var</code> ?</a></li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <strong><code>return</code> </strong>met fin à l'exécution d'une fonction et définit une valeur à renvoyer à la fonction appelante.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">return [[expression]]; </pre> - -<dl> - <dt><code>expression</code></dt> - <dd>L'expression dont on souhaite renvoyer la valeur. Si elle est absente, la valeur renvoyée par défaut sera {{jsxref("undefined")}}.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Lorsqu'une instruction <code>return</code> 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 <code>undefined</code> sera renvoyée. Par exemple, voici une fonction qui renvoie le carré de son argument <code>x</code> (où <code>x</code> est un nombre) :</p> - -<pre class="brush: js">function carre(x) { - return x * x; -} -var demo = carre(3); -// demo vaudra alors 9 -</pre> - -<p>Les instructions qui suivent causeront chacune l'arrêt de l'exécution d'une fonction :</p> - -<pre class="brush: js">return; -return true; -return false; -return x; -return x + y / 3; -</pre> - -<h3 id="Ajout_automatique_de_point-virgule">Ajout automatique de point-virgule</h3> - -<p>L'instruction <code>return</code> peut être impactée par <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules">l'ajout automatique de point-virgule (<em>ASI</em> en anglais)</a>. Il est interdit d'avoir un caractère de fin de ligne entre le mot-clé <code>return</code> et l'expression :</p> - -<pre class="brush: js">return -a + b; - -</pre> - -<p>Après ASI, cela sera transformé en :</p> - -<pre class="brush: js">return; -a + b; -// Avertissement console : "expression non accessible -// après une instruction return sans point-virgule" -</pre> - -<div class="note"> -<p><strong>Note :</strong> À 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 <code>return</code> sans point-virgule. Voir le {{bug(1005110)}} pour plus d'informations.</p> -</div> - -<p>Pour éviter ce problème et l'insertion automatique, on peut, si besoin, utiliser des parenthèses.</p> - -<pre class="brush: js">return ( - a + b; -);</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_return">Utiliser <code>return</code></h3> - -<p>La fonction suivante renvoie le carré de son argument :</p> - -<pre class="brush: js">function carré(x) { - return x * x; -} -</pre> - -<h3 id="Interrompre_une_fonction">Interrompre une fonction</h3> - -<p>Une fonction s'arrête immédiatement à l'instant où l'instruction <code>return</code> est traitée.</p> - -<pre class="brush: js">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 -</pre> - -<h3 id="Renvoyer_une_fonction">Renvoyer une fonction</h3> - -<p>Pour en savoir plus sur les fermetures (<em>closures</em>), voir <a href="/fr/docs/Web/JavaScript/Closures">cet article sur les fermetures</a>.</p> - -<pre class="brush: js">function magique() { - return function calc(x) { return x * 42 }; -} - -var réponse = magique(); -réponse(1337); // 56154 -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.return")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Fonctions","Les fonctions","",1)}}</li> - <li><a href="/fr/docs/Web/JavaScript/Closures">Les fermetures (closures)</a></li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <strong><code>switch</code></strong> évalue une expression et, selon le résultat obtenu et le cas associé, exécute les instructions correspondantes.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-switch.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">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;]] -}</pre> - -<dl> - <dt><code>expression</code></dt> - <dd>Une expression à comparer avec chacune des clause <code>case</code>.</dd> - <dt><code>case expressionN </code> {{optional_inline}}</dt> - <dd>Une clause qu'on compare avec <code>expression</code>.</dd> - <dt><code>default </code>{{optional_inline}}</dt> - <dd>Une clause exécutée si aucune correspondance n'est trouvée avec les clause <code>case</code> (et/ou s'il n'y a pas de <code>break</code> pour les clauses <code>case</code> précédentes).</dd> - <dt><code>instructionsN</code></dt> - <dd>Les instructions à exécuter lorsque l'<code>expression</code> correspond au cas présenté pour cette clause.</dd> - <dt><code>instructions_def</code></dt> - <dd>Les instructions à exécuter si l'<code>expression</code> ne correspond à aucun cas de figure précédemment décrit.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Une instruction <code>switch</code> 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).</p> - -<p>Le programme recherche tout d'abord une clause <code>case</code> 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 <code>case</code> n'est trouvée, le programme recherche la clause optionnelle <code>default</code> 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 <code>switch</code>. Par convention, la clause <code>default</code> est utilisée en dernière mais cela n'est pas nécessaire.</p> - -<p>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 <code>break</code> n'est pas utilisé, le programme continuera son exécution avec les instructions suivantes (des autres cas de l'instruction <code>switch</code>).</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_switch">Utiliser <code>switch</code></h3> - -<p>Dans l'exemple suivant, si l'expression <code>expr</code> vaut "Bananes", le programme trouve la correspondance et exécute l'instruction associée. Lorsque l'instruction <code>break</code> est trouvée, le programme « sort » de l'instruction <code>switch</code> et continue l'exécution avec les instructions suivantes. Si <code>break</code> n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée.</p> - -<pre class="brush: js">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 ?"); -</pre> - -<h3 id="Que_se_passe-t-il_si_on_oublie_un_break">Que se passe-t-il si on oublie un <code>break</code> ?</h3> - -<p>Si on omet une instruction <code>break</code>, le script exécutera les instructions pour le cas correspondant et aussi celles pour les cas suivants jusqu'à la fin de l'instruction <code>switch</code> ou jusqu'à une instruction <code>break</code>. Par exemple :</p> - -<pre class="brush: js">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'); -}</pre> - -<h3 id="Peut-on_intercaler_la_règle_par_défaut">Peut-on intercaler la règle par défaut ?</h3> - -<p>Oui, il est possible de placer le cas <code>default</code> entre deux autres cas. Ainsi, si on a une valeur qui ne correspond pas aux différents cas, elle passera par le bloc <code>default</code> puis par les autres s'il n'y a pas de <code>break</code>. Par exemple :</p> - -<pre class="brush: js">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" -</pre> - -<h3 id="Méthodes_pour_regrouper_différents_cas">Méthodes pour regrouper différents cas</h3> - -<p>Pour la source depuis laquelle les exemples suivants ont été adaptés, voir <a href="https://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">cette question Stack Overflow</a>.</p> - -<h4 id="Regrouper_différents_cas_pour_exécuter_une_unique_opération">Regrouper différents cas pour exécuter une unique opération</h4> - -<p>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).</p> - -<p>On peut donc regrouper différentes valeurs les unes à la suite des autres pour exécuter des instructions pour ces valeurs :</p> - -<pre class="brush: js">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.'); -}</pre> - -<h4 id="Chaîner_des_opérations">Chaîner des opérations</h4> - -<p>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 <code>switch</code> :</p> - -<pre class="brush: js">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 !'); -}</pre> - -<p>Selon les valeurs fournies à la variable <code>toto</code>, on aura les résultats suivants :</p> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Valeur</th> - <th scope="col">Texte</th> - </tr> - <tr> - <td>toto vaut {{jsxref("NaN")}} ou est différent de 1, 2, 3, 4, 5 ou 0</td> - <td>Veuillez choisir un nombre entre 0 et 5 !</td> - </tr> - <tr> - <td>0</td> - <td>Résultat : Donc quel est votre nom ?</td> - </tr> - <tr> - <td>1</td> - <td>Résultat : quel est votre nom ?</td> - </tr> - <tr> - <td>2</td> - <td>Résultat : votre nom ?</td> - </tr> - <tr> - <td>3</td> - <td>Résultat : nom ?</td> - </tr> - <tr> - <td>4</td> - <td>Résultat : ?</td> - </tr> - <tr> - <td>5</td> - <td>Résultat : !</td> - </tr> - </tbody> -</table> - -<h3 id="switch_et_les_variables_avec_une_portée_de_bloc"><code>switch</code> et les variables avec une portée de bloc</h3> - -<p>Avec ECMAScript 2015 (ES6), on peut utiliser les instructions <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> et <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> pour déclarer des variables dont la portée sera celle du bloc englobant.</p> - -<p>Prenons cet exemple :</p> - -<pre class="brush: js">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; -}</pre> - -<p>Si on exécute cet exemple, on aura l'erreur <code>Uncaught SyntaxError: Identifier 'message' has already been declared</code> qui n'est probablement pas le résultat espéré.</p> - -<p>Cela se produit car la première instruction <code>let message = 'bonjour';</code> entre en conflit avec <code>let message = 'coucou';</code> bien qu'elles soient rattachées à deux instructions <code>case</code> distinctes <code>case 'dire_bonjour':</code> et <code>case 'dire_coucou':</code> mais ces deux instructions s'inscrivent dans le même bloc et on a donc <code>message</code> déclaré deux fois dans le même bloc, soit deux fois dans la même portée.</p> - -<p>Pour régler ce problème, il suffit de rajouter des accolades pour définir un bloc d'instructions pour chaque <code>case</code> :</p> - -<pre class="brush: js">const action = 'dire_bonjour'; -switch (action) { - case 'dire_bonjour': <strong>{ // accolade ajoutée</strong> - let message = 'bonjour'; - console.log(message); - break; - <strong>} // accolade ajoutée</strong> - case 'dire_coucou': <strong>{ // accolade ajoutée</strong> - let message = 'coucou'; - console.log(message); - break; - <strong>} // accolade ajoutée</strong> - default: <strong>{ // accolade ajoutée</strong> - console.log('Aucune action reçue.'); - break; - <strong>} // accolade ajoutée</strong> -}</pre> - -<p>Cette nouvelle version, exécutée, produira <code>"bonjour"</code> dans la console, sans causer d'erreur.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.2</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.switch")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/if...else","if...else")}}</li> - <li>{{jsxref("Instructions/break","break")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <strong><code>throw</code></strong> 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 <code>throw</code> 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 <code>catch</code> ne se trouve dans les fonctions de la pile d'appels, le programme sera terminé.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">throw <em>expression</em>; </pre> - -<dl> - <dt><code>expression</code></dt> - <dd>L'expression qui fournit l'exception à lever.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>L'instruction <code>throw</code> permet de lever (<em>throw</em> en anglais) une exception. Lorsqu'on lève une exception, <code>expression</code> fournit la valeur de l'exception. Chacune des instructions ci-après permet de lever une exception :</p> - -<pre class="brush: js">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"</pre> - -<p>On notera également que l'instruction <code>throw</code> 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é <code>throw</code> et l'expression.</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Lever_une_exception_qui_est_un_objet">Lever une exception qui est un objet</h3> - -<p>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 <code>catch</code>. Dans l'exemple suivant, on crée un objet <code>monException</code> du type <code>ExceptionUtilisateur</code> puis on utilise cet objet avec une instruction <code>throw</code>.</p> - -<pre class="brush: js">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 -} -</pre> - -<h3 id="Deuxième_exemple_avec_un_objet">Deuxième exemple avec un objet</h3> - -<p>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 <code>ZipFormatIncorrectException</code>. (Le mot-clé {{jsxref("Instructions/const","const")}} introduit avec ECMAScript 6 est utilisé dans cet exemple).</p> - -<pre class="brush: js">/* - * 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 -</pre> - -<h3 id="Propager_une_exception">Propager une exception</h3> - -<p>L'instruction <code>throw</code> 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.</p> - -<pre class="brush: js">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; - } -} -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.4</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.throw")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/try...catch","try...catch")}}</li> - <li>{{jsxref("Error")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <strong><code>try...catch</code></strong> regroupe des instructions à exécuter et définit une réponse si l'une de ces instructions provoque une exception.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">try { - <em>instructions_try</em> -} -[catch (<em>exception_var_1</em> if <em>condition_1</em>) { // non-standard - <em>instructions_catch_1</em> -}] -... -[catch (<em>exception_var_2</em>) { - <em>instructions_catch_2</em> -}] -[finally { - <em>instructions_finally</em> -}] -</pre> - -<dl> - <dt><code>instructions_try</code></dt> - <dd>Les instructions qu'on souhaite exécuter.</dd> -</dl> - -<dl> - <dt><code>instructions_catch_1</code>, <code>instructions_catch_2</code></dt> - <dd>Les instructions à exécuter si une exception est levée dans le bloc <code>try</code>.</dd> -</dl> - -<dl> - <dt><code>exception_var_1</code>, <code>exception_var_2</code></dt> - <dd>Un identifiant qui permet de récupérer la valeur de l'exception associée à la clause <code>catch</code>.</dd> -</dl> - -<dl> - <dt><code>condition_1</code></dt> - <dd>Une expression conditionnelle.</dd> -</dl> - -<dl> - <dt><code>instructions_finally</code></dt> - <dd>Les instructions à exécuter une fois que l'instruction <code>try</code> est terminée. Ces instructions s'exécuteront, qu'il y ait eu une exception ou non.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>L'instruction <code>try</code> est composée d'un bloc <code>try</code> contenant une ou plusieurs instructions, d'au moins une clause <code>catch</code> ou d'une clause <code>finally</code> ou des deux. On peut donc avoir les trois formes suivantes pour cette instruction :</p> - -<ol> - <li><code>try...catch</code></li> - <li><code>try...finally</code></li> - <li><code>try...catch...finally</code></li> -</ol> - -<p>Une clause <code>catch</code> contient les instructions à exécuter si une exception est levée par une instruction du bloc <code>try</code>. On souhaite généralement que le bloc <code>try</code> 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 <code>catch</code>. Si une instruction contenue dans le bloc <code>try</code> (ou une fonction appelée depuis le bloc <code>try</code>) renvoie une exception, le contrôle sera immédiatement passé à la clause <code>catch</code>. Si aucune exception n'est levée, la clause <code>catch</code> ne sera pas utilisée.</p> - -<p>La clause <code>finally</code> s'exécute après le bloc <code>try</code> et après le bloc <code>catch</code> (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.</p> - -<p>Il est possible d'imbriquer plusieurs instructions <code>try</code>. Si un <code>try</code> imbriqué ne possède pas de clause <code>catch</code>, la clause <code>catch</code> du <code>try</code> du niveau supérieur sera utilisée (et ainsi de suite).</p> - -<p>Pour plus d'informations sur les exceptions et les erreurs en JavaScript, voir le chapitre du <a href="/fr/docs/Web/JavaScript/Guide/Instructions#Les_instructions_utilis.C3.A9es_pour_les_exceptions">Guide JavaScript</a> correspondant.</p> - -<h3 id="Clause_catch_inconditionnelle">Clause <code>catch</code> inconditionnelle</h3> - -<p>Lorsqu'une seule clause <code>catch</code> inconditionnelle est utilisée, le bloc <code>catch</code> 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 <code>catch</code>.</p> - -<pre class="brush: js">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 -} -</pre> - -<p>La clause <code>catch</code> définit un identifiant (dans l'exemple précédent, c'est <code>e</code>) qui contient la valeur définie par l'instruction <code>throw</code>. Ce bloc <code>catch</code> est en quelque sorte unique en JavaScript car l'identifiant est créé lors de l'entrée dans le bloc <code>catch</code>, la valeur est alors ajoutée à la portée courant et la durée de vie de l'identifiant est limitée au bloc <code>catch</code>. Une fois que le bloc <code>catch</code> a été exécuté, l'identifiant n'est plus disponible.</p> - -<h3 id="Clauses_catch_conditionnelles">Clauses <code>catch</code> conditionnelles</h3> - -<p>{{non-standard_header}}</p> - -<p>Il est aussi possible d'utiliser une ou plusieurs clauses <code>catch</code> conditionnelles afin de gérer des exceptions spécifiques. Dans ce cas, selon l'exception produite, la clause <code>catch</code> appropriée sera utilisée. Dans l'exemple qui suit, le code contenu dans le bloc <code>try</code> 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 <code>catch</code> correspondante. SI l'exception qui est déclenchée ne correspond à aucune des conditions, le contrôle passera à la clause <code>catch</code> non-conditionnelle si elle est trouvée..</p> - -<p>Si on utilise une clause <code>catch</code> inconditionnelle avec une ou plusieurs clauses <code>catch</code> conditionnelles, la clause inconditionnelle doit être spécifiée en dernière. Si ce n'est pas le cas, la clause <code>catch</code> inconditionnelle interceptera tous les types d'exceptions avant les autres clauses.</p> - -<pre class="brush: js">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 -} -</pre> - -<p>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 :</p> - -<pre class="brush: js">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 - } -} -</pre> - -<h3 id="L'identifiant_de_l'exception">L'identifiant de l'exception</h3> - -<p>Lorsqu'une exception est levée dans le bloc <code>try</code>, <em><code>exception_var</code></em> (par exemple le <code>e</code> dans « <code>catch (e)</code> ») 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 <code>catch</code>, il est créé lorsqu'on rentre dans la clause <code>catch</code> et n'est plus disponible une fois que la clause a fini son exécution.</p> - -<pre class="brush: js">function isValidJSON(txt){ - try { - JSON.parse(txt); - return true; - } catch { - return false; - } -}</pre> - -<h3 id="La_clause_finally">La clause <code>finally</code></h3> - -<p>La clause <code>finally</code> contient les instructions à exécuter après que les instructions du bloc <code>try</code> et éventuellement celles de la clause <code>catch</code> aient été exécutées mais avant que les instructions suivant l'instruction <code>try</code> soient exécutées. La clause <code>finally</code> 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 <code>catch</code>, les instructions de la clause <code>finally</code> sont tout de même exécutées.</p> - -<p>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 <strong>pas</strong> exécuté. Aussi, le bloc <code>finally</code> permet de contenir toutes les instructions de clôture/nettoyage nécessaire. On évite donc de dupliquer ce code qui doit toujours être utilisé.</p> - -<p>La clause <code>finally</code> 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 <code>finally</code> 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 <code>finally</code> permet de fermer le fichier avant que le script échoue. Le code contenu dans le bloc <code>finally</code> sera exécuté même si on a une instruction <code>return</code> dans la section <code>try</code> ou dans la section <code>catch</code>.</p> - -<pre class="brush: js">ouvrirMonFichier() -try { - // on utilise une ressource - écrireDansMonFichier(mesDonnées); -} -finally { - fermerMonFichier(); // on ferme toujours la ressource -} -</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Blocs_try_imbriqués">Blocs <code>try</code> imbriqués</h3> - -<p>Tout d'abord, on utilise ce fragment de code, qui produit le résultat suivant :</p> - -<pre class="brush: js">try { - try { - throw new Error("oups"); - } - finally { - console.log("finally"); - } -} -catch (ex) { - console.error("externe", ex.message); -} - -// Produira dans la console : -// "finally" -// "externe" "oups" -</pre> - -<p>Et maintenant, si on a déjà intercepté l'exception avec une clause <code>catch</code> dans le bloc imbriqué :</p> - -<pre class="brush: js">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" -</pre> - -<p>Ensuite, si on propage l'erreur à nouveau :</p> - -<pre class="brush: js">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" -</pre> - -<p>Toute exception ne sera interceptée qu'une seule fois par le bloc <code>catch</code> 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.</p> - -<h3 id="Valeur_de_retour_et_bloc_finally">Valeur de retour et bloc <code>finally</code></h3> - -<p>Lorsque le bloc <code>finally</code> renvoie une valeur, c'est cette valeur qui devient la valeur de retour pour l'ensemble du bloc <code>try-catch-finally</code> et ce, peu importe, s'il y a des instructions {{jsxref("Instructions/return","return")}} dans les blocs <code>try</code> et <code>catch</code>. Cela inclue également les exceptions levées dans le bloc <code>catch</code> :</p> - -<pre class="brush: js">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" -</pre> - -<p>Le "oups" externe n'est pas renvoyé car l'instruction <code>return</code> est utilisée dans la clause <code>finally</code> du bloc interne. Cela aurait également été le cas avec n'importe quelle valeur renvoyée par le bloc <code>catch</code>.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.4</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.14', 'instruction try')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-try-statement', 'Instruction try')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>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).</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.try_catch")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Error")}}</li> - <li>{{jsxref("Instructions/throw", "throw")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <strong><code>var</code></strong> (pour variable) permet de déclarer une variable et éventuellement d'initialiser sa valeur.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-var.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">var <em>nomVar1 [</em>= <em>valeur1] [</em>, <em>nomVar2 [</em>= <em>valeur2] </em><em>... [</em>, <em>nomVarN [</em>= <em>valeurN]]]</em>;</pre> - -<dl> - <dt><code>nomvarN</code></dt> - <dd>Le nom de la variable, cela peut être n'importe quel identifiant valide.</dd> -</dl> - -<dl> - <dt><code>valeurN</code></dt> - <dd>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")}}.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>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 <code>var</code> est le <em>contexte d'exécution</em> courant, c'est-à-dire : <strong>la fonction</strong> qui contient la déclaration <strong>ou le contexte global</strong> si la variable est déclarée en dehors de toute fonction.</p> - -<p>Si on affecte une valeur à une variable qui n'a pas été déclarée (le mot-clé <code>var</code> 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 :</p> - -<ol> - <li>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. - <pre class="brush: js">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 -</pre> - </li> - <li>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é. - <pre class="brush: js">console.log(a); // Lève une exception ReferenceError. -console.log('on continue...'); // N'est jamais exécuté</pre> - - <pre class="brush: js">var a; -console.log(a); // Affiche "undefined". -console.log('on continue...'); // Affiche "on continue...".</pre> - </li> - <li>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). - <pre class="brush: js">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.</pre> - </li> -</ol> - -<p>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. <strong>Il est donc fortement recommandé de toujours déclarer les variables, qu'elles soient dans une fonction ou dans la portée globale.</strong> Le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, introduit avec ECMAScript 5, lève une exception lorsqu'une variable n'est pas déclarée.</p> - -<h3 id="La_remontée_de_variables_(hoisting)">La remontée de variables (<em>hoisting</em>)</h3> - -<p>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 » (<em>hoisting</em> en anglais) car la déclaration de la variable est « remontée » au début de la fonction courante ou du contexte global.</p> - -<pre class="brush: js">bla = 2 -var bla; -// ... - -// est implicitement traité comme : - -var bla; -bla = 2; -</pre> - -<p>É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.</p> - -<p>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 :</p> - -<pre class="brush: js">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 -} -</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Déclarer_et_initialiser_deux_variables">Déclarer et initialiser deux variables</h3> - -<pre class="brush: js">var a = 0, b = 0; -</pre> - -<h3 id="Affecter_deux_variables_avec_la_même_chaîne_de_caractères">Affecter deux variables avec la même chaîne de caractères</h3> - -<pre class="brush: js">var a = "A"; -var b = a; - -// est équivalent à : - -var a, b = a = "A"; -</pre> - -<p>Attention à l'ordre :</p> - -<pre class="brush: js">var x = y, y = 'A'; -console.log(x + y); // undefinedA -</pre> - -<p>Ici, <code>x</code> et <code>y</code> sont déclarées avant que n'importe quel code soit exécuté, <strong>les affectations sont réalisées après !</strong> Au moment où <code>x = y</code> est évalué, <code>y</code> existe donc on n'a pas d'erreur {{jsxref("ReferenceError")}} mais sa valeur est {{jsxref("undefined")}}. Ainsi, <code>x</code> reçoit la valeur <code>undefined</code>. Ensuite, <code>y</code> reçoit la valeur <code>'A'</code>. Après la première ligne de code, on a donc la situation où <code>x === undefined && y === 'A'</code>, ce qui explique le résultat.</p> - -<h3 id="Initialiser_plusieurs_variables">Initialiser plusieurs variables</h3> - -<pre class="brush: js">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 -</pre> - -<h3 id="Les_variables_globales_implicites">Les variables globales implicites</h3> - -<p>Il est possible de faire référence à des variables qui sont des variables globales implicites depuis la portée d'une fonction externe :</p> - -<pre class="brush: js">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</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.0</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.2', 'instruction var')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-variable-statement', 'instruction de variable')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.var")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/let","let")}}</li> - <li>{{jsxref("Instructions/const","const")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>Une <strong>instruction vide</strong> est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-empty.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">; -</pre> - -<h2 id="Description">Description</h2> - -<p>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 <a href="/fr/docs/JavaScript/Reference/Instructions/block">à l'instruction bloc</a> qui permet de combiner plusieurs instructions en une seule.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>L'instruction vide peut être utilisée dans les boucles. Par exemple, ici on a un corps de boucle totalement vide :</p> - -<pre class="brush: js">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] -</pre> - -<div class="note"> -<p><strong>Note :</strong> 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 :</p> -</div> - -<pre class="brush: js">if (condition); // Attention, ce "if" ne fait rien ! - finDuMonde() // Cette méthode est donc toujours lancée !!! -</pre> - -<p>Un autre exemple avec une instruction {{jsxref("Instructions/if...else")}} sans accolade (<code>{}</code>). Si <code>trois</code> vaut <code>true</code>, rien ne sera exécuté, peu importera la valeur de <code>quatre</code>, la fonction <code>chargerFusée()</code> ne sera pas exécutée.</p> - -<pre class="brush: js">if (un) - faire1èreEtape(); -else if (deux) - faire4èmeEtape(); -else if (trois) - ; // rien ici -else if (quatre) - faire4èmeEtape(); -else - chargerFusée();</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Instruction vide')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-empty-statement', 'instruction vide')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.3', 'instruction vide')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12.3', 'instruction vide')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12.3', 'instruction vide')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.empty")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/block", "L'instruction de bloc","",1)}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <code><strong>while</strong></code> 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.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-while.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">while (<var>condition</var>) instruction</pre> - -<dl> - <dt><code>condition</code></dt> - <dd>Une expression qui est évaluée avant chaque passage dans la boucle. Si cette expression est évaluée à vrai, <code>instruction</code> 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 <code>while</code>.</dd> - <dt><code>instruction</code></dt> - <dd>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)}} (<code>{ ... }</code>) pour les regrouper.<br> - Note : on pourra utiliser l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a></code> afin d'arrêter une boucle avant que la condition soit vérifiée.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<p>La boucle <code>while</code> qui suit s'exécute tant que <code>n</code> est strictement inférieur à 3.</p> - -<pre class="brush:js">var n = 0; -var x = 0; - -while (n < 3) { - n++; - x += n; -}</pre> - -<p>À chaque itération, la boucle incrémente la valeur de <code>n</code> et l'ajoute à <code>x</code>. Ainsi, <code>x</code> et <code>n</code> prennent les valeurs suivantes :</p> - -<ul> - <li>Après la première itération : <code>n</code> = 1 et <code>x</code> = 1</li> - <li>Après la deuxième itération : <code>n</code> = 2 et <code>x</code> = 3</li> - <li>Après la troisième itération : <code>n</code> = 3 et <code>x</code> = 6</li> -</ul> - -<p>Une fois que la troisième itération est exécutée, la condition <code>n</code> < 3 n'est plus vérifiée et donc la boucle se termine.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-while-statement', 'while statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}</td> - <td>{{Spec2('ES3')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.while")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/do...while","do...while")}}</li> - <li>{{jsxref("Instructions/for", "for")}}</li> -</ul> 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 ---- -<div>{{jsSidebar("Statements")}}</div> - -<div class="warning">Il n'est pas recommandé d'utiliser l'instruction <code>with</code>. 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.</div> - -<p>L'instruction <strong><code>with</code></strong> permet d'étendre la portée chaînée d'une instruction.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">with (expression) { - instruction -} -</pre> - -<dl> - <dt><code>expression</code></dt> - <dd>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.</dd> - <dt><code>instruction</code></dt> - <dd>N'importe quelle instruction. Afin d'utiliser plusieurs instructions, on peut utiliser un bloc d'instructions ({ ... }) pour les regrouper.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>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 <code>with</code> 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 <code>ReferenceError</code> est renvoyée.</p> - -<div class="note">L'utilisation de l'instruction <code>with</code> n'est pas recommandée et est interdite dans le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> d'ECMAScript 5. L'alternative recommandée est d'assigner l'objet utilisant les propriétés désirées à une variable temporaire.</div> - -<h3 id="Avantages_et_inconvénients_les_performances">Avantages et inconvénients : les performances</h3> - -<ul> - <li><strong>Avantage :</strong> l'instruction <code>with</code> permet de réduire la taille d'un fichier en réduisant la répétition d'un objet dont la dénomination est longue, et ce sans qu'il y ait d'impact sur les performances. Le changement apporté à la chaîne des portées ne représente pas un ajout de complexité important. Utiliser l'instruction de <code>with</code> soulagera l'interpréteur lors de l'analyses des références objets potentiellement longues. On notera que l'alternative présentée ci-dessus permet également d'aboutir à ces avantages.</li> - <li><strong>Inconvénient :</strong> en utilisant <code>with</code>, l'objet spécifié sera utilisé à chaque fois en premier lors de la recherche des noms. Ainsi, tous les identifiants qui ne sont pas des membres de l'objet donné à l'instruction seront trouvés plus lentement. Quand il s'agit d'obtenir de bonnes performances, l'instruction <code>with</code> devrait seulement être utilisée pour englober des fragments de codes où il n'y a que des accès à des membres de l'objet spécifié.</li> -</ul> - -<h3 id="Inconvénient_l'ambiguïté">Inconvénient : l'ambiguïté</h3> - -<ul> - <li><strong>Inconvénient :</strong> l'instruction <code>with</code> peut rendre plus compliquée, que ce soit pour un humain ou un compilateur, la recherche d'un nom non-qualifié le long de la chaîne des portées. Ainsi, avec cet exemple : - - <pre class="brush: js">function f(x, o) { - with (o) - console.log(x); -}</pre> - - <p>ce n'est que quand <code>f</code> est appelée que <code>x</code> est trouvé ou non, s'il est trouvé à partir de <code>o</code> ou (si o n'a pas de telle propriété) dans l'objet d'activation de <code>f </code>où <code>x</code> représente le premier argument de la fonction. Si <code>x</code> n'est pas défini dans l'objet passé en second argument, il n'y aura pas d'erreur renvoyée, juste des résultats imprévus.</p> - </li> - <li><strong>Inconvénient :</strong> Du code utilisant l'instruction <code>with</code> pourrait ne pas être compatible dans le futur, en particulier lorsqu'il est utilisé avec autre chose qu'un objet simple. Par exemple : - <div> - <pre class="brush:js">function f(toto, values) { - with (toto) { - console.log(values) - } -} -</pre> - - <p>Si vous appelez <code>f([1,2,3], obj)</code> dans un environnement ECMAScript 5, la référence à <code>values</code> à l'intérieur de l'instruction <code>with</code> sera liée avec <code>obj</code>. Cependant, ECMAScript 2015 (ES6) a introduit une propriété <code>values</code> pour {{jsxref("Array.prototype")}} (afin qu'elle soit disponible pour chaque tableau). Dans un environnement ECMAScript 2015, la référence à <code>values</code> utilisée à l'intérieur de l'instruction <code>with</code> sera résolue avec <code>[1,2,3].values</code>.</p> - </div> - </li> -</ul> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_with">Utiliser <code>with</code></h3> - -<p>L'instruction <code>with</code> 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 <code>Math</code> pour ces références.</p> - -<pre class="brush:js">var a, x, y; -var r = 10; - -with (Math) { - a = PI * r * r; - x = r * cos(PI); - y = r * sin(PI / 2); -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-with-statement', 'with statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-with-statement', 'Instruction with')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.10', 'Instruction with')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Désormais interdit en mode strict.</td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12.10', 'Instruction with')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12.10', 'Instruction with')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.statements.with")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/bloc", "Bloc d'instructions","",1)}}</li> - <li>{{jsxref("Strict_mode","Mode strict","",1)}}</li> - <li>{{jsxref("Symbol.unscopables")}}</li> - <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li> -</ul> |