aboutsummaryrefslogtreecommitdiff
path: root/files/fr
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr')
-rw-r--r--files/fr/web/javascript/reference/statements/block/index.html136
-rw-r--r--files/fr/web/javascript/reference/statements/if...else/index.html111
2 files changed, 88 insertions, 159 deletions
diff --git a/files/fr/web/javascript/reference/statements/block/index.html b/files/fr/web/javascript/reference/statements/block/index.html
index a367f69678..74780b7415 100644
--- a/files/fr/web/javascript/reference/statements/block/index.html
+++ b/files/fr/web/javascript/reference/statements/block/index.html
@@ -2,52 +2,53 @@
title: bloc
slug: Web/JavaScript/Reference/Statements/block
tags:
- - Instruction
- JavaScript
+ - Language feature
- Reference
+ - Statement
+browser-compat: javascript.statements.block
translation_of: Web/JavaScript/Reference/Statements/block
original_slug: Web/JavaScript/Reference/Instructions/bloc
---
<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>
+<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 <a href="/fr/docs/Web/JavaScript/Reference/Statements/label">label</a>.</p>
-<div>{{EmbedInteractiveExample("pages/js/statement-block.html")}}</div>
+<div>{{EmbedInteractiveExample("pages/js/statement-block.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="syntax">Syntaxe</h2>
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Instruction_de_bloc">Instruction de bloc</h3>
+<h3 id="block_statement">Instruction de bloc</h3>
<pre class="brush: js">{
- <em><var>instruction_1</var></em>;
- <em><var>instruction_2</var></em>;
+ <em>instruction_1</em>;
+ <em>instruction_2</em>;
...
- <em><var>instruction_n</var></em>;
+ <em>instruction_n</em>;
}
</pre>
-<h3 id="Instruction_de_bloc_étiquetée">Instruction de bloc étiquetée</h3>
+<h3 id="labelled_block_statement">Instruction de bloc étiquetée</h3>
<pre class="brush: js">// ou, avec une étiquette :
-label {
- instruction_1;
- instruction_2;
- instruction_n;
+label: {
+ <em>instruction_1</em>;
+ <em>instruction_2</em>;
+ ...
+ <em>instruction_n</em>;
}
</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>
+ <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/Statements/label">étiquette</a> qui permet une identification visuelle de la cible d'une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/break">break</a></code>.</dd>
</dl>
-<h2 id="Description">Description</h2>
+<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>
+<p>Cette instruction est le plus souvent utilisée avec les instructions de contrôle (ex. <a href="/fr/docs/Web/JavaScript/Reference/Statements/if...else"><code>if…else</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/for"><code>for</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/while"><code>while</code></a>). On verra ainsi :</p>
<pre class="brush: js">while (x &lt; 10) {
x++;
@@ -56,94 +57,61 @@ label {
<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>
+<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 <a href="/fr/docs/Web/JavaScript/Reference/Statements/Empty">instruction vide</a> pour ne rien faire là où JavaScript attend une instruction.</p>
-<h3 id="Gestion_des_portées">Gestion des portées</h3>
+<h2 id="examples">Exemples</h2>
-<h4 id="Avec_var">Avec <code>var</code></h4>
+<h3 id="block_scoping_rules_with_var_or_function_declaration_in_non-strict_mode">Règles de portée pour var ou les déclarations de fonction en mode non-strict</h3>
-<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>
+<p>Les variables déclarées avec <code>var</code> ou créées avec <a href="/fr/docs/Web/JavaScript/Reference/Statements/function">une déclaration de fonction</a> en mode non-strict <strong>n'ont pas une portée limitée au bloc</strong>. Les variables introduites dans un bloc auront la portée de la fonction ou du script englobant ce bloc. Les variables pourront alors être utilisées en dehors du bloc. Autrement dit, une instruction de bloc n'introduit pas une portée :</p>
<pre class="brush: js example-bad">var x = 1;
{
var x = 2;
}
-console.log(x); // affiche 2
+console.log(x); // affiche 2 dans la console
</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>
+<p>On voit 2 dans la console, car l'instruction <code>var x</code> contenue dans le bloc appartient à la même portée que l'instruction <code>var x</code> située avant le bloc.</p>
+
+<p>En mode non-strict, les déclarations de fonction à l'intérieur des blocs peuvent se comporter étrangement, il est déconseillé de les utiliser.</p>
-<h4 id="Avec_let_et_const">Avec <code>let</code> et <code>const</code></h4>
+<h3 id="block_scoping_rules_with_let_const_or_function_declaration_in_strict_mode">Règles de portée pour let, const ou les déclarations de fonction en mode strict</h3>
-<p>En revanche, les identifiants déclarés avec <code>let</code> et <code>const</code> appartiennent à la portée du bloc : </p>
+<p>En revanche, les identifiants déclarés avec <a href="/fr/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a> <strong>possèdent une portée limitée au bloc</strong> :</p>
<pre class="brush: js">let x = 1;
{
let x = 2;
}
-console.log(x); // affiche 1
-</pre>
+console.log(x); // affiche 1 dans la console</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>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>
+<p>Il en va de même pour <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>
+console.log(c); // affiche 1, ne déclenche pas de SyntaxError</pre>
+
+<p>L'instruction <code>const c = 2</code> <em>ne déclenche pas</em> <code>SyntaxError: Identifier 'c' has already been declared</code>, car cet identifiant est bien unique pour ce bloc.</p>
+
+<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, à partir de ES2015, les fonctions à l'intérieur des blocs ont une portée qui correspond à ce bloc. Avant ES2015, les fonctions de bloc étaient interdites.</p>
+
+<h2 id="specifications">Spécifications</h2>
+
+<p>{{Specifications}}</p>
+
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat}}</p>
-<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>
+<h2 id="see_also">Voir aussi</h2>
<ul>
- <li>{{jsxref("Instructions/while", "while")}}</li>
- <li>{{jsxref("Instructions/if...else", "if...else")}}</li>
- <li>{{jsxref("Instructions/let", "let")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Statements/while" ><code>while</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Statements/if...else" ><code>if...else</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Statements/let" ><code>let</code></a></li>
</ul>
diff --git a/files/fr/web/javascript/reference/statements/if...else/index.html b/files/fr/web/javascript/reference/statements/if...else/index.html
index 9cb7b1e91c..6dc22f9c1d 100644
--- a/files/fr/web/javascript/reference/statements/if...else/index.html
+++ b/files/fr/web/javascript/reference/statements/if...else/index.html
@@ -5,6 +5,7 @@ tags:
- JavaScript
- Reference
- Statement
+browser-compat: javascript.statements.if_else
translation_of: Web/JavaScript/Reference/Statements/if...else
original_slug: Web/JavaScript/Reference/Instructions/if...else
---
@@ -19,31 +20,31 @@ original_slug: Web/JavaScript/Reference/Instructions/if...else
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">if (<em>condition</em>)
- <em>instruction1</em>
-[else
- <em>instruction2</em>]
-</pre>
+ <em>statement1</em>
+} else {
+ <em>statement2</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>
+ <dt><code>condition</code></dt>
+ <dd>Une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#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>
+ <dt><code>statement1</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 <a href="/fr/docs/Web/JavaScript/Reference/Statements/block">bloc d'instructions</a> ({ ... }) qui permet de les regrouper. Pour n'exécuter aucune instruction, on pourra utiliser <a href="/fr/docs/Web/JavaScript/Reference/Statements/Empty">l'instruction vide</a>.</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>
+ <dt><code>statement2</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>
+<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>)
+<pre class="brush: js">if (<em>condition1</em>)
<em>instruction1</em>
else if (<em>condition2</em>)
<em>instruction2</em>
@@ -56,7 +57,7 @@ else
<p>Si on indente correctement le code, on retrouve la structure exactement équivalente :</p>
-<pre class="eval">if (<em>condition1</em>)
+<pre class="brush: js">if (<em>condition1</em>)
<em>instruction1</em>
else
if (<em>condition2</em>)
@@ -66,34 +67,33 @@ else
...
</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>
+<p>Afin d'exécuter plusieurs instructions, on utilisera un {{jsxref("Statements/block","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>) {
+<pre class="brush: js">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>
+<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 <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a>. Toute valeur qui n'est pas <code>false</code>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>, <code>0</code>, <code>-0</code>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> 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>
+<h2 id="examples">Exemples</h2>
-<h3 id="Utiliser_if...else">Utiliser <code>if...else</code></h3>
+<h3 id="using_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>
+}</pre>
-<h3 id="Utiliser_else_if">Utiliser <code>else if</code></h3>
+<h3 id="using_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>
@@ -103,17 +103,15 @@ if (b) // la condition sera évaluée à true
// faire autre chose
} else {
// faire encore autre chose
-}
-</pre>
+}</pre>
-<h3 id="Affectation_de_variable_dans_l'expression_conditionnelle">Affectation de variable dans l'expression conditionnelle</h3>
+<h3 id="assignment_within_the_conditional_expression">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>
+}</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>
@@ -121,55 +119,18 @@ if (b) // la condition sera évaluée à true
/* 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>
+<h2 id="specifications">Spécifications</h2>
+
+{{Specifications}}
+
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="see_also">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>
+ <li><a href="/fr/docs/JavaScript/Reference/Statements/block">block</a></li>
+ <li><a href="/fr/docs/JavaScript/Reference/Statements/switch">switch</a></li>
+ <li><a href="/fr/docs/JavaScript/Reference/Operators/Conditional_Operator">L'opérateur conditionnel</a></li>
</ul>