diff options
Diffstat (limited to 'files')
62 files changed, 1086 insertions, 1334 deletions
diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html index 2fedb26439..27b6617080 100644 --- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -12,7 +12,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <tbody> <tr> <th scope="row">Prérequis:</th> - <td>Compétences informatique basiques , <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">logicels de base installés</a>, connaissance simple en <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td> + <td>Compétences informatique basiques , <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logicels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td> </tr> <tr> <th scope="row">Objectif:</th> @@ -21,25 +21,24 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders </tbody> </table> -<h2 id="Mettre_en_forme_larrière-plan_avec_CSS">Mettre en forme l'arrière-plan avec CSS</h2> +<h2 id="Mettre_en_forme_larrière-plan_avec_CSS">Mettre en forme l'arrière-plan avec CSS</h2> -<p>La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p> +<p>La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css">.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; -} </code> -</pre> +}</pre> -<p>Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.</p> +<p>Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.</p> <h3 id="Couleur_de_fond">Couleur de fond</h3> -<p>La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p> +<p>La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p> -<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.</p> +<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.</p> -<p><strong>Expérimentez avec ce code, en faisant varier les valeurs <a href="/en-US/docs/Web/CSS/color_value"><color></a> dans les différentes déclarations.</strong></p> +<p><strong>Expérimentez avec ce code, en faisant varier les valeurs <a href="/fr/docs/Web/CSS/color_value"><color></a> dans les différentes déclarations.</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p> @@ -47,15 +46,15 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <p>La propriété {{cssxref("background-image")}} permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande, l'autre avec comme fond une petite image représentant une étoile.</p> -<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p> +<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p> -<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p> +<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p> -<h4 id="Contrôler_le_background-repeat">Contrôler le background-repeat</h4> +<h4 id="Contrôler_le_background-repeat">Contrôler le background-repeat</h4> -<p>La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p> +<p>La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p> <ul> <li><code>no-repeat</code> — aucune répétition de l'arrière-plan.</li> @@ -64,106 +63,104 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <li><code>repeat</code> — comportement par défaut : répétition dans les deux directions.</li> </ul> -<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à </strong><code>no-repeat</code><strong>, une seule étoile apparaît donc. Remplacez par </strong><code>repeat-x</code><strong> et </strong><code>repeat-y</code><strong> et observez.</strong></p> +<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à <code>no-repeat</code>, une seule étoile apparaît donc. Remplacez par <code>repeat-x</code> et <code>repeat-y</code><strong> et observez.</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p> <h4 id="Dimensionner_limage_de_fond">Dimensionner l'image de fond</h4> -<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p> +<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p> <p>On peut aussi utiliser les mots-clé :</p> <ul> <li><code>cover</code> — le navigateur redimensionne l'image pour que tout le fond soit couvert, en conservant le format de l'image. La plupart du temps, une partie de l'image est en dehors de la boîte.</li> - <li><code>contain</code> — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image.</li> + <li><code>contain</code> — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image.</li> </ul> -<p>Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.</p> +<p>Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.</p> <p>Essayez ce qui suit :</p> <ul> <li>Changez les dimensions de l'arrière-plan.</li> - <li>Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par <code>background-size: cover</code> ou <code>background-size: contain</code>.</li> - <li>Si votre image est plus petite que la boîte, vous pouvez changer la valeur de <code>background-repeat</code> pour répéter l'image.</li> + <li>Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par <code>background-size: cover</code> ou <code>background-size: contain</code>.</li> + <li>Si votre image est plus petite que la boîte, vous pouvez changer la valeur de <code>background-repeat</code> pour répéter l'image.</li> </ul> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p> -<h4 id="Positionner_limage_de_fond">Positionner l'image de fond</h4> +<h4 id="Positionner_limage_de_fond">Positionner l'image de fond</h4> -<p>La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p> +<p>La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p> <div class="blockIndicator note"> -<p><strong>Note </strong>: La valeur par défaut de <code>background-position</code> est <code>(0,0)</code>.</p> +<p><strong>Note </strong>: La valeur par défaut de <code>background-position</code> est <code>(0,0)</code>.</p> </div> -<p>Les valeurs les plus communes pour <code>background-position</code> se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.</p> +<p>Les valeurs les plus communes pour <code>background-position</code> se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.</p> -<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):</p> +<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css">.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top center; -} </code> -</pre> +}</pre> -<p>Et <a href="/fr/docs/Web/CSS/length">Longueurs</a>, ou <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p> +<p>Et <a href="/fr/docs/Web/CSS/length">Longueurs</a>, ou <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css">.box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; -} </code> -</pre> +}</pre> -<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p> +<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; }</pre> -<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite : </p> +<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css notranslate">.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; -} </code></pre> +}</pre> -<p><strong>Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.</strong></p> +<p><strong>Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: <code>background-position</code> est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.</p> +<div class="note"> +<p><strong>Note :</strong> <code>background-position</code> est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.</p> </div> <h3 id="Arrière-plan_dégradé">Arrière-plan dégradé</h3> -<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.</p> +<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.</p> -<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/en-US/docs/Web/CSS/gradient"><gradient></a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p> +<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/fr/docs/Web/CSS/gradient"><gradient></a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p> <p>Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.</p> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p> -<h3 id="Images_de_fond_multiples"> Images de fond multiples</h3> +<h3 id="Images_de_fond_multiples">Images de fond multiples</h3> -<p>Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour <code>background-image</code> , chacune séparé par une virgule.</p> +<p>Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour <code>background-image</code>, chacune séparé par une virgule.</p> <p>Quand vous faîtes cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: on peut joyeusement mélanger gradients et images de fond classiques.</p> +<div class="note"> +<p><strong>Note :</strong> on peut joyeusement mélanger gradients et images de fond classiques.</p> </div> -<p>Les autres propriété <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que <code>background-image</code>:</p> +<p>Les autres propriété <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que <code>background-image</code>:</p> <pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; @@ -185,9 +182,9 @@ background-position: 10px 20px, top right;</pre> <li><code>local</code>: This value was added later on (it is only supported in Internet Explorer 9+, whereas the others are supported in IE4+) because the <code>scroll</code> value is rather confusing and doesn't really do what you want in many cases. The <code>local</code> value fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.</li> </ul> -<p>The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (also <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">see the source code</a> here).</p> +<p>The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (also <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">see the source code</a> here).</p> -<h3 id="Utiliser_la_propriété_raccourci_background">Utiliser la propriété raccourci background </h3> +<h3 id="Utiliser_la_propriété_raccourci_background">Utiliser la propriété raccourci background</h3> <p>As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the {{cssxref("background")}} property. This shorthand lets you set all of the different properties at once.</p> @@ -208,7 +205,7 @@ background-position: 10px 20px, top right;</pre> <p>Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessu une image, déclarez toujours une <code>background-color</code> qui rendra le texte lisible si l'image n'est pas chargée.</p> -<p>Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.</p> +<p>Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.</p> <h2 id="Bordures">Bordures</h2> @@ -216,34 +213,34 @@ background-position: 10px 20px, top right;</pre> <p>We can set a border for all four sides of a box with {{cssxref("border")}}:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css">*.box { border: 1px solid black; -} </code></pre> +}*</pre> <p>Or we can target one edge of the box, for example:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css">.box { border-top: 1px solid black; -} </code></pre> +}</pre> <p>The individual properties for these shorthands would be:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css">.box { border-width: 1px; border-style: solid; border-color: black; -} </code></pre> +}</pre> <p>And for the longhands:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css">.box { border-top-width: 1px; border-top-style: solid; border-top-color: black; -} </code></pre> +}</pre> -<div class="blockIndicator note"> -<p><strong>Note </strong>: These top, right, bottom, and left border properties also have mapped <em>logical</em> properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers <a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">handling different text directions</a>.</p> +<div class="note"> +<p><strong>Note :</strong> These top, right, bottom, and left border properties also have mapped <em>logical</em> properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers <a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">handling different text directions</a>.</p> </div> <p><strong>There are a variety of styles that you can use for borders. In the example below we have used a different border style for the four sides of my box. Play with the border style, width, and color to see how borders work.</strong></p> @@ -252,19 +249,19 @@ background-position: 10px 20px, top right;</pre> <h3 id="Coins_arrondis">Coins arrondis</h3> -<p>On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}} and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.</p> +<p>On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}} and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.</p> -<p>Par exemple, Pour donner par exemple un rayon de 10px à chacun des quatre coins :</p> +<p>Par exemple, Pour donner par exemple un rayon de 10px à chacun des quatre coins :</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css">.box { border-radius: 10px; -} </code></pre> +}</pre> <p>Ou de donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css">.box { border-top-right-radius: 1em 10%; -} </code></pre> +}</pre> <p>Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jettez un œil à la page de documentation de {{cssxref("border-radius")}}, vous y trouverez la syntaxe pour les différentes options.</p> @@ -272,23 +269,23 @@ background-position: 10px 20px, top right;</pre> <h2 id="Jouer_avec_les_arrière-plans_et_les_bordures">Jouer avec les arrière-plans et les bordures</h2> -<p>Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :</p> +<p>Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :</p> <ol> - <li>Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.</li> - <li>Ajouter une image de fond (utiliser l'URL <code>balloons.jpg</code>) à redimensionner pour qu'elle recouvre la boîte.</li> - <li>Donnez au <code><h2></code> une couleur de fond noire semi-transparente, avec un texte en blanc.</li> + <li>Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.</li> + <li>Ajouter une image de fond (utiliser l'URL <code>balloons.jpg</code>) à redimensionner pour qu'elle recouvre la boîte.</li> + <li>Donnez au <code><h2></code> une couleur de fond noire semi-transparente, avec un texte en blanc.</li> </ol> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p> +<div class="note"> +<p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p> </div> <h2 id="Résumé">Résumé</h2> -<p>Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.</p> +<p>Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.</p> <p>Dans la leçon suivante nous découvrirons comment le mode d'écriture de votre document interagit avec CSS. Que se passe-t-il quand le texte ne se déroule pas de la gauche vers la droite ?</p> @@ -297,23 +294,23 @@ background-position: 10px 20px, top right;</pre> <h2 id="Dans_ce_cours">Dans ce cours</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> </ul> </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> </ol> diff --git a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html index dba86cd1c1..e37f991a39 100644 --- a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html +++ b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html @@ -2,78 +2,77 @@ title: Le web et ses normes slug: Learn/Getting_started_with_the_web/The_web_and_web_standards tags: - - Apprendre - - Débutant + - Beginner - Front-end - - Normes Web - - Standards Web + - Learn - Web + - Web Standards translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards original_slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards --- -<p dir="ltr">{{learnsidebar}}</p> +<p>{{learnsidebar}}</p> -<p dir="ltr">Cet article apporte des connaissances générales sur le Web — Comment il est né, quelles sont les technologies usuelles du web, comment interagissent-elles ensemble, pourquoi "développeur web" est un excellent choix de carrière, et quels types de bonnes pratiques pourrez-vous apprendrez au fil de ce cours.</p> +<p>Cet article apporte des connaissances générales sur le Web — Comment il est né, quelles sont les technologies usuelles du web, comment interagissent-elles ensemble, pourquoi "développeur web" est un excellent choix de carrière, et quels types de bonnes pratiques pourrez-vous apprendrez au fil de ce cours.</p> -<h2 dir="ltr" id="Une_brève_histoire_du_web">Une brève histoire du web</h2> +<h2 id="Une_brève_histoire_du_web">Une brève histoire du web</h2> -<p dir="ltr">Nous allons passer très rapidement sur ce sujet puisqu'il existe de nombreux articles (plus) détaillés de l'histoire du web, vers lesquelles nous pourrons créer des liens un peu plus loin (si cela vous passionne, vous pouvez également rechercher "histoire du web" dans votre moteur de recherche favori et regarder ce que vous trouverez.)</p> +<p>Nous allons passer très rapidement sur ce sujet puisqu'il existe de nombreux articles (plus) détaillés de l'histoire du web, vers lesquelles nous pourrons créer des liens un peu plus loin (si cela vous passionne, vous pouvez également rechercher "histoire du web" dans votre moteur de recherche favori et regarder ce que vous trouverez.)</p> -<p dir="ltr">À la fin des années 60, l'armée américaine a développé un réseau de communication nommé <a href="/en-US/docs/Glossary/Arpanet">ARPANET</a>. On peut le considérer comme un précurseur du Web puisqu'il travaillait sur la <a href="https://fr.wikipedia.org/wiki/Commutation_de_paquets">commutation de paquets</a> et constituait la première implémentation de la suite de protocoles <a href="https://fr.wikipedia.org/wiki/Suite_des_protocoles_Internet">TCP/IP</a>. Ces deux technologies forment la base de l'infrastructure sur laquelle est construit Internet</p> +<p>À la fin des années 60, l'armée américaine a développé un réseau de communication nommé <a href="/fr/docs/Glossary/Arpanet">ARPANET</a>. On peut le considérer comme un précurseur du Web puisqu'il travaillait sur la <a href="https://fr.wikipedia.org/wiki/Commutation_de_paquets">commutation de paquets</a> et constituait la première implémentation de la suite de protocoles <a href="https://fr.wikipedia.org/wiki/Suite_des_protocoles_Internet">TCP/IP</a>. Ces deux technologies forment la base de l'infrastructure sur laquelle est construit Internet</p> -<p dir="ltr">En 1980, Tim Berners-Lee (souvent abrégé TimBL) a écrit un programme nommé ENQUIRE, basé sur le concept de liens entre différents points. Cela vous dit quelque chose ?</p> +<p>En 1980, Tim Berners-Lee (souvent abrégé TimBL) a écrit un programme nommé ENQUIRE, basé sur le concept de liens entre différents points. Cela vous dit quelque chose ?</p> -<p dir="ltr">Avance rapide jusqu'en 1989, où TimBL a écrit <a href="https://www.w3.org/History/1989/proposal.html">Information Management: A Proposal</a> et HyperText at CERN; Ces deux ouvrages fournissent tout le contexte du fonctionnement du Web. Ils ont bénéficié d'une renommé forte, suffisante pour convaincre les patrons de TimBL de le laisser aller de l'avant et de créer un système hypertexte global.</p> +<p>Avance rapide jusqu'en 1989, où TimBL a écrit <a href="https://www.w3.org/History/1989/proposal.html">Information Management: A Proposal</a> et HyperText at CERN; Ces deux ouvrages fournissent tout le contexte du fonctionnement du Web. Ils ont bénéficié d'une renommé forte, suffisante pour convaincre les patrons de TimBL de le laisser aller de l'avant et de créer un système hypertexte global.</p> -<p dir="ltr">À la fin des années 90, TimBL avait créé tout le nécessaire pour faire fonctionner une première version du web — <a href="/fr/docs/Web/HTTP">HTTP</a>, <a href="/fr/docs/Web/HTML">HTML</a>, le premier navigateur, qui s'appelait <a href="https://fr.wikipedia.org/wiki/WorldWideWeb_(navigateur)">WorldWideWeb</a>, un serveur HTTP et quelques pages web à lire.</p> +<p>À la fin des années 90, TimBL avait créé tout le nécessaire pour faire fonctionner une première version du web — <a href="/fr/docs/Web/HTTP">HTTP</a>, <a href="/fr/docs/Web/HTML">HTML</a>, le premier navigateur, qui s'appelait <a href="https://fr.wikipedia.org/wiki/WorldWideWeb_(navigateur)">WorldWideWeb</a>, un serveur HTTP et quelques pages web à lire.</p> -<p dir="ltr">Les années suivantes ont vu l'explosion du web, avec la sortie de nombreux navigateurs, la mise en place de milliers de serveurs web et la création de millions de pages web. Ce résumé est très simpliste mais nous vous avions promis qu'il serait bref.</p> +<p>Les années suivantes ont vu l'explosion du web, avec la sortie de nombreux navigateurs, la mise en place de milliers de serveurs web et la création de millions de pages web. Ce résumé est très simpliste mais nous vous avions promis qu'il serait bref.</p> -<p dir="ltr">Un dernier point important à évoquer est la fondation en 1994 par TimBL du <a href="https://fr.wikipedia.org/wiki/World_Wide_Web_Consortium">World Wide Web Consortium</a> (W3C), une organisation rassemblant des représentants de plusieurs entreprises du numérique pour travailler ensemble à la définition de normes pour les technologies du web. D'autres technologies ont ensuite vu le jour comme le <a href="/fr/docs/Web/CSS">CSS</a> et le <a href="/fr/docs/Web/JavaScript">JavaScript</a>, et le web a commencé à ressembler à ce que nous connaissons aujourd'hui.</p> +<p>Un dernier point important à évoquer est la fondation en 1994 par TimBL du <a href="https://fr.wikipedia.org/wiki/World_Wide_Web_Consortium">World Wide Web Consortium</a> (W3C), une organisation rassemblant des représentants de plusieurs entreprises du numérique pour travailler ensemble à la définition de normes pour les technologies du web. D'autres technologies ont ensuite vu le jour comme le <a href="/fr/docs/Web/CSS">CSS</a> et le <a href="/fr/docs/Web/JavaScript">JavaScript</a>, et le web a commencé à ressembler à ce que nous connaissons aujourd'hui.</p> -<h2 dir="ltr" id="Les_standards_du_Web">Les standards du Web</h2> +<h2 id="Les_standards_du_Web">Les standards du Web</h2> -<p dir="ltr"><strong>Les normes Web sont les technologies que nous utilisons pour créer des sites Web. Ces normes existent sous forme de longs documents techniques appelés spécifications, qui détaillent exactement comment la technologie doit fonctionner. Ces documents ne sont pas très utiles pour apprendre à utiliser les technologies qu'ils décrivent (c'est pourquoi nous avons des sites comme MDN Web Docs), mais sont plutôt destinés à être utilisés par des ingénieurs logiciel pour implémenter ces technologies (généralement dans des navigateurs Web).</strong></p> +<p><strong>Les normes Web sont les technologies que nous utilisons pour créer des sites Web. Ces normes existent sous forme de longs documents techniques appelés spécifications, qui détaillent exactement comment la technologie doit fonctionner. Ces documents ne sont pas très utiles pour apprendre à utiliser les technologies qu'ils décrivent (c'est pourquoi nous avons des sites comme MDN Web Docs), mais sont plutôt destinés à être utilisés par des ingénieurs logiciel pour implémenter ces technologies (généralement dans des navigateurs Web).</strong></p> -<p dir="ltr">Par exemple <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a> décrit exactement comment le HTML (tous les éléments HTML ainsi que les APIs associées et d'autres technologies proches) devraient être implémentées.</p> +<p>Par exemple <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a> décrit exactement comment le HTML (tous les éléments HTML ainsi que les APIs associées et d'autres technologies proches) devraient être implémentées.</p> -<p dir="ltr">Les standards Web sont définies par des organisations de normalisation — des institutions qui invite des groupes de personnes de différentes compagnies technologiques à se réunir et s'entendre sur la manière dont les technologies devraient fonctionner pour satisfaire au mieux tous les cas de figure. W3C est le plus connu des organismes de normalisation, même si d'autres existent également, comme le <a href="https://whatwg.org/">WHATWG</a> (à l'origine de la modernisation du langage HTML), <a href="https://www.ecma-international.org/">ECMA</a> (qui publie les normes ECMAScript, sur lesquelles est basé JavaScript), <a href="https://www.khronos.org/">Khronos</a> (qui publie des standards pour les graphismes 3D, comme WebGL), et d'autres encore.</p> +<p>Les standards Web sont définies par des organisations de normalisation — des institutions qui invite des groupes de personnes de différentes compagnies technologiques à se réunir et s'entendre sur la manière dont les technologies devraient fonctionner pour satisfaire au mieux tous les cas de figure. W3C est le plus connu des organismes de normalisation, même si d'autres existent également, comme le <a href="https://whatwg.org/">WHATWG</a> (à l'origine de la modernisation du langage HTML), <a href="https://www.ecma-international.org/">ECMA</a> (qui publie les normes ECMAScript, sur lesquelles est basé JavaScript), <a href="https://www.khronos.org/">Khronos</a> (qui publie des standards pour les graphismes 3D, comme WebGL), et d'autres encore.</p> -<h3 dir="ltr" id="Normes_ouvertes">Normes "ouvertes"</h3> +<h3 id="Normes_ouvertes">Normes "ouvertes"</h3> -<p dir="ltr">L'un des aspects clés des normes Web, sur lequel TimBL et le W3C se sont immédiatement mis d'accord, est que le Web (et les technologies Web) devraient être libres d'utilisation et de contribution, et non pas freinées par des brevets ou des licences. Par conséquent, n'importe qui peut écrire gratuitement du code pour créer un site Web, et n'importe qui peut contribuer au processus de création de normes et d'écriture de spécifications.</p> +<p>L'un des aspects clés des normes Web, sur lequel TimBL et le W3C se sont immédiatement mis d'accord, est que le Web (et les technologies Web) devraient être libres d'utilisation et de contribution, et non pas freinées par des brevets ou des licences. Par conséquent, n'importe qui peut écrire gratuitement du code pour créer un site Web, et n'importe qui peut contribuer au processus de création de normes et d'écriture de spécifications.</p> -<p dir="ltr">Le fait que les technologies Web soient créées librement, en collaboration entre de nombreuses entreprises différentes, signifie qu'aucune entreprise ne peut les contrôler, ce qui est une excellente chose. Vous ne voudriez pas qu'une seule entreprise décide soudainement de rendre payant l'intégralité du Web ou de publier une nouvelle version de HTML que tout le monde doive acheter pour continuer à créer des sites Web, ou pire encore, ne décide simplement qu'elle n'est plus intéressée par le Web et l'éteindre.</p> +<p>Le fait que les technologies Web soient créées librement, en collaboration entre de nombreuses entreprises différentes, signifie qu'aucune entreprise ne peut les contrôler, ce qui est une excellente chose. Vous ne voudriez pas qu'une seule entreprise décide soudainement de rendre payant l'intégralité du Web ou de publier une nouvelle version de HTML que tout le monde doive acheter pour continuer à créer des sites Web, ou pire encore, ne décide simplement qu'elle n'est plus intéressée par le Web et l'éteindre.</p> -<p dir="ltr">Cela permet au Web de rester une ressource publique librement accessible.</p> +<p>Cela permet au Web de rester une ressource publique librement accessible.</p> -<h3 dir="ltr" id="Ne_cassez_pas_le_web">Ne cassez pas le web</h3> +<h3 id="Ne_cassez_pas_le_web">Ne cassez pas le web</h3> -<p dir="ltr">Une phrase qu'on entend souvent à propos des normes web ouvertes est "Ne cassez pas le web" ("<em>don't break the web</em>") — Cela signifie que toute nouvelle technologie Web introduite devrait être rétrocompatible avec ce qui l'a précédée (donc que les anciens sites Web continueront de fonctionner), et compatible avec l'avenir (les technologies futures seront à leur tour compatibles avec ce que nous avons actuellement). En parcourant les explications présentés ici, vous découvrirez comment un travail de conception et d'implémentation bien pensé rend cela possible.</p> +<p>Une phrase qu'on entend souvent à propos des normes web ouvertes est "Ne cassez pas le web" ("<em>don't break the web</em>") — Cela signifie que toute nouvelle technologie Web introduite devrait être rétrocompatible avec ce qui l'a précédée (donc que les anciens sites Web continueront de fonctionner), et compatible avec l'avenir (les technologies futures seront à leur tour compatibles avec ce que nous avons actuellement). En parcourant les explications présentés ici, vous découvrirez comment un travail de conception et d'implémentation bien pensé rend cela possible.</p> <h2 id="Être_développeur_web_cest_bien">Être développeur web, c'est bien</h2> <p>L'industrie du Web est un secteur très attractif si vous êtes à la recherche d'un emploi. Les derniers chiffres publiés estiment le nombre actuel de développeurs Web dans le monde à environ 19 millions, un nombre qui devrait au moins doubler au cours de la prochaine décennie. Le secteur connaissant dans le même temps une pénurie de compétences, y a-t-il un meilleur moment pour apprendre le développement Web?</p> -<p>Ce n'est cependant pas juste des jeux et de l'amusement - la création de sites Web est une tâche qui se complexifie avec le temps, et vous devrez consacrer du temps à l'étude de plusieurs technologies différentes, de nombreuses méthodes et bonnes pratiques à connaître et tous les cas de figure classiques que vous serez appelé à mettre en œuvre. Vous aurez besoin de quelques mois pour vraiment entrer dans le sujet, puis vous devrez continuer à apprendre afin de maintenir vos connaissances à jour avec tous les nouveaux outils et fonctionnalités qui apparaissent sur le Web, et continuer à pratiquer afin de perfectionner votre travail.</p> +<p>Ce n'est cependant pas juste des jeux et de l'amusement - la création de sites Web est une tâche qui se complexifie avec le temps, et vous devrez consacrer du temps à l'étude de plusieurs technologies différentes, de nombreuses méthodes et bonnes pratiques à connaître et tous les cas de figure classiques que vous serez appelé à mettre en œuvre. Vous aurez besoin de quelques mois pour vraiment entrer dans le sujet, puis vous devrez continuer à apprendre afin de maintenir vos connaissances à jour avec tous les nouveaux outils et fonctionnalités qui apparaissent sur le Web, et continuer à pratiquer afin de perfectionner votre travail.</p> <p><em>La seule constante est la variation.</em></p> -<p>Cela vous semble difficile ? Pas d'inquiétude, notre objectif est de vous donner toutes les bases pour débuter, ce qui vous facilitera la suite. Une fois que vous aurez accepté le changement permanent et l'inconstance du Web, vous commencerez à vous amuser. En tant que membre de la communauté Web, vous aurez tout un réseau de contacts et de ressources web pour vous aider, qui vous aideront à profiter des possibilités créatives du web.</p> +<p>Cela vous semble difficile ? Pas d'inquiétude, notre objectif est de vous donner toutes les bases pour débuter, ce qui vous facilitera la suite. Une fois que vous aurez accepté le changement permanent et l'inconstance du Web, vous commencerez à vous amuser. En tant que membre de la communauté Web, vous aurez tout un réseau de contacts et de ressources web pour vous aider, qui vous aideront à profiter des possibilités créatives du web.</p> <p>Vous êtes désormais un créateur du numérique. Profitez de l'expérience et trouvez votre gagne-pain.</p> <h2 id="Vue_densemble_des_outils_Web_modernes">Vue d'ensemble des outils Web modernes</h2> -<p>Il existe plusieurs technologies à maîtriser si vous souhaitez devenir développeur Web front-end, que nous décrirons brièvement dans cette section. Pour une explication plus détaillée de la façon dont certains d'entre eux interagissent, lisez notre article <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du web</a>.</p> +<p>Il existe plusieurs technologies à maîtriser si vous souhaitez devenir développeur Web front-end, que nous décrirons brièvement dans cette section. Pour une explication plus détaillée de la façon dont certains d'entre eux interagissent, lisez notre article <a href="/fr/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Le fonctionnement du web</a>.</p> <h3 id="Navigateurs_web">Navigateurs web</h3> -<p>Vous êtes probablement en train de lire ces mots à l'aide d'un navigateur web (à moins que vous ne l'ayez imprimé ou que vous utilisiez un outil d'accessibilité comme un lecteur d'écran). Les navigateurs web sont des logiciels que les gens utilisent pour naviguer sur le web, comme <a href="https://www.mozilla.org/fr/firefox/">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/fr/safari/">Safari</a>, <a href="https://www.microsoft.com/fr-fr/windows/microsoft-edge">Edge</a>.</p> +<p>Vous êtes probablement en train de lire ces mots à l'aide d'un navigateur web (à moins que vous ne l'ayez imprimé ou que vous utilisiez un outil d'accessibilité comme un lecteur d'écran). Les navigateurs web sont des logiciels que les gens utilisent pour naviguer sur le web, comme <a href="https://www.mozilla.org/fr/firefox/">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/fr/safari/">Safari</a>, <a href="https://www.microsoft.com/fr-fr/windows/microsoft-edge">Edge</a>.</p> <h3 id="HTTP">HTTP</h3> -<p>Hypertext Transfer Protocol, ou <a href="/fr/docs/Web/HTTP/Basics_of_HTTP">HTTP</a>, est un protocole de communication permettant aux navigateurs web de communiquer avec des serveurs web (qui hébergent les sites web). Une conversation type ressemble à quelque chose comme</p> +<p>Hypertext Transfer Protocol, ou <a href="/fr/docs/Web/HTTP/Basics_of_HTTP">HTTP</a>, est un protocole de communication permettant aux navigateurs web de communiquer avec des serveurs web (qui hébergent les sites web). Une conversation type ressemble à quelque chose comme</p> <pre class="notranslate">"Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"? @@ -81,17 +80,17 @@ original_slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards [Télécharge les fichiers et affiche la page]</pre> -<p>La véritable syntaxe des messages HTTP (appelés requêtes et réponses) ne ressemble pas vraiment à une conversation humaine, mais cela permet d'en avoir un aperçu.</p> +<p>La véritable syntaxe des messages HTTP (appelés requêtes et réponses) ne ressemble pas vraiment à une conversation humaine, mais cela permet d'en avoir un aperçu.</p> <h3 id="HTML_CSS_et_JavaScript">HTML, CSS et JavaScript</h3> -<p><a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/CSS">CSS</a>, et <a href="/fr/docs/Web/JavaScript">JavaScript</a> sont les trois principales technologies utilisées pour créer un site web:</p> +<p><a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/CSS">CSS</a>, et <a href="/fr/docs/Web/JavaScript">JavaScript</a> sont les trois principales technologies utilisées pour créer un site web:</p> <ul> <li> - <p>Hypertext Markup Language, ou <strong>HTML</strong>, est un langage de balises consistant en un ensemble d'éléments qui permettent d'encapsuler (de baliser) du contenu pour lui donner du sens (sémantique) et le structurer. Un extrait simple ressemble à cela :</p> + <p>Hypertext Markup Language, ou <strong>HTML</strong>, est un langage de balises consistant en un ensemble d'éléments qui permettent d'encapsuler (de baliser) du contenu pour lui donner du sens (sémantique) et le structurer. Un extrait simple ressemble à cela :</p> - <pre class="brush: html notranslate"><h1>Ceci est un titre de haut niveau</h1> + <pre class="brush: html"><h1>Ceci est un titre de haut niveau</h1> <p>Voilà un paragraphe de texte</p> @@ -100,18 +99,18 @@ original_slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards <p>Si nous faisions une analogie avec la construction d'une maison, le HTML serait les fondations et les murs de la maison, qui lui fournissent une architecture et maintien l'ensemble d'un bloc.</p> </li> <li> - <p>Les Feuilles de Style en cascade (<strong>CSS </strong>- Cascading Style Sheets) est un langage basé sur un ensemble de règles et utilisé pour appliquer des styles à votre HTML, par exemple pour définir la couleur du texte et de l'arrière-plan, ajouter des bordures, animer des éléments, ou agencer les différentes parties d'une page. Par exemple, le code suivant rendrait notre paragraphe HTML rouge:</p> + <p>Les Feuilles de Style en cascade (<strong>CSS </strong>- Cascading Style Sheets) est un langage basé sur un ensemble de règles et utilisé pour appliquer des styles à votre HTML, par exemple pour définir la couleur du texte et de l'arrière-plan, ajouter des bordures, animer des éléments, ou agencer les différentes parties d'une page. Par exemple, le code suivant rendrait notre paragraphe HTML rouge:</p> - <pre class="brush: css notranslate">p { + <pre class="brush: css">p { color: red; }</pre> <p>Dans notre méthaphore domestique, le CSS serait la peinture, la tapisserie, les tapis et les tableaux que vous utiliseriez pour décorer votre maison.</p> </li> <li> - <p><strong>JavaScript</strong> est le langage de programmation que l'on utilise pour ajouter de l'interactivité aux sites webs, du changement de style dynamique à la récupération de mise à jour depuis le server, en passant par les animations visuelles complexes. Ce petit fragment de code JavaScript va stocker un lien vers notre paragraphe et en changer le contenu :</p> + <p><strong>JavaScript</strong> est le langage de programmation que l'on utilise pour ajouter de l'interactivité aux sites webs, du changement de style dynamique à la récupération de mise à jour depuis le server, en passant par les animations visuelles complexes. Ce petit fragment de code JavaScript va stocker un lien vers notre paragraphe et en changer le contenu :</p> - <pre class="brush: js notranslate">let pElem = document.querySelector('p'); + <pre class="brush: js">let pElem = document.querySelector('p'); pElem.textContent = 'J'ai changé le texte!';</pre> <p>Dans l'analogie de la maison, JavaScript serait le four, la télévision, le sèche-cheveux — Tout ce qui donne des fonctionnalités utiles à votre logement.</p> @@ -120,21 +119,21 @@ pElem.textContent = 'J'ai changé le texte!';</pre> <h3 id="Outils">Outils</h3> -<p>Une fois que vous maîtriserez les technologies "brutes" qui permettent de construire des pages web (comme HTML, CSS, et JavaScript), vous rencontrerez rapidement divers outils permettant de faciliter ou d'accélerer votre travail. On peut citer comme exemples :</p> +<p>Une fois que vous maîtriserez les technologies "brutes" qui permettent de construire des pages web (comme HTML, CSS, et JavaScript), vous rencontrerez rapidement divers outils permettant de faciliter ou d'accélerer votre travail. On peut citer comme exemples :</p> <ul> - <li>Les <a href="/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs">outils de développement</a> des navigateurs modernes qui permettent de déboguer votre code.</li> - <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Des outils de test</a> pouvant être utilisés afin de vérifier si votre code se comporte comme vous l'aviez prévu.</li> + <li>Les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> des navigateurs modernes qui permettent de déboguer votre code.</li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Des outils de test</a> pouvant être utilisés afin de vérifier si votre code se comporte comme vous l'aviez prévu.</li> <li>Des bibliothèques et des cadres de travail (frameworks) basés sur JavaScript qui permettent de créer certains types de sites web beaucoup plus rapidement et efficacement .</li> - <li>Ce qu'on appelle les "Linters", des outils d'analyse qui prennent une liste de règles, parcourent votre code et listent les endroits où vous n'avez pas parfaitement suivi les règles.</li> - <li>Des minificateurs, qui retirent tous les blancs de vos fichiers de code pour les rendre plus compacts et donc plus rapides à télécharger.</li> + <li>Ce qu'on appelle les "Linters", des outils d'analyse qui prennent une liste de règles, parcourent votre code et listent les endroits où vous n'avez pas parfaitement suivi les règles.</li> + <li>Des minificateurs, qui retirent tous les blancs de vos fichiers de code pour les rendre plus compacts et donc plus rapides à télécharger.</li> </ul> <h3 id="Langages_et_frameworks_«_côté_serveur_»">Langages et frameworks « côté serveur »</h3> -<p>HTML, CSS et JavaScript sont des langages "front-end" (ou « côté client »), ce qui signifie qu'ils sont exécutés par le navigateur pour produire un rendu visuel du site web à destination des utilisateurs.</p> +<p>HTML, CSS et JavaScript sont des langages "front-end" (ou « côté client »), ce qui signifie qu'ils sont exécutés par le navigateur pour produire un rendu visuel du site web à destination des utilisateurs.</p> -<p>Il existe une autre catégorie de langages appelés langages "back-end" (ou « côté serveur »), qui s'exécutent sur le serveur avant que le résultat ne soit envoyé au navigateur pour être affiché. Une utilisation typique d'un langage côté serveur consiste à extraire des données d'une base de données et à générer du HTML pour les contenir avant d'envoyer le résultat au navigateur pour que celui-ci l'affiche à l'utilisateur.</p> +<p>Il existe une autre catégorie de langages appelés langages "back-end" (ou « côté serveur »), qui s'exécutent sur le serveur avant que le résultat ne soit envoyé au navigateur pour être affiché. Une utilisation typique d'un langage côté serveur consiste à extraire des données d'une base de données et à générer du HTML pour les contenir avant d'envoyer le résultat au navigateur pour que celui-ci l'affiche à l'utilisateur.</p> <p>On peut citer comme exemples ASP.NET, Python, PHP, ou NodeJS.</p> @@ -142,31 +141,31 @@ pElem.textContent = 'J'ai changé le texte!';</pre> <p>Nous avons rapidement évoqué les technologies utilisées pour créer des sites web et nous allons désormais parler des bonnes pratiques à employer pour s'assurer que vous utilisez ces outils de la meilleure manière possible.</p> -<p>Lorsque l'on réalise du développement web, la principale cause d'incertitude provient du fait que l'on ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateurs du site web:</p> +<p>Lorsque l'on réalise du développement web, la principale cause d'incertitude provient du fait que l'on ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateurs du site web:</p> <ul> <li>L'utilisateur 1 peut utiliser un iPhone avec un écran petit et étroit.</li> - <li>L'utilisateur 2 peut se servir d'un ordinateur portable Windows avec un grand écran secondaire.</li> + <li>L'utilisateur 2 peut se servir d'un ordinateur portable Windows avec un grand écran secondaire.</li> <li>L'utilisateur 3 peut être aveugle et utiliser un lecteur d'écran pour accéder au contenu de la page web.</li> <li>L'utilisateur 4 utilise peut-être un très vieil ordinateur de bureau incapable de faire fonctionner les navigateurs modernes.</li> </ul> -<p>Ne sachant pas comment vos utilisateurs vont interagir avec votre site, vous devez le concevoir de manière défensive — rendre votre site web aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés puissent y accéder, même s'ils n'auront pas la même interaction. En bref, nous essayons de rendre le web accessible à tous, autant que possible.</p> +<p>Ne sachant pas comment vos utilisateurs vont interagir avec votre site, vous devez le concevoir de manière défensive — rendre votre site web aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés puissent y accéder, même s'ils n'auront pas la même interaction. En bref, nous essayons de rendre le web accessible à tous, autant que possible.</p> -<p>Vous rencontrerez les concepts suivants à un moment donné de vos études.</p> +<p>Vous rencontrerez les concepts suivants à un moment donné de vos études.</p> <ul> - <li><strong>La compatibilité entre navigateurs</strong> consiste à essayer de garantir que votre page Web fonctionne sur autant d'appareils que possible. Cela inclut l'utilisation de technologies prises en charge par tous les navigateurs, l'offre de meilleures expériences aux navigateurs qui peuvent les gérer (amélioration progressive) et/ ou l'adaptation du code afin de revenir à une expérience plus simple mais fonctionnelle dans les navigateurs plus anciens (dégradation gracieuse). Cela implique notamment de nombreux tests pour vérifier le bon fonctionnement dans chaque navigateur, puis un travail supplémentaire pour résoudre ces problèmes.</li> - <li><strong>La conception web réactive (responsive) </strong>consiste à rendre vos fonctionnalités et mises en page flexibles afin qu'elles puissent s'adapter automatiquement à différents navigateurs. Un exemple immédiat est un site Web qui est présenté d'une certaine manière dans un navigateur grand écran, mais qui s'affiche en une colonne unique plus compacte sur les navigateurs de téléphone mobile. Essayez d'ajuster la largeur de la fenêtre de votre navigateur maintenant pour voir ce qui se passe.</li> - <li><strong>La performance</strong> signifie que les sites Web doivent se charger le plus rapidement possible, mais aussi qu'ils doivent être intuitifs et faciles à utiliser afin que les utilisateurs ne soient pas frustrés et ne partent pas ailleurs.</li> - <li><strong>L'accessibilité</strong> consiste à rendre vos sites web utilisables par le plus grand nombre de catégories de personnes possible (Un concept lié est la notion de conception inclusive). Cela inclut les individus avec des déficiences visuelles, auditives, cognitives ou physiques. Cela va même au-delà des personnes handicapées — Qu'en est-il des jeunes et des personnes agées, des personnes de cultures différentes, utilisant des appareils mobiles, disposant d'une connection lente ou peu fiable ?</li> - <li><strong>L'internationalisation </strong>signifie rendre les sites Web utilisables par des personnes de cultures différentes, qui parlent des langues différentes de la vôtre. cela inclut des considérations techniques (telles que la modification de votre mise en page pour qu'elle fonctionne également pour les langues se lisant de droite à gauche, ou même verticalement), et les considérations sociales (comme l'utilisation d'un langage simple et non argotique afin que les personnes pour qui votre langue est leur deuxième ou troisième langue soient plus susceptibles de comprendre votre texte).</li> - <li><strong>Confidentialité et sécurité</strong>. Ces deux concepts sont liés mais différents. La confidentialité consiste à permettre aux gens de vaquer à leurs occupations en privé et à ne pas les espionner ni ne collecter plus de données que ce dont vous avez absolument besoin. La sécurité fait référence à la conception sécurisée de votre site Web afin d'empêcher des utilisateurs malveillants de voler les informations qu'il contient, et ce qu'elle vous appartiennent ou à vos utilisateurs.</li> + <li><strong>La compatibilité entre navigateurs</strong> consiste à essayer de garantir que votre page Web fonctionne sur autant d'appareils que possible. Cela inclut l'utilisation de technologies prises en charge par tous les navigateurs, l'offre de meilleures expériences aux navigateurs qui peuvent les gérer (amélioration progressive) et/ ou l'adaptation du code afin de revenir à une expérience plus simple mais fonctionnelle dans les navigateurs plus anciens (dégradation gracieuse). Cela implique notamment de nombreux tests pour vérifier le bon fonctionnement dans chaque navigateur, puis un travail supplémentaire pour résoudre ces problèmes.</li> + <li><strong>La conception web réactive (responsive) </strong>consiste à rendre vos fonctionnalités et mises en page flexibles afin qu'elles puissent s'adapter automatiquement à différents navigateurs. Un exemple immédiat est un site Web qui est présenté d'une certaine manière dans un navigateur grand écran, mais qui s'affiche en une colonne unique plus compacte sur les navigateurs de téléphone mobile. Essayez d'ajuster la largeur de la fenêtre de votre navigateur maintenant pour voir ce qui se passe.</li> + <li><strong>La performance</strong> signifie que les sites Web doivent se charger le plus rapidement possible, mais aussi qu'ils doivent être intuitifs et faciles à utiliser afin que les utilisateurs ne soient pas frustrés et ne partent pas ailleurs.</li> + <li><strong>L'accessibilité</strong> consiste à rendre vos sites web utilisables par le plus grand nombre de catégories de personnes possible (Un concept lié est la notion de conception inclusive). Cela inclut les individus avec des déficiences visuelles, auditives, cognitives ou physiques. Cela va même au-delà des personnes handicapées — Qu'en est-il des jeunes et des personnes agées, des personnes de cultures différentes, utilisant des appareils mobiles, disposant d'une connection lente ou peu fiable ?</li> + <li><strong>L'internationalisation </strong>signifie rendre les sites Web utilisables par des personnes de cultures différentes, qui parlent des langues différentes de la vôtre. cela inclut des considérations techniques (telles que la modification de votre mise en page pour qu'elle fonctionne également pour les langues se lisant de droite à gauche, ou même verticalement), et les considérations sociales (comme l'utilisation d'un langage simple et non argotique afin que les personnes pour qui votre langue est leur deuxième ou troisième langue soient plus susceptibles de comprendre votre texte).</li> + <li><strong>Confidentialité et sécurité</strong>. Ces deux concepts sont liés mais différents. La confidentialité consiste à permettre aux gens de vaquer à leurs occupations en privé et à ne pas les espionner ni ne collecter plus de données que ce dont vous avez absolument besoin. La sécurité fait référence à la conception sécurisée de votre site Web afin d'empêcher des utilisateurs malveillants de voler les informations qu'il contient, et ce qu'elle vous appartiennent ou à vos utilisateurs.</li> </ul> -<h2 dir="ltr" id="Voir_aussi">Voir aussi</h2> +<h2 id="Voir_aussi">Voir aussi</h2> -<ul dir="ltr"> - <li><a href="https://fr.wikipedia.org/wiki/World_Wide_Web#Histoire">Histoire du World Wide Web</a></li> - <li><a href="https://wiki.developer.mozilla.org/fr/docs/Apprendre/Fonctionnement_Internet">Le fonctionnement de l'Internet</a></li> +<ul> + <li><a href="https://fr.wikipedia.org/wiki/World_Wide_Web#Histoire">Histoire du World Wide Web</a></li> + <li><a href="/fr/docs/Learn/Common_questions/How_does_the_Internet_work">Le fonctionnement de l'Internet</a></li> </ul> diff --git a/files/fr/learn/javascript/first_steps/arrays/index.html b/files/fr/learn/javascript/first_steps/arrays/index.html index df8d360351..f38aeee181 100644 --- a/files/fr/learn/javascript/first_steps/arrays/index.html +++ b/files/fr/learn/javascript/first_steps/arrays/index.html @@ -2,17 +2,19 @@ title: Les tableaux slug: Learn/JavaScript/First_steps/Arrays tags: - - Apprendre + - Arrays - Article - - Codage - - Débutants + - Beginner + - CodingScripting - JavaScript - - Lier + - Join + - Learn - Pop - Push - - Tableaux - - décalage - - séparer + - l10n:priority + - shift + - split + - unshift translation_of: Learn/JavaScript/First_steps/Arrays original_slug: Learn/JavaScript/First_steps/tableaux --- @@ -41,7 +43,7 @@ original_slug: Learn/JavaScript/First_steps/tableaux <p>Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément. Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs. Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans l'article.</p> -<p>Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">ouvrir cette console</a> dans un onglet ou une fenêtre séparés ou utiliser la <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console développeur de l'explorateur</a> si vous préférez).</p> +<p>Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">ouvrir cette console</a> dans un onglet ou une fenêtre séparés ou utiliser la <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">console développeur de l'explorateur</a> si vous préférez).</p> <div class="hidden"> <h6 id="Hidden_code">Hidden code</h6> @@ -174,7 +176,7 @@ let random = ['arbre', 795, [0, 1, 2]];</pre> <h3 id="Accès_aux_éléments_de_tableau_et_modification_de_ceux‑ci">Accès aux éléments de tableau et modification de ceux‑ci</h3> -<p>Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet, de la même façon que nous avons eu <a href="/en-US/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">accès aux lettres dans une chaîne</a>.</p> +<p>Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet, de la même façon que nous avons eu <a href="/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods#retrieving_a_specific_string_character">accès aux lettres dans une chaîne</a>.</p> <ol> <li>Entrez ceci dans la console : @@ -214,7 +216,7 @@ for (var i = 0; i < sequence.length; i++) { <ol> <li>Commencer la boucle à l'élément 0 du tableau.</li> <li>Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément 7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6).</li> - <li>Afficher chaque élément sur la console de l'explorateur avec<code> <a href="/en-US/docs/Web/API/Console/log">console.log()</a></code>.</li> + <li>Afficher chaque élément sur la console de l'explorateur avec<code> <a href="/fr/docs/Web/API/Console/log">console.log()</a></code>.</li> </ol> <h2 id="Quelques_méthodes_utiles_pour_les_tableaux">Quelques méthodes utiles pour les tableaux</h2> @@ -306,10 +308,10 @@ removedItem;</pre> <ol> <li>Sous le commentaire <code>// number 1</code> il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom <code>products</code>.</li> - <li>Sur la même ligne que le commentaire <code>// number 2</code> se trouve le début d'une boucle. Dans cette ligne nous avons actuellement <code>i <= 0</code>, test conditionnel qui fait que la <a href="/en-US/Learn/JavaScript/First_steps/A_first_splash#Loops"> boucle</a> stoppe immédiatement, car ce test dit « stopper dès que <code>i</code> est inférieur ou égal à 0 » et <code>i</code> part de 0. Remplacez ce test par un qui n'arrêtera pas la boucle tant que <code>i</code> sera inférieur à la taille du tableau <code>products</code>.</li> - <li>Au dessous du commentaire <code>// number 3</code> nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (<code>nom:prix</code>) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux <a href="/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile">Méthodes utiles pour les chaînes de caractères</a> pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.</li> - <li>En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le <a href="/fr/docs/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">premier article à propos des chaînes</a>.</li> - <li>Il y a une variable nommée <code>total</code> créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous <code>// number 4</code>) ajoutez une ligne qui ajoute à ce total le prix de l'article courant à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un <a href="/en-US/Learn/JavaScript/First_steps/Math#Assignment_operators">opérateur d'assignation</a> pour faire cela ;-).</li> + <li>Sur la même ligne que le commentaire <code>// number 2</code> se trouve le début d'une boucle. Dans cette ligne nous avons actuellement <code>i <= 0</code>, test conditionnel qui fait que la <a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops"> boucle</a> stoppe immédiatement, car ce test dit « stopper dès que <code>i</code> est inférieur ou égal à 0 » et <code>i</code> part de 0. Remplacez ce test par un qui n'arrêtera pas la boucle tant que <code>i</code> sera inférieur à la taille du tableau <code>products</code>.</li> + <li>Au dessous du commentaire <code>// number 3</code> nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (<code>nom:prix</code>) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux <a href="/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods">Méthodes utiles pour les chaînes de caractères</a> pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.</li> + <li>En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le <a href="/fr/docs/Learn/JavaScript/First_steps/Strings#numbers_versus_strings">premier article à propos des chaînes</a>.</li> + <li>Il y a une variable nommée <code>total</code> créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous <code>// number 4</code>) ajoutez une ligne qui ajoute à ce total le prix de l'article courant à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un <a href="/fr/docs/Learn/JavaScript/First_steps/Math#assignment_operators">opérateur d'assignation</a> pour faire cela ;-).</li> <li>Nous souhaitons que vous modifiez la ligne au‑dessous de <code>// number 5</code> de sorte que la variable <code>itemText</code> soit égale à « nom actuel de l'élément — $prix actuel de l'élément », par exemple « Shoes — $23.99 » dans chaque cas, de façon à ce qu'une information correcte soit affichée sur l'envoi. Il s'agit d'une simple concaténation de chaînes de caractères, chose qui doit vous être familière.</li> </ol> @@ -494,8 +496,7 @@ window.addEventListener('load', updateCode); <h2 id="Testez_vos_compétences_!">Testez vos compétences !</h2> -<p><br> - Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays">Test de compétences : les tableaux</a>.</p> +<p>Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir <a href="/fr/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays">Test de compétences : les tableaux</a>.</p> <h2 id="Conclusion">Conclusion</h2> @@ -505,10 +506,8 @@ window.addEventListener('load', updateCode); <h2 id="Voir_aussi">Voir aussi</h2> - - <ul> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Collections indexées</a> — un guide de niveau avancé à propos des tableaux et de leurs cousins, les tableaux typés.</li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Indexed_collections">Collections indexées</a> — un guide de niveau avancé à propos des tableaux et de leurs cousins, les tableaux typés.</li> <li>{{jsxref("Array")}} — la page de référence de l'objet <code>Array</code> — pour un guide de référence détaillé à propos des fonctionnalités discutées dans cette page, et plus encore.</li> </ul> @@ -517,13 +516,13 @@ window.addEventListener('load', updateCode); <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> </ul> diff --git a/files/fr/learn/javascript/first_steps/math/index.html b/files/fr/learn/javascript/first_steps/math/index.html index 2d35ee076b..ddf396a3b7 100644 --- a/files/fr/learn/javascript/first_steps/math/index.html +++ b/files/fr/learn/javascript/first_steps/math/index.html @@ -2,16 +2,17 @@ title: Mathématiques de base en JavaScript — nombres et opérateurs slug: Learn/JavaScript/First_steps/Math tags: - - Apprendre - Article - - Codage de scripts - - Débutant + - Beginner + - CodingScripting - Guide - - Incrémentation - JavaScript + - Learn - Math - - Opérateurs - - augmenté + - Operators + - augmented + - increment + - l10n:priority - maths - modulo translation_of: Learn/JavaScript/First_steps/Math @@ -51,12 +52,12 @@ translation_of: Learn/JavaScript/First_steps/Math <li><strong>Doubles</strong> : (pour double précision) ce sont des nombres à virgule flottante de précision supérieure aux précédents (on les dit plus précis en raison du plus grand nombre de décimales possibles).</li> </ul> -<p>Nous disposons même de plusieurs systèmes de numération ! Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres :</p> +<p>Nous disposons même de plusieurs systèmes de numération ! Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres :</p> <ul> <li><strong>Binaire</strong> — utilisé par le plus bas niveau de langage des ordinateurs, il est composé de 0 et de 1.</li> <li><strong>Octal</strong> — de base 8, utilise les chiffres entre 0 et 7 dans chaque rang.</li> - <li><strong>Hexadécimal</strong> — de base 16, utilise les chiffres entre 0 et 9 puis les lettres de a à f dans chaque rang. Vous avez peut-être déjà rencontré ces nombres en définissant des couleurs dans les <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">CSS</a>.</li> + <li><strong>Hexadécimal</strong> — de base 16, utilise les chiffres entre 0 et 9 puis les lettres de a à f dans chaque rang. Vous avez peut-être déjà rencontré ces nombres en définissant des couleurs dans les <a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#hexadecimal_values">CSS</a>.</li> </ul> <p><strong>Avant que votre cervelle ne se mette à bouillir, stop !</strong> Pour commencer, nous ne nous intéresserons qu'aux nombres décimaux dans ce cours ; vous aurez rarement besoin de vous servir des autres types, peut-être même jamais.</p> @@ -65,15 +66,15 @@ translation_of: Learn/JavaScript/First_steps/Math <h3 id="Ce_ne_sont_que_des_nombres_pour_moi">Ce ne sont que des nombres pour moi</h3> -<p>Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de base dont nous aurons besoin. Entrez les commandes listées ci-dessous dans la <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console JavaScript des outils de développement</a>, ou utilisez la simple console intégrée que vous voyez ci-dessous si vous préférez.</p> +<p>Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de base dont nous aurons besoin. Entrez les commandes listées ci-dessous dans la <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">console JavaScript des outils de développement</a>, ou utilisez la simple console intégrée que vous voyez ci-dessous si vous préférez.</p> <p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}}</p> <p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/">Ouvrir la console dans une nouvelle fenêtre</a></strong></p> <ol> - <li>Premièrement, déclarons une paire de variables et initialisons‑les respectivement avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct : - <pre class="brush: js notranslate">var myInt = 5; + <li>Premièrement, déclarons une paire de variables et initialisons‑les respectivement avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct : + <pre class="brush: js">var myInt = 5; var myFloat = 6.667; myInt; myFloat;</pre> @@ -81,7 +82,7 @@ myFloat;</pre> <li>Les nombres sont saisis sans guillemets — essayez de déclarer et initialiser deux ou trois variables de plus contenant des nombres avant de continuer.</li> <li>Maintenant vérifions que les deux variables d'origine sont du même type de donnée. En JavaScript, l'opérateur nommé {{jsxref("Operators/typeof", "typeof")}} est prévu pour cela. Entrez les deux lignes ci‑dessous comme indiqué :</li> <li> - <pre class="brush: js notranslate" dir="rtl">typeof myInt; + <pre class="brush: js" dir="rtl">typeof myInt; typeof myFloat;</pre> </li> <li><code>"number"</code> est renvoyé dans les deux cas — cela nous facilite les choses quand nous avons des nombres différents de types variés et que nous avons à les traiter de diverses façons. Ouf !</li> @@ -89,31 +90,31 @@ typeof myFloat;</pre> <h3 id="Méthodes_de_nombres_utiles">Méthodes de nombres utiles</h3> -<p>L'objet <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> , une instance qui représente tous les nombres standards que vous utiliserez dans votre JavaScript, a de nombreuses méthodes disponibles pour vous permettre de manipuler les nombres. Nous ne les étudierons pas tous en détail dans cet article car nous voulons qu'il reste une simple introduction et nous verrons seulement les bases essentielles pour le moment; cependant, une fois que vous aurez lu ce module plusieurs fois, il pourra être utile de visiter les pages de référence d'objet et d'en apprendre plus sur ce qui est disponible.</p> +<p>L'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> , une instance qui représente tous les nombres standards que vous utiliserez dans votre JavaScript, a de nombreuses méthodes disponibles pour vous permettre de manipuler les nombres. Nous ne les étudierons pas tous en détail dans cet article car nous voulons qu'il reste une simple introduction et nous verrons seulement les bases essentielles pour le moment; cependant, une fois que vous aurez lu ce module plusieurs fois, il pourra être utile de visiter les pages de référence d'objet et d'en apprendre plus sur ce qui est disponible.</p> -<p>Par exemple, pour arrondir votre nombre avec un nombre fixe de décimales, utilisez la méthode <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code>. Tapez les lignes suivantes dans la <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console">console de votre navigateur</a>:</p> +<p>Par exemple, pour arrondir votre nombre avec un nombre fixe de décimales, utilisez la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code>. Tapez les lignes suivantes dans la <a href="/fr/docs/Tools/Web_Console">console de votre navigateur</a>:</p> -<pre class="brush: js notranslate">let lotsOfDecimal = 1.766584958675746364; +<pre class="brush: js">let lotsOfDecimal = 1.766584958675746364; lotsOfDecimal; let twoDecimalPlaces = lotsOfDecimal.toFixed(2); twoDecimalPlaces;</pre> <h3 id="Convertir_en_type_de_données_numérique">Convertir en type de données numérique</h3> -<p>Parfois vous pourriez finir avec un nombre stocké de type "string", ce qui rendra difficile le fait d'effectuer un calcul avec. Ca arrive le plus souvent lorsqu'une donnée est entrée dans une entrée de <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms">formulaire</a>, et le <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text">type de donnée entré est du texte</a>. Il éxiste une façon de résoudre ce problème — passer la valeur de "string" dans le constructeur <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number">Number()</a></code> pour retourner une version numérique de la même valeur.</p> +<p>Parfois vous pourriez finir avec un nombre stocké de type "string", ce qui rendra difficile le fait d'effectuer un calcul avec. Ca arrive le plus souvent lorsqu'une donnée est entrée dans une entrée de <a href="/fr/docs/Learn/Forms">formulaire</a>, et le <a href="/fr/docs/Web/HTML/Element/Input/text">type de donnée entré est du texte</a>. Il éxiste une façon de résoudre ce problème — passer la valeur de "string" dans le constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/Number">Number()</a></code> pour retourner une version numérique de la même valeur.</p> <p>Par exemple, essayez de taper ces lignes dans votre console:</p> -<pre class="brush: js notranslate">let myNumber = '74'; +<pre class="brush: js">let myNumber = '74'; myNumber + 3;</pre> <p>Vous obtenez le résultat 743, et non pas 77, car <code>myNumber</code> est en fait défini en tant que "string". Vous pouvez tester en tapant la ligne suivante:</p> -<pre class="brush: js notranslate">typeof myNumber;</pre> +<pre class="brush: js">typeof myNumber;</pre> <p>Pour réparer le calcul, vous pouvez faire ceci:</p> -<pre class="brush: js notranslate">Number(myNumber) + 3;</pre> +<pre class="brush: js">Number(myNumber) + 3;</pre> <h2 id="Opérateurs_arithmétiques">Opérateurs arithmétiques</h2> @@ -170,22 +171,22 @@ myNumber + 3;</pre> <p><strong>Note </strong>: Quelquefois les nombres impliqués dans des opérations sont nommés {{Glossary("Operand", "operands")}}.</p> </div> -<p>Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, mais ce serait bien de tester si vous avez bien compris la syntaxe. Entrez les exemples ci‑dessous dans la <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console des outils de développement JavaScript</a> ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe.</p> +<p>Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, mais ce serait bien de tester si vous avez bien compris la syntaxe. Entrez les exemples ci‑dessous dans la <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">console des outils de développement JavaScript</a> ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe.</p> <ol> <li>Essayez de saisir quelques exemples simples de votre cru, comme : - <pre class="brush: js notranslate">10 + 7 + <pre class="brush: js">10 + 7 9 * 8 60 % 3</pre> </li> <li>Déclarez et initialisez quelques variables, puis utilisez‑les dans des opérations — les variables se comporteront exactement comme les valeurs qu'elles contiennent pour les besoins de l'opération. Par exemple : - <pre class="brush: js notranslate">var num1 = 10; + <pre class="brush: js">var num1 = 10; var num2 = 50; 9 * num1; num2 / num1;</pre> </li> <li>Pour terminer cette partie, entrez quelques expressions plus compliquées, comme : - <pre class="brush: js notranslate">5 + 10 * 3; + <pre class="brush: js">5 + 10 * 3; num2 % 9 * num1; num2 + num1 / 8 + 2;</pre> </li> @@ -197,50 +198,50 @@ num2 + num1 / 8 + 2;</pre> <p>Revenons sur le dernier exemple ci‑dessus, en supposant que <code>num2</code> contient la valeur 50 et <code>num1</code> contient 10 (comme défini plus haut) :</p> -<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre> +<pre class="brush: js">num2 + num1 / 8 + 2;</pre> -<p>En tant qu'humain, vous pouvez lire « <em>50 plus 10 égale 60 »</em>, puis « <em>8 plus 2 égale 10 »</em> et finalement « <em>60 divisé par 10 égale 6 »</em>.</p> +<p>En tant qu'humain, vous pouvez lire « <em>50 plus 10 égale 60 »</em>, puis « <em>8 plus 2 égale 10 »</em> et finalement « <em>60 divisé par 10 égale 6 »</em>.</p> -<p>Mais le navigateur <em>calcule « 10 sur 8 égale 1.25 »</em>, puis « <em>50 plus 1.25 plus 2 égale 53.25 »</em>.</p> +<p>Mais le navigateur <em>calcule « 10 sur 8 égale 1.25 »</em>, puis « <em>50 plus 1.25 plus 2 égale 53.25 »</em>.</p> <p>Cela est dû aux <strong>priorités entre opérateurs</strong> — certains sont appliqués avant d'autres dans une opération (on parle d'une expression en programmation). En JavaScript, la priorité des opérateurs est identique à celle enseignée à l'école — Multiplication et Division sont toujours effectuées en premier, suivies d'Addition et Soustraction (le calcul est toujours exécuté de la gauche vers la droite).</p> <p>Si vous voulez contourner les règles de priorité des opérateurs, vous pouvez mettre entre parenthèses les parties que vous souhaitez voir calculées en premier. Pour obtenir un résultat égal à 6, nous devons donc écrire :</p> -<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre> +<pre class="brush: js">(num2 + num1) / (8 + 2);</pre> <p>Essayez-le et voyez.</p> <div class="note"> -<p><strong>Note </strong>: La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Expressions and operators</a>.</p> +<p><strong>Note </strong>: La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#operator_precedence">Expressions and operators</a>.</p> </div> <h2 id="Opérateurs_dincrémentation_et_de_décrémentation">Opérateurs d'incrémentation et de décrémentation</h2> -<p>Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (<code>++</code>) ou de décrementation (<code>--</code>). Nous nous sommes servis de <code>++</code> dans le jeu « Devinez le nombre » dans notre article <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">Première plongée dans le JavaScript</a> pour ajouter 1 à la variable <code>guessCount</code> pour décompter le nombre de suppositions restantes après chaque tour.</p> +<p>Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (<code>++</code>) ou de décrementation (<code>--</code>). Nous nous sommes servis de <code>++</code> dans le jeu « Devinez le nombre » dans notre article <a href="/fr/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">Première plongée dans le JavaScript</a> pour ajouter 1 à la variable <code>guessCount</code> pour décompter le nombre de suppositions restantes après chaque tour.</p> -<pre class="brush: js notranslate">guessCount++;</pre> +<pre class="brush: js">guessCount++;</pre> <div class="note"> -<p><strong>Note</strong> : Ces opérateurs sont couramment utilisés dans des <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">boucles ;</a> nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.</p> +<p><strong>Note</strong> : Ces opérateurs sont couramment utilisés dans des <a href="/fr/docs/Web/JavaScript/Guide/Loops_and_iteration">boucles ;</a> nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.</p> </div> <p>Jouons avec ces opérateurs dans la console. Notez d'abord qu'il n'est pas possible de les appliquer directement à un nombre, ce qui peut paraître étrange, mais cet opérateur assigne à une variable une nouvelle valeur mise à jour, il n'agit pas sur la valeur elle‑même. Ce qui suit renvoie une erreur :</p> -<pre class="brush: js notranslate">3++;</pre> +<pre class="brush: js">3++;</pre> <p>Vous ne pouvez donc incrémenter qu'une variable déjà existante. Essayez ceci :</p> -<pre class="brush: js notranslate">var num1 = 4; +<pre class="brush: js">var num1 = 4; num1++;</pre> <p>Ok, curieuse la ligne 2 ! En écrivant cela, elle renvoie la valeur 4 — c'est dû au fait que l'explorateur renvoie la valeur courante, <em>puis</em> incrémente la variable. Vous constaterez qu'elle a bien été incrémentée si vous demandez de la revoir :</p> -<pre class="brush: js notranslate">num1;</pre> +<pre class="brush: js">num1;</pre> <p>C'est pareil avec <code>--</code> : essayez ce qui suit</p> -<pre class="brush: js notranslate">var num2 = 6; +<pre class="brush: js">var num2 = 6; num2--; num2;</pre> @@ -252,7 +253,7 @@ num2;</pre> <p>Les opérateurs d'assignation sont ceux qui fixent la valeur d'une variable. Nous avons déjà utilisé plusieurs fois le plus élémentaire, <code>=</code> — il donne à la variable de gauche la valeur indiquée à droite :</p> -<pre class="brush: js notranslate">var x = 3; // x contient la valeur 3 +<pre class="brush: js">var x = 3; // x contient la valeur 3 var y = 4; // y contient la valeur 4 x = y; // x contient maintenant la même valeur que y, 4</pre> @@ -312,12 +313,12 @@ x = y; // x contient maintenant la même valeur que y, 4</pre> <p>Notez que vous pouvez opportunément utiliser une autre variable comme opérateur sur la droite de chaque expression, par exemple :</p> -<pre class="brush: js notranslate">var x = 3; // x contient la valeur 3 +<pre class="brush: js">var x = 3; // x contient la valeur 3 var y = 4; // y contient la valeur 4 x *= y; // x contient maintenant la valeur 12</pre> <div class="note"> -<p><strong>Note </strong>: Il y a des tas d'<a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">autres opérateurs d'assignation disponibles</a>, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.</p> +<p><strong>Note </strong>: Il y a des tas d'<a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment_operators">autres opérateurs d'assignation disponibles</a>, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.</p> </div> <h2 id="Apprentissage_actif_dimensionner_une_boîte_à_canevas">Apprentissage actif : dimensionner une boîte à canevas</h2> @@ -393,7 +394,7 @@ x *= y; // x contient maintenant la valeur 12</pre> </table> <div class="note"> -<p><strong>Note </strong>: Vous verrez peut‑être certaines personnes utiliser <code>==</code> et <code>!=</code> pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de <code>===</code>/<code>!==</code>. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes. Les versions strictes à trois caractères testent à la fois l'égalité des valeurs <em>et</em> des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.</p> +<p><strong>Note </strong>: Vous verrez peut‑être certaines personnes utiliser <code>==</code> et <code>!=</code> pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de <code>===</code>/<code>!==</code>. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes. Les versions strictes à trois caractères testent à la fois l'égalité des valeurs <em>et</em> des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.</p> </div> <p>Si vous entrez certaines de ces valeurs dans une console, vous constaterez que toutes renvoient une valeur <code>true</code>/<code>false</code> — les booléens mentionnés dans l'article précédent. Ces opérateurs sont très utiles car il nous permettent de prendre des décisions dans le code, et ils sont utilisés chaque fois que nous avons besoin de faire un choix. Par exemple, les booléens s'utilisent pour :</p> @@ -407,11 +408,11 @@ x *= y; // x contient maintenant la valeur 12</pre> <p>Nous verrons comment coder cette logique quand nous étudierons les directives conditionnelles dans un article ultérieur. Pour le moment, regardons un exemple rapide :</p> -<pre class="brush: html notranslate"><button>Démarrer la machine</button> +<pre class="brush: html"><button>Démarrer la machine</button> <p>La machine est arrêtée.</p> </pre> -<pre class="brush: js notranslate">var btn = document.querySelector('button'); +<pre class="brush: js">var btn = document.querySelector('button'); var txt = document.querySelector('p'); btn.addEventListener('click', updateBtn); @@ -443,7 +444,7 @@ function updateBtn() { <p>Dans l'article suivant, nous étudierons le texte et les façons dont JavaScript nous permet de le manipuler.</p> <div class="note"> -<p><strong>Note</strong> : Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Nombres et dates</a> et aux <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions et opérateurs</a>.</p> +<p><strong>Note</strong> : Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux <a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates">Nombres et dates</a> et aux <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions et opérateurs</a>.</p> </div> <p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p> diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html index b2eae8fff5..ebc7230da3 100644 --- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html +++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html @@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator </ul> <div class="note"> -<p><strong>Note</strong>: Vous pouvez aussi utiliser un site tel que que <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <code><script></code> au sein de la page HTML.</p> +<p><strong>Note</strong>: Vous pouvez aussi utiliser un site tel que que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a> pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <code><script></code> au sein de la page HTML.</p> </div> <h2 id="Résumé_du_projet">Résumé du projet</h2> @@ -52,9 +52,9 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator <p>Les captures d'écran suivantes montrent un exemple de ce que le programme terminé doit afficher :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13667/assessment-1.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="" src="assessment-1.png"></p> -<p>Pour vous faire une idée un peu plus précise, <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">jetez un œil à l'exemple terminé</a> (mais sans regarder le code source !)</p> +<p>Pour vous faire une idée un peu plus précise, <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">jetez un œil à l'exemple terminé</a> (mais sans regarder le code source !)</p> <h2 id="Les_étapes">Les étapes</h2> @@ -119,7 +119,7 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator <li> <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'red';</pre> </li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> est une méthode JavaScript intégrée qui arrondit simplement le résultat d'un calcul à l'entier le plus proche.</li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> est une méthode JavaScript intégrée qui arrondit simplement le résultat d'un calcul à l'entier le plus proche.</li> </ul> <h2 id="Évaluation">Évaluation</h2> @@ -131,13 +131,13 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> </ul> diff --git a/files/fr/learn/server-side/django/development_environment/index.html b/files/fr/learn/server-side/django/development_environment/index.html index b47662e6ff..4ba256c3a7 100644 --- a/files/fr/learn/server-side/django/development_environment/index.html +++ b/files/fr/learn/server-side/django/development_environment/index.html @@ -24,19 +24,19 @@ translation_of: Learn/Server-side/Django/development_environment <h2 id="Aperçu_de_lenvironnement_de_développement_Django">Aperçu de l'environnement de développement Django</h2> -<p>Django simplifie le processus de configuration de votre ordinateur pour que vous puissiez rapidement commencer à développer des applications web. Cette section explique ce que vous aurez dans l'environnement de développement, et vous fournit un aperçu de certaines options de configuration et d'installation. Le reste de l'article explique la méthode <em>recommandée </em>pour installer l'environnement de développement Django sur Ubuntu, macOS et Windows, et comment le tester.</p> +<p>Django simplifie le processus de configuration de votre ordinateur pour que vous puissiez rapidement commencer à développer des applications web. Cette section explique ce que vous aurez dans l'environnement de développement, et vous fournit un aperçu de certaines options de configuration et d'installation. Le reste de l'article explique la méthode <em>recommandée </em>pour installer l'environnement de développement Django sur Ubuntu, macOS et Windows, et comment le tester.</p> <h3 id="Quest-ce_que_lenvironnement_de_développement_Django">Qu'est-ce que l'environnement de développement Django ?</h3> <p>L'environnement de développement correspond à une installation de Django sur votre ordinateur local que vous pouvez utiliser pour développer et tester des applications Django avant de les déployer sur un environnement de production.</p> -<p>Le principal outil que fournit Django est un ensemble de scripts Python utilisés pour créer et travailler avec des projets Django, ainsi qu'un simple <em>serveur web de développement </em>que vous pouvez utiliser pour tester en local (i.e. sur votre propre ordinateur, pas sur un serveur web externe) des applications web Django dans votre navigateur web.</p> +<p>Le principal outil que fournit Django est un ensemble de scripts Python utilisés pour créer et travailler avec des projets Django, ainsi qu'un simple <em>serveur web de développement </em>que vous pouvez utiliser pour tester en local (i.e. sur votre propre ordinateur, pas sur un serveur web externe) des applications web Django dans votre navigateur web.</p> -<p>Il y a plusieurs autres outils annexes, qui font partie de l'environnement de développement, que nous ne couvrirons pas ici. Cela inclut des choses comme un <a href="/en-US/docs/Learn/Common_questions/Available_text_editors">éditeur de texte</a> ou un IDE pour éditer votre code, et un outil de gestion de contrôle de version comme Git pour gérer en toute prudence les différentes versions de votre code. Nous supposerons ici que vous avez déjà un éditeur de texte installé.</p> +<p>Il y a plusieurs autres outils annexes, qui font partie de l'environnement de développement, que nous ne couvrirons pas ici. Cela inclut des choses comme un <a href="/fr/docs/Learn/Common_questions/Available_text_editors">éditeur de texte</a> ou un IDE pour éditer votre code, et un outil de gestion de contrôle de version comme Git pour gérer en toute prudence les différentes versions de votre code. Nous supposerons ici que vous avez déjà un éditeur de texte installé.</p> -<h3 id="Quelles_sont_les_options_dinstallation_de_Django">Quelles sont les options d'installation de Django ?</h3> +<h3 id="Quelles_sont_les_options_dinstallation_de_Django">Quelles sont les options d'installation de Django ?</h3> -<p>Django est extrêmement flexible sur sa manière d'être installé et configuré. Django peut-être :</p> +<p>Django est extrêmement flexible sur sa manière d'être installé et configuré. Django peut-être :</p> <ul> <li>Installé sur divers systèmes d'exploitation.</li> @@ -45,10 +45,10 @@ translation_of: Learn/Server-side/Django/development_environment <li>Lancé depuis l'environnement principal de Python ou depuis des environnements virtuels Python séparés.</li> </ul> -<p>Chacune de ces options requiert une configuration et une installation légèrement différente. Les sous-sections ci-dessous vous expliquent différents choix. Dans le reste de l'article, nous vous montrerons comment installer Django sur un nombre restreint de systèmes d'exploitation, et nous supposerons que cette installation aura été suivie pour tout le reste du module.</p> +<p>Chacune de ces options requiert une configuration et une installation légèrement différente. Les sous-sections ci-dessous vous expliquent différents choix. Dans le reste de l'article, nous vous montrerons comment installer Django sur un nombre restreint de systèmes d'exploitation, et nous supposerons que cette installation aura été suivie pour tout le reste du module.</p> <div class="note"> -<p><strong>Note</strong>: D'autres options d'installation possibles sont traitées dans la documentation officielle de Django. Les liens vers la <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment$translate?tolocale=fr#">documentation appropriée peuvent-être trouvés ci-dessous</a>.</p> +<p><strong>Note</strong>: D'autres options d'installation possibles sont traitées dans la documentation officielle de Django. Les liens vers la <a href="/fr/docs/Learn/Server-side/Django/development_environment">documentation appropriée peuvent-être trouvés ci-dessous</a>.</p> </div> <h4 id="Quels_systèmes_dexploitation_sont_supportés">Quels systèmes d'exploitation sont supportés ?</h4> @@ -81,12 +81,12 @@ translation_of: Learn/Server-side/Django/development_environment <h4 id="Quelle_base_de_données">Quelle base de données ?</h4> -<p>Django supporte quatre bases de données principales (PostgreSQL, MySQL, Oracle et SQLite), et des librairies fournies par la communauté offrent différents niveaux de support pour d'autre bases de données SQL et NoSQL populaires. Nous vous recommandons de choisir la même base de données pour la production et le développement (bien que Django puisse abstraire plusieurs différences entre les bases de données en utilisant son Mapper Relationnel-Objet (ORM), il reste tout de même certains <a href="https://docs.djangoproject.com/en/2.1/ref/databases/">problèmes potentiels</a> qu'il vaut mieux éviter).</p> +<p>Django supporte quatre bases de données principales (PostgreSQL, MySQL, Oracle et SQLite), et des librairies fournies par la communauté offrent différents niveaux de support pour d'autre bases de données SQL et NoSQL populaires. Nous vous recommandons de choisir la même base de données pour la production et le développement (bien que Django puisse abstraire plusieurs différences entre les bases de données en utilisant son Mapper Relationnel-Objet (ORM), il reste tout de même certains <a href="https://docs.djangoproject.com/en/2.1/ref/databases/">problèmes potentiels</a> qu'il vaut mieux éviter).</p> <p>Dans cet article (et quasiment tout le module), nous utiliserons la base <em>SQLite</em>, qui sauvegarde ses données dans des fichiers. SQLite a été conçu pour être utilisé comme une base de données légère, mais elle ne peut pas supporter un haut niveau de compétition. Elle est cependant un excellent choix pour des applications qui sont prioritairement en lecture seule.</p> <div class="note"> -<p><strong>Note</strong>: Django est configuré pour utiliser SQLite par défaut lorsque vous démarrez le projet de votre site web en utilisant les outils standards (<em>django-admin</em>). C'est un très bon choix lorsque vous débutez car elle ne requiert aucune configuration ou installation particulière.</p> +<p><strong>Note</strong>: Django est configuré pour utiliser SQLite par défaut lorsque vous démarrez le projet de votre site web en utilisant les outils standards (<em>django-admin</em>). C'est un très bon choix lorsque vous débutez car elle ne requiert aucune configuration ou installation particulière.</p> </div> <h4 id="Installation_globale_ou_dans_un_environnement_virtuel_Python">Installation globale ou dans un environnement virtuel Python ?</h4> @@ -99,13 +99,13 @@ translation_of: Learn/Server-side/Django/development_environment <p>Si vous installez Django dans l'environnement par défaut/global, vous ne pourrez alors cibler qu'une seule version de Django sur votre machine. Cela peut devenir un problème si vous souhaitez créer de nouveaux sites web (utilisant la dernière version de Django) tout en maintenant d'autres sites web dépendant de versions antérieures.</p> -<p>Ainsi, un développeur Python/Django confirmé lance généralement ses applications Python dans des <em>environnements virtuels Python</em> indépendants. Cela permet d'avoir plusieurs environnements Django sur un seul et même ordinateur. L'équipe de développement de Django elle-même recommande d'utiliser des environnements virtuels Python.</p> +<p>Ainsi, un développeur Python/Django confirmé lance généralement ses applications Python dans des <em>environnements virtuels Python</em> indépendants. Cela permet d'avoir plusieurs environnements Django sur un seul et même ordinateur. L'équipe de développement de Django elle-même recommande d'utiliser des environnements virtuels Python.</p> <p>Ce module suppose que vous avez installé Django dans un environnement virtuel, et nous vous montrons comment le faire ci-dessous.</p> <h2 id="Installer_Python_3">Installer Python 3</h2> -<p>Si vous souhaitez utiliser Django, vous devrez installer Python sur votre système d'exploitation. Si vous utilisez <em>Python 3</em>, vous aurez alors aussi besoin de l'outil <a href="https://pypi.python.org/pypi">Python Package Index</a> — <em>pip3</em> — qui est utilisé pour gérer (installer, mettre à jour, supprimer) les packages/librairies Python qui seront utilisés par Django et vos autres applications Python.</p> +<p>Si vous souhaitez utiliser Django, vous devrez installer Python sur votre système d'exploitation. Si vous utilisez <em>Python 3</em>, vous aurez alors aussi besoin de l'outil <a href="https://pypi.python.org/pypi">Python Package Index</a> — <em>pip3</em> — qui est utilisé pour gérer (installer, mettre à jour, supprimer) les packages/librairies Python qui seront utilisés par Django et vos autres applications Python.</p> <p>Cette section décrit brièvement comment vérifier quelle version de Python sont disponibles, et comment installer de nouvelles versions si nécessaire, sur Ubuntu Linux 18.04, macOS et Windows 10.</p> @@ -120,10 +120,9 @@ translation_of: Learn/Server-side/Django/development_environment <pre class="brush: bash"><span style="line-height: 1.5;">python3 -V Python 3.6.6</span></pre> -<p>Toutefois, l'outil d'Index des Packages Python dont vous aurez besoin pour installer des packages avec Python 3 (y compris Django) n'est <strong>pas </strong>disponible par défaut. Vous pouvez installer pip3 avec le terminal bash avec :</p> +<p>Toutefois, l'outil d'Index des Packages Python dont vous aurez besoin pour installer des packages avec Python 3 (y compris Django) n'est <strong>pas </strong>disponible par défaut. Vous pouvez installer pip3 avec le terminal bash avec :</p> -<pre class="brush: bash">sudo apt install python3-pip -</pre> +<pre class="brush: bash">sudo apt install python3-pip</pre> <h3 id="macOS">macOS</h3> @@ -132,13 +131,13 @@ translation_of: Learn/Server-side/Django/development_environment <pre class="brush: bash"><span style="line-height: 1.5;">python3 -V </span>-bash: python3: command not found</pre> -<p>Vous pouvez facilement installer Python 3 (ainsi que l'outil <em>pip3</em>) sur <a href="https://www.python.org/">python.org</a>:</p> +<p>Vous pouvez facilement installer Python 3 (ainsi que l'outil <em>pip3</em>) sur <a href="https://www.python.org/">python.org</a>:</p> <ol> <li>Téléchargez l'installeur requis : <ol> - <li>Allez sur <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li> - <li>Sélectionnez le bouton <strong>Download Python 3.7.2</strong> (le numéro de version mineure peut varier).</li> + <li>Allez sur <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li> + <li>Sélectionnez le bouton <strong>Download Python 3.7.2</strong> (le numéro de version mineure peut varier).</li> </ol> </li> <li>Localisez le fichier en utilisant le <em>Finder</em>, puis double-cliquez le fichier package. Suivez les consignes d'installation.</li> @@ -161,8 +160,8 @@ translation_of: Learn/Server-side/Django/development_environment <ol> <li>Téléchargez l'installeur requis : <ol> - <li>Allez sur <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li> - <li>Sélectionnez le bouton <strong>Download Python 3.7.2</strong> (le numéro de version mineure peut varier).</li> + <li>Allez sur <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li> + <li>Sélectionnez le bouton <strong>Download Python 3.7.2</strong> (le numéro de version mineure peut varier).</li> </ol> </li> <li>Installez Python en double-cliquant sur le fichier télécharger puis en suivant les consignes d'installation</li> @@ -186,66 +185,64 @@ translation_of: Learn/Server-side/Django/development_environment <h2 id="Utiliser_Django_dans_un_environnement_virtuel_Python">Utiliser Django dans un environnement virtuel Python</h2> -<p>Les librairies que nous utiliserons pour créer nos environnements virtuels seront <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (Linux et macOS) et <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> (Windows), , qui à leur tour utilisent l'outil <a href="https://developer.mozilla.org/en-US/docs/Python/Virtualenv">virtualenv</a>. Les outils d'habillage permettent de créer une interface consistante pour gérer les interfaces sur toutes les plateformes.</p> +<p>Les librairies que nous utiliserons pour créer nos environnements virtuels seront <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (Linux et macOS) et <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> (Windows), , qui à leur tour utilisent l'outil <a href="/fr/docs/Python/Virtualenv">virtualenv</a>. Les outils d'habillage permettent de créer une interface consistante pour gérer les interfaces sur toutes les plateformes.</p> <h3 id="Installer_lutilitaire_denvironnement_virtuel">Installer l'utilitaire d'environnement virtuel</h3> <h4 id="Mise_en_place_de_lenvironnement_virtuel_sur_Ubuntu">Mise en place de l'environnement virtuel sur Ubuntu</h4> -<p>Après avoir installé Python et pip vous pouvez installer <em>virtualenvwrapper</em> (qui inclut <em>virtualenv</em>). Le guide d'installation officiel peut être trouvé <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">ici</a>, ou bien vous pouvez suivre les instructions ci-dessous.</p> +<p>Après avoir installé Python et pip vous pouvez installer <em>virtualenvwrapper</em> (qui inclut <em>virtualenv</em>). Le guide d'installation officiel peut être trouvé <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">ici</a>, ou bien vous pouvez suivre les instructions ci-dessous.</p> -<p>Installer l'outil en utilisant <em>pip3</em>:</p> +<p>Installer l'outil en utilisant <em>pip3</em>:</p> -<pre class="brush: bash"><code>sudo pip3 install virtualenvwrapper</code></pre> +<pre class="brush: bash">sudo pip3 install virtualenvwrapper</pre> -<p>Ajoutez ensuite les lignes suivantes à la fin de votre fichier de configuration shell (le fichier caché <strong>.bashrc</strong> dans votre répertoire home). Elles indiquent les endroits où vos environnements virtuels seront installés, l'emplacement de vos projets de développement, et l'emplacement du script installé avec ce package :</p> +<p>Ajoutez ensuite les lignes suivantes à la fin de votre fichier de configuration shell (le fichier caché <strong>.bashrc</strong> dans votre répertoire home). Elles indiquent les endroits où vos environnements virtuels seront installés, l'emplacement de vos projets de développement, et l'emplacement du script installé avec ce package :</p> -<pre class="brush: bash"><code>export WORKON_HOME=$HOME/.virtualenvs +<pre class="brush: bash">export WORKON_HOME=$HOME/.virtualenvs export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 ' export PROJECT_HOME=$HOME/Devel -source /usr/local/bin/virtualenvwrapper.sh</code> -</pre> +source /usr/local/bin/virtualenvwrapper.sh</pre> <div class="note"> -<p><strong>Note</strong>: Les variables <code>VIRTUALENVWRAPPER_PYTHON</code> et <code>VIRTUALENVWRAPPER_VIRTUALENV_ARGS </code>pointent vers l'emplacement d'installation par défaut de Python3, et <code>source /usr/local/bin/virtualenvwrapper.sh</code> pointe vers l'emplacement par défaut du script <code>virtualenvwrapper.sh</code>. Si le <em>virtualenv</em> ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).<br> +<p><strong>Note</strong>: Les variables <code>VIRTUALENVWRAPPER_PYTHON</code> et <code>VIRTUALENVWRAPPER_VIRTUALENV_ARGS </code>pointent vers l'emplacement d'installation par défaut de Python3, et <code>source /usr/local/bin/virtualenvwrapper.sh</code> pointe vers l'emplacement par défaut du script <code>virtualenvwrapper.sh</code>. Si le <em>virtualenv</em> ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).<br> <br> - Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes <code>which virtualenvwrapper.sh</code> et <code>which python3</code>.</p> + Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes <code>which virtualenvwrapper.sh</code> et <code>which python3</code>.</p> </div> <p>Puis relancez le fichier de configuration en exécutant la commande suivante dans votre terminal :</p> -<pre class="brush: bash"><code>source ~/.bashrc</code></pre> +<pre class="brush: bash">source ~/.bashrc</pre> <p>Vous devriez alors voir apparaître plusieurs lignes de script semblables à celles ci-dessous :</p> -<pre class="brush: bash"><code>virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject +<pre class="brush: bash">virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject ... virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate -virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details</code> -</pre> +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details</pre> -<p>Vous pouvez maintenant créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>.</p> +<p>Vous pouvez maintenant créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>.</p> <h4 id="Mise_en_place_de_lenvironnement_virtuel_sur_macOS">Mise en place de l'environnement virtuel sur macOS</h4> -<p>L'installation de <em>virtualenvwrapper</em> on sur macOS est quasiment identique à celle sur Ubuntu (une fois de plus, vous pouvez suivre les instructions du <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">guide officiel d'installation</a> ou suivre les indications ci-dessous).</p> +<p>L'installation de <em>virtualenvwrapper</em> on sur macOS est quasiment identique à celle sur Ubuntu (une fois de plus, vous pouvez suivre les instructions du <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">guide officiel d'installation</a> ou suivre les indications ci-dessous).</p> -<p>Installez <em>virtualenvwrapper</em> (ainsi que <em>virtualenv</em>) en utilisant <em>pip</em> comme indiqué ci-dessous.</p> +<p>Installez <em>virtualenvwrapper</em> (ainsi que <em>virtualenv</em>) en utilisant <em>pip</em> comme indiqué ci-dessous.</p> -<pre class="brush: bash"><code>sudo pip3 install virtualenvwrapper</code></pre> +<pre class="brush: bash">sudo pip3 install virtualenvwrapper</pre> <p>Puis ajoutez les lignes suivantes à la fin de votre fichier de configuration shell.</p> -<pre class="brush: bash"><code>export WORKON_HOME=$HOME/.virtualenvs +<pre class="brush: bash">export WORKON_HOME=$HOME/.virtualenvs export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 export PROJECT_HOME=$HOME/Devel -source /usr/local/bin/virtualenvwrapper.sh</code></pre> +source /usr/local/bin/virtualenvwrapper.sh</pre> <div class="note"> -<p><strong>Note</strong>: La variable <code>VIRTUALENVWRAPPER_PYTHON</code> pointe vers l'emplacement d'installation par défaut de Python3, et <code>source /usr/local/bin/virtualenvwrapper.sh</code> pointe vers l'emplacement par défaut du script <code>virtualenvwrapper.sh</code>. Si le <em>virtualenv</em> ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).</p> +<p><strong>Note</strong>: La variable <code>VIRTUALENVWRAPPER_PYTHON</code> pointe vers l'emplacement d'installation par défaut de Python3, et <code>source /usr/local/bin/virtualenvwrapper.sh</code> pointe vers l'emplacement par défaut du script <code>virtualenvwrapper.sh</code>. Si le <em>virtualenv</em> ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).</p> <p>Par exemple, une installation test sur macOS a résulté en l'ajout des lignes suivantes dans le fichier startup :</p> @@ -254,51 +251,49 @@ export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3. export PROJECT_HOME=$HOME/Devel source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh</pre> -<p>Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes <code>which virtualenvwrapper.sh</code> et <code>which python3</code>.</p> +<p>Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes <code>which virtualenvwrapper.sh</code> et <code>which python3</code>.</p> </div> -<p>Ce sont les mêmes lignes que pour Ubuntu, mais le nom du fichier de configuration caché du répertoire home est différent : <strong>.bash_profile</strong> dans votre répertoire home.</p> +<p>Ce sont les mêmes lignes que pour Ubuntu, mais le nom du fichier de configuration caché du répertoire home est différent : <strong>.bash_profile</strong> dans votre répertoire home.</p> <div class="note"> <p><strong>Note</strong>: Si vous n'arrivez pas à trouver le fichier <strong>.bash_profile</strong> depuis le finder, vous pouvez aussi l'ouvrir depuis le terminal en utilisant nano.</p> <p>La commande sera la suivante :</p> -<pre><code>cd ~ # Naviguer vers le répertoire home +<pre>>cd ~ # Naviguer vers le répertoire home ls -la # Listez le contenu du répertoire. Vous devriez voir .bash_profile. nano .bash_profile # Ouvrez le fichier avec l'éditeur de texte nano, depuis le terminal. # Allez à la fin du fichier, puis copiez-collez les lignes ci-dessus. -# Utilisez Ctrl+X pour quitter nano, sélectionnez Y pour sauvegarder le fichier.</code> -</pre> +# Utilisez Ctrl+X pour quitter nano, sélectionnez Y pour sauvegarder le fichier.</pre> </div> <p>Puis relancez le fichier de configuration en appelant la ligne suivante depuis le terminal :</p> -<pre class="brush: bash"><code>source ~/.bash_profile</code></pre> +<pre class="brush: bash">source ~/.bash_profile</pre> -<p>Vous devriez alors voir apparaître plusieurs lignes de script (les mêmes scripts que ceux présents dans l'installation Ubuntu). Vous devriez maintenant pouvoir créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>.</p> +<p>Vous devriez alors voir apparaître plusieurs lignes de script (les mêmes scripts que ceux présents dans l'installation Ubuntu). Vous devriez maintenant pouvoir créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>.</p> <h4 id="Mise_en_place_de_lenvironnement_virtuel_sur_Windows_10">Mise en place de l'environnement virtuel sur Windows 10</h4> -<p>Installer <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> est encore plus simple qu'installer <em>virtualenvwrapper</em> , parce que vous n'avez pas besoin de configurer là où l'outil enregistre les informations de l'environnement virtuel (il y a des valeurs par défaut). Tout ce que vous avez besoin de faire est de lancer la commande suivante depuis l'invite de commande :</p> +<p>Installer <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> est encore plus simple qu'installer <em>virtualenvwrapper</em> , parce que vous n'avez pas besoin de configurer là où l'outil enregistre les informations de l'environnement virtuel (il y a des valeurs par défaut). Tout ce que vous avez besoin de faire est de lancer la commande suivante depuis l'invite de commande :</p> -<pre><code>pip3 install virtualenvwrapper-win</code></pre> +<pre>pip3 install virtualenvwrapper-win</pre> -<p>Vous pouvez désormais créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code></p> +<p>Vous pouvez désormais créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code></p> <h3 id="Créer_un_environnement_virtuel">Créer un environnement virtuel</h3> -<p>Maintenant que vous avez installé <em>virtualenvwrapper</em> ou <em>virtualenvwrapper-win</em> , travailler avec des environnements virtuels sera une tâche très similaire entre chaque plateforme.</p> +<p>Maintenant que vous avez installé <em>virtualenvwrapper</em> ou <em>virtualenvwrapper-win</em> , travailler avec des environnements virtuels sera une tâche très similaire entre chaque plateforme.</p> -<p>Vous pouvez désormais créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>. Lors de son exécution, vous pourrez voir l'environnement être configuré (ce que vous verrez changera légèrement en fonction de votre plateforme). Lorsque l'exécution de la commande sera terminée, votre environnement virtuel sera actif — vous pouvez voir au début de la ligne de commande le nom de votre environnement entre parenthèses (nous vous montrons le résultat pour Ubuntu ci-dessous, mais la dernière ligne est similaire sur Windows/macOS).</p> +<p>Vous pouvez désormais créer un nouvel environnement virtuel avec la commande <code>mkvirtualenv</code>. Lors de son exécution, vous pourrez voir l'environnement être configuré (ce que vous verrez changera légèrement en fonction de votre plateforme). Lorsque l'exécution de la commande sera terminée, votre environnement virtuel sera actif — vous pouvez voir au début de la ligne de commande le nom de votre environnement entre parenthèses (nous vous montrons le résultat pour Ubuntu ci-dessous, mais la dernière ligne est similaire sur Windows/macOS).</p> -<pre><code>$ mkvirtualenv my_django_environment +<pre>$ mkvirtualenv my_django_environment Running virtualenv with interpreter /usr/bin/python3 ... virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details -(my_django_environment) ubuntu@ubuntu:~$</code> -</pre> +(my_django_environment) ubuntu@ubuntu:~$</pre> <p>Maintenant que vous êtes dans votre environnement virtuel vous pouvez installer Django et commencer à développer.</p> @@ -311,18 +306,17 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get <p>Il y a quelques commandes que vous devriez connaître (il y en a davantage dans la documentation de l'outil, mais celles-ci sont celles que vous utiliserez le plus souvent) :</p> <ul> - <li><code>deactivate</code> — Permet de sortir de l'environnement virtuel Python actuel</li> - <li><code>workon</code> — Lister tous les environnements virtuels disponibles</li> - <li><code>workon name_of_environment</code> — Activer l'environnement virtuel spécifié</li> - <li><code>rmvirtualenv name_of_environment</code> — Supprimer l'environnement virtuel spécifié</li> + <li><code>deactivate</code> — Permet de sortir de l'environnement virtuel Python actuel</li> + <li><code>workon</code> — Lister tous les environnements virtuels disponibles</li> + <li><code>workon name_of_environment</code> — Activer l'environnement virtuel spécifié</li> + <li><code>rmvirtualenv name_of_environment</code> — Supprimer l'environnement virtuel spécifié</li> </ul> <h2 id="Installer_Django">Installer Django</h2> -<p>Une fois que vous avez créé votre environnement virtuel, et que vous avez utilisé <code>workon</code> pour y entrer, vous pouvez utiliser <em>pip3 </em>pour installer Django. </p> +<p>Une fois que vous avez créé votre environnement virtuel, et que vous avez utilisé <code>workon</code> pour y entrer, vous pouvez utiliser <em>pip3 </em>pour installer Django. </p> -<pre class="brush: bash">pip3 install django -</pre> +<pre class="brush: bash">pip3 install django</pre> <p>Vous pouvez tester l'installation de Django en exécutant la commande suivante (celle-ci ne fait que tester le fait que Python puisse trouver le module Django) :</p> @@ -332,8 +326,7 @@ python3 -m django --version # Windows py -3 -m django --version - 2.1.5 -</pre> + 2.1.5</pre> <div class="note"> <p><strong>Note</strong>: Si la commande Windows ci-dessus n'indique aucun module Django présent, essayez :</p> @@ -344,7 +337,7 @@ py -3 -m django --version </div> <div class="warning"> -<p><strong>Important</strong>: Le reste de ce <strong>module </strong>utilise les commandes <em>Linux</em> pour invoquer Python 3 (<code>python3</code>) . . Si vous travaillez sous <em>Windows </em>, remplacez simplement ce préfixe avec : <code>py -3</code></p> +<p><strong>Important</strong>: Le reste de ce <strong>module </strong>utilise les commandes <em>Linux</em> pour invoquer Python 3 (<code>python3</code>) . . Si vous travaillez sous <em>Windows </em>, remplacez simplement ce préfixe avec : <code>py -3</code></p> </div> <h2 id="Tester_votre_installation">Tester votre installation</h2> @@ -352,15 +345,14 @@ py -3 -m django --version <p>Les tests ci-dessus fonctionnent, mais ne font rien de très divertissant. Un test plus intéressant consiste à créer un projet squelette et de voir si il fonctionne. Pour ce faire, naviguez tout d'abord dans votre invite/terminal de commande à l'endroit où vous désirez stocker vos applications Django. Créez un dossier pour votre site test et placez-vous dedans.</p> <pre class="brush: bash">mkdir django_test -cd django_test -</pre> +cd django_test</pre> -<p>Vous pouvez ensuite créer un nouveau site squelette intitulé "<em>mytestsite</em>" utilisant l'outil <strong>django-admin</strong> omme montré. Après avoir créé le site, vous pouvez naviguer dans le dossier où vous trouverez le script principal pour gérer vos projets, intitulé <strong>manage.py</strong>.</p> +<p>Vous pouvez ensuite créer un nouveau site squelette intitulé "<em>mytestsite</em>" utilisant l'outil <strong>django-admin</strong> omme montré. Après avoir créé le site, vous pouvez naviguer dans le dossier où vous trouverez le script principal pour gérer vos projets, intitulé <strong>manage.py</strong>.</p> <pre class="brush: bash">django-admin startproject mytestsite cd mytestsite</pre> -<p>Nous pouvons lancer le <em>serveur web de développement</em> depuis ce dossier en utilisant <strong>manage.py</strong> et la commande <code>runserver</code> command, comme indiqué ci-dessous.</p> +<p>Nous pouvons lancer le <em>serveur web de développement</em> depuis ce dossier en utilisant <strong>manage.py</strong> et la commande <code>runserver</code> command, comme indiqué ci-dessous.</p> <pre class="brush: bash">$ python3 manage.py runserver Performing system checks... @@ -377,20 +369,18 @@ Quit the server with CONTROL-C. </pre> <div class="note"> -<p><strong>Note </strong>: La commande ci-dessus montre le résultat de l'exécution sur Linux/macOS. Vous pouvez ignorer les warnings à propos des "15 unapplied migration(s)" à partir de là !</p> +<p><strong>Note </strong>: La commande ci-dessus montre le résultat de l'exécution sur Linux/macOS. Vous pouvez ignorer les warnings à propos des "15 unapplied migration(s)" à partir de là !</p> </div> -<p>Maintenant que votre serveur est lancé, vous pouvez voir le site en naviguant vers l'URL suivante depuis votre navigateur local : <code>http://127.0.0.1:8000/</code>. Vous devriez voir un site ressemblant à celui-ci :<br> - <img alt="Django Skeleton App Homepage - Django 2.0" src="https://mdn.mozillademos.org/files/16288/Django_Skeleton_Website_Homepage_2_1.png" style="height: 714px; width: 806px;"></p> +<p>Maintenant que votre serveur est lancé, vous pouvez voir le site en naviguant vers l'URL suivante depuis votre navigateur local : <code>http://127.0.0.1:8000/</code>. Vous devriez voir un site ressemblant à celui-ci :</p> -<ul> -</ul> +<p><img alt="Django Skeleton App Homepage - Django 2.0" src="django_skeleton_website_homepage_2_1.png"></p> <h2 id="Résumé">Résumé</h2> <p>Vous avez maintenant un environnement de développement Django fonctionnel et opérationnel sur votre ordinateur.</p> -<p>Dans la section test vous avez aussi vu comment créer un nouveau site web Django en utilisant <code>django-admin startproject</code>, et comment aller dessus depuis votre navigateur en utilisant le serveur de développement web (<code>python3 manage.py runserver</code>). Dans le prochain article nous détaillerons ce processus, et créant un application web simple mais complète.</p> +<p>Dans la section test vous avez aussi vu comment créer un nouveau site web Django en utilisant <code>django-admin startproject</code>, et comment aller dessus depuis votre navigateur en utilisant le serveur de développement web (<code>python3 manage.py runserver</code>). Dans le prochain article nous détaillerons ce processus, et créant un application web simple mais complète.</p> <h2 id="See_also">See also</h2> @@ -405,19 +395,19 @@ Quit the server with CONTROL-C. <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> </ul> diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html index b905f66546..2f6aa2a4b6 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -1,5 +1,5 @@ --- -title: Understanding client-side JavaScript frameworks +title: Comprendre les frameworks JavaScript côté client slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks tags: - Beginner @@ -14,24 +14,24 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks <p class="summary">Les frameworks JavaScript sont une partie essentielle du développement web front-end moderne, fournissant aux développeurs des outils éprouvés pour construire des applications web évolutives et interactives. De nombreuses entreprises modernes utilisent des frameworks comme un élément normé de leur outillage, de sorte que de nombreux emplois de développement front-end requièrent désormais une expérience avec ces frameworks.</p> -<p class="summary">En tant que futur développeur front-end, il peut être difficile de savoir par où commencer lors de l'apprentissage des frameworks – il y a tant de frameworks si différents les uns des autres et de nouveaux qui apparaissent sans cesse, ils fonctionnent généralement de manière similaire mais font certaines choses différemment, et il y a certaines choses spécifiques à avoir en tête lors de leur utilisation.</p> +<p>En tant que futur développeur front-end, il peut être difficile de savoir par où commencer lors de l'apprentissage des frameworks – il y a tant de frameworks si différents les uns des autres et de nouveaux qui apparaissent sans cesse, ils fonctionnent généralement de manière similaire mais font certaines choses différemment, et il y a certaines choses spécifiques à avoir en tête lors de leur utilisation.</p> -<p class="summary"><span class="tlid-translation translation" lang="fr"><span title="">Dans cet ensemble d'articles, nous chercherons à vous donner un point de départ confortable pour vous aider à commencer votre apprentissage </span></span>des frameworks. <span class="tlid-translation translation" lang="fr"><span title="">Nous ne visons pas à vous enseigner exhaustivement tout ce que vous devez savoir sur React / ReactDOM, Vue ou quelque autre framework particulier</span></span> ; <span class="tlid-translation translation" lang="fr"><span title="">les documentations fournises par les équipes de développement des frameworks font déjà ce travail.</span> N<span title="">ous souhaitons plutôt faire simple et répondre d'abord à des questions plus fondamentales telles que </span></span>:</p> +<p>Dans cet ensemble d'articles, nous chercherons à vous donner un point de départ confortable pour vous aider à commencer votre apprentissage des frameworks. Nous ne visons pas à vous enseigner exhaustivement tout ce que vous devez savoir sur React / ReactDOM, Vue ou quelque autre framework particulier ; les documentations fournises par les équipes de développement des frameworks font déjà ce travail. Nous souhaitons plutôt faire simple et répondre d'abord à des questions plus fondamentales telles que :</p> <ul> - <li class="summary">Pourquoi devrais-je utiliser un framework ? Quels problèmes résolvent-ils pour moi ?</li> - <li class="summary">Quelles questions devrais-je me poser pour choisir un framework ? Ai-je au moins besoin d'un framework ?</li> - <li class="summary">Quelles fonctionnalités proposent les frameworks ? Comment fonctionnent-ils en général et comment diffèrent leurs implantations de ces fonctionnalités ?</li> - <li class="summary">Comment se rapportent-ils au JavaScript "vanilla" ou à l'HTML ?</li> + <li>Pourquoi devrais-je utiliser un framework ? Quels problèmes résolvent-ils pour moi ?</li> + <li>Quelles questions devrais-je me poser pour choisir un framework ? Ai-je au moins besoin d'un framework ?</li> + <li>Quelles fonctionnalités proposent les frameworks ? Comment fonctionnent-ils en général et comment diffèrent leurs implantations de ces fonctionnalités ?</li> + <li>Comment se rapportent-ils au JavaScript "vanilla" ou à l'HTML ?</li> </ul> -<p class="summary">Après ceci, nous vous fournirons quelques tutoriels couvrant les notions fondamentales de certains des principaux frameworks afin de vous fournir suffisamment de contexte et de familiarité pour commencer à approfondir par vous-même. Nous voulons que vous puissiez progresser et en apprendre plus sur les frameworks de manière pragmatique sans oublier les bonnes pratiques fondamentales du web telles que l'accessibilité.</p> +<p>Après ceci, nous vous fournirons quelques tutoriels couvrant les notions fondamentales de certains des principaux frameworks afin de vous fournir suffisamment de contexte et de familiarité pour commencer à approfondir par vous-même. Nous voulons que vous puissiez progresser et en apprendre plus sur les frameworks de manière pragmatique sans oublier les bonnes pratiques fondamentales du web telles que l'accessibilité.</p> -<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Commencez dès maintenant, avec "Introduction aux frameworks côté client"</a></strong></p> +<p><strong><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Commencez dès maintenant, avec "Introduction aux frameworks côté client"</a></strong></p> <h2 id="Prérequis">Prérequis</h2> -<p>Vous devez vraiment connaitre les bases des principaux langages du web (<a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, et particulièrement <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>) avant d'essayer de vous lancer dans l'apprentissage des frameworks côté client.</p> +<p>Vous devez vraiment connaitre les bases des principaux langages du web (<a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, et particulièrement <a href="/fr/docs/Learn/JavaScript">JavaScript</a>) avant d'essayer de vous lancer dans l'apprentissage des frameworks côté client.</p> <p>Votre code n'en sera que plus qualitatif et plus professionnel, et vous serez en mesure de résoudre vos problèmes avec plus de confiance si vous comprenez les fonctionnalités fondamentales du web sur lesquelles les frameworks s'appuient.</p> @@ -39,121 +39,121 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks <p>Nous avons créé un cours qui inclut toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Commencer</a></p> +<p><a href="/fr/docs/Learn/Front-end_web_developer">Commencer</a></p> <h2 id="Guides_dintroduction">Guides d'introduction</h2> <dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction aux frameworks côté client</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction aux frameworks côté client</a></dt> <dd>Nous commençons notre aperçu des frameworks par un tour d'horizon général du domaine, notamment en regardant un bref historique de JavaScript et des frameworks, la raison pour laquelle les frameworks existent et ce qu'ils nous proposent, comment commencer à réfléchir au choix d'un framework à apprendre et quelles alternatives il y a aux frameworks côté client.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Principales caractéristiques du Framework</a></dt> - <dd>Chaque framework JavaScript majeur a une approche différente de la mise à jour du DOM, de la gestion des évènements du navigateur et de la manière dont rendre l'expérience de développement agréable. Cet article explorera les principales caractéristiques des 4 grands frameworks, <span class="tlid-translation translation" lang="fr"><span title="">en examinant comment les frameworks ont tendance à fonctionner à un haut niveau et les différences entre eux.</span></span></dd> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Principales caractéristiques du Framework</a></dt> + <dd>Chaque framework JavaScript majeur a une approche différente de la mise à jour du DOM, de la gestion des évènements du navigateur et de la manière dont rendre l'expérience de développement agréable. Cet article explorera les principales caractéristiques des 4 grands frameworks, en examinant comment les frameworks ont tendance à fonctionner à un haut niveau et les différences entre eux.</dd> </dl> <h2 id="Tutoriels_sur_React">Tutoriels sur React</h2> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Les tutoriels sur React ont été essayés pour la dernière fois en mai 2020, avec React/ReactDOM 16.13.1 et create-react-app 3.4.1.</p> +<div class="note"> +<p><strong>Note :</strong> Les tutoriels sur React ont été essayés pour la dernière fois en mai 2020, avec React/ReactDOM 16.13.1 et create-react-app 3.4.1.</p> <p>Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version finale de l'exemple de code d'application React dans notre <a href="https://github.com/mdn/todo-react">todo-react repository</a>. Pour une version exécutable en direct, voir <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p> </div> <dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Premier pas avec React</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Premier pas avec React</a></dt> <dd>Dans cet article, nous dirons bonjour à React. Nous découvrirons les prémices de son fonctionnement et de ses cas d'utilisation, configurerons une chaine d'outils React de base sur notre ordinateur local et créerons et jouerons avec une application de démarrage simple, en apprenant un peu plus sur le fonctionnement de React dans le processus.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Début de notre liste de tâches React</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Début de notre liste de tâches React</a></dt> <dd>Supposons que nous ayons été chargés de créer une preuve de concept dans React – une application qui permet aux utilisateurs d'ajouter, de modifier et de supprimer les tâches sur lesquelles ils souhaitent travailler, ainsi que de marquer les tâches comme terminées sans les supprimer. Cet article vous guidera tout au long de la mise en place de la structure et du style des composants de base de l'application, prêts pour la définition et l'interactivité des composants individuels, que nous ajouterons plus tard.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Diviser notre application React en composants</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Diviser notre application React en composants</a></dt> <dd>À ce stade, notre application est un monolithe. Avant de pouvoir lui faire faire des choses, nous devons le diviser en composants descriptifs gérables. React n'a pas de règles strictes pour ce qui est et n'est pas un composant - c'est à vous de décider ! Dans cet article, nous allons vous montrer un moyen judicieux de diviser notre application en composants.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. Interactivité de React: évènements et états</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. Interactivité de React: évènements et états</a></dt> <dd>Une fois notre plan de composants élaboré, il est maintenant temps de commencer à faire évoluer notre application d'une interface utilisateur complètement statique vers une interface qui nous permet réellement d'interagir et de modifier des choses. Dans cet article, nous allons le faire, en explorant les évènements et les états en cours de route.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. Interactivité de React: modification, filtrage, rendu conditionné</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. Interactivité de React: modification, filtrage, rendu conditionné</a></dt> <dd>Alors que nous approchons de la fin de notre voyage React (pour l'instant du moins), <span class="tlid-translation translation" lang="fr"><span title="">nous ajouterons la touche finale aux principaux domaines de fonctionnalités de notre application de liste de tâches</span></span>. Cela comprend la possibilité de modifier les tâches existantes et de filtrer la liste des tâches entre toutes les tâches, terminées et incomplètes. Nous examinerons le rendu conditionné de l'interface utilisateur en cours de route.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibilité dans React</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibilité dans React</a></dt> <dd>Dans notre avant-dernier article du tutoriel, nous nous concentrerons sur l'accessibilité, y compris la gestion de la mise au point dans React, ce qui peut améliorer la convivialité et réduire la confusion pour les utilisateurs de clavier uniquement et de lecteur d'écran.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. Ressources sur React</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. Ressources sur React</a></dt> <dd>Notre dernier article vous fournit une liste de ressources sur React que vous pouvez utiliser pour aller plus loin dans votre apprentissage.</dd> </dl> <h2 id="Tutoriels_sur_Ember">Tutoriels sur Ember</h2> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Les tutoriels Ember ont été essayés pour la dernière fois en Mai 2020, avec Ember/Ember CLI version 3.18.0.</p> +<div class="note"> +<p><strong>Note :</strong> Les tutoriels Ember ont été essayés pour la dernière fois en Mai 2020, avec Ember/Ember CLI version 3.18.0.</p> <p>Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version finale de l'exemple de code d'application Ember dans le Ember app code in the <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>. Pour une version exécutable en direct, voir <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (cela inclut également quelques fonctionnalités supplémentaires non couvertes dans le tutoriel).</p> </div> <dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Premiers pas avec Ember</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Premiers pas avec Ember</a></dt> <dd>Dans notre premier article sur Ember, nous verrons comment fonctionne Ember et ce à quoi il sert, installerons la chaine d'outils d'Ember localement, créerons un exemple d'application, puis effectuerons une configuration initiale pour la préparer au développement.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Structure et composant de l'application Ember</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Structure et composant de l'application Ember</a></dt> <dd>Dans cet article, nous commencerons à planifier la structure de notre application TodoMVC Ember, à ajouter du code HTML correspondant, puis nous diviserons cette structure HTML en composants.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Interactivité Ember : évènements, classes et états</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Interactivité Ember : évènements, classes et états</a></dt> <dd>À ce stade, nous allons commencer à ajouter de l'interactivité à notre application, offrant la possibilité d'ajouter et d'afficher de nouveaux éléments à notre liste. En cours de route, nous examinerons l'utilisation d'évènements dans Ember, la création de classes de composants pour contenir du code JavaScript pour contrôler les fonctionnalités interactives et la configuration d'un service pour suivre l'état des données de notre application.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Interactivité Ember : fonctionnalité du Footer, rendu conditionné</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Interactivité Ember : fonctionnalité du Footer, rendu conditionné</a></dt> <dd>Il est maintenant temps de commencer à aborder la fonctionnalité de footer dans notre application. Ici, nous allons mettre à jour le compteur de tâches pour afficher le nombre correct de tâches à compléter et appliquer correctement le style aux tâches terminées (c'est-à-dire là dont la case a été cochée). Nous allons également câbler notre bouton "Effacer terminé". En cours de route, nous découvrirons comment utiliser le rendu conditionné dans nos modèles.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routage dans Ember</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routage dans Ember</a></dt> <dd>Dans cet article, nous apprendrons les bases du routage avec Ember. Nous l'utiliserons pour fournir une URL unique pour chacune des trois vues à faire : "Tous", "Actif", et "Terminé".</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ressources sur Ember et dépannage</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ressources sur Ember et dépannage</a></dt> <dd>Notre dernier article sur Ember vous fournit une liste de ressources que vous pouvez utiliser pour aller plus loin dans votre apprentissage, ainsi que des dépannages utiles et d'autres informations.</dd> </dl> <h2 id="Tutoriels_sur_Vue">Tutoriels sur Vue</h2> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Les tutoriels sur Vue ont été essayés pour la dernière fois en mai 2020, avec Vue 2.6.11.</p> +<div class="note"> +<p><strong>Note :</strong> Les tutoriels sur Vue ont été essayés pour la dernière fois en mai 2020, avec Vue 2.6.11.</p> <p>Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version terminée de l'exemple de code d'application Vue dans notre <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>. Pour une version exécutable en direct, voir <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p> </div> <dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Premiers pas avec Vue</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Premiers pas avec Vue</a></dt> <dd>Maintenant, introduisons Vue, le troisième de nos frameworks. Dans cet article, nous allons examiner un peu le contexte de Vue, apprendre à l'installer et créer un nouveau projet, étudier la structure de haut niveau de l'ensemble du projet et d'un composant individuel, voir comment exécuter le projet localement, et préparez-le à commencer à construire notre exemple.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Création de notre premier composant Vue</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Création de notre premier composant Vue</a></dt> <dd>Il est maintenant temps de plonger plus profondément dans Vue et de créer notre propre composant personnalisé (nous commencerons par créer un composant pour représenter chaque élément de la liste de tâches). En cours de route, nous découvrirons quelques concepts importants tels que l'appel de composants à l'intérieur d'autres composants, leur transmission de données via des accessoires et l'enregistrement de l'état des données.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendu d'une liste de composants Vue</a></dt> - <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">À ce stade, nous avons un composant entièrement fonctionnel ; nous sommes maintenant prêts à ajouter plusieurs composants <code>ToDoItem</code> à notre application. Dans cet article, nous examinerons l'ajout d'un ensemble de données d'élément todo à notre composant <code>App.vue</code> que nous allons ensuite parcourir et afficher à l'intérieur des composants <code>ToDoItem</code> à l'aide de la directive <code>v-for</code>. </span></dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Ajout d'un nouveau formulaire todo: évènements, méthodes, et modèles Vue</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendu d'une liste de composants Vue</a></dt> + <dd>À ce stade, nous avons un composant entièrement fonctionnel ; nous sommes maintenant prêts à ajouter plusieurs composants <code>ToDoItem</code> à notre application. Dans cet article, nous examinerons l'ajout d'un ensemble de données d'élément todo à notre composant <code>App.vue</code> que nous allons ensuite parcourir et afficher à l'intérieur des composants <code>ToDoItem</code> à l'aide de la directive <code>v-for</code>.</dd> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Ajout d'un nouveau formulaire todo: évènements, méthodes, et modèles Vue</a></dt> <dd>Nous avons maintenant des exemples de données en place et une boucle qui prend chaque bit de données et le rend dans un <code>ToDoItem</code> dans notre application. Ce dont nous avons vraiment besoin ensuite, c'est la possibilité de permettre à nos utilisateurs de saisir leurs propres éléments à faire dans l'application, et pour cela, nous aurons besoin d'un texte <code><input></code>, un évènement à déclencher lorsque les données sont soumises, une méthode de déclenchement lors de la soumission pour ajouter les données et relancer la liste, et un modèle pour contrôler les données. C'est ce que nous allons couvrir dans cet article.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styliser les composants Vue avec CSS</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styliser les composants Vue avec CSS</a></dt> <dd>Le moment est enfin venu de rendre notre application un peu plus jolie. Dans cet article, nous explorerons les différentes façons de styliser les composants Vue avec CSS.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Utilisation des propriétés calculées de Vue</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Utilisation des propriétés calculées de Vue</a></dt> <dd>Dans cet article, nous allons ajouter un compteur qui affiche le nombre d'éléments à faire terminés, en utilisant une fonctionnalité de Vue appelée propriétés calculées. Celles-ci fonctionnent de la même manière que les méthodes, mais ne sont réexécutées que lorsque l'une de leurs dépendances change.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Rendu conditionnel Vue : éditer les todos existants</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Rendu conditionnel Vue : éditer les todos existants</a></dt> <dd>Il est maintenant temps d'ajouter l'un des éléments majeurs de la fonctionnalité qui nous manque toujours: la possibilité de modifier les éléments todos existants. Pour ce faire, nous profiterons des capacités de rendu conditionnel de Vue — à savoir <code>v-if</code> et <code>v-else</code> — pour nous permettre de basculer entre la vue d'élément todo existante et une vue d'édition où vous pouvez mettre à jour les étiquettes d'élément todo. Nous examinerons également l'ajout de fonctionnalités pour supprimer les éléments todo.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Gestion de la mise au poinr avec les références de Vue</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Gestion de la mise au poinr avec les références de Vue</a></dt> <dd>Nous en avons presque terminé avec Vue. La dernière fonctionnalité à implanter est la gestion de la mise au point, ou en d'autres termes, la façon dont nous pouvons améliorer l'accessibilité du clavier de notre application. Nous allons examiner l'utilisation des références de Vue pour gérer cela, une fonctionnalité avancée qui vous permet d'avoir un accès direct aux nœuds DOM sous-jacents sous le DOM virtuel, ou un accès direct d'un composant à la structure DOM interne d'un composant enfant.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Ressources Vue</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Ressources Vue</a></dt> <dd>Nous allons maintenant terminer notre étude de Vue en vous donnant une liste de ressources que vous pouvez utiliser pour aller plus loin dans votre apprentissage, ainsi que d'autres conseils utiles.</dd> </dl> <h2 id="Tutoriels_sur_Svelte">Tutoriels sur Svelte</h2> -<div class="blockIndicator note"> +<div class="note"> <p>Note : Les tutoriels sur Svelte ont été essayés pour la dernière fois en aout 2020, avec Svelte 3.24.1.</p> <p>Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version terminée de l'exemple eu code de l'application Svelte (tel qu'il est après chaque chapitre) dans le dépôt <a href="https://github.com/opensas/mdn-svelte-tutorial">mdn-svelte-tutorial</a>. Pour une version exécutable en direct, voir <a href="https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2">https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2</a>.</p> </div> <dl> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">1. Premiers pas avec Svelte</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">1. Premiers pas avec Svelte</a></dt> <dd>Dans cet articles, nous vous proposerons une brève introduction au framework Svelte. Nous verrons comment Svelte fonctionne et qu'est-ce qui le rend si différent des autrse frameworks et outils que nous avons vus jusqu'à présent. Ensuite, nous apprendronds à mettre en place notre environnement de développement, créerons une application démonstrative, appréhenderons la structure du projet et nous verrons comment la mettre en oeuvre localement puis la compiler pour la mettre en production.</dd> </dl> <dl> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">2. Commencer notre application todolist avec Svelte</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">2. Commencer notre application todolist avec Svelte</a></dt> <dd>Maintenant que nous avons compris les bases du fonctionnement de Svelte, nous pouvons commencer à construirer application démonstrative : une liste de tâches. Dans cet article, nous verrons d'abord les fonctionnalités attendues dans notre application, puis nous créerons un composant Todos.svelte et mettrons en place un HTML statique et du CSS, prêts pour commencer le développement des fonctionnalités de notre application de liste de tâches avec laquelle nous continuerons dans les articles suivants.</dd> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">3. Comportements dynamiques dans Svelte : travailler avec les variables et les propriétés</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">3. Comportements dynamiques dans Svelte : travailler avec les variables et les propriétés</a></dt> <dd>Maintenant que nous avons HTML et notre CSS, nous pouvons commencer le développement des fonctionnalités attendues pour notre application de liste de tâches Svelte. Dans cet article, nous utiliserons des variables et propriétés pour rendre notre application dynamique, nous permettant d'ajouter et de supprimer des tâches, de les marquer comme terminées et de les filter par état.</dd> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">4. Diviser notre application Svelte en composants</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">4. Diviser notre application Svelte en composants</a></dt> <dd>L'objectif principal de cet article est de voir comment nous pouvons diviser notre application en composants gérables et partager l'information entre eux. Nous décomposerons notre application puis y ajouterons plus de fonctionnalités pour permettre aux utilisateurs de modifier des composants existants.</dd> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">5. Svelte avancé : réactivité, cycle de vie et accessibilité</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">5. Svelte avancé : réactivité, cycle de vie et accessibilité</a></dt> <dd>Dans cet articles, nous ajouterons les dernières fonctionnalités de l'application et nous pousserons la décomposition de notre application encore plus loin. Nous apprendrons comment résoudre des problèmes de réactivité liés à la mise à jour d'objets et de tableaux. Pour éviter les erreurs communes, nous devrons nous explorer plus profondément le système de réactivité de Svelte. nous verrons aussi comment résoudre certaines problèmes de mise au point pour l'accessibilité et plus encore.</dd> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">6. Travailler avec le stockage de Svelte</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">6. Travailler avec le stockage de Svelte</a></dt> <dd>Dans cet article, nous vous montrerons une autre manière de gérer les états avec Svelte : les stockages Stores. Les Stores sont des répertoires de données globaux qui contiennent des valeurs. Les composants peuvent s'abonner aux stockages et recevoir des notifications que leurs valeurs changent.</dd> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">7. Support de TypeScript avec Svelte</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">7. Support de TypeScript avec Svelte</a></dt> <dd>Nous allons maintenant apprendre à utiliser TypeScript dans nos applications Svelte. D'abord, nous apprendrons ce qu'est TypeScript et quels bénéfices il peut nous apporter, puis nous verrons ensemble comment configurer notre projet pour travailler avec des fichiers TypeScript. Enfin, nous parcourerons notre application pour voir ce que nous pouvons y changer pour tirer pleinement parti des fonctionnalités de TypeScript.</dd> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">8. Déploiement et étapes suivantes</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">8. Déploiement et étapes suivantes</a></dt> <dd>Dans ce dernier article, nous verrons comment déployer votre application et la mettre en ligne et nous vous partagerons quelques-unes des ressources auxquelles vous devriez jeter un oeil pour poursuivre votre apprentissage de Svelte.</dd> </dl> @@ -166,7 +166,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks <ul> <li>Ce sont des outils populaires qui dureront un certain temps – comme avec tout outil logiciel, il est bon de s'en tenir à des outils activement développés et qui ne seront probablement pas interrompus la semaine prochaine et qui constitueront des atouts considérables à vos compétences lorsque vous cherchez un emploi,</li> <li>Ils ont des communautés solides et de bonnes documentations. C'est très important pour être en mesure de recevoir de l'aide lors de votre apprentissage d'un sujet complexe, surtout lorsque vous débutez.</li> - <li>Nous n'avons pas les ressources nécessaires pour couvrir <em>tous</em> les frameworks modernes. <span class="tlid-translation translation" lang="fr"><span title="">De toute façon, cette liste serait très difficile à tenir à jour car de nouveaux apparaissent tout le temps.</span></span></li> + <li>Nous n'avons pas les ressources nécessaires pour couvrir <em>tous</em> les frameworks modernes. De toute façon, cette liste serait très difficile à tenir à jour car de nouveaux apparaissent tout le temps.</li> <li>En tant que débutant, choisir sur quoi se pencher parmi le grand nombre de choix disponibles est un problème très réel. Faire en sorte que cette liste soit courte est donc utile.</li> </ul> diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html index cc0709e279..19933cfd0d 100644 --- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html +++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html @@ -24,7 +24,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_ <th scope="row">Prérequis :</th> <td> <p>Être familiarisé avec les bases des langages</p> - <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, et <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td> + <a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, et <a href="/fr/docs/Learn/JavaScript">JavaScript</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -35,7 +35,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_ </tbody> </table> -<h2 class="western" id="Bienvenue_sur_le_terminal">Bienvenue sur le terminal</h2> +<h2 id="Bienvenue_sur_le_terminal">Bienvenue sur le terminal</h2> <p>Le terminal est une interface de texte pour l'exécution de programmes qui utilisent un langage lui-même textuel . Quel que soit le type d'outils que vous allez utiliser pour le développement web, il y a de grandes chances que vous soyez amené à travailler en ligne de commande pour les utiliser (vous rencontrerez aussi l'appellation "console" ou encore "CLI tools" pour désigner de tels outils d'interface en ligne de commande).</p> @@ -47,7 +47,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_ <p>.</p> -<h3 class="western" id="Quelle_est_lorigine_du_terminal">Quelle est l'origine du terminal ?</h3> +<h3 id="Quelle_est_lorigine_du_terminal">Quelle est l'origine du terminal ?</h3> <p>Elle se situe dans les années 50-60, et son aspect d'alors ne ressemble pas du tout à ce que nous connaissons aujourd'hui (heureusement). Vous pouvez en apprendre davantage sur la page de Wikipédia <a href="https://fr.wikipedia.org/wiki/Terminal_(informatique)">Terminal (informatique)</a>.</p> @@ -57,19 +57,19 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_ <p>En tous cas, le terminal ne va pas disparaître de si tôt.</p> -<h3 class="western" id="À_quoi_ressemble_un_terminal">À quoi ressemble un terminal ?</h3> +<h3 id="À_quoi_ressemble_un_terminal">À quoi ressemble un terminal ?</h3> <p>Vous pouvez voir ci-dessous les apparences de quelques terminaux émulés par des programmes courants.</p> -<p>Les images suivantes montrent les invites de commande disponibles sous Windows – il y a une panoplie d’options, du programme « cmd » au « powershell » - qui peuvent être lancées depuis le menu de démarrage en tapant le nom du programme.</p> +<p>Les images suivantes montrent les invites de commande disponibles sous Windows – il y a une panoplie d'options, du programme « cmd » au « powershell » - qui peuvent être lancées depuis le menu de démarrage en tapant le nom du programme.</p> -<p><img alt="A vanilla windows cmd line window, and a windows powershell window" src="https://mdn.mozillademos.org/files/17183/win-terminals.png" style="border-style: solid; border-width: 1px; display: block; height: 261px; margin: 0px auto; width: 900px;"></p> +<p><img alt="A vanilla windows cmd line window, and a windows powershell window" src="win-terminals.png"></p> -<p>Et ci-dessous, vous pouvez voir l’application de terminal pour macOS.</p> +<p>Et ci-dessous, vous pouvez voir l'application de terminal pour macOS.</p> -<p><img alt="A basic vanilla mac terminal" src="https://mdn.mozillademos.org/files/17180/mac-terminal.png" style="display: block; height: 223px; margin: 0px auto; width: 500px;"></p> +<p><img alt="A basic vanilla mac terminal" src="mac-terminal.png"></p> -<h3 class="western" id="Comment_ouvrir_un_terminal">Comment ouvrir un terminal ?</h3> +<h3 id="Comment_ouvrir_un_terminal">Comment ouvrir un terminal ?</h3> <p>Beaucoup de développeurs se servent aujourd'hui de terminaux de type Unix (c'est-à-dire le terminal en lui-même plus les outils auxquels il donne accès). Beaucoup de tutoriels sur le web sont basés sur ces terminaux Unix qu'ils considèrent (malheureusement) comme universels, mais nous allons voir dans cette section comment ouvrir un terminal sur le système de votre choix.</p> @@ -85,27 +85,27 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_ <h4 id="Windows">Windows</h4> -<p>Comme pour d'autres outils de programmation, c’est un peu une tradition pour Windows de ne pas faciliter l’utilisation du terminal (ou ligne de commande) par rapport à d’autres systèmes d’exploitation. Mais les choses s’améliorent.</p> +<p>Comme pour d'autres outils de programmation, c'est un peu une tradition pour Windows de ne pas faciliter l'utilisation du terminal (ou ligne de commande) par rapport à d'autres systèmes d'exploitation. Mais les choses s'améliorent.</p> -<p>Traditionnellement aussi, Windows a depuis longtemps eu son propre programme de type « terminal », appelé « cmd » (« l’invite de commande »), mais celui-ci n’est en rien comparable aux commandes Unix, et il est en fait équivalent au programme DOS des temps héroïques.</p> +<p>Traditionnellement aussi, Windows a depuis longtemps eu son propre programme de type « terminal », appelé « cmd » (« l'invite de commande »), mais celui-ci n'est en rien comparable aux commandes Unix, et il est en fait équivalent au programme DOS des temps héroïques.</p> -<p>On trouve malgré tout de meilleurs programmes qui offrent une expérience de terminal sur Windows, tels que Powershell (<a href="https://github.com/PowerShell/PowerShell">voir ici pour l’installer</a>), et Gitbash (qui fait partie de la trousse à outils <a href="https://gitforwindows.org/">git for Windows</a>).</p> +<p>On trouve malgré tout de meilleurs programmes qui offrent une expérience de terminal sur Windows, tels que Powershell (<a href="https://github.com/PowerShell/PowerShell">voir ici pour l'installer</a>), et Gitbash (qui fait partie de la trousse à outils <a href="https://gitforwindows.org/">git for Windows</a>).</p> -<p>Quoi qu’il en soit, aujourd’hui, la meilleure option est le « Windows Subsystem for Linux » (WSL) – une couche de compatibilité qui permet de lancer des systèmes d’exploitation Linux directement dans Windows 10, ce qui vous permet d’avoir un « vrai terminal », sans recourir à une machine virtuelle.</p> +<p>Quoi qu'il en soit, aujourd'hui, la meilleure option est le « Windows Subsystem for Linux » (WSL) – une couche de compatibilité qui permet de lancer des systèmes d'exploitation Linux directement dans Windows 10, ce qui vous permet d'avoir un « vrai terminal », sans recourir à une machine virtuelle.</p> -<p>Vous pouvez l’installer gratuitement directement à partir du Windows store. Toute la documentation utile est disponible dans la <a href="https://docs.microsoft.com/en-us/windows/wsl">Windows Subsystem for Linux Documentation</a> .</p> +<p>Vous pouvez l'installer gratuitement directement à partir du Windows store. Toute la documentation utile est disponible dans la <a href="https://docs.microsoft.com/fr/windows/wsl">Windows Subsystem for Linux Documentation</a> .</p> -<p><img alt="a screenshot of the windows subsystem for linux documentation" src="https://mdn.mozillademos.org/files/17184/wsl.png" style="border-style: solid; border-width: 1px; display: block; height: 665px; margin: 0px auto; width: 1000px;"></p> +<p><img alt="a screenshot of the windows subsystem for linux documentation" src="wsl.png"></p> -<p>Si vous vous demandez quelle option choisir sur Windows, nous vous recommandons vivement de vous décider pour le WSL. Vous pourriez certes vous en tenir à l’invite de commande par défaut (« cmd »), et faire tourner pas mal d’outils correctement, mais tout sera bien plus facile si vous avez une meilleure équivalence avec les outils Unix.</p> +<p>Si vous vous demandez quelle option choisir sur Windows, nous vous recommandons vivement de vous décider pour le WSL. Vous pourriez certes vous en tenir à l'invite de commande par défaut (« cmd »), et faire tourner pas mal d'outils correctement, mais tout sera bien plus facile si vous avez une meilleure équivalence avec les outils Unix.</p> -<h4 class="western" id="En_passant_quelle_est_la_différence_entre_ligne_de_commande_et_terminal">En passant, quelle est la différence entre ligne de commande et terminal ?</h4> +<h4 id="En_passant_quelle_est_la_différence_entre_ligne_de_commande_et_terminal">En passant, quelle est la différence entre ligne de commande et terminal ?</h4> -<p>En général, vous rencontrerez ces deux termes utilisés de façon interchangeable. Techniquement, un terminal (ou console) est un logiciel qui se connecte à un shell au démarrage. Un shell correspond à votre session et à votre environnement de session (où des choses comme l’invite de commande et les raccourcis peuvent être personnalisés). La ligne de commande quant à elle (ou prompt) est la ligne de texte où vous entrez des commandes et où le curseur clignote.</p> +<p>En général, vous rencontrerez ces deux termes utilisés de façon interchangeable. Techniquement, un terminal (ou console) est un logiciel qui se connecte à un shell au démarrage. Un shell correspond à votre session et à votre environnement de session (où des choses comme l'invite de commande et les raccourcis peuvent être personnalisés). La ligne de commande quant à elle (ou prompt) est la ligne de texte où vous entrez des commandes et où le curseur clignote.</p> <h3 id="Est-ce_quil_faut_se_servir_du_terminal">Est-ce qu'il <em>faut </em>se servir du terminal?</h3> -<p>Bien que les outils disponibles à partir de la ligne de commande soient très riches, si vous utilisez des outils tels que <a href="https://code.visualstudio.com/">Visual Studio Code</a> vous allez avoir accès à une quantité d’extensions que vous pourrez utiliser pour vous aider dans l’édition et vous allez pouvoir vous passer presque complètement du terminal lui-même. Cependant, vous ne pourrez pas trouver une extension sur votre éditeur de code pour tout ce que vous voudrez faire – en définitive, vous devrez malgré tout vous confronter au terminal.</p> +<p>Bien que les outils disponibles à partir de la ligne de commande soient très riches, si vous utilisez des outils tels que <a href="https://code.visualstudio.com/">Visual Studio Code</a> vous allez avoir accès à une quantité d'extensions que vous pourrez utiliser pour vous aider dans l'édition et vous allez pouvoir vous passer presque complètement du terminal lui-même. Cependant, vous ne pourrez pas trouver une extension sur votre éditeur de code pour tout ce que vous voudrez faire – en définitive, vous devrez malgré tout vous confronter au terminal.</p> <h2 id="Les_commandes_intégrées_de_base">Les commandes intégrées de base</h2> @@ -128,8 +128,8 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_ <li>Manipuler et transformer des flux de texte (par exemple remplacer toutes les occurrences de <code><div></code> dans un fichier HTML par <code><article></code>): <code>awk</code>, <code>tr</code>, <code>sed</code></li> </ul> -<div class="blockIndicator note"> -<p><strong>Note </strong>: On trouve sur le web un bon nombre de tutoriels de qualité qui permettent d'aller beaucoup plus loin avec la ligne de commande — ceci n'est qu'une brève introduction ! L'auteur de ces lignes lui-même a sa propre <a href="https://terminal.training/?coupon=mdn">série de vidéos de formation au terminal</a> (80% de réduction en utilisant le code mdn au moment du paiement — 19$).</p> +<div class="note"> +<p><strong>Note </strong>: On trouve sur le web un bon nombre de tutoriels de qualité qui permettent d'aller beaucoup plus loin avec la ligne de commande — ceci n'est qu'une brève introduction ! L'auteur de ces lignes lui-même a sa propre <a href="https://terminal.training/?coupon=mdn">série de vidéos de formation au terminal</a> (80% de réduction en utilisant le code mdn au moment du paiement — 19$).</p> </div> <p>Pour aller plus loin, voyons maintenant comment utiliser quelques-uns de ces outils en ligne de commande. Commencez par ouvrir votre programme de terminal (ou console) !</p> @@ -142,17 +142,17 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_ <p>Pour changer de répertoire, vous tapez <code>cd</code> dans votre terminal, suivi par le répertoire dans lequel vous voulez vous rendre. En supposant que le répertoire (ou dossier) <code>Desktop</code> se trouve dans votre répertoire utilisateur, vous allez donc taper <code>cd Desktop</code> (voir les copies d'écran ci-dessous).</p> -<p><img alt="results of the cd Desktop command being run in a variety of windows terminals - the terminal location moves into the desktop" src="https://mdn.mozillademos.org/files/17182/win-terminals-cd.png" style="border-style: solid; border-width: 1px; display: block; height: 349px; margin: 0px auto; width: 500px;"></p> +<p><img alt="results of the cd Desktop command being run in a variety of windows terminals - the terminal location moves into the desktop" src="win-terminals-cd.png"></p> <p>Sur un système en langue française, vous trouverez plus fréquemment "Bureau" plutôt que "Desktop". Essayez de taper ceci dans votre terminal système (sur un système en langue anglaise, bien sûr conservez "Desktop") :</p> -<pre class="brush: bash notranslate">cd Bureau</pre> +<pre class="brush: bash">cd Bureau</pre> <p>Si vous voulez revenir au répertoire précédent, utilisez les deux points :</p> -<pre class="brush: bash notranslate">cd ..</pre> +<pre class="brush: bash">cd ..</pre> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note</strong>: Raccourci vraiment utile sur un terminal, la touche <kbd>tab</kbd> émule la saisie automatique des mots dont vous connaissez l'existence, ce qui vous évite de les taper en entier. Par exemple, après avoir tapé les deux commandes ci-dessus, essayez de taper <code>cd B</code> puis de presser la touche <kbd>tab</kbd> — cela devrait saisir automatiquement le nom de répertoire <code>Bureau</code>, à condition qu'il soit présent dans le répertoire courant. Gardez ceci à l'esprit tout en poursuivant.</p> </div> @@ -160,18 +160,18 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_ <p>Par exemple, si vous vouliez aller dans un dossier nommé <code>src</code>, qui se trouve dans un dossier nommé <code>projet</code>, qui est lui-même sur le <code>Bureau</code>, vous pourriez taper ces trois commandes pour y arriver à partir de votre dossier utilisateur :</p> -<pre class="brush: bash notranslate">cd Bureau +<pre class="brush: bash">cd Bureau cd projet cd src</pre> <p>Mais c'est une perte de temps — à la place, vous pouvez taper une seule commande, avec les différents éléments du chemin séparés par des slashes, exactement de la même manière que lorsque vous spécifiez les chemins d'accès à des images ou autres assets en CSS, HTML, ou JavaScript :</p> -<pre class="brush: bash notranslate">cd Bureau/projet/src</pre> +<pre class="brush: bash">cd Bureau/projet/src</pre> <p>Notez que si vous commencez le chemin par un slash, vous le rendez absolu, par exemple <code>/Utilisateurs/votre-nom/Bureau</code>. Omettre le premier slash comme nous l'avons fait ci-dessus construit un chemin relatif à votre répertoire de travail actuel. C'est exactement la même chose qu'une URL dans un navigateur. Un slash au début signifie "à la racine du site web", alors qu'omettre le slash signifie "l'URL est relative à ma page courante".</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. <code>cd Bureau\projet\src</code> — cela peut vous paraître vraiment étrange, mais si la question vous intéresse,<a href="https://www.youtube.com/watch?v=5T3IJfBfBmI"> regardez cette vidéo YouTube</a> (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.</p> +<div class="note"> +<p><strong>Note</strong>: Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. <code>cd Bureau\projet\src</code> — cela peut vous paraître vraiment étrange, mais si la question vous intéresse,<a href="https://www.youtube.com/watch?v=5T3IJfBfBmI"> regardez cette vidéo YouTube</a> (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.</p> </div> <h3 id="Lister_le_contenu_dun_répertoire">Lister le contenu d'un répertoire</h3> @@ -180,7 +180,7 @@ cd src</pre> <p>Essayez de taper ceci dans votre terminal :</p> -<pre class="brush: bash notranslate">ls</pre> +<pre class="brush: bash">ls</pre> <p>Vous obtenez la liste des fichiers et répertoires de votre répertoire de travail courant, mais l'information est vraiment basique - vous n'avez que les noms des items, sans savoir s'il s'agit d'un fichier, d'un répertoire, ou d'autre chose. Heureusement, une petite modification dans l'utilisation de la commande va vous donner beaucoup plus d'informations.</p> @@ -190,19 +190,19 @@ cd src</pre> <p>Voyez par exemple ce que vous obtenez en essayant ceci :</p> -<pre class="brush: bash notranslate">ls -l </pre> +<pre class="brush: bash">ls -l</pre> <p>Avec <code>ls</code>, l'option <code>-l</code> (<em>tiret l, "dash ell</em>" en anglais) vous donne une liste avec un fichier ou répertoire par ligne et pas mal d'autres informations. Les répertoires ("directories") sont repérés pas la lettre "d" au tout début de la ligne. Nous pouvons y entrer avec la commande <code>cd</code>.</p> <p>Voici ci-dessous une copie d'écran avec un terminal macOS “vanilla” en haut, et en bas un terminal personnalisé avec quelques icônes supplémentaires et des couleurs pour le rendre plus vivant — les deux affichent le résultat de la commande <code>ls -l</code> :</p> -<p><img alt="A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command" src="https://mdn.mozillademos.org/files/17181/mac-terminals-ls.png" style="border-style: solid; border-width: 1px; display: block; height: 360px; margin: 0px auto; width: 500px;"></p> +<p><img alt="A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command" src="mac-terminals-ls.png"></p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note</strong>: Pour savoir exactement quelles sont les options d'une commande, vous pouvez consulter sa <a href="https://fr.wikipedia.org/wiki/Man_(Unix)">page de manuel</a> (<a href="https://en.wikipedia.org/wiki/Man_page">man page</a> en anglais). Pour cela, tapez la commande <code>man</code> suivie du nom de la commande que vous cherchez, par exemple <code>man ls</code>. La page de manuel va s'ouvrir dans le lecteur de texte par défaut de votre terminal (par exemple, <code><a href="https://en.wikipedia.org/wiki/Less_(Unix)">less</a></code> sur mon terminal), et vous allez pouvoir faire défiler la page avec les touches de flèches ou un mécanisme similaire. La page de manuel liste toutes les options de façon très détaillée, ce qui peut être un peu intimidant au début, mais au moins vous savez où les trouver si vous en avez besoin. Lorsque vous avez terminé avec la page de manuel, vous la refermez avec la commande "quitter" de votre visionneur de texte (pour <code>less</code> c'est "q" ; si ce n'est pas évident cherchez sur Internet).</p> </div> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note</strong>: Pour lancer une commande avec des options multiples, on peut en général les regrouper dans une seule chaîne de caractères après le tiret, par exemple <code>ls -lah</code>, ou <code>ls -ltrh</code>. Exercez-vous à consulter la page man de <code>ls</code> pour savoir ce que vous donnent ces options !</p> </div> @@ -216,14 +216,14 @@ cd src</pre> <ul> <li><code>mkdir</code> — crée un nouveau répertoire à l'intérieur du répertoire courant. Par exemple, <code>mkdir mon-super-site</code> va créer un nouveau répertoire nommé <code>mon-super-site</code>.</li> - <li><code>rmdir</code> — efface le répertoire dont le nom est passé, mais seulement s'il est vide. Par exemple <code>rmdir mon-super-site</code> va supprimer le répertoire que nous avons créé ci-dessus. Si vous voulez supprimer un répertoire qui n'est pas vide (ainsi que tout ce qu'il contient), vous pouvez utiliser l'option <code>-r</code> (<em>recursive</em>), mais cela est dangereux. Assurez-vous de n'avoir pas besoin plus tard de quelque chose qui se trouverait dans le répertoire, car il aura définitivement disparu.</li> + <li><code>rmdir</code> — efface le répertoire dont le nom est passé, mais seulement s'il est vide. Par exemple <code>rmdir mon-super-site</code> va supprimer le répertoire que nous avons créé ci-dessus. Si vous voulez supprimer un répertoire qui n'est pas vide (ainsi que tout ce qu'il contient), vous pouvez utiliser l'option <code>-r</code> (<em>recursive</em>), mais cela est dangereux. Assurez-vous de n'avoir pas besoin plus tard de quelque chose qui se trouverait dans le répertoire, car il aura définitivement disparu.</li> <li><code>touch</code> — crée un nouveau fichier vide dans le répertoire courant. Par exemple, <code>touch mdn-exemple.md</code> crée un fichier vide nommé <code>mdn-exemple.md</code>.</li> <li><code>mv</code> — déplace un fichier à partir de l'emplacement spécifié en premier vers celui spécifié en second, par exemple <code>mv mdn-exemple.md mdn-exemple.txt</code> (les emplacements sont écrits sous la forme de chemins - <em>file paths</em>). Cette commande déplace un fichier nommé <code>mdn-exemple.md</code> situé dans le répertoire courant vers une fichier nommé <code>mdn-exemple.txt</code> dans le répertoire courant. Techniquement, le fichier est déplacé, mais d'un point de vue pratique, cette commande renomme en fait le fichier.</li> <li><code>cp</code> — d'un usage similaire à <code>mv</code>, <code>cp</code> copie le fichier à l'emplacement spécifié en premier vers celui spécifié en second. Par exemple, <code>cp mdn-exemple.txt mdn-exemple.txt.bak</code> crée une copie de <code>mdn-exemple.txt</code> nommée <code>mdn-exemple.txt.bak</code> (bien entendu vous pouvez la nommer comme vous voulez).</li> <li><code>rm</code> — supprimer le fichier spécifié. Par exemple, <code>rm mdn-exemple.txt</code> efface un fichier unique nommé <code>mdn-exemple.txt</code>. Notez que cet effacement est permanent et ne peut pas être annulé comme lorsque vous placez un fichier dans la corbeille de votre Bureau dans votre interface utilisateur.</li> </ul> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note</strong> : Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, <code>rm mdn-*</code> va effacer tous les fichiers qui commencent par <code>mdn-</code>. <code>rm mdn-*.bak</code> va effacer tous les fichiers qui commencent par <code>mdn- </code>et finissent par <code>.bak</code>.</p> </div> @@ -235,7 +235,7 @@ cd src</pre> <p>Autre astuce intéressante : si vous n'êtes pas à l'aise avec l'idée d'essayer des lignes de commande sur votre propre machine, le site <a href="https://glitch.com/">Glitch.com</a> est un bon endroit pour le faire en toute sécurité. En plus d'être un lieu génial pour tester du code de développement web, les projets vous donnent accès à un terminal qui vous permet de lancer toutes les commandes que vous voulez, sans risquer d'endommager votre propre machine.</p> -<p><img alt="a double screenshot showing the glitch.com home page, and the glitch terminal emulator" src="https://mdn.mozillademos.org/files/17179/glitch.png" style="height: 848px; width: 900px;"></p> +<p><img alt="a double screenshot showing the glitch.com home page, and the glitch terminal emulator" src="glitch.png"></p> <p>Le site <a href="https://tldr.sh/">tldr.sh</a> est une formidable ressource pour obtenir un aperçu de commandes particulières. C'est un service de documentation géré de façon communautaire, similaire à MDN, mais dédié aux commandes de terminal.</p> @@ -247,61 +247,61 @@ cd src</pre> <p>Nous avons déjà vu <code>ls</code>, qui liste le contenu du répertoire courant :</p> -<pre class="brush: bash notranslate">ls</pre> +<pre class="brush: bash">ls</pre> <p>Mais comment nous y prendre si nous voulons compter le nombre de fichiers et de répertoires à l'intérieur du répertoire courant ? <code>ls</code> n'est pas capable de faire cela à lui seul.</p> <p>Il existe un autre outil Unix nommé <code>wc</code>. Celui-ci compte les mots, lignes, caractères, ou octets de la donnée qu'on lui passe, quelle qu'elle soit. Il peut s'agir d'un fichier texte — l'exemple ci-dessous donne le nombre de lignes de <code>monfichier.txt</code> :</p> -<pre class="brush: bash notranslate">wc -l monfichier.txt</pre> +<pre class="brush: bash">wc -l monfichier.txt</pre> -<p>Mais <code>wc</code> est également capable de compter les lignes de tout ce qui lui est passé par un <strong>pipe</strong>. Par exemple, la commande ci-dessous compte les lignes renvoyées par la commande <code>ls</code> (lignes qui seraient normalement affichées sur le terminal) et affiche ce décompte à la place :</p> +<p>Mais <code>wc</code> est également capable de compter les lignes de tout ce qui lui est passé par un <strong>pipe</strong>. Par exemple, la commande ci-dessous compte les lignes renvoyées par la commande <code>ls</code> (lignes qui seraient normalement affichées sur le terminal) et affiche ce décompte à la place :</p> -<pre class="brush: bash notranslate">ls | wc -l</pre> +<pre class="brush: bash">ls | wc -l</pre> <p>Comme <code>ls</code> affiche chaque fichier ou répertoire sur une nouvelle ligne, on obtient bien le compte des répertoires et des fichiers.</p> -<p>Comment ça marche ? Le comportement général des outils de ligne de commande (unix) consiste à afficher du texte dans le terminal (ce qu'on appelle aussi "imprimer sur la sortie standard (standard input)" ou <code>STDOUT</code>). Un bon nombre de commandes peuvent aussi lire du contenu à partir d'un flux d'entrée (appelé "entrée standard (standard input)" ou <code>STDIN</code>).</p> +<p>Comment ça marche ? Le comportement général des outils de ligne de commande (unix) consiste à afficher du texte dans le terminal (ce qu'on appelle aussi "imprimer sur la sortie standard (standard input)" ou <code>STDOUT</code>). Un bon nombre de commandes peuvent aussi lire du contenu à partir d'un flux d'entrée (appelé "entrée standard (standard input)" ou <code>STDIN</code>).</p> <p>L'opérateur pipe peut <em>connecter</em> ces entrées et sorties, ce qui nous permet de construire des opérations de plus en plus complexes selon nos besoins — la sortie d'une commande devient l'entrée de la commande suivante. Dans le cas présent, <code>ls</code> enverrait normalement sa sortie sur <code>STDOUT</code>, mais au lieu de cela la sortie de <code>ls</code> est passée par un pipe à <code>wc</code>, qui la prend en entrée, compte ses lignes et imprime ce décompte sur <code>STDOUT</code>.</p> <h2 id="Un_exemple_un_peu_plus_complexe">Un exemple un peu plus complexe</h2> -<p>Occupons-nous maintenant de quelque chose d'un peu plus compliqué. Nous allons d'abord essayer de récupérer le contenu de la page MDN "fetch" en utilisant la commande <code>curl</code> (dont on peut se servir pour faire une requête de contenu à partir d'URLs), sur <a href="https://developer.mozilla.org/en-US/docs/Web/API/fetch">https://developer.mozilla.org/en-US/docs/Web/API/fetch</a>.</p> +<p>Occupons-nous maintenant de quelque chose d'un peu plus compliqué. Nous allons d'abord essayer de récupérer le contenu de la page MDN "fetch" en utilisant la commande <code>curl</code> (dont on peut se servir pour faire une requête de contenu à partir d'URLs), sur <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">https://developer.mozilla.org/fr/docs/Web/API/fetch</a>.</p> -<p>En fait, cette URL est celle de l'ancien emplacement de la page. Lorsque vous l'entrez dans un nouvel onglet de votre navigateur, vous êtes (finalement) redirigé sur <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch</a>.</p> +<p>En fait, cette URL est celle de l'ancien emplacement de la page. Lorsque vous l'entrez dans un nouvel onglet de votre navigateur, vous êtes (finalement) redirigé sur <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch</a>.</p> <p>Par conséquent, si vous utilisez curl pour faire une requête à https://developer.mozilla.org/docs/Web/API/fetch, vous n'aurez pas de résultat. Essayez :</p> -<pre class="brush: bash notranslate">curl https://developer.mozilla.org/en-US/docs/Web/API/fetch</pre> +<pre class="brush: bash">curl https://developer.mozilla.org/fr/docs/Web/API/fetch</pre> <p>Nous devons dire explicitement à <code>curl</code> de suivre les redirections en utilisant l'option <code>-L</code>.</p> -<p>Examinons également les en-têtes retournées par <code>developer.mozilla.org</code> en utilisant l'option <code>-I</code> de <code>curl</code>, et affichons toutes les redirections en passant la sortie de <code>curl</code> à <code>grep</code> grâce à un pipe (on va demander à <code>grep</code> de renvoyer toutes les lignes qui contiennent le mot "location").</p> +<p>Examinons également les en-têtes retournées par <code>developer.mozilla.org</code> en utilisant l'option <code>-I</code> de <code>curl</code>, et affichons toutes les redirections en passant la sortie de <code>curl</code> à <code>grep</code> grâce à un pipe (on va demander à <code>grep</code> de renvoyer toutes les lignes qui contiennent le mot "location").</p> <p>Essayez maintenant la ligne suivante, et vous allez constater qu'il y a en fait trois redirections avant d'atteindre la page finale :</p> -<pre class="brush: bash notranslate">curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location</pre> +<pre class="brush: bash">curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location</pre> <p>Votre sortie devrait ressembler à ceci (<code>curl</code> va d'abord afficher des compteurs et autres informations de téléchargement) :</p> -<pre class="brush: bash notranslate">location: /en-US/docs/Web/API/fetch -location: /en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch() -location: /en-US/docs/Web/API/GlobalFetch/fetch -location: /en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch</pre> +<pre class="brush: bash">location: /fr/docs/Web/API/fetch +location: /fr/docs/Web/API/GlobalFetch/GlobalFetch.fetch() +location: /fr/docs/Web/API/GlobalFetch/fetch +location: /fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch</pre> -<p>Bien que ce résultat soit artificiel, nous pourrions le pousser un peu plus loin et remplacer <code>location:</code> par le nom de domaine, de façon à avoir des URLs complètes. Pour cela, nous allons ajouter <code>awk</code> à notre formule (il s'agit d'un langage de programmation tout comme JavaScript, Ruby ou Python, mais beaucoup plus ancien !).</p> +<p>Bien que ce résultat soit artificiel, nous pourrions le pousser un peu plus loin et remplacer <code>location:</code> par le nom de domaine, de façon à avoir des URLs complètes. Pour cela, nous allons ajouter <code>awk</code> à notre formule (il s'agit d'un langage de programmation tout comme JavaScript, Ruby ou Python, mais beaucoup plus ancien !).</p> <p>Essayez de lancer cette commande :</p> -<pre class="brush: bash notranslate">curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'</pre> +<pre class="brush: bash">curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'</pre> <p>Votre sortie finale devrait ressembler à ceci :</p> -<pre class="brush: bash notranslate">https://developer.mozilla.org/en-US/docs/Web/API/fetch -https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch() -https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/fetch -https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch</pre> +<pre class="brush: bash">https://developer.mozilla.org/fr/docs/Web/API/fetch +https://developer.mozilla.org/fr/docs/Web/API/GlobalFetch/GlobalFetch.fetch() +https://developer.mozilla.org/fr/docs/Web/API/GlobalFetch/fetch +https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch</pre> <p>En combinant ces commandes nous avons personnalisé la sortie pour qu'elle montre les URLs complètes vers lesquels le serveur de Mozilla effectue les redirections lorsque nous lui soumettons la requête pour l'URL <code>/docs/Web/API/fetch</code>.<br> Développer votre connaissance du système en apprenant le fonctionnement de ces simples outils et comment les intégrer à votre arsenal pour résoudre des problèmes bien particuliers - cela vous sera d'une grande utilité tout au long des années à venir.</p> @@ -316,9 +316,9 @@ https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch <p>Allons-y : installez npm sur votre système à partir de l'URL ci-dessus qui va vous permettre de télécharger et de lancer un installeur Node.js approprié à votre système d'exploitation. Si cela vous est proposé, assurez-vous d'inclure npm dans l'installation.</p> -<p><img alt="the node.js installer on windows, showing the option to include npm" src="https://mdn.mozillademos.org/files/17185/npm-install-option.png" style="border-style: solid; border-width: 1px; display: block; height: 469px; margin: 0px auto; width: 600px;"></p> +<p><img alt="the node.js installer on windows, showing the option to include npm" src="npm-install-option.png"></p> -<p>Un certain nombre d'outils variés vous attendent dans le prochaine article ; pour l'instant nous allons nous faire la main sur <a href="https://prettier.io/">Prettier</a>. Prettier est un outil de formatage de code normatif qui se présente comme ayant "peu d'options". Moins d'options, cela évoque plus de simplicité. Vu comme on peut parfois être débordé par la complexité de certains outils, le concept "peu d'options" peut se révéler très attractif.</p> +<p>Un certain nombre d'outils variés vous attendent dans le prochaine article ; pour l'instant nous allons nous faire la main sur <a href="https://prettier.io/">Prettier</a>. Prettier est un outil de formatage de code normatif qui se présente comme ayant "peu d'options". Moins d'options, cela évoque plus de simplicité. Vu comme on peut parfois être débordé par la complexité de certains outils, le concept "peu d'options" peut se révéler très attractif.</p> <h3 id="Où_installer_nos_outils_de_CLI">Où installer nos outils de CLI ?</h3> @@ -361,11 +361,11 @@ https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch <p>Bien que la liste des <em>contre </em>soit plus courte, l'impact négatif d'une installation globale est potentiellement beaucoup plus lourd que les bénéfices. Cela dit, pour l'instant, nous allons choisir l'installation globale dans un but de simplicité. Nous examinerons davantage les installations locales et leur intérêt dans notre prochain article.</p> -<h3 id="Installation_de_Prettier">Installation de Prettier</h3> +<h3 id="Installation_de_Prettier">Installation de Prettier</h3> <p>Dans cette partie nous allons installer Prettier en tant qu'utilitaire global de ligne de commande.</p> -<p>Prettier est un outil de formatage de code normatif pour les développeurs front-end, centré sur le langage JavaScript et ses dérivés, avec un support pour HTML, CSS, SCSS, JSON et plus.</p> +<p>Prettier est un outil de formatage de code normatif pour les développeurs front-end, centré sur le langage JavaScript et ses dérivés, avec un support pour HTML, CSS, SCSS, JSON et plus.</p> <p>Prettier offre les avantages suivants :</p> @@ -378,17 +378,17 @@ https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch <p>Après avoir installé node, ouvrez votre terminal et lancez les commandes suivantes pour installer Prettier :</p> -<pre class="brush: bash notranslate">npm install --global prettier</pre> +<pre class="brush: bash">npm install --global prettier</pre> <p>Lorsque la commande a terminé son exécution, l'outil Prettier est disponible sur sur votre terminal, partout dans votre système de fichiers.</p> <p>En lançant la commande sans argument, comme pour beaucoup d'autres commandes, vous obtiendrez les informations d'utilisation et d'aide. Essayez :</p> -<pre class="brush: bash notranslate">prettier</pre> +<pre class="brush: bash">prettier</pre> <p>La sortie devrait ressembler à ceci :</p> -<pre class="brush: bash notranslate">Usage: prettier [options] [file/glob ...] +<pre class="brush: bash">Usage: prettier [options] [file/glob ...] By default, output is written to stdout. Stdin is read if it is piped to Prettier and no files are given. @@ -401,41 +401,41 @@ Stdin is read if it is piped to Prettier and no files are given. <p>Jouons un peu avec Prettier pour que vous puissiez voir comment il fonctionne.</p> -<p>Tout d'abord, créez un nouveau répertoire à un endroit que vous pourrez retrouver facilement, par exemple un répertoire nommé <code>prettier-test</code> sur votre <code>Bureau</code>.</p> +<p>Tout d'abord, créez un nouveau répertoire à un endroit que vous pourrez retrouver facilement, par exemple un répertoire nommé <code>prettier-test</code> sur votre <code>Bureau</code>.</p> <p>Ensuite collez le code suivant dans un fichier que vous enregistrez dans ce répertoire sous le nom <code>index.js.</code></p> -<pre class="brush: js notranslate">const myObj = { +<pre class="brush: js">const myObj = { a:1,b:{c:2}} function printMe(obj){console.log(obj.b.c)} printMe(myObj)</pre> -<p>Nous pouvons exécuter prettier sur un code source simplement pour vérifier s'il nécessite une correction. Passez dans votre répertoire avec <code>cd</code> et essayez de lancer cette commande :</p> +<p>Nous pouvons exécuter prettier sur un code source simplement pour vérifier s'il nécessite une correction. Passez dans votre répertoire avec <code>cd</code> et essayez de lancer cette commande :</p> -<pre class="brush: bash notranslate">prettier --check index.js</pre> +<pre class="brush: bash">prettier --check index.js</pre> <p>Vous devriez obtenir quelque chose comme</p> -<pre class="brush: bash notranslate">Checking formatting... +<pre class="brush: bash">Checking formatting... index.js Code style issues found in the above file(s). Forgot to run Prettier? </pre> -<p>Le style nécessite donc des corrections. Pas de problème. On va les appliquer en ajoutant l'option <code>--write</code> à la commande prettier, ce qui nous laisse nous concentrer sur l'aspect utile de l'écriture du code.</p> +<p>Le style nécessite donc des corrections. Pas de problème. On va les appliquer en ajoutant l'option <code>--write</code> à la commande prettier, ce qui nous laisse nous concentrer sur l'aspect utile de l'écriture du code.</p> <p>Essayez maintenant de lancer cette version de la commande :</p> -<pre class="brush: bash notranslate">prettier --write index.js</pre> +<pre class="brush: bash">prettier --write index.js</pre> <p>La sortie ressemble maintenant à ceci</p> -<pre class="brush: bash notranslate">Checking formatting... +<pre class="brush: bash">Checking formatting... index.js Code style issues fixed in the above file(s).</pre> <p>Mais le plus important, c'est que votre fichier JavaScript a été reformaté :</p> -<pre class="brush: js notranslate">const myObj = { +<pre class="brush: js">const myObj = { a: 1, b: { c: 2 }, }; @@ -444,45 +444,45 @@ function printMe(obj) { } printMe(myObj);</pre> -<p>Vous pouvez intégrer cette opération automatisée à votre workflow. L'intérêt des outils réside justement dans l'automatisation ; personnellement, notre préférence va au type d'automatisme qui se produit de façon transparente, sans qu'aucune configuration soit nécessaire.</p> +<p>Vous pouvez intégrer cette opération automatisée à votre workflow. L'intérêt des outils réside justement dans l'automatisation ; personnellement, notre préférence va au type d'automatisme qui se produit de façon transparente, sans qu'aucune configuration soit nécessaire.</p> <p>Il existe de nombreuses façons de mettre en oeuvre des automatismes avec Prettier, et bien qu'elles dépassent le cadre de cet article, vous trouverez de l'aide dans d'excellentes ressources en ligne, dont certaines grâce aux liens ci-après. Vous pouvez lancer prettier :</p> <ul> - <li>Avant de faire un commit sur un dépôt git en utilisant <a href="https://github.com/typicode/husky">Husky</a>.</li> - <li>Chaque fois que vous cliquez sur "sauvegarder" dans votre éditeur de code, qu'il s'agisse de <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">VS Code</a>, d'<a href="https://atom.io/packages/prettier-atom">Atom</a>, ou de <a href="https://packagecontrol.io/packages/JsPrettier">Sublime Text</a>.</li> - <li>En tant qu'élément des contrôles continus d'intégration grâce à des outils tels que <a href="https://github.com/features/actions">Github Actions</a>.</li> + <li>Avant de faire un commit sur un dépôt git en utilisant <a href="https://github.com/typicode/husky">Husky</a>.</li> + <li>Chaque fois que vous cliquez sur "sauvegarder" dans votre éditeur de code, qu'il s'agisse de <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">VS Code</a>, d'<a href="https://atom.io/packages/prettier-atom">Atom</a>, ou de <a href="https://packagecontrol.io/packages/JsPrettier">Sublime Text</a>.</li> + <li>En tant qu'élément des contrôles continus d'intégration grâce à des outils tels que <a href="https://github.com/features/actions">Github Actions</a>.</li> </ul> -<p>Nous préférons personnellement la deuxième solution — quand on code par exemple sur VS Code, Prettier entre en jeu et nettoie le formatage lors de chaque enregistrement. Vous trouverez dans les<span> </span><a href="https://prettier.io/docs/en/">Prettier docs</a><span> </span><span>beaucoup plus d'informations sur les différentes façons d'utiliser Prettier.</span></p> +<p>Nous préférons personnellement la deuxième solution — quand on code par exemple sur VS Code, Prettier entre en jeu et nettoie le formatage lors de chaque enregistrement. Vous trouverez dans les<span> </span><a href="https://prettier.io/docs/en/">Prettier docs</a><span> </span><span>beaucoup plus d'informations sur les différentes façons d'utiliser Prettier.</span></p> <h2 id="Autres_outils_à_essayer">Autres outils à essayer</h2> <p>Voici une courte liste de quelques outils supplémentaires que vous pouvez vous amuser à tester :</p> <ul> - <li><code><a href="https://github.com/sharkdp/bat">bat</a></code> — Un <code>cat</code> plus "beau" (<code>cat</code> affiche le contenu d'un fichier)<em> (NdT : probable jeu de mot en anglais, où cat = chat et bat = chauve-souris)</em>.</li> - <li><code><a href="http://denilson.sa.nom.br/prettyping/">prettyping</a></code> — implémentation visuellement améliorée de la commande <code>ping</code> (<code>ping</code> permet de tester si un serveur répond).</li> - <li><code><a href="http://hisham.hm/htop/">htop</a></code> — Pour visualiser les processus en cours, ce qui est intéressant lorsque votre ventilateur de CPU se met à faire un bruit de moteur d'avion et que vous souhaitez identifier le programme responsable.</li> - <li><code><a href="https://tldr.sh/#installation">tldr</a></code> — client tldr (mentionné plus haut dans ce chapitre) en ligne de commande.</li> + <li><code><a href="https://github.com/sharkdp/bat">bat</a></code> — Un <code>cat</code> plus "beau" (<code>cat</code> affiche le contenu d'un fichier)<em> (NdT : probable jeu de mot en anglais, où cat = chat et bat = chauve-souris)</em>.</li> + <li><code><a href="http://denilson.sa.nom.br/prettyping/">prettyping</a></code> — implémentation visuellement améliorée de la commande <code>ping</code> (<code>ping</code> permet de tester si un serveur répond).</li> + <li><code><a href="http://hisham.hm/htop/">htop</a></code> — Pour visualiser les processus en cours, ce qui est intéressant lorsque votre ventilateur de CPU se met à faire un bruit de moteur d'avion et que vous souhaitez identifier le programme responsable.</li> + <li><code><a href="https://tldr.sh/#installation">tldr</a></code> — client tldr (mentionné plus haut dans ce chapitre) en ligne de commande.</li> </ul> -<p>L'auteur a aussi <a href="https://remysharp.com/2018/08/23/cli-improved">décrit certains de ses favoris</a> accompagnés de copies d'écrans si vous avez envie de creuser davantage le sujet.</p> +<p>L'auteur a aussi <a href="https://remysharp.com/2018/08/23/cli-improved">décrit certains de ses favoris</a> accompagnés de copies d'écrans si vous avez envie de creuser davantage le sujet.</p> -<p>Notez que certains de ces outils nécessitent l'installation préalable de npm, ainsi que nous l'avons fait pour Prettier.</p> +<p>Notez que certains de ces outils nécessitent l'installation préalable de npm, ainsi que nous l'avons fait pour Prettier.</p> <h2 id="Résumé">Résumé</h2> -<p>Nous voilà parvenus au terme de cette brève revue du terminal ou ligne de commande. Dans la suite, nous allons nous pencher plus en détail sur les package managers, et sur les possibilités qu'ils nous offrent.</p> +<p>Nous voilà parvenus au terme de cette brève revue du terminal ou ligne de commande. Dans la suite, nous allons nous pencher plus en détail sur les package managers, et sur les possibilités qu'ils nous offrent.</p> <p>{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}</p> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Client-side tooling overview</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Client-side tooling overview</a></li> <li><a href="https://wiki.developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande">Cours express sur la ligne de commande</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Introducing a complete toolchain</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying our app</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Introducing a complete toolchain</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying our app</a></li> </ul> diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.html b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.html index 413b936371..3a76beed7c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.html +++ b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.html @@ -33,7 +33,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browserSettings/zoomSiteSpecif <p>Lors de l'installation de Firefox, <code>browser.zoom.siteSpecific</code> est à vrai.</p> -<p>Si <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/privacy/websites" title="The documentation about this has not yet been written; please consider contributing!"><code>privacy.websites</code></a><code>.resistFingerprinting</code> est à vrai, ce réglage ne peut pas être changé et le niveau de zoom est appliqué sur le schéma par-onglet.</p> +<p>Si <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/privacy/websites" title="The documentation about this has not yet been written; please consider contributing!"><code>privacy.websites</code></a><code>.resistFingerprinting</code> est à vrai, ce réglage ne peut pas être changé et le niveau de zoom est appliqué sur le schéma par-onglet.</p> <h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/index.html b/files/fr/mozilla/add-ons/webextensions/api/tabs/index.html index 1de179058c..ad889267c4 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/index.html +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/index.html @@ -16,27 +16,27 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs --- <div>{{AddonSidebar}}</div> -<p>Permet d’interagir avec le système d’onglets du navigateur.</p> +<p>Permet d'interagir avec le système d'onglets du navigateur.</p> -<p>Vous pouvez utiliser cette API pour obtenir une liste des onglets ouverts, filtrés par différents critères, ainsi que pour ouvrir, mettre à jour, déplacer, recharger et supprimer des onglets. Vous ne pouvez pas accéder directement au contenu hébergé par les onglets à l’aide de cette API, mais vous pouvez insérer du JavaScript et du CSS dans les onglets en utilisant les API {{WebExtAPIRef("tabs.executeScript()")}} ou {{WebExtAPIRef("tabs.insertCSS()")}}.</p> +<p>Vous pouvez utiliser cette API pour obtenir une liste des onglets ouverts, filtrés par différents critères, ainsi que pour ouvrir, mettre à jour, déplacer, recharger et supprimer des onglets. Vous ne pouvez pas accéder directement au contenu hébergé par les onglets à l'aide de cette API, mais vous pouvez insérer du JavaScript et du CSS dans les onglets en utilisant les API {{WebExtAPIRef("tabs.executeScript()")}} ou {{WebExtAPIRef("tabs.insertCSS()")}}.</p> <p>Vous pouvez utiliser la majeure partie de cette API sans autorisation spéciale. Toutefois :</p> <ul> - <li>Pour accéder à <code>Tab.url</code>, <code>Tab.title</code> et <code>Tab.favIconUrl</code>, vous devez avoir la <a href="/fr/Add-ons/WebExtensions/manifest.json/permissions">permission</a> <code>"tabs"</code>. + <li>Pour accéder à <code>Tab.url</code>, <code>Tab.title</code> et <code>Tab.favIconUrl</code>, vous devez avoir la <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> <code>"tabs"</code>. <ul> - <li>Dans Firefox, cela signifie également que vous avez besoin de <code>"tabs"</code> pour {{WebExtAPIRef("tabs.query", "requête d’onglet")}} par URL.</li> + <li>Dans Firefox, cela signifie également que vous avez besoin de <code>"tabs"</code> pour {{WebExtAPIRef("tabs.query", "requête d'onglet")}} par URL.</li> </ul> </li> <li> - <p>Pour utiliser {{WebExtAPIRef("tabs.executeScript()")}} ou {{WebExtAPIRef("tabs.insertCSS()")}}, vous devez avoir les <a href="/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">permission d’hôte</a> pour l’onglet.</p> + <p>Pour utiliser {{WebExtAPIRef("tabs.executeScript()")}} ou {{WebExtAPIRef("tabs.insertCSS()")}}, vous devez avoir les <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions">permission d'hôte</a> pour l'onglet.</p> </li> </ul> -<p>Alternativement, vous pouvez obtenir ces autorisations temporairement, uniquement pour l’onglet actuellement actif et uniquement en réponse à une action explicite de l’utilisateur ou de l’utilisatrice, en demandant la <a href="/fr/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">permission <code>"activeTab"</code></a>.</p> +<p>Alternativement, vous pouvez obtenir ces autorisations temporairement, uniquement pour l'onglet actuellement actif et uniquement en réponse à une action explicite de l'utilisateur ou de l'utilisatrice, en demandant la <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#activetab_permission">permission <code>"activeTab"</code></a>.</p> -<p>De nombreuses opérations d’onglet utilisent un identifiant (<code>id</code>) d’onglet. Les <code>id</code> d’onglets sont seulement garantis uniques à un onglet durant une session de navigation. Si le navigateur est redémarré, il pourra recycler, et recyclera, les id d’onglets. Pour associer des informations à un onglet à travers les redémarrages du navigateur, utilisez {{WebExtAPIRef("sessions.setTabValue()")}}.</p> +<p>De nombreuses opérations d'onglet utilisent un identifiant (<code>id</code>) d'onglet. Les <code>id</code> d'onglets sont seulement garantis uniques à un onglet durant une session de navigation. Si le navigateur est redémarré, il pourra recycler, et recyclera, les id d'onglets. Pour associer des informations à un onglet à travers les redémarrages du navigateur, utilisez {{WebExtAPIRef("sessions.setTabValue()")}}.</p> <h2 id="Types">Types</h2> @@ -44,21 +44,21 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs <dt>{{WebExtAPIRef("tabs.MutedInfoReason")}}</dt> <dd>Spécifie la raison pour laquelle un onglet a été rendu silencieux ou à nouveau sonore.</dd> <dt>{{WebExtAPIRef("tabs.MutedInfo")}}</dt> - <dd>Cet objet contient un booléen indiquant si l’onglet est silencieux et la raison de la dernière modification de l’état.</dd> + <dd>Cet objet contient un booléen indiquant si l'onglet est silencieux et la raison de la dernière modification de l'état.</dd> <dt>{{WebExtAPIRef("tabs.PageSettings")}}</dt> <dd> - <p>Permet de contrôler le rendu d’un onglet au format PDF par la méthode {{WebExtAPIRef("tabs.saveAsPDF()")}}.</p> + <p>Permet de contrôler le rendu d'un onglet au format PDF par la méthode {{WebExtAPIRef("tabs.saveAsPDF()")}}.</p> </dd> <dt>{{WebExtAPIRef("tabs.Tab")}}</dt> <dd>Ce type contient des informations sur un onglet.</dd> <dt>{{WebExtAPIRef("tabs.TabStatus")}}</dt> - <dd>Indique si l’onglet a fini de charger.</dd> + <dd>Indique si l'onglet a fini de charger.</dd> <dt>{{WebExtAPIRef("tabs.WindowType")}}</dt> <dd>Le type de fenêtre qui héberge cet onglet.</dd> <dt>{{WebExtAPIRef("tabs.ZoomSettingsMode")}}</dt> - <dd>Définit si les modifications de zoom sont traitées par le navigateur, par l’extension ou sont désactivées.</dd> + <dd>Définit si les modifications de zoom sont traitées par le navigateur, par l'extension ou sont désactivées.</dd> <dt>{{WebExtAPIRef("tabs.ZoomSettingsScope")}}</dt> - <dd>Définit si les modifications de zoom persisteront pour l’origine de la page ou ne prendront effet que dans cet onglet.</dd> + <dd>Définit si les modifications de zoom persisteront pour l'origine de la page ou ne prendront effet que dans cet onglet.</dd> <dt>{{WebExtAPIRef("tabs.ZoomSettings")}}</dt> <dd>Définit les paramètres de zoom {{WebExtAPIRef("tabs.ZoomSettingsMode", "mode")}}, {{WebExtAPIRef("tabs.ZoomSettingsScope", "scope")}}, et le facteur de zoom par défaut.</dd> </dl> @@ -67,18 +67,18 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs <dl> <dt>{{WebExtAPIRef("tabs.TAB_ID_NONE")}}</dt> - <dd>Une valeur d’id spéciale donnée aux onglets qui ne sont pas des onglets de navigation (par exemple, les onglets dans les fenêtres <em>devtools</em>).</dd> + <dd>Une valeur d'id spéciale donnée aux onglets qui ne sont pas des onglets de navigation (par exemple, les onglets dans les fenêtres <em>devtools</em>).</dd> </dl> <h2 id="Fonctions">Fonctions</h2> <dl> <dt>{{WebExtAPIRef("tabs.captureTab()")}}</dt> - <dd>Crée un URI de données codant une image de la zone visible de l’onglet donné.</dd> + <dd>Crée un URI de données codant une image de la zone visible de l'onglet donné.</dd> <dt>{{WebExtAPIRef("tabs.captureVisibleTab()")}}</dt> - <dd>Crée un URI de données codant une image de la zone visible de l’onglet actuellement actif dans la fenêtre donnée.</dd> + <dd>Crée un URI de données codant une image de la zone visible de l'onglet actuellement actif dans la fenêtre donnée.</dd> <dt>{{WebExtAPIRef("tabs.connect()")}}</dt> - <dd>Définit une connexion pour échanger des messages entre les scripts d’arrière-plan de l’extension (ou d’autres scripts privilégiés, tels que les scripts de <a href="/fr/Add-ons/WebExtensions/user_interface/Popups">popups</a> ou les scripts de page d’options) et les <a href="/fr/Add-ons/WebExtensions/Content_scripts">scripts de contenu</a> s’exécutant dans l’onglet spécifié.</dd> + <dd>Définit une connexion pour échanger des messages entre les scripts d'arrière-plan de l'extension (ou d'autres scripts privilégiés, tels que les scripts de <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popups</a> ou les scripts de page d'options) et les <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">scripts de contenu</a> s'exécutant dans l'onglet spécifié.</dd> <dt>{{WebExtAPIRef("tabs.create()")}}</dt> <dd>Crée un nouvel onglet.</dd> <dt>{{WebExtAPIRef("tabs.detectLanguage()")}}</dt> @@ -90,17 +90,17 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs <dt>{{WebExtAPIRef("tabs.executeScript()")}}</dt> <dd>Injecte du code JavaScript dans une page.</dd> <dt>{{WebExtAPIRef("tabs.get()")}}</dt> - <dd>Obtient des détails sur l’onglet spécifié.</dd> + <dd>Obtient des détails sur l'onglet spécifié.</dd> <dt>{{WebExtAPIRef("tabs.getAllInWindow()")}} {{deprecated_inline}}</dt> <dd>Obtient des détails sur tous les onglets de la fenêtre spécifiée.</dd> <dt>{{WebExtAPIRef("tabs.getCurrent()")}}</dt> - <dd>Obtient des informations sur l’onglet dans lequel ce script s’exécute, en tant qu’objet {{WebExtAPIRef("tabs.Tab")}}.</dd> + <dd>Obtient des informations sur l'onglet dans lequel ce script s'exécute, en tant qu'objet {{WebExtAPIRef("tabs.Tab")}}.</dd> <dt>{{WebExtAPIRef("tabs.getSelected()")}} {{deprecated_inline}}</dt> - <dd>Obtient l’onglet sélectionné dans la fenêtre spécifiée. <strong>Deprecated: utilisez plutôt <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query" title="Gets all tabs that have the specified properties, or all tabs if no properties are specified."><code>tabs.query({active: true})</code></a>.</strong></dd> + <dd>Obtient l'onglet sélectionné dans la fenêtre spécifiée. <strong>Deprecated: utilisez plutôt <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query" title="Gets all tabs that have the specified properties, or all tabs if no properties are specified."><code>tabs.query({active: true})</code></a>.</strong></dd> <dt>{{WebExtAPIRef("tabs.getZoom()")}}</dt> - <dd>Obtient le facteur de zoom actuel de l’onglet spécifié.</dd> + <dd>Obtient le facteur de zoom actuel de l'onglet spécifié.</dd> <dt>{{WebExtAPIRef("tabs.getZoomSettings()")}}</dt> - <dd>Obtient les paramètres de zoom actuels pour l’onglet spécifié.</dd> + <dd>Obtient les paramètres de zoom actuels pour l'onglet spécifié.</dd> <dt>{{WebExtAPIRef("tabs.goForward()")}}</dt> <dd>Passez à la page suivante, si vous en avez une.</dd> <dt>{{WebExtAPIRef("tabs.goBack()")}}</dt> @@ -114,66 +114,66 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs <dt>{{WebExtAPIRef("tabs.move()")}}</dt> <dd>Déplace un ou plusieurs onglets vers une nouvelle position dans la même fenêtre ou vers une autre fenêtre.</dd> <dt>{{WebExtApiRef("tabs.moveInSuccession()")}}</dt> - <dd>Modifie la relation de succession pour un groupe d’onglets.</dd> + <dd>Modifie la relation de succession pour un groupe d'onglets.</dd> <dt>{{WebExtAPIRef("tabs.print()")}}</dt> - <dd>Imprime le contenu de l’onglet actif.</dd> + <dd>Imprime le contenu de l'onglet actif.</dd> <dt>{{WebExtAPIRef("tabs.printPreview()")}}</dt> <dd> - <div>Ouvre l’aperçu avant impression pour l’onglet actif.</div> + <div>Ouvre l'aperçu avant impression pour l'onglet actif.</div> </dd> <dt>{{WebExtAPIRef("tabs.query()")}}</dt> - <dd>Obtient tous les onglets ayant les propriétés spécifiées, ou tous les onglets si aucune propriété n’est spécifiée.</dd> + <dd>Obtient tous les onglets ayant les propriétés spécifiées, ou tous les onglets si aucune propriété n'est spécifiée.</dd> <dt>{{WebExtAPIRef("tabs.reload()")}}</dt> <dd>Recharge un onglet, en contournant éventuellement le cache web local.</dd> <dt>{{WebExtAPIRef("tabs.remove()")}}</dt> <dd>Ferme un ou plusieurs onglets.</dd> <dt>{{WebExtAPIRef("tabs.removeCSS()")}}</dt> - <dd>Supprime d’une page CSS qui a été précédemment injectée en appelant {{WebExtAPIRef("tabs.insertCSS()")}}.</dd> + <dd>Supprime d'une page CSS qui a été précédemment injectée en appelant {{WebExtAPIRef("tabs.insertCSS()")}}.</dd> <dt>{{WebExtAPIRef("tabs.saveAsPDF()")}}</dt> <dd>Enregistre la page en cours au format PDF.</dd> <dt>{{WebExtAPIRef("tabs.sendMessage()")}}</dt> - <dd>Envoie un message unique au(x) script(s) de contenu dans l’onglet spécifié.</dd> + <dd>Envoie un message unique au(x) script(s) de contenu dans l'onglet spécifié.</dd> <dt>{{WebExtAPIRef("tabs.sendRequest()")}} {{deprecated_inline}}</dt> - <dd>Envoie une requête unique au(x) script(s) de contenu dans l’onglet spécifié. <strong>Déprécié :</strong> utilisez {{WebExtAPIRef("tabs.sendMessage()")}} à la place.</dd> + <dd>Envoie une requête unique au(x) script(s) de contenu dans l'onglet spécifié. <strong>Déprécié :</strong> utilisez {{WebExtAPIRef("tabs.sendMessage()")}} à la place.</dd> <dt>{{WebExtAPIRef("tabs.setZoom()")}}</dt> - <dd>Effectue un zoom sur l’onglet spécifié.</dd> + <dd>Effectue un zoom sur l'onglet spécifié.</dd> <dt>{{WebExtAPIRef("tabs.setZoomSettings()")}}</dt> - <dd>Définit les paramètres de zoom pour l’onglet spécifié.</dd> + <dd>Définit les paramètres de zoom pour l'onglet spécifié.</dd> <dt>{{WebExtAPIRef("tabs.show()")}} {{experimental_inline}}</dt> <dd>Affiche un ou plusieurs onglets qui ont été {{WebExtAPIRef("tabs.hide()", "masqués")}}.</dd> <dt>{{WebExtAPIRef("tabs.toggleReaderMode()")}}</dt> - <dd>Bascule en mode lecture pour l’onglet spécifié.</dd> + <dd>Bascule en mode lecture pour l'onglet spécifié.</dd> <dt>{{WebExtAPIRef("tabs.update()")}}</dt> - <dd>Charge une nouvelle URL dans l’onglet, ou modifie d’autres propriétés de l’onglet.</dd> + <dd>Charge une nouvelle URL dans l'onglet, ou modifie d'autres propriétés de l'onglet.</dd> </dl> <h2 id="Évènements">Évènements</h2> <dl> <dt>{{WebExtAPIRef("tabs.onActivated")}}</dt> - <dd>Est émis lorsque l’onglet actif dans une fenêtre change. Notez que l’URL de l’onglet peut ne pas être définie au moment où cet évènement a été émis.</dd> + <dd>Est émis lorsque l'onglet actif dans une fenêtre change. Notez que l'URL de l'onglet peut ne pas être définie au moment où cet évènement a été émis.</dd> <dt>{{WebExtAPIRef("tabs.onActiveChanged")}} {{deprecated_inline}}</dt> - <dd>Est émis lorsque l’onglet sélectionné dans une fenêtre change. <strong>Déprécié :</strong> utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place.</dd> + <dd>Est émis lorsque l'onglet sélectionné dans une fenêtre change. <strong>Déprécié :</strong> utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place.</dd> <dt>{{WebExtAPIRef("tabs.onAttached")}}</dt> - <dd>Est émis lorsqu’un onglet est attaché à une fenêtre, par exemple parce qu’il a été déplacé entre différentes fenêtres.</dd> + <dd>Est émis lorsqu'un onglet est attaché à une fenêtre, par exemple parce qu'il a été déplacé entre différentes fenêtres.</dd> <dt>{{WebExtAPIRef("tabs.onCreated")}}</dt> - <dd>Est émis lorsqu’un onglet est créé. Notez que l’URL de l’onglet peut ne pas être définie au moment où cet évènement a été émis.</dd> + <dd>Est émis lorsqu'un onglet est créé. Notez que l'URL de l'onglet peut ne pas être définie au moment où cet évènement a été émis.</dd> <dt>{{WebExtAPIRef("tabs.onDetached")}}</dt> - <dd>Est émis lorsqu’un onglet est détaché d’une fenêtre, par exemple parce qu’il a été déplacé entre différentes fenêtres.</dd> + <dd>Est émis lorsqu'un onglet est détaché d'une fenêtre, par exemple parce qu'il a été déplacé entre différentes fenêtres.</dd> <dt>{{WebExtAPIRef("tabs.onHighlightChanged")}} {{deprecated_inline}}</dt> <dd>Est émis lorsque les onglets en surbrillance ou sélectionnés dans une fenêtre changent. <strong>Déprécié :</strong> utilisez {{WebExtAPIRef("tabs.onHighlighted")}} à la place.</dd> <dt>{{WebExtAPIRef("tabs.onHighlighted")}}</dt> <dd>Est émis lorsque les onglets en surbrillance ou sélectionnés dans une fenêtre changent.</dd> <dt>{{WebExtAPIRef("tabs.onMoved")}}</dt> - <dd>Est émis lorsqu’un onglet est déplacé dans une fenêtre.</dd> + <dd>Est émis lorsqu'un onglet est déplacé dans une fenêtre.</dd> <dt>{{WebExtAPIRef("tabs.onRemoved")}}</dt> - <dd>Est émis lorsqu’un onglet est fermé.</dd> + <dd>Est émis lorsqu'un onglet est fermé.</dd> <dt>{{WebExtAPIRef("tabs.onReplaced")}}</dt> - <dd>Est émis lorsqu’un onglet est remplacé par un autre onglet en raison d’un <em lang="en-US">prerendering</em>.</dd> + <dd>Est émis lorsqu'un onglet est remplacé par un autre onglet en raison d'un <em lang="en-US">prerendering</em>.</dd> <dt>{{WebExtAPIRef("tabs.onSelectionChanged")}} {{deprecated_inline}}</dt> - <dd>Est émis lorsque l’onglet sélectionné dans une fenêtre change. <strong>Déprécié :</strong> utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place.</dd> + <dd>Est émis lorsque l'onglet sélectionné dans une fenêtre change. <strong>Déprécié :</strong> utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place.</dd> <dt>{{WebExtAPIRef("tabs.onUpdated")}}</dt> - <dd>Est émis lorsqu’un onglet est mis à jour.</dd> + <dd>Est émis lorsqu'un onglet est mis à jour.</dd> <dt>{{WebExtAPIRef("tabs.onZoomChange")}}</dt> <dd>Est émis lorsque le zoom dans un onglet est changé.</dd> </dl> @@ -186,7 +186,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs <div class="note"><strong>Remerciements :</strong> -<p>Cette API est basée sur l’API Chromium <a class="external" href="https://developer.chrome.com/extensions/tabs#method-executeScript"><code>chrome.tabs</code></a>. Cette documentation est dérivée de <a class="external" href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json"><code>tabs.json</code></a> dans le code de Chromium code.</p> +<p>Cette API est basée sur l'API Chromium <a class="external" href="https://developer.chrome.com/extensions/tabs#method-executeScript"><code>chrome.tabs</code></a>. Cette documentation est dérivée de <a class="external" href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json"><code>tabs.json</code></a> dans le code de Chromium code.</p> <p>Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.</p> </div> diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.html index c8e84968e7..e0820570ab 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.html +++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.html @@ -25,7 +25,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts </ul> <div class="blockIndicator warning"> -<p>Cette API requiert la présence de la clé <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code> dans le manifest.json, même si aucun script API n'est spécifié. Par exemple, <code>user_scripts: {}</code>.</p> +<p>Cette API requiert la présence de la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code> dans le manifest.json, même si aucun script API n'est spécifié. Par exemple, <code>user_scripts: {}</code>.</p> </div> <p>Pour utiliser l'API, appelez <code>{{WebExtAPIRef("userScripts.register","register()")}}</code> en passant un objet définissant les scripts à enregistrer. La méthode renvoie une promesse qui est résolue par un objet <code>{{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}}</code>.</p> @@ -55,7 +55,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts <dl> <dt>{{WebExtAPIRef("userScripts.onBeforeScript")}}</dt> - <dd>Un événement disponible pour le script API, enregistré dans <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">"user_scripts"</a></code>, qui s'exécute avant qu'un script utilisateur ne s'exécute. Utilisez-le pour déclencher l'exportation des API supplémentaires fournies par le script API, afin qu'elles soient disponibles pour le script utilisateur.</dd> + <dd>Un événement disponible pour le script API, enregistré dans <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">"user_scripts"</a></code>, qui s'exécute avant qu'un script utilisateur ne s'exécute. Utilisez-le pour déclencher l'exportation des API supplémentaires fournies par le script API, afin qu'elles soient disponibles pour le script utilisateur.</dd> </dl> <h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> @@ -65,6 +65,6 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/userScripts/Working_with_userScripts">Working with <code>userScripts</code></a></li> + <li><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/userScripts/Working_with_userScripts">Working with <code>userScripts</code></a></li> <li>{{WebExtAPIRef("contentScripts","browser.contentScripts")}}</li> </ul> diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.html index 89800b16d4..19dabab7a6 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.html +++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.html @@ -37,21 +37,21 @@ await registeredUserScript.unregister();</pre> <dt>scriptMetadata <code>{{Optional_Inline}}</code></dt> <dd>Un objet <code>JSON</code> qui contient certaines propriétés de métadonnées associées aux <code>userScripts</code> enregistrés</dd> <dt><code>allFrames {{Optional_Inline}}</code></dt> - <dd>Identiques à <code>all_frames</code> dans la clé <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code>.</dd> + <dd>Identiques à <code>all_frames</code> dans la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code>.</dd> <dt><code>excludeGlobs</code> {{Optional_Inline}}</dt> - <dd>Identique à <code>exclude_globs</code> dans la clé <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code>.</dd> + <dd>Identique à <code>exclude_globs</code> dans la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code>.</dd> <dt><code>excludeMatches</code> {{Optional_Inline}}</dt> - <dd>Identique à <code>exclude_matches</code> dans la clé <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code>.</dd> + <dd>Identique à <code>exclude_matches</code> dans la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code>.</dd> <dt><code>includeGlobs</code> {{Optional_Inline}}</dt> - <dd>Identique à <code>include_globs</code> dans la clé <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code>.</dd> + <dd>Identique à <code>include_globs</code> dans la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code>.</dd> <dt><code>js</code> {{Optional_Inline}}</dt> <dd>Un tableau d'objets. Chaque objet a soit une propriété nommée <code>file</code>, qui est une URL commençant par le fichier manifest.json de l'extension et pointant vers un fichier JavaScript à enregistrer, soit une propriété nommée <code>code</code>, qui est un code JavaScript à enregistrer.</dd> <dt><code>matchAboutBlank</code> {{Optional_Inline}}</dt> - <dd>Identique à <code>match_about_blank</code> dans la clé <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code>.</dd> + <dd>Identique à <code>match_about_blank</code> dans la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code>.</dd> <dt><code>matches</code></dt> - <dd>Identique à <code>matches</code> dans la clé <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code>.</dd> + <dd>Identique à <code>matches</code> dans la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code>.</dd> <dt><code>runAt</code> {{Optional_Inline}}</dt> - <dd>Identique à<code>run_at</code> dans la clé <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code>.</dd> + <dd>Identique à<code>run_at</code> dans la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts">user_scripts</a></code>.</dd> </dl> </dd> </dl> diff --git a/files/fr/mozilla/add-ons/webextensions/index.html b/files/fr/mozilla/add-ons/webextensions/index.html index ff9e2748b2..6173a4c43b 100644 --- a/files/fr/mozilla/add-ons/webextensions/index.html +++ b/files/fr/mozilla/add-ons/webextensions/index.html @@ -11,12 +11,10 @@ translation_of: Mozilla/Add-ons/WebExtensions <p><span class="seoSummary">Les extensions, ou modules complémentaires, peuvent étendre et modifier les fonctionnalités d'un navigateur. Les extensions Firefox sont construites en utilisant la technologie de compatibilité multi-navigateurs de l'API WebExtensions.</span></p> -<p>La technologie d'extensions Firefox est, en grande partie, compatible avec l'<a href="https://developer.chrome.com/extensions">API d'extension</a> supportée par les navigateurs Chromium tels que Google Chrome, Microsoft Edge et Opera. Dans la plupart des cas, les extensions écrites dans ces navigateurs fonctionnent sur Firefox avec <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome">seulement quelques modifications</a>.</p> +<p>La technologie d'extensions Firefox est, en grande partie, compatible avec l'<a href="https://developer.chrome.com/extensions">API d'extension</a> supportée par les navigateurs Chromium tels que Google Chrome, Microsoft Edge et Opera. Dans la plupart des cas, les extensions écrites dans ces navigateurs fonctionnent sur Firefox avec <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome">seulement quelques modifications</a>.</p> -<section class="cleared" id="sect1"> <ul class="card-grid"> <li><span>Guides</span> - <p>Que vous soyez débutant ou à la recherche de conseils plus avancés, renseignez-vous sur comment fonctionnent les extensions et comment utilisez l'API WebExtensions grâce à notre large variété de <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions">tutoriels et guides</a>.</p> </li> <li><span>Références</span> @@ -29,8 +27,6 @@ translation_of: Mozilla/Add-ons/WebExtensions <p>Si vous avez des idées ou des questions ou si vous avez besoin d'aide, vous pouvez nous contacter sur la mailing-liste<a href="https://mail.mozilla.org/listinfo/dev-addons"> dev-addons</a> ou sur la <a href="https://matrix.to/#/!CuzZVoCbeoDHsxMCVJ:mozilla.org?via=mozilla.org&via=matrix.org&via=humanoids.be">room Add-ons </a>sur <a href="https://wiki.mozilla.org/Matrix">Matrix</a>.</p> -<div class="row topicpage-table"> -<div class="section"> <h2 id="Premiers_pas">Premiers pas</h2> <p>Découvrez<a href="/fr/Add-ons/WebExtensions/What_are_WebExtensions"> ce que peuvent faire les extensions Firefox </a>avant d'en faire <a href="/fr/Add-ons/WebExtensions/Your_first_WebExtension">une</a>. Découvrez comment est structurée <a href="/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">une extension</a> et obtenez un aperçu du processus de <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Firefox_workflow_overview">développement et de publication d'extension, style Firefox</a>. Explorez un peu plus en profondeur leurs fonctionnements avec une sélection exhaustif d'<a href="/fr/Add-ons/WebExtensions/Examples">exemples d'extensions</a> que vous pouvez exécuter directement sur Firefox.</p> @@ -57,9 +53,7 @@ translation_of: Mozilla/Add-ons/WebExtensions <li>Le <a href="https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/">portage d'une extension de Google Chrome à Firefox</a>, les <a href="https://extensionworkshop.com/documentation/develop/differences-between-desktop-and-android-extensions/">differences entre les extensions Desktop et Android</a>, et encore plus.</li> <li>Une <a href="https://extensionworkshop.com/documentation/publish/">vue d'ensemble de la publication, de la distribution</a> et de la <a href="https://extensionworkshop.com/documentation/publish/promoting-your-extension/">promotion de votre extension</a>, les <a href="https://extensionworkshop.com/documentation/manage/">bonnes pratiques en matière de cycle de vie des extensions</a>, et encore plus.</li> </ul> -</div> -<div class="section"> <h2 id="Références">Références</h2> <h3 id="JavaScript_APIs">JavaScript APIs</h3> @@ -69,12 +63,3 @@ translation_of: Mozilla/Add-ons/WebExtensions <h3 id="Clés_de_Manifest">Clés de Manifest</h3> <p>Obtenez tous les détails sur les <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json">clés du manifeste</a>, y compris toutes leurs propriétés et paramètres. Vous y trouverez également des informations détaillées sur la <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">compatibilité</a> de chaque clé avec les principaux navigateurs</p> -</div> -</div> - -<div class="SnapLinksContainer" style="margin-left: 0px; margin-top: 0px; display: none;"> -<div class="SL_SelectionRect"> -<div class="SL_SelectionLabel"></div> -</div> -</div> -</section> diff --git a/files/fr/mozilla/add-ons/webextensions/native_messaging/index.html b/files/fr/mozilla/add-ons/webextensions/native_messaging/index.html index e4c938f580..91ec000ec5 100644 --- a/files/fr/mozilla/add-ons/webextensions/native_messaging/index.html +++ b/files/fr/mozilla/add-ons/webextensions/native_messaging/index.html @@ -7,20 +7,20 @@ translation_of: Mozilla/Add-ons/WebExtensions/Native_messaging --- <div>{{AddonSidebar}}</div> -<p>Native messaging permet à une extension d’échanger des messages avec une application native installée sur l’ordinateur de l’utilisateur. Ceci permet que des applications natives puissent fournir un service à des extensions sans avoir besoin d'être atteignables via internet. Un exemple typique est le gestionnaire de mots de passe : l’application native s’occupe du stockage et du chiffrement des mots de passe et communique avec l’extension afin de remplir les formulaires web. Native messaging permet aussi aux extensions d’accéder à des ressources qui ne sont pas accessibles via les API WebExtension, par exemple le matériel hardware particulier.</p> +<p>Native messaging permet à une extension d'échanger des messages avec une application native installée sur l'ordinateur de l'utilisateur. Ceci permet que des applications natives puissent fournir un service à des extensions sans avoir besoin d'être atteignables via internet. Un exemple typique est le gestionnaire de mots de passe : l'application native s'occupe du stockage et du chiffrement des mots de passe et communique avec l'extension afin de remplir les formulaires web. Native messaging permet aussi aux extensions d'accéder à des ressources qui ne sont pas accessibles via les API WebExtension, par exemple le matériel hardware particulier.</p> -<p>L’application native n’est pas installée ou gérée par le navigateur : elle est installée à l’aide du système d’installation du système d’exploitation sous‐jacent. En plus de l’application native elle‐même, vous devrez fournir un fichier JSON appelé « manifest hôte » (host manifest) ou « manifest d’application » (app manifest) et l’installer dans un emplacement défini sur l’ordinateur de l’utilisateur. Le fichier manifest de l’application décrit comment le navigateur peut se connecter à l’application native.</p> +<p>L'application native n'est pas installée ou gérée par le navigateur : elle est installée à l'aide du système d'installation du système d'exploitation sous‐jacent. En plus de l'application native elle‐même, vous devrez fournir un fichier JSON appelé « manifest hôte » (host manifest) ou « manifest d'application » (app manifest) et l'installer dans un emplacement défini sur l'ordinateur de l'utilisateur. Le fichier manifest de l'application décrit comment le navigateur peut se connecter à l'application native.</p> -<p>L’extension doit demander l'<a href="/fr/Add-ons/WebExtensions/manifest.json/permissions">autorisation</a> « nativeMessaging » dans son fichier manifest.json. À l’inverse, l’application native doit accorder l’autorisation à l’extension en incluant son ID dans le champ « allowed_extensions » (extensions autorisées) du manifest de l’application.</p> +<p>L'extension doit demander l'<a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">autorisation</a> « nativeMessaging » dans son fichier manifest.json. À l'inverse, l'application native doit accorder l'autorisation à l'extension en incluant son ID dans le champ « allowed_extensions » (extensions autorisées) du manifest de l'application.</p> -<p>Par la suite, l’extension pourra échanger des messages en JSON avec l’application native en utilisant une série de fonctions de l’API {{WebExtAPIRef("runtime")}}. Du côté de l’application native, les messages seront reçus en utilisant l’entrée standard (stdin, standard input) et envoyés en utilisant la sortie standard (stdout, standard output).</p> +<p>Par la suite, l'extension pourra échanger des messages en JSON avec l'application native en utilisant une série de fonctions de l'API {{WebExtAPIRef("runtime")}}. Du côté de l'application native, les messages seront reçus en utilisant l'entrée standard (stdin, standard input) et envoyés en utilisant la sortie standard (stdout, standard output).</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13833/native-messaging.png" style="display: block; height: 548px; margin-left: auto; margin-right: auto; width: 672px;"></p> +<p><img alt="" src="native-messaging.png" style="display: block; margin-left: auto; margin-right: auto;"></p> -<p>Le support de native messaging dans les extensions est généralement compatible avec Chrome, avec deux grandes différences :</p> +<p>Le support de native messaging dans les extensions est généralement compatible avec Chrome, avec deux grandes différences :</p> <ul> - <li>La liste <code>allowed_extensions</code> du manifest de l’application est un tableau d’ID d’applications, tandis que Chrome liste <code>allowed_origins</code>, sous la forme d'un tableau d'URL "chrome-extension".</li> + <li>La liste <code>allowed_extensions</code> du manifest de l'application est un tableau d'ID d'applications, tandis que Chrome liste <code>allowed_origins</code>, sous la forme d'un tableau d'URL "chrome-extension".</li> <li>Le manifeste de l'application est stocké dans un emplacement différent <a href="https://developer.chrome.com/extensions/nativeMessaging#native-messaging-host-location">comparé à Chrome</a>.</li> </ul> @@ -28,13 +28,13 @@ translation_of: Mozilla/Add-ons/WebExtensions/Native_messaging <h2 id="Mise_en_œuvre">Mise en œuvre</h2> -<h3 id="Le_manifest_de_l’extension_Extension_manifest">Le manifest de l’extension (Extension manifest)</h3> +<h3 id="Le_manifest_de_l'extension_Extension_manifest">Le manifest de l'extension (Extension manifest)</h3> -<p>Si vous souhaitez que votre extension puisse communiquer avec une application native, alors :</p> +<p>Si vous souhaitez que votre extension puisse communiquer avec une application native, alors :</p> <ul> - <li>Vous devez ajouter la <a href="/fr/Add-ons/WebExtensions/manifest.json/permissions">permission</a> dans son fichier <a href="/fr/Add-ons/WebExtensions/manifest.json">manifest.json</a>.</li> - <li>Vous devriez probablement spécifier explicitement l’id de votre add‐on, en utilisant la clé de manifest des <a href="/fr/Add-ons/WebExtensions/manifest.json/applications">applications</a> ( Parce que le manifest de l’application identifiera le jeu d’extensions qui sont autorisées à se connecter à celle-ci via la liste de leur ID).</li> + <li>Vous devez ajouter la <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> dans son fichier <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>.</li> + <li>Vous devriez probablement spécifier explicitement l'id de votre add‐on, en utilisant la clé de manifest des <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">applications</a> ( Parce que le manifest de l'application identifiera le jeu d'extensions qui sont autorisées à se connecter à celle-ci via la liste de leur ID).</li> </ul> <p>Voici un exemple de fichier « manifest.json » :</p> @@ -68,28 +68,28 @@ translation_of: Mozilla/Add-ons/WebExtensions/Native_messaging }</pre> -<h3 id="Le_manifest_de_l’application_App_manifest">Le manifest de l’application (App manifest)</h3> +<h3 id="Le_manifest_de_l'application_App_manifest">Le manifest de l'application (App manifest)</h3> -<p>Le manifest de l’application décrit au navigateur la manière avec laquelle il peut se connecter à l’application native.</p> +<p>Le manifest de l'application décrit au navigateur la manière avec laquelle il peut se connecter à l'application native.</p> <p>Le fichier manifest de l'application doit être installé avec l'application native. C'est-à-dire que le navigateur lit et valide les fichiers de manifeste des applications mais ne les installe ni ne les gère. Ainsi, le modèle de sécurité pour savoir quand et comment ces fichiers sont installés et mis à jour ressemble beaucoup plus à celui des applications natives que celui des extensions utilisant les API WebExtension.</p> -<p>Pour plus de détails sur la syntaxe et l'emplacement du manifeste des applications natives, voir <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_manifests">manifest natifs</a>.</p> +<p>Pour plus de détails sur la syntaxe et l'emplacement du manifeste des applications natives, voir <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Native_manifests">manifest natifs</a>.</p> <p>Par exemple, voici un manifeste pour l'application native "ping_pong" :</p> -<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="punctuation token">{</span> - <span class="property token">"name"</span><span class="operator token">:</span> <span class="string token">"ping_pong"</span><span class="punctuation token">,</span> - <span class="property token">"description"</span><span class="operator token">:</span> <span class="string token">"Example host for native messaging"</span><span class="punctuation token">,</span> - <span class="property token">"path"</span><span class="operator token">:</span> <span class="string token">"/path/to/native-messaging/app/ping_pong.py"</span><span class="punctuation token">,</span> - <span class="property token">"type"</span><span class="operator token">:</span> <span class="string token">"stdio"</span><span class="punctuation token">,</span> - <span class="property token">"allowed_extensions"</span><span class="operator token">:</span> <span class="punctuation token">[</span> <span class="string token">"ping_pong@example.org"</span> <span class="punctuation token">]</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: json">{ + "name": "ping_pong", + "description": "Example host for native messaging", + "path": "/path/to/native-messaging/app/ping_pong.py", + "type": "stdio", + "allowed_extensions": [ "ping_pong@example.org" ] +}</pre> -<p>Ceci autorise l’application dont l’ID est « ping_pong@example.org » à se connecter, en passant le nom « ping_pong » comme paramètre à la fonction de l’API {{WebExtAPIRef("runtime")}} concernée. L’application, elle‐même se trouve dans le fichier « /path/to/native‐messaging/app/ping_pong.py ».</p> +<p>Ceci autorise l'application dont l'ID est « ping_pong@example.org » à se connecter, en passant le nom « ping_pong » comme paramètre à la fonction de l'API {{WebExtAPIRef("runtime")}} concernée. L'application, elle‐même se trouve dans le fichier « /path/to/native‐messaging/app/ping_pong.py ».</p> <div class="note"> -<p><strong>Remarque pour Windows</strong>: dans l’exemple ci‐dessus, l’application native est un script Python. Il peut être compliqué d’amener Windows à faire fonctionner correctement des scripts Python, une méthode alternative est de fournir un fichier .bat, et de l’indiquer dans le manifest :</p> +<p><strong>Remarque pour Windows</strong>: dans l'exemple ci‐dessus, l'application native est un script Python. Il peut être compliqué d'amener Windows à faire fonctionner correctement des scripts Python, une méthode alternative est de fournir un fichier .bat, et de l'indiquer dans le manifest :</p> <pre class="brush: json">{ "name": "ping_pong", @@ -99,32 +99,32 @@ translation_of: Mozilla/Add-ons/WebExtensions/Native_messaging "allowed_extensions": [ "ping_pong@example.org" ] }</pre> -<p>Le fichier batch invoquera alors le script Python :</p> +<p>Le fichier batch invoquera alors le script Python :</p> <pre class="brush: bash">@echo off python -u "c:\\path\\to\\native-messaging\\app\\ping_pong.py"</pre> </div> -<h2 id="Opérations_d’échange_des_messages">Opérations d’échange des messages</h2> +<h2 id="Opérations_d'échange_des_messages">Opérations d'échange des messages</h2> <p>Ayant appliqué la configuration de ci‐dessus, une extension peut échanger des messages JSON avec une application native.</p> -<h3 id="Du_côté_de_l’extension">Du côté de l’extension</h3> +<h3 id="Du_côté_de_l'extension">Du côté de l'extension</h3> -<p>La messagerie native ne peut pas être utilisée directement dans les scripts de contenu ; vous devrez le <a href="https://wiki.developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">faire indirect via des scripts d'arrière plan</a>.</p> +<p>La messagerie native ne peut pas être utilisée directement dans les scripts de contenu ; vous devrez le <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#communicating_with_background_scripts">faire indirect via des scripts d'arrière plan</a>.</p> <p>Il y a deux modèles à utiliser ici : la messagerie basée sur la connexion et la messagerie sans connexion.</p> <h4 id="Messagerie_basée_sur_une_connexion">Messagerie basée sur une connexion</h4> -<p>Avec cette manière de faire, vous appelez la fonction {{WebExtAPIRef("runtime.connectNative()")}}, en lui passant comme paramètre le nom de l’application (la valeur de la propriété "name" du manifest de l’application). Ceci lance l’application si elle n’est pas encore démarrée et renverra un objet {{WebExtAPIRef("runtime.Port")}} à l’extension.</p> +<p>Avec cette manière de faire, vous appelez la fonction {{WebExtAPIRef("runtime.connectNative()")}}, en lui passant comme paramètre le nom de l'application (la valeur de la propriété "name" du manifest de l'application). Ceci lance l'application si elle n'est pas encore démarrée et renverra un objet {{WebExtAPIRef("runtime.Port")}} à l'extension.</p> -<p>L’application native passe deux arguments lorsqu’elle démarre :</p> +<p>L'application native passe deux arguments lorsqu'elle démarre :</p> <ul> - <li>le chemin complet du manifest de l’application</li> - <li>(nouveau dans Firefox 55) l'ID (tel qu'indiqué dans la clé du manifest.json de <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">browser_specific_settings</a>) of the add-on that started it.</li> + <li>le chemin complet du manifest de l'application</li> + <li>(nouveau dans Firefox 55) l'ID (tel qu'indiqué dans la clé du manifest.json de <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">browser_specific_settings</a>) of the add-on that started it.</li> </ul> <div class="note"> @@ -136,11 +136,11 @@ python -u "c:\\path\\to\\native-messaging\\app\\ping_pong.py"</pre> </ul> </div> -<p>L’aplication continue de fonctionner jusqu’à ce que l’extension invoque <code>Port.disconnect()</code> ou jusqu'à ce que la page connectée soit fermée.</p> +<p>L'aplication continue de fonctionner jusqu'à ce que l'extension invoque <code>Port.disconnect()</code> ou jusqu'à ce que la page connectée soit fermée.</p> <p>Pour envoyer des messages en utilisant <code>Port</code>, utilisez sa fonction <code>postMessage()</code>, en passant le message JSON à envoyer. Pour écouter les messages en utilisant <code>Port</code>, ajouter un écouteur (<em>listener</em>) en utilisant sa fonction <code>onMessage.addListener()</code>.</p> -<p>Voici un exemple de script « <em>background</em> » qui établit une connection avec l’application « ping_pong », qui écoute à l’attente de messages de celle‐ci et qui lui envoie un message « ping » à chaque fois que l’utilisateur clique sur l’action du navigateur (<em>browser action</em>) :</p> +<p>Voici un exemple de script « <em>background</em> » qui établit une connection avec l'application « ping_pong », qui écoute à l'attente de messages de celle‐ci et qui lui envoie un message « ping » à chaque fois que l'utilisateur clique sur l'action du navigateur (<em>browser action</em>) :</p> <pre class="brush: js">/* On startup, connect to the "ping_pong" app. @@ -164,24 +164,24 @@ browser.browserAction.onClicked.addListener(() => { <h4 id="Messagerie_sans_connexion">Messagerie sans connexion</h4> -<p>Avec cette manière de faire, vous invoquez la fonction {{WebExtAPIRef("runtime.sendNativeMessage()")}}, en lui passant comme arguments :</p> +<p>Avec cette manière de faire, vous invoquez la fonction {{WebExtAPIRef("runtime.sendNativeMessage()")}}, en lui passant comme arguments :</p> <ul> - <li>le nom de l’application,</li> + <li>le nom de l'application,</li> <li>le message JSON à envoyer,</li> <li>et optionnellement un callback.</li> </ul> -<p>Une nouvelle instance de l’application sera créée pour chaque message. L’application native passe deux arguments lorsqu’elle démarre :</p> +<p>Une nouvelle instance de l'application sera créée pour chaque message. L'application native passe deux arguments lorsqu'elle démarre :</p> <ul> - <li>le chemin complet du manifest de l’application</li> - <li>(nouveau dans Firefox 55), l’ID (tel qu'indiqué dans la clé du manifest.json de <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">browser_specific_settings</a>) de l’add‐on qui l’a démarré.</li> + <li>le chemin complet du manifest de l'application</li> + <li>(nouveau dans Firefox 55), l'ID (tel qu'indiqué dans la clé du manifest.json de <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">browser_specific_settings</a>) de l'add‐on qui l'a démarré.</li> </ul> -<p>Le premier message envoyé par l’application est traité comme une réponse à l’invocation de la fonction <code>sendNativeMessage()</code>, et sera passé dans le callback.</p> +<p>Le premier message envoyé par l'application est traité comme une réponse à l'invocation de la fonction <code>sendNativeMessage()</code>, et sera passé dans le callback.</p> -<p>Voici l’exemple précédent réécrit en utilisant <code>runtime.sendNativeMessage()</code>:</p> +<p>Voici l'exemple précédent réécrit en utilisant <code>runtime.sendNativeMessage()</code>:</p> <pre class="brush: js">function onResponse(response) { console.log("Received " + response); @@ -203,13 +203,13 @@ browser.browserAction.onClicked.addListener(() => { }); </pre> -<h3 id="Du_côté_de_l’application">Du côté de l’application</h3> +<h3 id="Du_côté_de_l'application">Du côté de l'application</h3> -<p>Du côté de l’application, vous utilisez l’entrée standard (standard input) pour recevoir les messages, et la sortie standard (standard output) pour les envoyer.</p> +<p>Du côté de l'application, vous utilisez l'entrée standard (standard input) pour recevoir les messages, et la sortie standard (standard output) pour les envoyer.</p> -<p>Chaque message est sérialisé sous forme de JSON, est encodé en UTF‐8 et est précédé d’une valeur 32 bits qui contient la longueur du message dans l’ordre des octets natifs.</p> +<p>Chaque message est sérialisé sous forme de JSON, est encodé en UTF‐8 et est précédé d'une valeur 32 bits qui contient la longueur du message dans l'ordre des octets natifs.</p> -<p>La taille maximum d’un seul message envoyé par l’application est de 1MB. La taille maximum d’un message envoyé vers l’application est de 4GB.</p> +<p>La taille maximum d'un seul message envoyé par l'application est de 1MB. La taille maximum d'un message envoyé vers l'application est de 4GB.</p> <p>Voici un exemple écrit en Python. Il écoute les messages de l'extension. Notez que le fichier doit être exécutable sous Linux. Si le message est "ping", il répond par un message "pong". C'est la version Python 2 :</p> @@ -255,7 +255,7 @@ while True: <p>En Python 3, les données binaires reçues doivent être décodées en une chaîne. Le contenu à renvoyer à l'addon doit être encodé en données binaires à l'aide d'une structure :</p> -<pre class="brush: python line-numbers"><code>#!/usr/bin/python -u +<pre class="brush: python line-numbers">#!/usr/bin/python -u # Note that running python with the `-u` flag is required on Windows, # in order to ensure that stdin and stdout are opened in binary, rather @@ -295,74 +295,74 @@ def send_message(encoded_message): while True: message = get_message() if message == "ping": - send_message(encode_message("pong"))</code></pre> + send_message(encode_message("pong"))</pre> -<h2 id="Fermeture_de_l’application_native">Fermeture de l’application native</h2> +<h2 id="Fermeture_de_l'application_native">Fermeture de l'application native</h2> -<p>Si vous vous êtes connecté à l’application native en utilisant <code>runtime.connectNative()</code>, alors elle continuera de fonctionner jusqu’à ce que l’extension appelle <code>Port.disconnect()</code> ou que la page qui s'y est connectée soit fermée. Si vous avez démarré l’application native en utilisant <code>runtime.sendNativeMessage()</code>, alors elle sera fermée après qu’elle aura reçu le message et envoyé une réponse.</p> +<p>Si vous vous êtes connecté à l'application native en utilisant <code>runtime.connectNative()</code>, alors elle continuera de fonctionner jusqu'à ce que l'extension appelle <code>Port.disconnect()</code> ou que la page qui s'y est connectée soit fermée. Si vous avez démarré l'application native en utilisant <code>runtime.sendNativeMessage()</code>, alors elle sera fermée après qu'elle aura reçu le message et envoyé une réponse.</p> -<p>Pour fermer l’application native :</p> +<p>Pour fermer l'application native :</p> <ul> - <li>Sur les système d’exploitation *.nix comme Linux ou OS X, le navigateur envoie un SIGTERM à l’application native, puis un SIGKILL après que l’application ait eût l’occasion de finir de manière normale. Ces signaux sont propagés à tout sous‐processus sauf pour ceux qui se trouvent dans de nouveaux groupes de processus.</li> - <li>Sous windows, le navigateur met le processus de l’application native dans un <a href="https://msdn.microsoft.com/fr-fr/library/windows/desktop/ms684161(v=vs.85).aspx">Job object</a> et tue le processus. Si l’application native lance un autre processus et désire qu’il reste ouvert après que l’application native elle même soit fermée alors l’application native doit démarrer un autre processus avec le paramètre <code><a href="https://msdn.microsoft.com/en-us/library/windows/desktop/ms684863(v=vs.85).aspx">CREATE_BREAKAWAY_FROM_JOB</a></code>.</li> + <li>Sur les système d'exploitation *.nix comme Linux ou OS X, le navigateur envoie un SIGTERM à l'application native, puis un SIGKILL après que l'application ait eût l'occasion de finir de manière normale. Ces signaux sont propagés à tout sous‐processus sauf pour ceux qui se trouvent dans de nouveaux groupes de processus.</li> + <li>Sous windows, le navigateur met le processus de l'application native dans un <a href="https://msdn.microsoft.com/fr-fr/library/windows/desktop/ms684161(v=vs.85).aspx">Job object</a> et tue le processus. Si l'application native lance un autre processus et désire qu'il reste ouvert après que l'application native elle même soit fermée alors l'application native doit démarrer un autre processus avec le paramètre <code><a href="https://msdn.microsoft.com/fr/library/windows/desktop/ms684863(v=vs.85).aspx">CREATE_BREAKAWAY_FROM_JOB</a></code>.</li> </ul> <h2 id="Dépannage">Dépannage</h2> -<p>Si quelque chose se passe mal, vérifier dans la <a href="/fr/Add-ons/WebExtensions/Debugging#Viewing_log_output">console du navigateur</a>. Si l’application native renvoit quelque‐chose vers stderr (strandard error), le navigateur le renverra vers la console du navigateur. Donc si vous avez réussi à lancer l’application native, vous verrez toutes les messages d’erreurs qu’elle émet.</p> +<p>Si quelque chose se passe mal, vérifier dans la <a href="https://extensionworkshop.com/documentation/develop/debugging/#viewing_log_output">console du navigateur</a>. Si l'application native renvoit quelque‐chose vers stderr (strandard error), le navigateur le renverra vers la console du navigateur. Donc si vous avez réussi à lancer l'application native, vous verrez toutes les messages d'erreurs qu'elle émet.</p> -<p>Si vous n’avez pas réussi à démarrer l’application, vous devriez voir un message d’erreur vous donnant un indice sur le problème.</p> +<p>Si vous n'avez pas réussi à démarrer l'application, vous devriez voir un message d'erreur vous donnant un indice sur le problème.</p> <pre>"No such native application <name>"</pre> <ul> - <li> Vérifiez que le nom passé comme argument à la fonction <code>runtime.connectNative()</code> correspond au nom dans le manifest de l’application</li> - <li>OS X / Linux : vérifiez que le nom du fichier de manifest de l’application est <name>.json.</li> - <li>Windows : vérifiez que la clé de registre est dans l’endroit correcte, et que son nom correspond au « name » dans le manifest de l’application.</li> - <li>Windows : vérifiez que le chemin donné dans la clé de registre pointe vers le manifest de l’application.</li> + <li>Vérifiez que le nom passé comme argument à la fonction <code>runtime.connectNative()</code> correspond au nom dans le manifest de l'application</li> + <li>OS X / Linux : vérifiez que le nom du fichier de manifest de l'application est <name>.json.</li> + <li>Windows : vérifiez que la clé de registre est dans l'endroit correcte, et que son nom correspond au « name » dans le manifest de l'application.</li> + <li>Windows : vérifiez que le chemin donné dans la clé de registre pointe vers le manifest de l'application.</li> </ul> <pre>"Error: Invalid application <name>"</pre> <ul> - <li>Vérifier que le nom de l’application ne contient pas de caractères invalides.</li> + <li>Vérifier que le nom de l'application ne contient pas de caractères invalides.</li> </ul> <pre>"'python' is not recognized as an internal or external command, ..."</pre> <ul> - <li>Windows : Si votre application est un script écrit en Python, vérifiez que Python est installé et que vous avez un chemin définit pour lui.</li> + <li>Windows : Si votre application est un script écrit en Python, vérifiez que Python est installé et que vous avez un chemin définit pour lui.</li> </ul> <pre>"File at path <path> does not exist, or is not executable"</pre> <ul> - <li>Si vous voyez ce message, alors le fichier de manifest de l’application a été trouvé.</li> - <li>Vérifier que le « chemin » dans le manifest de l’application est correct.</li> - <li>Windows : vérifiez que vous avez « échappé » les séparateurs du chemin ("c:\\path\\to\\file").</li> - <li>Vérifiez que l’application se trouve bien à l’endroit indiqué par la propriété « path » dans le manifest de l’application.</li> - <li>Vérifiez que l’application est exécutable.</li> + <li>Si vous voyez ce message, alors le fichier de manifest de l'application a été trouvé.</li> + <li>Vérifier que le « chemin » dans le manifest de l'application est correct.</li> + <li>Windows : vérifiez que vous avez « échappé » les séparateurs du chemin ("c:\\path\\to\\file").</li> + <li>Vérifiez que l'application se trouve bien à l'endroit indiqué par la propriété « path » dans le manifest de l'application.</li> + <li>Vérifiez que l'application est exécutable.</li> </ul> <pre>"This extension does not have permission to use native application <name>"</pre> <ul> - <li>Vérifier que le tableau « allowed_extensions » dans le manifest de l’application contient l’ID de l’add‐on.</li> + <li>Vérifier que le tableau « allowed_extensions » dans le manifest de l'application contient l'ID de l'add‐on.</li> </ul> <pre>"TypeError: browser.runtime.connectNative is not a function"</pre> <ul> - <li>Vérifiez que l’extension à la permission « nativeMessaging »</li> + <li>Vérifiez que l'extension à la permission « nativeMessaging »</li> </ul> -<pre>"[object Object] NativeMessaging.jsm:218"</pre> +<pre>"[object Object] NativeMessaging.jsm:218"</pre> <ul> - <li>Il y a eu un problème lors du démarrage de l’application.</li> + <li>Il y a eu un problème lors du démarrage de l'application.</li> </ul> -<h2 id="Incompatibilités_avec_Chrome">Incompatibilités avec Chrome</h2> +<h2 id="chrome_incompatibilities">Incompatibilités avec Chrome</h2> -<p>{{Page("Mozilla / Add‐ons / WebExtensions / Chrome_incompatibilities", "Native_messaging")}}</p> +<p>Il existe un certain nombre de différences entre les navigateurs qui affectent la messagerie native dans les extensions web, notamment les arguments transmis à l'app native, l'emplacement du fichier manifeste, etc. Ces différences sont abordées dans <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities#native_messaging">Incompatibilités Chrome > Messagerie native</a>.</p> diff --git a/files/fr/mozilla/add-ons/webextensions/what_next_/index.html b/files/fr/mozilla/add-ons/webextensions/what_next_/index.html index 121fe18d09..eec74b2a28 100644 --- a/files/fr/mozilla/add-ons/webextensions/what_next_/index.html +++ b/files/fr/mozilla/add-ons/webextensions/what_next_/index.html @@ -56,8 +56,8 @@ original_slug: Mozilla/Add-ons/WebExtensions/que_faire_ensuite <li>En savoir plus sur les concepts fondamentaux des extensions de navigateur, en commençant par les détails sur l'<a href="/fr/Add-ons/WebExtensions/Using_the_JavaScript_APIs">utilisation des APIs Javascript</a>.</li> <li>Un guide des <a href="/fr/Add-ons/WebExtensions/user_interface">composants de l'interface utilisateur</a> disponibles pour les extensions de votre navigateur.</li> <li>Une collection de guides pratiques sur la réalisation des tâches clés dans vos extensions ou l'utilisation des API JavaScript.</li> - <li>Un guide de référence complet sur les <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">APIs JavaScript</a>.</li> - <li>Un guide de référence complet sur les <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">clés du manifeste</a>.</li> + <li>Un guide de référence complet sur les <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">APIs JavaScript</a>.</li> + <li>Un guide de référence complet sur les <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json">clés du manifeste</a>.</li> </ul> <p>Vous voudrez également vous rendre à l'Atelier des extensions où vous trouverez tout ce que vous devez savoir sur la création d'extensions pour Firefox, notamment :</p> diff --git a/files/fr/mozilla/firefox/releases/77/index.html b/files/fr/mozilla/firefox/releases/77/index.html index e0cde338a0..5520236f82 100644 --- a/files/fr/mozilla/firefox/releases/77/index.html +++ b/files/fr/mozilla/firefox/releases/77/index.html @@ -96,7 +96,7 @@ original_slug: Mozilla/Firefox/Versions/77 <h3 id="Changements_manifestes">Changements manifestes</h3> <ul> - <li>Les permissions suivantes sont désormais facultatives, elles peuvent être spécifiées dans la clé du manifeste <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions">optional_permissions</a></code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions"> </a>et demandées en utilisant l'API {{WebExtAPIRef("permissions")}} : <code>browsingData</code> ({{bug(1630417)}}), <code>pkcs11</code> ({{bug(1630418)}}), <code>proxy</code> ({{bug(1548011)}}), et <code>sessions</code> ({{bug(1630414)}}).</li> + <li>Les permissions suivantes sont désormais facultatives, elles peuvent être spécifiées dans la clé du manifeste <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions">optional_permissions</a></code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions"> </a>et demandées en utilisant l'API {{WebExtAPIRef("permissions")}} : <code>browsingData</code> ({{bug(1630417)}}), <code>pkcs11</code> ({{bug(1630418)}}), <code>proxy</code> ({{bug(1548011)}}), et <code>sessions</code> ({{bug(1630414)}}).</li> </ul> <h4 id="Suppressions_10">Suppressions</h4> diff --git a/files/fr/orphaned/web/api/navigatoronline/online/index.html b/files/fr/orphaned/web/api/navigatoronline/online/index.html index 07dbaef7a9..fe5c16d221 100644 --- a/files/fr/orphaned/web/api/navigatoronline/online/index.html +++ b/files/fr/orphaned/web/api/navigatoronline/online/index.html @@ -45,7 +45,7 @@ original_slug: Web/API/NavigatorOnLine/onLine <p>Si le navigateur ne prend pas en charge <code>navigator.onLine</code>, l'exemple ci-dessus apparaîtra toujours comme <code>false</code> / <code>undefined</code>.</p> -<p>Pour voir les modifications de l'état du réseau, utilisez <a href="https://wiki.developer.mozilla.org/en-US/docs/DOM/element.addEventListener">addEventListener</a> pour écouter les événements sur {{domxref ("Window/offline_event", "window.online")}} et {{domxref ("Window/offline_event", "window.offline")}}, comme dans l'exemple suivant:</p> +<p>Pour voir les modifications de l'état du réseau, utilisez <a href="/fr/docs/DOM/element.addEventListener">addEventListener</a> pour écouter les événements sur {{domxref ("Window/offline_event", "window.online")}} et {{domxref ("Window/offline_event", "window.offline")}}, comme dans l'exemple suivant:</p> <pre class="brush: js notranslate">window.addEventListener('offline', function(e) { ... }) window.addEventListener('offline', (e) => { ... }) @@ -79,7 +79,7 @@ window.addEventListener('online', (e) => { ... }) <h2 id="Notes">Notes</h2> -<p>Voir <a href="https://wiki.developer.mozilla.org/en-US/docs/Online_and_offline_events">Événements en ligne / hors ligne</a> pour une description plus détaillée de cette propriété ainsi que des nouvelles fonctionnalités hors ligne introduites dans Firefox 3.</p> +<p>Voir <a href="/fr/docs/Online_and_offline_events">Événements en ligne / hors ligne</a> pour une description plus détaillée de cette propriété ainsi que des nouvelles fonctionnalités hors ligne introduites dans Firefox 3.</p> <h2 id="Voir_également">Voir également</h2> diff --git a/files/fr/tools/accessibility_inspector/simulation/index.html b/files/fr/tools/accessibility_inspector/simulation/index.html index 50879047a1..1ac35c878b 100644 --- a/files/fr/tools/accessibility_inspector/simulation/index.html +++ b/files/fr/tools/accessibility_inspector/simulation/index.html @@ -12,7 +12,9 @@ tags: translation_of: Tools/Accessibility_inspector/Simulation original_slug: Outils/Inspecteur_accessibilite/Simulation --- -<p><span class="seoSummary">Le simulateur dans <a href="https://wiki.developer.mozilla.org/fr/docs/Outils/Inspecteur_accessibilite">l'inspecteur de l'accessibilité</a> des outils de développement de Firefox vous permet de voir à quoi ressemblerait une page web pour les utilisateurs souffrant de diverses formes de <em>déficience de la perception des couleurs</em> (« dyschromatopsie » plus connue sous le nom de « daltonisme »), ainsi que de <em>perte de sensibilité au contraste</em>.</span></p> +<div>{{ToolsSidebar}}</div> + +<p><span class="seoSummary">Le simulateur dans <a href="/fr/docs/Tools/Accessibility_inspector">l'inspecteur de l'accessibilité</a> des outils de développement de Firefox vous permet de voir à quoi ressemblerait une page web pour les utilisateurs souffrant de diverses formes de <em>déficience de la perception des couleurs</em> (« dyschromatopsie » plus connue sous le nom de « daltonisme »), ainsi que de <em>perte de sensibilité au contraste</em>.</span></p> <p>La plupart des personnes atteintes de daltonisme peuvent voir les couleurs, mais ne voient pas toutes les distinctions que les personnes ayant une vision normale des couleurs peuvent voir. Les déficiences de la vision des couleurs affectent la perception de tout le spectre des couleurs, et pas seulement de certaines couleurs spécifiques comme le rouge ou le vert. Les déficiences de la vision des couleurs affectent environ 8 % des hommes et 0,5 % des femmes. Les formes les plus courantes de daltonisme (communément regroupées sous le nom de « daltonisme rouge-vert ») touchent plus d'hommes que de femmes, car elles sont dues à une mutation d'un gène du chromosome X, dont les hommes ne possèdent qu'une copie.</p> @@ -51,35 +53,35 @@ original_slug: Outils/Inspecteur_accessibilite/Simulation <tbody> <tr> <td>Aucun</td> - <td><img alt="Colorful image of a cat's face, without modification" src="https://mdn.mozillademos.org/files/16876/28369550088_617db0d6f2_m.jpg" style="height: 240px; width: 240px;"></td> + <td><img alt="Colorful image of a cat's face, without modification" src="28369550088_617db0d6f2_m.jpg"></td> </tr> <tr> <td>Protanomalie (rouge faible)</td> - <td><img alt="Colorful image of a cat's face, with deuteranomaly simulation" src="https://mdn.mozillademos.org/files/16877/colorcat_protanomaly.png" style="height: 250px; width: 250px;"></td> + <td><img alt="Colorful image of a cat's face, with deuteranomaly simulation" src="colorcat_protanomaly.png"></td> </tr> <tr> <td>Deutéranomalie (vert faible)</td> - <td><img alt="Colorful image of a cat's face, with deuteranomaly simulation" src="https://mdn.mozillademos.org/files/16878/colorcat_deuteranomaly.png" style="height: 250px; width: 250px;"></td> + <td><img alt="Colorful image of a cat's face, with deuteranomaly simulation" src="colorcat_deuteranomaly.png"></td> </tr> <tr> <td>Tritanomalie (bleu faible)</td> - <td><img alt="Colorful image of a cat's face, with tritanomaly simulation" src="https://mdn.mozillademos.org/files/16879/colorcat_tritanomaly.png" style="height: 250px; width: 250px;"></td> + <td><img alt="Colorful image of a cat's face, with tritanomaly simulation" src="colorcat_tritanomaly.png"></td> </tr> <tr> <td>Protanopie (pas de rouge)</td> - <td><img alt="Colorful image of a cat's face, with protanopia simulation" src="https://mdn.mozillademos.org/files/16880/colorcat_protanopia.png" style="height: 250px; width: 250px;"></td> + <td><img alt="Colorful image of a cat's face, with protanopia simulation" src="colorcat_protanopia.png"></td> </tr> <tr> <td>Deutéranopie (pas de vert)</td> - <td><img alt="Colorful image of a cat's face, with deuteranopia simulation" src="https://mdn.mozillademos.org/files/16881/colorcat_deuteranopia.png" style="height: 250px; width: 250px;"></td> + <td><img alt="Colorful image of a cat's face, with deuteranopia simulation" src="colorcat_deuteranopia.png"></td> </tr> <tr> <td>Tritanopie (pas de bleu)</td> - <td><img alt="Colorful image of a cat's face, with tritanopia simulation" src="https://mdn.mozillademos.org/files/16882/colorcat_tritanopia.png" style="height: 250px; width: 250px;"></td> + <td><img alt="Colorful image of a cat's face, with tritanopia simulation" src="colorcat_tritanopia.png"></td> </tr> <tr> <td>Perte de contraste</td> - <td><img alt="Colorful image of a cat's face, with contrast loss simulation" src="https://mdn.mozillademos.org/files/16883/colorcat_contrastloss.png" style="height: 250px; width: 250px;"></td> + <td><img alt="Colorful image of a cat's face, with contrast loss simulation" src="colorcat_contrastloss.png"></td> </tr> </tbody> </table> diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html index 8b3578c121..32d2c8465d 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html @@ -10,7 +10,7 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_ --- <p>Le <a href="https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio">contraste de la couleur</a> entre l'arrière-plan et le contenu de premier-plan (qui est en général du texte) doit être assez prononcé pour assurer la lisibilité.</p> -<p><span class="tlid-translation translation" lang="fr"><span title="">Lors de la conception d'interfaces lisibles pour différentes capacités de vision, les directives WCAG recommandent les rapports de contraste suivants:</span></span></p> +<p>Lors de la conception d'interfaces lisibles pour différentes capacités de vision, les directives WCAG recommandent les rapports de contraste suivants:</p> <table class="standard-table"> <thead> @@ -32,24 +32,24 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_ <td>4.5 : 1</td> </tr> <tr> - <td><span class="tlid-translation translation" lang="fr"><span title="">Composants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiques</span></span></td> + <td>Composants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiques</td> <td>3 : 1</td> <td>Non défini</td> </tr> </tbody> </table> -<p><span class="tlid-translation translation" lang="fr"><span title="">Ces ratios ne s'appliquent pas au texte "accessoire", comme les contrôles inactifs, les logotypes ou le texte purement décoratif.</span></span></p> +<p>Ces ratios ne s'appliquent pas au texte "accessoire", comme les contrôles inactifs, les logotypes ou le texte purement décoratif.</p> <p>Voir la section {{anch("Solution")}} ci-dessous pour plus d'informations.</p> -<p><span class="tlid-translation translation" lang="fr"><span title="">Un bon contraste des couleurs sur votre site profite à tous vos utilisateurs, mais celà est particulièrement intéressant pour les utilisateurs souffrant de certains types de daltonisme et d'autres particularités similaires, qui rencontrent un faible contraste et ont du mal à faire la différence entre des couleurs proches.</span> <span title="">En effet, ces utilisateurs ne voient pas les zones claires et sombres aussi facilement que ceux sans ces particularités et ont donc du mal à voir les bords, les bordures et d'autres détails.</span></span></p> +<p>Un bon contraste des couleurs sur votre site profite à tous vos utilisateurs, mais celà est particulièrement intéressant pour les utilisateurs souffrant de certains types de daltonisme et d'autres particularités similaires, qui rencontrent un faible contraste et ont du mal à faire la différence entre des couleurs proches. En effet, ces utilisateurs ne voient pas les zones claires et sombres aussi facilement que ceux sans ces particularités et ont donc du mal à voir les bords, les bordures et d'autres détails.</p> -<p><span class="tlid-translation translation" lang="fr"><span title="">C'est bien d'avoir un design cool sur votre site, mais le design ne vaut rien si vos utilisateurs ne peuvent pas lire votre contenu.</span></span></p> +<p>C'est bien d'avoir un design cool sur votre site, mais le design ne vaut rien si vos utilisateurs ne peuvent pas lire votre contenu.</p> <h2 id="Exemples">Exemples</h2> -<p>Jetons un coup d<span class="tlid-translation translation" lang="fr"><span title="">'œil à du</span></span> code HTML et CSS assez simple:</p> +<p>Jetons un coup d'œil à du code HTML et CSS assez simple:</p> <pre class="brush: html"><div class="bon">Bon contraste</div> <div class="mauvais">Mauvais contraste</div></pre> @@ -66,7 +66,7 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_ background-color: #400064; }</pre> -<p><span class="tlid-translation translation" lang="fr"><span title="">Les deux textes ont leur couleur noire par défaut.</span></span> La "bonne" <code><div></code> a un fond violet clair, ce qui rend le texte facile à lire:</p> +<p>Les deux textes ont leur couleur noire par défaut. La "bonne" <code><div></code> a un fond violet clair, ce qui rend le texte facile à lire:</p> <div class="hidden"> <h4 id="exemple1">exemple1</h4> @@ -125,39 +125,39 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_ <h2 id="Solution">Solution</h2> -<p><span class="tlid-translation translation" lang="fr"><span title="">Lorsque vous choisissez un jeu de couleurs pour votre site Web, choisissez des couleurs de premier plan et d'arrière-plan qui offrent un bon contraste.</span> <span title="">Faites en sorte que le contraste des couleurs soit aussi bon que possible dans vos contraintes de conception - optez idéalement pour la note AAA (voir paragraphe 1.4.6 ci-dessous), mais répondez au moins à la note AA (voir paragraphe 1.4.3 ci-dessous).</span></span></p> +<p>Lorsque vous choisissez un jeu de couleurs pour votre site Web, choisissez des couleurs de premier plan et d'arrière-plan qui offrent un bon contraste. Faites en sorte que le contraste des couleurs soit aussi bon que possible dans vos contraintes de conception - optez idéalement pour la note AAA (voir paragraphe 1.4.6 ci-dessous), mais répondez au moins à la note AA (voir paragraphe 1.4.3 ci-dessous).</p> -<p><span class="tlid-translation translation" lang="fr"><span title="">Si vous incluez du contenu non textuel tel qu'une vidéo ou une animation, vous devrez suivre le paragraphe 1.4.11 (encore une fois, voir ci-dessous).</span></span></p> +<p>Si vous incluez du contenu non textuel tel qu'une vidéo ou une animation, vous devrez suivre le paragraphe 1.4.11 (encore une fois, voir ci-dessous).</p> -<p>Pour vérifier votre contraste lorsque vous effectuez un choix de couleurs, vous pouvez utiliser le <a class="external external-icon" href="http://webaim.org/resources/contrastchecker/" rel="noopener">Vérificateur de Contraste des Couleurs</a> de WebAIM.</p> +<p>Pour vérifier votre contraste lorsque vous effectuez un choix de couleurs, vous pouvez utiliser le <a href="https://webaim.org/resources/contrastchecker/">Vérificateur de Contraste des Couleurs</a> de WebAIM.</p> -<p>Vous pouvez également vérifier le contraste des couleurs directement via les outils de développement de Firefox — consultez notre guide de l'<a href="https://developer.mozilla.org/fr/docs/Outils/Inspecteur_accessibilite">Inspecteur de l'accessibilité</a>, et en particulier la section <a href="https://developer.mozilla.org/fr/docs/Outils/Inspecteur_accessibilite#S%C3%A9lecteur_d'accessibilit%C3%A9">Vérifier les problèmes d'accessibilité</a>. Essayez de les utiliser sur les exemples dans la section de description.</p> +<p>Vous pouvez également vérifier le contraste des couleurs directement via les outils de développement de Firefox — consultez notre guide de l'<a href="/fr/docs/Tools/Accessibility_inspector">Inspecteur de l'accessibilité</a>, et en particulier la section <a href="/fr/docs/Outils/Inspecteur_accessibilite#S%C3%A9lecteur_d'accessibilit%C3%A9">Vérifier les problèmes d'accessibilité</a>. Essayez de les utiliser sur les exemples dans la section de description.</p> -<h2 id="Critères_de_réussite_associés_aux_WCAG"><span class="tlid-translation translation" lang="fr"><span title="">Critères de réussite associés aux WCAG</span></span></h2> +<h2 id="Critères_de_réussite_associés_aux_WCAG">Critères de réussite associés aux WCAG</h2> <dl> <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">1.4.3 Contraste minimum (AA)</a></dt> - <dd><span class="tlid-translation translation" lang="fr"><span title="">Le contraste des couleurs entre le contenu d'arrière-plan et de premier plan doit être au minimum pour garantir la lisibilité:</span></span> + <dd>Le contraste des couleurs entre le contenu d'arrière-plan et de premier plan doit être au minimum pour garantir la lisibilité: <ul> <li>Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 4.5:1.</li> <li>Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 3:1. Le texte "plus grand" est défini comme au moins 18pt, ou 14pt en gras.</li> </ul> </dd> <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-enhanced">1.4.6 Contraste amélioré (AAA)</a></dt> - <dd><span class="tlid-translation translation" lang="fr"><span title="">Cela suit et s'appuie sur le critère 1.4.3.</span></span> + <dd>Cela suit et s'appuie sur le critère 1.4.3. <ul> <li>Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 7:1.</li> <li>Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 4.5:1.</li> </ul> </dd> <dt><a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">1.4.11 Contraste non textuel (AA)</a> (ajouté en 2.1)</dt> - <dd><span class="tlid-translation translation" lang="fr"><span title="">Il doit y avoir un ratio de contraste de couleur minimum de 3 à 1 pour les composants de l'interface utilisateur et les objets graphiques.</span></span></dd> + <dd>Il doit y avoir un ratio de contraste de couleur minimum de 3 à 1 pour les composants de l'interface utilisateur et les objets graphiques.</dd> </dl> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/a11y/CSS_and_JavaScript#Couleur_et_contraste_de_couleur">Couleur et contraste de couleur</a></li> - <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML#%C3%89tiquettes_multiples">Étiquettes multiples</a></li> + <li><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#couleur_et_contraste_de_couleur">Couleur et contraste de couleur</a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML#%C3%89tiquettes_multiples">Étiquettes multiples</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Comprendre le contraste non textuel</a></li> </ul> diff --git a/files/fr/web/api/console_api/index.html b/files/fr/web/api/console_api/index.html index d96eeb965d..f261988da5 100644 --- a/files/fr/web/api/console_api/index.html +++ b/files/fr/web/api/console_api/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Console_API <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Implémentation de Safari DevTools</a></li> </ul> -<p>L'utilisation est très simple - l'objet {{domxref ("console")}} - disponible via {{domxref ("window.console")}}, ou {{domxref ("WorkerGlobalScope.console")}} dans les workers; accessible en utilisant uniquement la <code>console</code> - contient de nombreuses méthodes que vous pouvez appeler pour effectuer des tâches de débogage rudimentaires, généralement axées sur la journalisation de diverses valeurs dans la <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console">console Web</a> du navigateur.</p> +<p>L'utilisation est très simple - l'objet {{domxref ("console")}} - disponible via {{domxref ("window.console")}}, ou {{domxref ("WorkerGlobalScope.console")}} dans les workers; accessible en utilisant uniquement la <code>console</code> - contient de nombreuses méthodes que vous pouvez appeler pour effectuer des tâches de débogage rudimentaires, généralement axées sur la journalisation de diverses valeurs dans la <a href="/fr/docs/Tools/Web_Console">console Web</a> du navigateur.</p> <p>La méthode de loin la plus couramment utilisée est {{domxref ("console.log")}}, qui est utilisée pour consigner la valeur en cours contenue dans une variable spécifique.</p> @@ -42,7 +42,7 @@ translation_of: Web/API/Console_API // Output "Hello world" to the console console.log(myString)</pre> -<p>Consultez <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Console#Usage">la page de référence de la console</a> pour plus d'exemples.</p> +<p>Consultez <a href="/fr/docs/Web/API/Console#Usage">la page de référence de la console</a> pour plus d'exemples.</p> <h2 id="Spécifications">Spécifications</h2> @@ -69,6 +69,6 @@ console.log(myString)</pre> <ul> <li><a href="/en-US/docs/Tools" title="Tools">Outils</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console">Console Web</a> - comment la console Web de Firefox traite les appels de l'<code>API Console</code>.</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">Débogage à distance</a> - comment voir la sortie de la console lorsque la cible de débogage est un appareil mobile.</li> + <li><a href="/fr/docs/Tools/Web_Console">Console Web</a> - comment la console Web de Firefox traite les appels de l'<code>API Console</code>.</li> + <li><a href="/fr/docs/Tools/Remote_Debugging">Débogage à distance</a> - comment voir la sortie de la console lorsque la cible de débogage est un appareil mobile.</li> </ul> diff --git a/files/fr/web/api/document_object_model/introduction/index.html b/files/fr/web/api/document_object_model/introduction/index.html index 664fd5b1eb..a33909ef06 100644 --- a/files/fr/web/api/document_object_model/introduction/index.html +++ b/files/fr/web/api/document_object_model/introduction/index.html @@ -2,26 +2,30 @@ title: Introduction slug: Web/API/Document_Object_Model/Introduction tags: + - Beginner - DOM + - Document - Guide - - Reference + - HTML DOM + - Introduction + - Tutorial translation_of: Web/API/Document_Object_Model/Introduction --- -<p>Le Modèle Objet de Document (<strong>DOM: Document object Model</strong>) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, <span class="tlid-translation translation" lang="fr"><span title="">nous présenterons brièvement le DOM</span></span>. <span class="tlid-translation translation" lang="fr"><span title="">Nous verrons comment le DOM représente un document </span></span> {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications.</p> +<div>{{DefaultAPISidebar("DOM")}}</div> -<p><strong>NDTR:</strong> (Cette section consiste en une brève introduction conceptuelle du <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">DOM</a> : elle explique de quoi il s'agit, comment celui-ci fournit une structure pour les documents <a href="https://developer.mozilla.org/fr/docs/Web/HTML">HTML</a> et <a href="https://developer.mozilla.org/fr/docs/Glossaire/XML">XML</a>, la manière d'y accéder, et comment cette API présente les informations de référence et exemples).</p> +<p>Le Modèle Objet de Document (<strong>DOM: Document object Model</strong>) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, nous présenterons brièvement le DOM. Nous verrons comment le DOM représente un document {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications.</p> -<h2 id="Pr.C3.A9sentation_du_DOM" name="Pr.C3.A9sentation_du_DOM"><span class="tlid-translation translation" lang="fr"><span title="">Qu'est-ce que le DOM?</span></span></h2> +<h2 id="what_is_the_dom">Qu'est-ce que le DOM?</h2> <p>Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.</p> <p>Une page Web est un document. Celui-ci peut être affiché soit dans la fenêtre du navigateur, soit sous la forme de son code source HTML. Mais il s'agit du même document dans les deux cas. Le modèle objet de document proposé par le DOM fournit une autre manière de représenter, stocker et manipuler ce même document. Le DOM est une représentation entièrement orientée objet de la page Web, et peut être manipulé à l'aide d'un langage de script comme JavaScript.</p> -<p>Les normes <a class="external" href="http://www.w3.org/DOM/">DOM du W3C</a> et <a class="external external-icon" href="https://dom.spec.whatwg.org">WHATWG DOM</a> forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.</p> +<p>Les normes <a href="https://www.w3.org/DOM/">DOM du W3C</a> et <a href="https://dom.spec.whatwg.org">WHATWG DOM</a> forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.</p> -<p>Par exemple, DOM du W3C spécifie que la méthode <code>getElementsByTagName</code> dans le code ci-dessous doit renvoyer une liste de tous les éléments <code><P></code> présents dans le document :</p> +<p>Par exemple, DOM du W3C spécifie que la méthode <code>getElementsByTagName</code> dans le code ci-dessous doit renvoyer une liste de tous les éléments <code><P></code> présents dans le document :</p> -<pre class="notranslate">paragraphes = document.getElementsByTagName("P"); +<pre class="brush: js">const paragraphs = document.querySelectorAll("p"); // paragraphes[0] est le premier élément <p> // paragraphes[1] est le second élément <p>, etc. alert(paragraphes[0].nodeName); @@ -29,63 +33,62 @@ alert(paragraphes[0].nodeName); <p>Chacune des propriétés et des méthodes et chacun des évènements disponibles permettant la manipulation et la création de pages Web sont organisés dans des objets (par exemple, l'objet <code>document</code> qui représente le document lui-même, l'objet <code>table</code> qui implémente l'interface DOM particulière <code>HTMLTableElement</code> permettant d'accéder aux tables HTML, etc.). Cette documentation fournit une référence, objet par objet, du DOM implémenté dans les navigateurs basés sur Gecko.</p> -<h2 id="DOM_et_JavaScript" name="DOM_et_JavaScript">DOM et JavaScript</h2> +<h2 id="dom_and_javascript">DOM et JavaScript</h2> -<p>Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">JavaScript</a>. C'est-à-dire qu'il est<em> écrit</em> en JavaScript, mais qu'il<em> utilise</em> le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.</p> +<p>Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en <a href="/fr/docs/Web/JavaScript">JavaScript</a>. C'est-à-dire qu'il est<em> écrit</em> en JavaScript, mais qu'il<em> utilise</em> le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.</p> -<p>À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative :</p> +<p>À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative :</p> <p>API(page Web ou XML) = DOM + JS(langage de script)</p> -<p>Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :</p> +<p>Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :</p> -<pre class="eval notranslate"># Exemple d'utilisation du DOM en Python +<pre class="brush: python"># Exemple d'utilisation du DOM en Python import xml.dom.minidom as m doc = m.parse("C:\\Projects\\Py\\chap1.xml"); doc.nodeName # Propriété DOM de l'objet document; p_list = doc.getElementsByTagName("para"); </pre> -<p>Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/JavaScript_technologies_overview">Survol des technologies JavaScript</a>.</p> +<p>Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir <a href="/fr/docs/Web/JavaScript/JavaScript_technologies_overview">Survol des technologies JavaScript</a>.</p> -<h2 id="M.C3.A9thodes_d.27acc.C3.A8s_au_DOM" name="M.C3.A9thodes_d.27acc.C3.A8s_au_DOM">Méthodes d'accès au DOM</h2> +<h2 id="how_do_i_access_the_dom">Méthodes d'accès au DOM</h2> <p>Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Les différents navigateurs ont différentes implémentations du DOM, et celles-ci présentent des degrés divers de conformité au standard DOM de référence (un sujet que l'on tente d'éviter dans cette documentation), mais chacun d'entre eux utilise un modèle objet de document pour rendre les pages Web accessibles aux scripts.</p> -<p>Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <code><SCRIPT></code> ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments <code><a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a></code> ou <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Window">window</a></code>, vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Window/alert">alert()</a></code> de l'objet <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Window">window</a></code>, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.</p> +<p>Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <code><SCRIPT></code> ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments <code><a href="/fr/docs/Web/API/Document">document</a></code> ou <code><a href="/fr/docs/Web/API/Window">window</a></code>, vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction <code><a href="/fr/docs/Web/API/Window/alert">alert()</a></code> de l'objet <code><a href="/fr/docs/Web/API/Window">window</a></code>, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.</p> <p>Le code JavaScript suivant affichera une alerte quand le document est chargé (et quand le DOM entier est disponible à l'utilisation).</p> -<pre class="eval notranslate"><body - onload="window.alert('Bienvenue sur ma page Web !');"> +<pre class="brush: html"><body onload="window.alert('Bienvenue sur ma page Web !');"></pre> + +<p>Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :</p> + +<pre class="brush: html"><html> + <head> + <script> + // run this function when the document is loaded + window.onload = function() { + + // create a couple of elements in an otherwise empty HTML page + const heading = document.createElement("h1"); + const heading_text = document.createTextNode("Gros titre !"); + heading.appendChild(heading_text); + document.body.appendChild(heading); + } + </script> + </head> + <body> + </body> +</html> </pre> -<p>Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :</p> - -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="comment token">//exécute la fonction lorsque le document est chargé</span> - window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - - <span class="comment token">// crée </span></span></code> <span id="result_box" lang="fr"><span>un couple d'éléments dans une page HTML autrement vide</span></span><code class="language-html"><span class="language-javascript script token"> - <span class="keyword token">var</span> heading <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"h1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> heading_text <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"Big Head!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - heading<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>heading_text<span class="punctuation token">)</span><span class="punctuation token">;</span> - document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>heading<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> - -<h2 id="Types_de_donn.C3.A9es_importants" name="Types_de_donn.C3.A9es_importants"><span class="tlid-translation translation" lang="fr"><span title="">Types de données fondamentaux</span></span></h2> +<h2 id="important_data_types">Types de données fondamentaux</h2> <p>Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître.</p> <div class="blockIndicator note"> -<p><strong>Note</strong>: Parceque la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. <span class="tlid-translation translation" lang="fr"><span title="">Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN </span></span> <span class="tlid-translation translation" lang="fr"><span title="">fera souvent la même chose, à cause de la fréquence de cette hypothèse.</span></span></p> +<p><strong>Note</strong>: Parceque la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN fera souvent la même chose, à cause de la fréquence de cette hypothèse.</p> </div> <p><strong>NDTR: </strong>(Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant <code>elements</code>, aux tableaux de nœuds en tant que <code>nodeLists</code> (ou même simplement éléments), et aux nœuds d'attributs en tant qu'<code>attributes)</code>.</p> @@ -102,19 +105,19 @@ p_list = doc.getElementsByTagName("para"); <tbody> <tr> <td>{{domxref("Document")}}</td> - <td>Lorsqu'un membre renvoie un objet de type <code>document</code> (par exemple la propriété <strong>ownerDocument</strong> d'un élément, qui retourne le <code>document</code> auquel il appartient), cet objet est l'objet <code>document</code> racine lui-même. Le chapitre <a href="https://developer.mozilla.org/fr/docs/Web/API/document">référence de DOM <code>document</code></a> décrit l'objet <code>document</code> en détail.</td> + <td>Lorsqu'un membre renvoie un objet de type <code>document</code> (par exemple la propriété <strong>ownerDocument</strong> d'un élément, qui retourne le <code>document</code> auquel il appartient), cet objet est l'objet <code>document</code> racine lui-même. Le chapitre <a href="/fr/docs/Web/API/Document">référence de DOM <code>document</code></a> décrit l'objet <code>document</code> en détail.</td> </tr> <tr> <td>{{domxref("Node")}}</td> - <td>Chaque objet du document est sous une forme ou une autre un noeud. Dans un document HTML, un objet peût être un élément nœud, mais aussi un nœud text ou nœud attribut.</td> + <td>Chaque objet du document est sous une forme ou une autre un noeud. Dans un document HTML, un objet peût être un élément nœud, mais aussi un nœud text ou nœud attribut.</td> </tr> <tr> <td>{{domxref("Element")}}</td> - <td>Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire, par exemple que la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElement">document.createElement()</a> renvoie une réference à un objet de type nœud, nous dirons simplement que cette méthode renvoie l'élément qui vient juste d'être créer dans le DOM. Les objets element implémentent l'interface DOM element, mais aussi l'interface plus basique node, qui sont toutes les deux incluses dans cette réference. dans un document HTML, les éléments sont mis en valeur par l'interface API HTML DOM {{domxref("HTMLElement")}} aussi bien que par d'autres interfaces <span class="tlid-translation translation" lang="fr"><span title="">décrivant les capacités d'éléments spécifiques</span></span> ( <span class="tlid-translation translation" lang="fr"><span title="">par exemple</span></span> , {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).</td> + <td>Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire, par exemple que la méthode <a href="/fr/docs/Web/API/Document/createElement">document.createElement()</a> renvoie une réference à un objet de type nœud, nous dirons simplement que cette méthode renvoie l'élément qui vient juste d'être créer dans le DOM. Les objets element implémentent l'interface DOM element, mais aussi l'interface plus basique node, qui sont toutes les deux incluses dans cette réference. dans un document HTML, les éléments sont mis en valeur par l'interface API HTML DOM {{domxref("HTMLElement")}} aussi bien que par d'autres interfaces décrivant les capacités d'éléments spécifiques ( par exemple , {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).</td> </tr> <tr> <td>{{domxref("NodeList")}}</td> - <td>Une <code>nodeList</code> est un tableau d'éléments, comme celui qui est renvoyé par la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName()</a>. Les éléments d'une <code>nodeList</code> sont accessibles par un index de deux manières différentes : + <td>Une <code>nodeList</code> est un tableau d'éléments, comme celui qui est renvoyé par la méthode <a href="/fr/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName()</a>. Les éléments d'une <code>nodeList</code> sont accessibles par un index de deux manières différentes : <ul> <li>list.item(1)</li> <li>list[1]</li> @@ -134,36 +137,36 @@ p_list = doc.getElementsByTagName("para"); </tbody> </table> -<h2 id="Les_interfaces_DOM" name="Les_interfaces_DOM">Les interfaces DOM</h2> +<h2 id="dom_interfaces">Les interfaces DOM</h2> <p>Un des objectifs de ce guide est de ne pas trop parler de l'héritage abstrait d'interfaces, et d'autres détails d'implémentation, et de se concentrer plutôt sur les objets dans le DOM qui sont les<em>choses</em> réelles utilisables pour manipuler la hiérarchie du DOM. Du point de vue du programmeur Web, il est rarement utile de savoir que l'objet représentant l'élément <code>HTML FORM</code> reçoit sa propriété <strong>name</strong> de l'interface <code>HTMLElement</code>. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire.</p> <p>Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut entrainer une certaine confusion, c'est pourquoi cette section tente de présenter un tant soit peu les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles.</p> -<h3 id="Les_interfaces_et_les_objets" name="Les_interfaces_et_les_objets">Les interfaces et les objets</h3> +<h3 id="interfaces_and_objects">Les interfaces et les objets</h3> -<p><span class="tlid-translation translation" lang="fr"><span title="">De nombreux objets empruntent à plusieurs interfaces différentes.</span></span> L'objet table par exemple implémente une <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLTableElement">interface spécialisée de l'élément HTML Table</a>, <span class="tlid-translation translation" lang="fr"><span title="">qui comprend des méthodes telles que</span></span> <code>createCaption</code> et <code>insertRow</code>. Mais comme il s'agit également d'un élément HTML, <code>table</code> implémente aussi l'interface <code>Element</code> décrite dans le chapitre <a href="https://developer.mozilla.org/fr/docs/Web/API/element">Référence de DOM <code>element</code></a>. Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique <code>Node</code>, dont dérive <code>Element</code>.</p> +<p>De nombreux objets empruntent à plusieurs interfaces différentes. L'objet table par exemple implémente une <a href="/fr/docs/Web/API/HTMLTableElement">interface spécialisée de l'élément HTML Table</a>, qui comprend des méthodes telles que <code>createCaption</code> et <code>insertRow</code>. Mais comme il s'agit également d'un élément HTML, <code>table</code> implémente aussi l'interface <code>Element</code> décrite dans le chapitre <a href="/fr/docs/Web/API/Element">Référence de DOM <code>element</code></a>. Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique <code>Node</code>, dont dérive <code>Element</code>.</p> <p>Lorsque vous obtiendrez une référence à un objet <code>table</code>, comme dans l'exemple suivant, vous utiliserez régulièrement ces trois interfaces de manière interchangeable sur l'objet, peut-être même sans le savoir.</p> -<pre class="notranslate">var table = document.getElementById("table"); +<pre class="brush: js">var table = document.getElementById("table"); var tableAttrs = table.attributes; // Interface Node/Element for(var i = 0; i < tableAttrs.length; i++){ - // Interface HTMLTableElement : attribut border + // Interface HTMLTableElement : attribut border if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } -// Interface HTMLTableElement : attribut summary -table.summary = "note : bordure plus large"; +// Interface HTMLTableElement : attribut summary +table.summary = "note : bordure plus large"; </pre> -<h3 id="Interfaces_essentielles_du_DOM" name="Interfaces_essentielles_du_DOM">Interfaces essentielles du DOM</h3> +<h3 id="core_interfaces_in_the_dom">Interfaces essentielles du DOM</h3> -<p>Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples d'utilisation du DOM</a> à la fin de livre.</p> +<p>Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre <a href="/fr/docs/Web/API/Document_Object_Model/Examples">Exemples d'utilisation du DOM</a> à la fin de livre.</p> -<p>Les objets <code>document</code> et <code>window</code> sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet <code>window</code> représente quelque chose comme le navigateur, et l'objet <code>document</code> est la racine du document lui-même. <code>Element</code> hérite de l'interface générique <code>Node</code>, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. <span class="tlid-translation translation" lang="fr"><span title="">Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent</span></span>, comme dans l'objet <code>table</code> donné en exemple dans la section précédente.</p> +<p>Les objets <code>document</code> et <code>window</code> sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet <code>window</code> représente quelque chose comme le navigateur, et l'objet <code>document</code> est la racine du document lui-même. <code>Element</code> hérite de l'interface générique <code>Node</code>, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent, comme dans l'objet <code>table</code> donné en exemple dans la section précédente.</p> -<p>Ce qui suit est une brève liste des API communes au script de page dans le Web et XML utilisant le DOM.</p> +<p>Ce qui suit est une brève liste des API communes au script de page dans le Web et XML utilisant le DOM.</p> <ul> <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li> @@ -181,9 +184,7 @@ table.summary = "note : bordure plus large"; <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li> </ul> - - -<h2 id="Test_de_l.27API_DOM" name="Test_de_l.27API_DOM">Test de l'API DOM</h2> +<h2 id="testing_the_dom_api">Test de l'API DOM</h2> <p>Ce document fournit des exemples pour chaque interface utilisable dans le cadre de votre propre développement Web. Dans certains cas, les exemples sont des pages HTML complètes, avec l'accès au DOM dans un élément <script>, l'interface (comme les boutons) nécessaire pour lancer le script dans un formulaire, et les éléments HTML sur lesquels le DOM opère sont listés également. Lorsque c'est le cas, vous pouvez copier et coller l'exemple dans un nouveau document HTML, l'enregistrer et l'exécuter depuis un navigateur.</p> @@ -191,107 +192,51 @@ table.summary = "note : bordure plus large"; <p>Vous pouvez utiliser cette page de test ou en créer une semblable pour tester les interfaces DOM qui vous intéressent et voir comment elles fonctionnent sur la plateforme du navigateur. Vous pouvez mettre à jour le contenu de la fonction <code>test()</code>, créer plus de boutons, ou ajouter d'autres éléments si nécessaire.</p> -<pre class="notranslate"><html> +<pre class="brush: html"><html> <head> -<title>Tests du DOM</title> -<script type="application/x-javascript"> -function setBodyAttr(attr,value){ - if(document.body) eval('document.body.'+attr+'="'+value+'"'); - else notSupported(); -} -</script> + <title>Tests du DOM</title> + <script type="application/x-javascript"> + function setBodyAttr(attr,value){ + if(document.body) eval('document.body.'+attr+'="'+value+'"'); + else notSupported(); + } + </script> </head> <body> -<div style="margin: .5in; height="400""> -<p><b><tt>text</tt> color</p> -<form> -<select onChange="setBodyAttr('text', - this.options[this.selectedIndex].value);"> -<option value="black">black -<option value="darkblue">darkblue -</select> - <p><b><tt>bgColor</tt></p> - <select onChange="setBodyAttr('bgColor', - this.options[this.selectedIndex].value);"> -<option value="white">white -<option value="lightgrey">gray - </select> -<p><b><tt>link</tt></p> -<select onChange="setBodyAttr('link', - this.options[this.selectedIndex].value);"> -<option value="blue">blue -<option value="green">green -</select> <small> - <a href="http://www.brownhen.com/dom_api_top.html" id="sample"> -(exemple de lien)</a></small><br> -</form> -<form> - <input type="button" value="version" onclick="ver()" /> -</form> -</div> + <div style="margin: .5in; height="400""> + <p><b><tt>text</tt> color</p> + <form> + <select onChange="setBodyAttr('text', + this.options[this.selectedIndex].value);"> + <option value="black">black + <option value="darkblue">darkblue + </select> + <p><b><tt>bgColor</tt></p> + <select onChange="setBodyAttr('bgColor', + this.options[this.selectedIndex].value);"> + <option value="white">white + <option value="lightgrey">gray + </select> + <p><b><tt>link</tt></p> + <select onChange="setBodyAttr('link', + this.options[this.selectedIndex].value);"> + <option value="blue">blue + <option value="green">green + </select> <small> + <a href="http://www.brownhen.com/dom_api_top.html" id="sample"> + (exemple de lien)</a></small><br> + </form> + <form> + <input type="button" value="version" onclick="ver()" /> + </form> + </div> </body> -</html> -</pre> +</html></pre> -<p>Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.</p> +<p>Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.</p> <p>Figure 0.1 Exemple de page de test du DOM</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/391/DOM_Ref_Introduction_to_the_DOM.gif" style="height: 375px; width: 199px;"></p> - -<p>Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web accessibles au DOM comme sa couleur de fond (<code>bgColor</code>), la couleur des hyperliens (<code>aLink</code>) et la couleur du texte (<code>text</code>). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM.</p> - -<h2 id="Subnav">Subnav</h2> - -<ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction au DOM</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Les_%C3%A9v%C3%A8nements_et_le_DOM">Les événements et le DOM</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li> -</ul> +<p><img alt="" src="dom_ref_introduction_to_the_dom.gif"></p> -<article class="approved"> -<div class="boxed translate-rendered text-content"> -<div>{{DefaultAPISidebar("DOM")}}</div> -</div> -</article> - -<article class="localized"> -<header> -<h3 id="Traduction_en_Français">Traduction en Français :</h3> -</header> - -<div class="guide-links"><a href="https://wiki.developer.mozilla.org/fr/docs/MDN/Community" rel="noopener">Besoin d'aide ?</a> • <a href="https://wiki.developer.mozilla.org/fr/docs/MDN/Contribute/Editor" rel="noopener">Guide d'édition</a> • <a href="https://wiki.developer.mozilla.org/fr/docs/MDN/Contribute/Content/Style_guide" rel="noopener">Guide stylistique</a></div> - -<div class="editor-wrapper" id="editor-wrapper"> -<div class="draft-container"> -<div class="draft-old"></div> - -<div class="draft-status"><span id="draft-action">Brouillon enregistré automatiquement : <time class="time-ago" id="draft-time" title="2019-10-19T19:12:47.156Z">19/10/2019 21:12:47</time></span></div> -</div> - -<div class="ckeditor-container editor-container dirty"> -<div class="editor"> -<div class="editor-tools"></div> - -<div style="height: 106px;"> -<div style="border: 1px solid rgb(182, 182, 182); width: 894px; position: fixed; top: 0px;"></div> -</div> -</div> -</div> -</div> -</article> - -<article class="localized"> -<div class="editor-wrapper" id="editor-wrapper"> -<div class="ckeditor-container editor-container dirty"> -<div class="editor"> -<div class="cke" dir="ltr" id="cke_id_content" lang="fr"> -<div> -<div id="cke_1_contents" style="height: 9993px;"></div> -</div> -</div> -</div> -</div> -</div> -</article> +<p>Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web accessibles au DOM comme sa couleur de fond (<code>bgColor</code>), la couleur des hyperliens (<code>aLink</code>) et la couleur du texte (<code>text</code>). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM.</p> diff --git a/files/fr/web/api/element/index.html b/files/fr/web/api/element/index.html index 9c47374845..05f5a2f840 100644 --- a/files/fr/web/api/element/index.html +++ b/files/fr/web/api/element/index.html @@ -8,11 +8,12 @@ tags: - Interface - Reference - Web API +browser-compat: api.Element translation_of: Web/API/Element --- -<p>{{APIRef("DOM")}}</p> +<div>{{APIRef("DOM")}}</div> -<p><strong><code>Element</code></strong> est la classe de base la plus générale à partir de laquelle tous les objets d'un {{domxref("Document")}} héritent. <span>Il n'a que des méthodes et des propriétés communes à tous les types d'éléments.</span> <span>Les classes plus spécifiques héritent d'<code>Element</code>.</span> <span>Par exemple, l'interface {{domxref("HTMLElement")}} est l'interface de base pour les éléments HTML, tandis que l'interface {{domxref ("SVGElement")}} est la base de tous les éléments SVG.</span> <span>La plupart des fonctionnalités sont spécifiées plus bas dans la hiérarchie des classes.</span></p> +<p><strong><code>Element</code></strong> est la classe de base la plus générale à partir de laquelle tous les objets d'un <a href="/fr/docs/Web/API/Document"><code>Document</code></a> héritent. <span>Il n'a que des méthodes et des propriétés communes à tous les types d'éléments.</span> <span>Les classes plus spécifiques héritent d'<code>Element</code>.</span> <span>Par exemple, l'interface <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> est l'interface de base pour les éléments HTML, tandis que l'interface {{domxref ("SVGElement")}} est la base de tous les éléments SVG.</span> <span>La plupart des fonctionnalités sont spécifiées plus bas dans la hiérarchie des classes.</span></p> <p>Les langages en dehors du domaine de la plate-forme Web, comme XUL via l'interface <code>XULElement</code>, implémentent également <code>Element</code>.</p> @@ -20,198 +21,198 @@ translation_of: Web/API/Element <h2 id="Propriétés">Propriétés</h2> -<p><em><span>Hérite des propriétés de son interface parent {{domxref("Node")}} et, par extension, du parent de cette interface {{domxref("EventTarget")}}.</span> <span>Il implémente les propriétés de {{domxref("ParentNode")}}, </span></em> <em>{{domxref("ChildNode")}},</em> <em><span> {{domxref("NonDocumentTypeChildNode")}} et {{domxref("Animatable")}}.</span></em></p> +<p><em><span>Hérite des propriétés de son interface parent <a href="/fr/docs/Web/API/Node"><code>Node</code></a> et, par extension, du parent de cette interface <a href="/fr/docs/Web/API/EventTarget"><code>EventTarget</code></a>.</span> <span>Il implémente les propriétés de <a href="/fr/docs/Web/API/ParentNode"><code>ParentNode</code></a>, </span></em> <em><a href="/fr/docs/Web/API/ChildNode"><code>ChildNode</code></a>,</em> <em><span> <a href="/fr/docs/Web/API/NonDocumentTypeChildNode"><code>NonDocumentTypeChildNode</code></a> et <a href="/fr/docs/Web/API/Animatable"><code>Animatable</code></a>.</span></em></p> <dl> - <dt>{{domxref("Element.attributes")}} {{readOnlyInline}}</dt> - <dd>Retourne un objet {{domxref("NamedNodeMap")}} contenant les attributs assignés de l'élément HTML correspondant.</dd> - <dt>{{domxref("Element.classList")}} {{readOnlyInline}}</dt> - <dd>Retourne une {{domxref("DOMTokenList")}} contenant la liste des attributs de classe.</dd> - <dt>{{domxref("Element.className")}}</dt> - <dd>est une {{domxref("DOMString")}} représentant la classe de l'élément.</dd> - <dt>{{domxref("Element.clientHeight")}} {{experimental_inline}} {{readOnlyInline}}</dt> - <dd>Retourne un {{jsxref("Number")}} représentant la hauteur intérieure de l'élément.</dd> - <dt>{{domxref("Element.clientLeft")}} {{readOnlyInline}}</dt> - <dd>Retourne un {{jsxref("Number")}} représentant la largeur de la bordure gauche de l'élément.</dd> - <dt>{{domxref("Element.clientTop")}} {{readOnlyInline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/attributes"><code>Element.attributes</code></a> {{readOnlyInline}}</dt> + <dd>Retourne un objet <a href="/fr/docs/Web/API/NamedNodeMap"><code>NamedNodeMap</code></a> contenant les attributs assignés de l'élément HTML correspondant.</dd> + <dt><a href="/fr/docs/Web/API/Element/classList"><code>Element.classList</code></a> {{readOnlyInline}}</dt> + <dd>Retourne une <a href="/fr/docs/Web/API/DOMTokenList"><code>DOMTokenList</code></a> contenant la liste des attributs de classe.</dd> + <dt><a href="/fr/docs/Web/API/Element/className"><code>Element.className</code></a></dt> + <dd>est une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant la classe de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/clientHeight"><code>Element.clientHeight</code></a> {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Retourne un {{jsxref("Number")}} représentant la hauteur intérieure de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/clientLeft"><code>Element.clientLeft</code></a> {{readOnlyInline}}</dt> + <dd>Retourne un {{jsxref("Number")}} représentant la largeur de la bordure gauche de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/clientTop"><code>Element.clientTop</code></a> {{readOnlyInline}}</dt> <dd>Retourne un {{jsxref("Number")}} représentant la largeur de la bordure haut de l'élément.</dd> - <dt>{{domxref("Element.clientWidth")}} {{readOnlyInline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/clientWidth"><code>Element.clientWidth</code></a> {{readOnlyInline}}</dt> <dd>Retourne un {{jsxref("Number")}} représentant la largeur intérieure de l'élément.</dd> - <dt>{{domxref("Element.computedName")}} {{readOnlyInline}}</dt> - <dd>Retourne une {{domxref("DOMString")}} contenant l'étiquette affichée pour l'accessibilité.</dd> - <dt>{{domxref("Element.computedRole")}} {{readOnlyInline}}</dt> - <dd>Retourne une {{domxref("DOMString")}} contenant le rôle ARIA qui a été appliqué à un élément particulier.</dd> - <dt>{{domxref("Element.id")}}</dt> - <dd>est une {{domxref("DOMString")}} représentant l'id <em>(identifiant)</em> de l'élément.</dd> - <dt>{{domxref("Element.innerHTML")}}</dt> - <dd>Est une {{domxref("DOMString")}} représentant la partie locale du nom qualifié de l'élément.</dd> - <dt>{{ domxref("Element.localName") }} {{readOnlyInline}}</dt> - <dd>une {{domxref("DOMString")}} représentant la partie locale du nom qualifié de l'élément.</dd> - <dt>{{domxref("Element.namespaceURI")}} {{readonlyInline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/computedName"><code>Element.computedName</code></a> {{readOnlyInline}}</dt> + <dd>Retourne une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> contenant l'étiquette affichée pour l'accessibilité.</dd> + <dt><a href="/fr/docs/Web/API/Element/computedRole"><code>Element.computedRole</code></a> {{readOnlyInline}}</dt> + <dd>Retourne une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> contenant le rôle ARIA qui a été appliqué à un élément particulier.</dd> + <dt><a href="/fr/docs/Web/API/Element/id"><code>Element.id</code></a></dt> + <dd>est une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant l'id <em>(identifiant)</em> de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/innerHTML"><code>Element.innerHTML</code></a></dt> + <dd>Est une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant la partie locale du nom qualifié de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/localName"><code>Element.localName</code></a> {{readOnlyInline}}</dt> + <dd>une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant la partie locale du nom qualifié de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/namespaceURI"><code>Element.namespaceURI</code></a> {{readonlyInline}}</dt> <dd>L'URI d'espace de noms de l'élément, ou <code>null</code> s'il n'est pas un espace de noms.</dd> </dl> <div class="note"> -<p><strong>Note :</strong> Dans Firefox 3.5 et versions antérieures, les éléments HTML ne sont pas dans un espace de noms. <span>Dans les versions ultérieures, les éléments HTML se trouvent dans l'espace de noms <code><a class="linkification-ext external external-icon" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> <span lang="fr"><span> dans les arborescences HTML et XML. </span></span> {{gecko_minversion_inline("1.9.2")}}</span></p> +<p><strong>Note :</strong> Dans Firefox 3.5 et versions antérieures, les éléments HTML ne sont pas dans un espace de noms. <span>Dans les versions ultérieures, les éléments HTML se trouvent dans l'espace de noms <code><a href="https://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> <span lang="fr"><span> dans les arborescences HTML et XML. </span></span> </span></p> </div> <dl> - <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt> - <dd>est un {{domxref("Element")}} suivant immédiatement dans l'arbre celui donné, ou <code>null</code> s'il n'y a pas de noeud frère.</dd> - <dt>{{domxref("Element.outerHTML")}}</dt> - <dd>Est une {{domxref("DOMString")}} représentant le balisage de l'élément, y compris son contenu. <span>Lorsqu'il est utilisé en tant qu'initiateur, remplace l'élément par des nœuds analysés à partir de la chaîne donnée.</span></dd> - <dt>{{DOMxRef("Element.part")}}</dt> - <dd>Représente le ou les identifiants <code>part</code> de l'élément (c'est-à-dire définis en utilisant l'attribut <code>part</code>), retournés dans un {{domxref("DOMTokenList")}}.</dd> - <dt>{{domxref("Element.prefix")}} {{readOnlyInline}}</dt> - <dd>Une {{domxref("DOMString")}} représentant le préfixe de l'espace de noms de l'élément, ou <code>null</code> si aucun préfixe n'est spécifié.</dd> - <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt> - <dd>Est un {{domxref("Element")}}, celui précédant immédiatement dans l'arbre l'élément donné, ou <code>null</code> s'il n'y a pas d'élément frère.</dd> - <dt>{{domxref("Element.scrollHeight")}} {{readOnlyInline}}</dt> + <dt><a href="/fr/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling"><code>NonDocumentTypeChildNode.nextElementSibling</code></a> {{readOnlyInline}}</dt> + <dd>est un <a href="/fr/docs/Web/API/Element"><code>Element</code></a> suivant immédiatement dans l'arbre celui donné, ou <code>null</code> s'il n'y a pas de noeud frère.</dd> + <dt><a href="/fr/docs/Web/API/Element/outerHTML"><code>Element.outerHTML</code></a></dt> + <dd>Est une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le balisage de l'élément, y compris son contenu. <span>Lorsqu'il est utilisé en tant qu'initiateur, remplace l'élément par des nœuds analysés à partir de la chaîne donnée.</span></dd> + <dt><a href="/fr/docs/Web/API/Element/part"><code>Element.part</code></a></dt> + <dd>Représente le ou les identifiants <code>part</code> de l'élément (c'est-à-dire définis en utilisant l'attribut <code>part</code>), retournés dans un <a href="/fr/docs/Web/API/DOMTokenList"><code>DOMTokenList</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/prefix"><code>Element.prefix</code></a> {{readOnlyInline}}</dt> + <dd>Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le préfixe de l'espace de noms de l'élément, ou <code>null</code> si aucun préfixe n'est spécifié.</dd> + <dt><a href="/fr/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling"><code>NonDocumentTypeChildNode.previousElementSibling</code></a> {{readOnlyInline}}</dt> + <dd>Est un <a href="/fr/docs/Web/API/Element"><code>Element</code></a>, celui précédant immédiatement dans l'arbre l'élément donné, ou <code>null</code> s'il n'y a pas d'élément frère.</dd> + <dt><a href="/fr/docs/Web/API/Element/scrollHeight"><code>Element.scrollHeight</code></a> {{readOnlyInline}}</dt> <dd>Retourne un {{jsxref("Number")}} représentant <span class="short_text" id="result_box" lang="fr"><span>la hauteur de vue de défilement d'un élément.</span></span></dd> - <dt>{{domxref("Element.scrollLeft")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scrollLeft"><code>Element.scrollLeft</code></a></dt> <dd>Est un {{jsxref("Number")}} représentant <span class="short_text" id="result_box" lang="fr"><span>le décalage de défilement gauche de l'élément.</span></span></dd> - <dt>{{domxref("Element.scrollLeftMax")}} {{non-standard_inline}} {{readOnlyInline}}</dt> - <dd>Retourne un {{jsxref("Number")}} représentant le décalage maximum de défilement gauche possible pour l'élément.</dd> - <dt>{{domxref("Element.scrollTop")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scrollLeftMax"><code>Element.scrollLeftMax</code></a> {{non-standard_inline}} {{readOnlyInline}}</dt> + <dd>Retourne un {{jsxref("Number")}} représentant le décalage maximum de défilement gauche possible pour l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/scrollTop"><code>Element.scrollTop</code></a></dt> <dd>Est un {{jsxref("Number")}} représentant le décalage de défilement haut de l'élément.</dd> - <dt>{{domxref("Element.scrollTopMax")}} {{non-standard_inline}} {{readOnlyInline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scrollTopMax"><code>Element.scrollTopMax</code></a> {{non-standard_inline}} {{readOnlyInline}}</dt> <dd>Retourne un {{jsxref("Number")}} représentant le décalage maximum de défilement haut possible pour l'élément.</dd> - <dt>{{domxref("Element.scrollWidth")}} {{readOnlyInline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scrollWidth"><code>Element.scrollWidth</code></a> {{readOnlyInline}}</dt> <dd>Retourne un {{jsxref("Number")}} représentant la largeur de vue de défilement de l'élément.</dd> - <dt>{{domxref("Element.shadowRoot")}} {{readOnlyInline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/shadowRoot"><code>Element.shadowRoot</code></a> {{readOnlyInline}}</dt> <dd>Renvoie la racine shadow la plus jeune hébergée par l'élément.</dd> - <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt> - <dd>Retourne la racine fantôme qui a l'élément pour hôte, qu'elle soit ouverte ou fermée. <strong>Disponible seulement pour les <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> - <dt>{{domxref("Element.slot")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/openOrClosedShadowRoot"><code>Element.openOrClosedShadowRoot</code></a> {{Non-standard_Inline}}{{readOnlyInline}}</dt> + <dd>Retourne la racine fantôme qui a l'élément pour hôte, qu'elle soit ouverte ou fermée. <strong>Disponible seulement pour les <a href="/fr/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> + <dt><a href="/fr/docs/Web/API/Element/slot"><code>Element.slot</code></a> {{experimental_inline}}</dt> <dd>Renvoie le nom de l'emplacement du DOM shadow attaché à l'élément. <span>Un emplacement (<em>slot</em>) est un espace réservé dans un composant web que les utilisateurs peuvent remplir avec leur propre balisage.</span></dd> - <dt>{{domxref("Element.tabStop")}} {{non-standard_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/tabStop"><code>Element.tabStop</code></a> {{non-standard_inline}}</dt> <dd>Est un {{jsxref("Boolean")}} indiquant si l'élément peut recevoir un focus d'entrée via la touche de tabulation.</dd> - <dt>{{domxref("Element.tagName")}} {{readOnlyInline}}</dt> - <dd>Retourne une {{domxref("String")}} avec le nom de la balise pour l'élément donné.</dd> - <dt>{{domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt> - <dd>Retourne le {{domxref("UndoManager")}} associé à l'élément.</dd> - <dt>{{domxref("Element.undoScope")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/tagName"><code>Element.tagName</code></a> {{readOnlyInline}}</dt> + <dd>Retourne une <a href="/fr/docs/Web/API/String"><code>String</code></a> avec le nom de la balise pour l'élément donné.</dd> + <dt><a href="/fr/docs/Web/API/Element/undoManager"><code>Element.undoManager</code></a> {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Retourne le <a href="/fr/docs/Web/API/UndoManager"><code>UndoManager</code></a> associé à l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/undoScope"><code>Element.undoScope</code></a> {{experimental_inline}}</dt> <dd>Est un {{jsxref("Boolean")}} indiquant si l'élément <span class="short_text" id="result_box" lang="fr"><span>est un hôte de portée d'annulation, ou non.</span></span></dd> </dl> <div class="note"> -<p><strong>Note :</strong> DOM niveau 3 définit <code>namespaceURI</code>, <code>localName</code> et <code>prefix </code>sur l'interface {{domxref("Node")}}. Dans DOM4, ils ont été déplacés dans <code>Element</code>.</p> +<p><strong>Note :</strong> DOM niveau 3 définit <code>namespaceURI</code>, <code>localName</code> et <code>prefix </code>sur l'interface <a href="/fr/docs/Web/API/Node"><code>Node</code></a>. Dans DOM4, ils ont été déplacés dans <code>Element</code>.</p> <p>Ce changement est implémenté dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.</p> </div> <h3 id="Propriété_inclue_dans_Slotable">Propriété inclue dans "Slotable"</h3> -<p><em>L'interface <code>Element</code> inclut la propriété suivante, définie sur le "mixin" </em> <em>{{domxref("Slotable")}}. </em></p> +<p><em>L'interface <code>Element</code> inclut la propriété suivante, définie sur le "mixin" </em> <em><a href="/fr/docs/Web/API/Slotable"><code>Slotable</code></a>. </em></p> <dl> - <dt>{{domxref("Slotable.assignedSlot")}}{{readonlyInline}}</dt> - <dd>renvoie un {{domxref("HTMLSlotElement")}} représentant le {{htmlelement("slot")}} sur lequel le noeud est inséré.</dd> + <dt><a href="/fr/docs/Web/API/Slotable/assignedSlot"><code>Slotable.assignedSlot</code></a>{{readonlyInline}}</dt> + <dd>renvoie un <a href="/fr/docs/Web/API/HTMLSlotElement"><code>HTMLSlotElement</code></a> représentant le {{htmlelement("slot")}} sur lequel le noeud est inséré.</dd> </dl> <h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2> -<p><em>Hérite des méthodes de son parent {{domxref ("Node")}} et de son propre parent {{domxref ("EventTarget")}}, et implémente celles de {{domxref("ParentNode")}}, </em> <em><em>{{domxref("ChildNode")}}</em></em> <em><span lang="fr">, {{domxref("NonDocumentTypeChildNode")}} et {{domxref("Animatable")}}.</span></em></p> +<p><em>Hérite des méthodes de son parent {{domxref ("Node")}} et de son propre parent {{domxref ("EventTarget")}}, et implémente celles de <a href="/fr/docs/Web/API/ParentNode"><code>ParentNode</code></a>, </em> <em><em><a href="/fr/docs/Web/API/ChildNode"><code>ChildNode</code></a></em></em> <em><span lang="fr">, <a href="/fr/docs/Web/API/NonDocumentTypeChildNode"><code>NonDocumentTypeChildNode</code></a> et <a href="/fr/docs/Web/API/Animatable"><code>Animatable</code></a>.</span></em></p> <dl> - <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dt><a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>EventTarget.addEventListener()</code></a></dt> <dd>enregistre sur l'élément un gestionnaire d'évènements propre à un type d'évènements.</dd> - <dt>{{domxref("Element.attachShadow()")}}</dt> - <dd>Attache un arbre DOM shadow à l'élément spécifié et renvoie une référence à sa {{domxref("ShadowRoot")}} (<em>racine</em>).</dd> - <dt>{{domxref("Element.animate()")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/attachShadow"><code>Element.attachShadow()</code></a></dt> + <dd>Attache un arbre DOM shadow à l'élément spécifié et renvoie une référence à sa <a href="/fr/docs/Web/API/ShadowRoot"><code>ShadowRoot</code></a> (<em>racine</em>).</dd> + <dt><a href="/fr/docs/Web/API/Element/animate"><code>Element.animate()</code></a> {{experimental_inline}}</dt> <dd>Une méthode raccourcie pour créer et exécuter une animation sur un élément. <span class="short_text" id="result_box" lang="fr"><span>Renvoie l'instance d'objet Animation créée.</span></span></dd> - <dt>{{domxref("Element.closest()")}}</dt> - <dd>Retourne l'{{domxref("Element")}} qui est l'ancêtre le plus proche de l'élément courant (ou l'élément courant lui-même) qui correspond aux sélecteurs donnés dans le paramètre.</dd> - <dt>{{domxref("Element.createShadowRoot()")}} {{experimental_inline}} {{deprecated_inline()}}</dt> - <dd>Crée un <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> sur l'élément, <span class="short_text" id="result_box" lang="fr"><span>le transforme en un hôte fantôme.</span> <span>Renvoie un </span></span> {{domxref("ShadowRoot")}}.</dd> - <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt> - <dd>Retourne une interface {{DOMxRef("StylePropertyMapReadOnly")}} fournissant une représentation en lecture seule d'un bloc de déclaration de règles CSS. Il s'agit d'une alternative à {{DOMxRef("CSSStyleDeclaration")}}.</dd> - <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/closest"><code>Element.closest()</code></a></dt> + <dd>Retourne l'<a href="/fr/docs/Web/API/Element"><code>Element</code></a> qui est l'ancêtre le plus proche de l'élément courant (ou l'élément courant lui-même) qui correspond aux sélecteurs donnés dans le paramètre.</dd> + <dt><a href="/fr/docs/Web/API/Element/createShadowRoot"><code>Element.createShadowRoot()</code></a> {{experimental_inline}} {{deprecated_inline()}}</dt> + <dd>Crée un <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> sur l'élément, <span class="short_text" id="result_box" lang="fr"><span>le transforme en un hôte fantôme.</span> <span>Renvoie un </span></span> <a href="/fr/docs/Web/API/ShadowRoot"><code>ShadowRoot</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/computedStyleMap"><code>Element.computedStyleMap()</code></a> {{Experimental_Inline}}</dt> + <dd>Retourne une interface <a href="/fr/docs/Web/API/StylePropertyMapReadOnly"><code>StylePropertyMapReadOnly</code></a> fournissant une représentation en lecture seule d'un bloc de déclaration de règles CSS. Il s'agit d'une alternative à <a href="/fr/docs/Web/API/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/EventTarget/dispatchEvent"><code>EventTarget.dispatchEvent()</code></a></dt> <dd>Répartit un évènement sur ce noeud dans le DOM et renvoie un {{jsxref("Boolean")}} qui indique qu'au-moins un gestionnaire ne l'a pas annulé.</dd> - <dt>{{domxref("Element.getAnimations()")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getAnimations"><code>Element.getAnimations()</code></a> {{experimental_inline}}</dt> <dd>Renvoie un tableau d'objets Animation actuellement actifs sur l'élément.</dd> - <dt>{{domxref("Element.getAttribute()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getAttribute"><code>Element.getAttribute()</code></a></dt> <dd>Retrouve la valeur de l'attribut nommé depuis le noeud courant et le retourne comme un {{jsxref("Object")}}.</dd> - <dt>{{domxref("Element.getAttributeNames()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getAttributeNames"><code>Element.getAttributeNames()</code></a></dt> <dd>Retourne un tableau des noms d'attribut de l'élément courant.</dd> - <dt>{{domxref("Element.getAttributeNS()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getAttributeNS"><code>Element.getAttributeNS()</code></a></dt> <dd>Retrouve la valeur de l'attribut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un {{jsxref("Object")}}.</dd> - <dt>{{domxref("Element.getBoundingClientRect()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getBoundingClientRect"><code>Element.getBoundingClientRect()</code></a></dt> <dd>Retourne la taille d'un élément et ses positions relatives au "viewport".</dd> - <dt>{{domxref("Element.getClientRects()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getClientRects"><code>Element.getClientRects()</code></a></dt> <dd>Retourne une collection de rectangles qui indiquent les rectangles de délimitation pour chaque ligne de texte dans un client.</dd> - <dt>{{domxref("Element.getElementsByClassName()")}}</dt> - <dd>Retourne une {{domxref("HTMLCollection")}} qui contient tous les descendants de l'élément courant qui possèdent la liste des classes donnée dans le paramètre.</dd> - <dt>{{domxref("Element.getElementsByTagName()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getElementsByClassName"><code>Element.getElementsByClassName()</code></a></dt> + <dd>Retourne une <a href="/fr/docs/Web/API/HTMLCollection"><code>HTMLCollection</code></a> qui contient tous les descendants de l'élément courant qui possèdent la liste des classes donnée dans le paramètre.</dd> + <dt><a href="/fr/docs/Web/API/Element/getElementsByTagName"><code>Element.getElementsByTagName()</code></a></dt> <dd>Renvoie une {{domxref ("HTMLCollection")}} contenant tous les éléments descendants, d'un nom de tag particulier, de l'élément en cours.</dd> - <dt>{{domxref("Element.getElementsByTagNameNS()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getElementsByTagNameNS"><code>Element.getElementsByTagNameNS()</code></a></dt> <dd>Renvoie une {{domxref ("HTMLCollection")}} contenant tous les éléments descendants, d'un nom de balise particulier et d'un espace de nom, de l'élément en cours.</dd> - <dt>{{domxref("Element.hasAttribute()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/hasAttribute"><code>Element.hasAttribute()</code></a></dt> <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un attribut spécifié ou non.</dd> - <dt>{{domxref("Element.hasAttributeNS()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/hasAttributeNS"><code>Element.hasAttributeNS()</code></a></dt> <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un attribut spécifié, dans l'espace de noms spécifié, ou non.</dd> - <dt>{{domxref("Element.hasAttributes()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/hasAttributes"><code>Element.hasAttributes()</code></a></dt> <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un ou plusieurs attributs HTML présents.</dd> - <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt> - <dd>Indique si l'élément sur lequel la méthode est invoquée a une capture de pointeur pour le pointeur spécifié par son identifiant.</dd> - <dt>{{domxref("Element.insertAdjacentElement")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/hasPointerCapture"><code>Element.hasPointerCapture()</code></a></dt> + <dd>Indique si l'élément sur lequel la méthode est invoquée a une capture de pointeur pour le pointeur spécifié par son identifiant.</dd> + <dt><a href="/fr/docs/Web/API/Element/insertAdjacentElement"><code>Element.insertAdjacentElement</code></a></dt> <dd>Insère un noeud d'élément donné à la position donnée par rapport à l'élément sur lequel il a été invoqué.</dd> - <dt>{{domxref("Element.insertAdjacentHTML")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/insertAdjacentHTML"><code>Element.insertAdjacentHTML</code></a></dt> <dd>Analyse le texte au format HTML ou XML et insère les nœuds résultants dans l'arborescence dans la position indiquée.</dd> - <dt>{{domxref("Element.insertAdjacentText")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/insertAdjacentText"><code>Element.insertAdjacentText</code></a></dt> <dd>Insère un noeud de texte donné à la position donnée par rapport à l'élément qui l'invoque.</dd> - <dt>{{domxref("Element.matches()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/matches"><code>Element.matches()</code></a></dt> <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément serait sélectionné ou non par la chaîne de sélection spécifiée.</dd> - <dt>{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}</dt> - <dd>Retourne un {{DOMxRef("CSSPseudoElement")}} représentant les pseudo-élément enfants correspondant au sélecteur de pseudo-élément fourni.</dd> - <dt>{{domxref("Element.querySelector()")}}</dt> - <dd>Retourne le premier {{domxref("Node")}} correspondant à la chaîne du sélecteur spécifiée par rapport à l'élément.</dd> - <dt>{{domxref("Element.querySelectorAll")}}</dt> - <dd>Retourne une {{domxref("NodeList")}} des noeuds qui correspondent à la chaîne du sélecteur par rapport à l'élément.</dd> - <dt>{{domxref("Element.releasePointerCapture")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/pseudo"><code>Element.pseudo()</code></a> {{Experimental_Inline}}</dt> + <dd>Retourne un <a href="/fr/docs/Web/API/CSSPseudoElement"><code>CSSPseudoElement</code></a> représentant les pseudo-élément enfants correspondant au sélecteur de pseudo-élément fourni.</dd> + <dt><a href="/fr/docs/Web/API/Element/querySelector"><code>Element.querySelector()</code></a></dt> + <dd>Retourne le premier <a href="/fr/docs/Web/API/Node"><code>Node</code></a> correspondant à la chaîne du sélecteur spécifiée par rapport à l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/querySelectorAll"><code>Element.querySelectorAll</code></a></dt> + <dd>Retourne une <a href="/fr/docs/Web/API/NodeList"><code>NodeList</code></a> des noeuds qui correspondent à la chaîne du sélecteur par rapport à l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/releasePointerCapture"><code>Element.releasePointerCapture</code></a></dt> <dd>Relâche (arrête) la capture de pointeur précédemment définie pour un {{domxref("PointerEvent","évènement pointeur")}} spécifique.</dd> - <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/ChildNode/remove"><code>ChildNode.remove()</code></a> {{experimental_inline}}</dt> <dd>Supprime l'élément de la liste des enfants de son parent.</dd> - <dt>{{domxref("Element.removeAttribute()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/removeAttribute"><code>Element.removeAttribute()</code></a></dt> <dd>Supprime l'attribut nommé du noeud courant.</dd> - <dt>{{domxref("Element.removeAttributeNS()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/removeAttributeNS"><code>Element.removeAttributeNS()</code></a></dt> <dd>Supprime l'attribut avec le nom et l'espace de nom spécifiés du noeud actuel.</dd> - <dt>{{domxref("EventTarget.removeEventListener()")}}</dt> + <dt><a href="/fr/docs/Web/API/EventTarget/removeEventListener"><code>EventTarget.removeEventListener()</code></a></dt> <dd>Supprime un écouteur d'évènement de l'élément.</dd> - <dt>{{domxref("Element.requestFullscreen()")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/requestFullScreen"><code>Element.requestFullscreen()</code></a> {{experimental_inline}}</dt> <dd>Demande de manière asynchrone au navigateur de mettre l'élément en plein écran.</dd> - <dt>{{domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/requestPointerLock"><code>Element.requestPointerLock()</code></a> {{experimental_inline}}</dt> <dd>Permet de demander de manière asynchrone que le pointeur soit verrouillé sur l'élément donné.</dd> - <dt>{{domxref("Element.scroll()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scroll"><code>Element.scroll()</code></a></dt> <dd>Défile vers les coordonnées fournises au sein d'un élément.</dd> - <dt>{{domxref("Element.scrollBy()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scrollBy"><code>Element.scrollBy()</code></a></dt> <dd>Défile au sein d'un élément d'autant de pixels que demandé.</dd> - <dt>{{domxref("Element.scrollIntoView()")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scrollIntoView"><code>Element.scrollIntoView()</code></a> {{experimental_inline}}</dt> <dd>Fait défiler la page jusqu'à ce que l'élément entre dans la vue.</dd> - <dt>{{domxref("Element.scrollTo()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scrollTo"><code>Element.scrollTo()</code></a></dt> <dd>Défile vers les coordonnées fournises au sein d'un élément.</dd> - <dt>{{domxref("Element.setAttribute()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/setAttribute"><code>Element.setAttribute()</code></a></dt> <dd>Définit la valeur d'un attribut nommé du nœud actuel.</dd> - <dt>{{domxref("Element.setAttributeNS()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/setAttributeNS"><code>Element.setAttributeNS()</code></a></dt> <dd>Définit la valeur de l'attribut avec le nom et l'espace de noms spécifiés, à partir du nœud actuel.</dd> - <dt>{{domxref("Element.setCapture()")}} {{non-standard_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/setCapture"><code>Element.setCapture()</code></a> {{non-standard_inline}}</dt> <dd>Configure la capture d'évènements de souris, en redirigeant tous les évènements de la souris vers cet élément.</dd> - <dt>{{domxref("Element.setPointerCapture()")}}</dt> - <dd>Désigne un élément spécifique en tant que cible de capture des futurs <a href="https://developer.mozilla.org/fr/docs/Web/API/Pointer_events">évènements de pointeur</a>.</dd> - <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/setPointerCapture"><code>Element.setPointerCapture()</code></a></dt> + <dd>Désigne un élément spécifique en tant que cible de capture des futurs <a href="/fr/docs/Web/API/Pointer_events">évènements de pointeur</a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/toggleAttribute"><code>Element.toggleAttribute()</code></a></dt> <dd>Alterne un attribut booléen sur l'élément spécifié, le supprimant s'il est présent et l'ajoutant s'il est absent.</dd> <dt> <h3 id="Méthodes_obsolètes"><span lang="fr"><span>Méthodes obsolètes</span></span></h3> </dt> - <dt>{{domxref("Element.getAttributeNode()")}}{{obsolete_inline}}</dt> - <dd>Retrouve la représentation du noeud de l'attribut nommé depuis le noeud courant et le retourne comme un {{domxref("Attr")}}.</dd> - <dt>{{domxref("Element.getAttributeNodeNS()")}}{{obsolete_inline}}</dt> - <dd>Retrouve la représentation du noeud de l'attibut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un {{domxref("Attr")}}.</dd> - <dt>{{domxref("Element.removeAttributeNode()")}} {{obsolete_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getAttributeNode"><code>Element.getAttributeNode()</code></a>{{obsolete_inline}}</dt> + <dd>Retrouve la représentation du noeud de l'attribut nommé depuis le noeud courant et le retourne comme un <a href="/fr/docs/Web/API/Attr"><code>Attr</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/getAttributeNodeNS"><code>Element.getAttributeNodeNS()</code></a>{{obsolete_inline}}</dt> + <dd>Retrouve la représentation du noeud de l'attibut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un <a href="/fr/docs/Web/API/Attr"><code>Attr</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/removeAttributeNode"><code>Element.removeAttributeNode()</code></a> {{obsolete_inline}}</dt> <dd>Supprime la représentation du noeud de l'attibut nommé du noeud actuel.</dd> - <dt>{{domxref("Element.setAttributeNode()")}} {{obsolete_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/setAttributeNode"><code>Element.setAttributeNode()</code></a> {{obsolete_inline}}</dt> <dd>Définit la représentation de noeud de l'attribut nommé à partir du noeud actuel.</dd> - <dt>{{domxref("Element.setAttributeNodeNS()")}} {{obsolete_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/setAttributeNodeNS"><code>Element.setAttributeNodeNS()</code></a> {{obsolete_inline}}</dt> <dd>Synchronise la représentation du nœud de l'attribut avec le nom et l'espace de noms spécifiés, à partir du nœud actuel.</dd> </dl> @@ -220,235 +221,146 @@ translation_of: Web/API/Element <p><span class="tlid-translation translation" lang="fr"><span title="">Ecoute ces évènements en utilisant</span></span> <code>addEventListener()</code> ou en assignant un <span class="tlid-translation translation" lang="fr"><span title="">écouteur d'évènement</span></span> (event listener) au <code>on<em>eventname</em></code> propriété de cette interface.</p> <dl> - <dt>{{domxref("Element/cancel_event", "cancel")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/cancel_event"><code>cancel</code></a></dt> <dd>Déclenche sur {{HTMLElement("dialog")}} lorsque l'utilisateur indique au navigateur qu'il souhaite fermer la boîte de dialogue en cours. Pour exemple, le navigateur peut déclencher cet évènement lorsque l'utilisateur appuie sur la touche <kbd>Esc</kbd> ou clique sur le bouton "Ferme le dialogue" <span class="tlid-translation translation" lang="fr"><span title="">qui fait partie de l'interface utilisateur du navigateur</span></span> .<br> - Aussi disponible via la propriété {{domxref("GlobalEventHandlers/oncancel", "oncancel")}}.</dd> - <dt>{{domxref("Element/error_event", "error")}}</dt> + Aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/oncancel"><code>oncancel</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/error_event"><code>error</code></a></dt> <dd>Déclenché quand le chargement d'une ressource échoue, ou qu'elle ne peut pas être utilisée. Par exemple, il sera déclenché si un script contient une erreur d'exécution ou une image ne peut être trouvée ou est invalide.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onerror", "onerror")}}.</dd> - <dt>{{domxref("Element/scroll_event", "scroll")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onerror"><code>onerror</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/scroll_event"><code>scroll</code></a></dt> <dd>Déclenché quand la vue du document un élément a été défilé.<br> - Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}.</dd> - <dt>{{domxref("Element/select_event", "select")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onscroll"><code>onscroll</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/select_event"><code>select</code></a></dt> <dd>Déclenché quand une portion de texte a été sélectionnée.<br> - Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}}.</dd> - <dt>{{domxref("Element/show_event", "show")}}</dt> - <dd>Déclenché quand un évènement {{domxref("Element/contextmenu_event", "contextmenu")}} est lui-même déclenché et bouillonne jusqu'à un élément ayant un attribut <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/html/Global_attributes/contextmenu">contextmenu</a></code>. {{deprecated_inline}}<br> - Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}}.</dd> - <dt>{{domxref("Element/wheel_event","wheel")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onselect"><code>onselect</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/show_event"><code>show</code></a></dt> + <dd>Déclenché quand un évènement <a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a> est lui-même déclenché et bouillonne jusqu'à un élément ayant un attribut <code><a href="/fr/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code>. {{deprecated_inline}}<br> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onshow"><code>onshow</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/wheel_event"><code>wheel</code></a></dt> <dd>Déclenché quand l'utilisateur tourne une molette sur un appareil avec pointeur (typiquement, une souris).<br> - Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}.</dd> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onwheel"><code>onwheel</code></a>.</dd> <dt> <h3 id="Évènements_du_presse-papiers">Évènements du presse-papiers</h3> </dt> - <dt>{{domxref("Element/copy_event", "copy")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/copy_event"><code>copy</code></a></dt> <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de copie via l'interface utilisateur du navigateur.</span></span><br> - Aussi disponible via la propiété {{domxref("HTMLElement/oncopy", "oncopy")}}.</dd> - <dt>{{domxref("Element/cut_event", "cut")}}</dt> + Aussi disponible via la propiété <a href="/fr/docs/Web/API/HTMLElement/oncopy"><code>oncopy</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/cut_event"><code>cut</code></a></dt> <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de couper via l'interface utilisateur du navigateur.</span></span><br> - Aussi disponible via la propriété {{domxref("HTMLElement/oncut", "oncut")}}.</dd> - <dt>{{domxref("Element/paste_event", "paste")}}</dt> + Aussi disponible via la propriété <a href="/fr/docs/Web/API/HTMLElement/oncut"><code>oncut</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/paste_event"><code>paste</code></a></dt> <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de coller via l'interface utilisateur du navigateur.</span></span><br> - Aussi disponible via la propriété {{domxref("HTMLElement/onpaste", "onpaste")}}.</dd> + Aussi disponible via la propriété <a href="/fr/docs/Web/API/HTMLElement/onpaste"><code>onpaste</code></a>.</dd> <dt> <h3 id="Évènements_de_composition">Évènements de composition</h3> </dt> - <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/compositionend_event"><code>compositionend</code></a></dt> <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché quand un système de composition de </span></span>texte tel qu'un {{glossary("input method editor")}} complète ou annule la session actuelle de composition.</dd> - <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/compositionstart_event"><code>compositionstart</code></a></dt> <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché quand un système de composition de </span></span>texte tel qu'un {{glossary("input method editor")}} démarre une nouvelle session de composition.</dd> - <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/compositionupdate_event"><code>compositionupdate</code></a></dt> <dd>Déclenché quand un nouveau caractère est reçu dans le contexte d'une session de composition de texte contrôlée par un système de composition de texte tel qu'un {{glossary("input method editor")}}.</dd> <dt> <h3 id="Évènements_de_focale">Évènements de focale</h3> </dt> - <dt>{{domxref("Element/blur_event", "blur")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/blur_event"><code>blur</code></a></dt> <dd>Déclenché quand un élément a perdu la focale.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onblur", "onblur")}}.</dd> - <dt>{{domxref("Element/focus_event", "focus")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onblur"><code>onblur</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/focus_event"><code>focus</code></a></dt> <dd>Déclenché quand un élément a obtenu la focale.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onfocus", "onfocus")}}.</dd> - <dt>{{domxref("Element/focusin_event", "focusin")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onfocus"><code>onfocus</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/focusin_event"><code>focusin</code></a></dt> <dd>Déclenché quand un élément est sur le point d'obtenir la focale.</dd> - <dt>{{domxref("Element/focusout_event", "focusout")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/focusout_event"><code>focusout</code></a></dt> <dd>Déclenché quand un élément est sur le point de perdre la focale.</dd> <dt> <h3 id="Évènements_de_plein_écran">Évènements de plein écran</h3> </dt> - <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt> - <dd>Envoyé à un {{domxref("Element")}} quand il transite vers ou depuis un état de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br> - Il est aussi disponible via la propriété {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}.</dd> - <dt>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</dt> - <dd>Envoyé à un <code>Element</code> si une erreur survient en tentant de passer vers ou de quitter le <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br> - Il est aussi disponible via la propriété {{domxref("Element.onfullscreenerror", "onfullscreenerror")}}.</dd> + <dt><a href="/fr/docs/Web/API/Element/fullscreenchange_event"><code>fullscreenchange</code></a></dt> + <dd>Envoyé à un <a href="/fr/docs/Web/API/Element"><code>Element</code></a> quand il transite vers ou depuis un état de <a href="/fr/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/Element/onfullscreenchange"><code>onfullscreenchange</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/fullscreenerror_event"><code>fullscreenerror</code></a></dt> + <dd>Envoyé à un <code>Element</code> si une erreur survient en tentant de passer vers ou de quitter le <a href="/fr/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/Element/onfullscreenerror"><code>onfullscreenerror</code></a>.</dd> <dt> <h3 id="Évènements_de_clavier">Évènements de clavier</h3> </dt> - <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt> + <dt><code><a href="/fr/docs/Web/API/Element/keydown_event"><code>keydown</code></a></code></dt> <dd>Déclenché quand une touche est pressée.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}}.</dd> - <dt><code>{{domxref("Element/keypress_event", "keypress")}}</code></dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeydown"><code>onkeydown</code></a>.</dd> + <dt><code><a href="/fr/docs/Web/API/Element/keypress_event"><code>keypress</code></a></code></dt> <dd>Déclenché quand une touche produit un caractère est pressée. {{deprecated_inline}}<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}}.</dd> - <dt><code>{{domxref("Element/keyup_event", "keyup")}}</code></dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeypress"><code>onkeypress</code></a>.</dd> + <dt><code><a href="/fr/docs/Web/API/Element/keyup_event"><code>keyup</code></a></code></dt> <dd>Déclenché quand une touche est relâchée.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}}.</dd> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeyup"><code>onkeyup</code></a>.</dd> <dt> <h3 id="Évènements_de_souris">Évènements de souris</h3> </dt> - <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/auxclick_event"><code>auxclick</code></a></dt> <dd>Déclenché quand un bouton secondaire d'un appareil de pointage (par exemple, tout bouton d'une souris autre que le gauche) est pressé et relâché sur le même élément.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}}.</dd> - <dt>{{domxref("Element/click_event", "click")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onauxclick"><code>onauxclick</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></dt> <dd>Déclenché quand un bouton d'un appareil de pointage (par exemple, le clic gauche d'une souris) est pressé et relâché sur le même élément.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onclick", "onclick")}}.</dd> - <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onclick"><code>onclick</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></dt> <dd>Déclenché quand l'utilisateur tente d'ouvrir un menu contextuel.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}}.</dd> - <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/oncontextmenu"><code>oncontextmenu</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></dt> <dd>Déclenché quand un bouton d'un appareil de pointage (par exemple, le clic gauche d'une souris) est cliqué deux fois sur le même élément.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}}.</dd> - <dt>{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ondblclick"><code>ondblclick</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/DOMActivate_event"><code>DOMActivate</code></a> {{Deprecated_Inline}}</dt> <dd>Déclenché quand un élément est activé, par exemple, par le biais d'un clic de souris ou d'une pression de touche sur un clavier.</dd> - <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></dt> <dd>Déclenché quand un bouton d'un appareil de pointage est pressé sur un élément.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}}.</dd> - <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmousedown"><code>onmousedown</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></dt> <dd>Déclenché quand un appareil de pointage (généralement une souris) est déplacé à l'intérieur de l'élément sur lequel l'écouteur est attaché.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}}.</dd> - <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseenter"><code>onmouseenter</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></dt> <dd>Déclenché quand un appareil de pointage est déplacé à l'extérieur de l'élément sur lequel l'écouteur est attaché.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}}.</dd> - <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseleave"><code>onmouseleave</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></dt> <dd>Déclenché quand un appareil de pointage est déplacé au sein de l'élément sur lequel l'écouteur est attaché.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}}.</dd> - <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmousemove"><code>onmousemove</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></dt> <dd>Déclenché quand un appareil de pointage est déplacé à l'extérieur de l'élément sur lequel l'écouteur est attaché ou sur un de ses enfants.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}}.</dd> - <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseout"><code>onmouseout</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></dt> <dd>Déclenché quand un appareil de pointage est déplacé au sein de l'élément sur lequel l'écouteur est attaché ou sur un de ses enfants.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}}.</dd> - <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseover"><code>onmouseover</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></dt> <dd>Déclenché quand un bouton d'un appareil de pointage est relâché sur un élément.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}}.</dd> - <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseup"><code>onmouseup</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/webkitmouseforcechanged_event"><code>webkitmouseforcechanged</code></a></dt> <dd>Déclenché à chaque fois que le niveau de pression sur un écran tactile change.</dd> - <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/webkitmouseforcedown_event"><code>webkitmouseforcedown</code></a></dt> <dd>Déclenché après l'évènement de pression de bouton d'un appareil de pointage à la condition qu'une pression suffisante ait été produite pour la qualifier de "clic forcé".</dd> - <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt> - <dd>Déclenché avant l'évènement {{domxref("Element/mousedown_event", "mousedown")}}.</dd> - <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt> - <dd>Déclenché après l'évènement {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} à la condition qu'une pression suffisamment en baisse ait été observée pour mettre fin au "clic forcé".</dd> + <dt><a href="/fr/docs/Web/API/Element/webkitmouseforcewillbegin_event"><code>webkitmouseforcewillbegin</code></a></dt> + <dd>Déclenché avant l'évènement <a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/webkitmouseforceup_event"><code>webkitmouseforceup</code></a></dt> + <dd>Déclenché après l'évènement <a href="/fr/docs/Web/API/Element/webkitmouseforcedown_event"><code>webkitmouseforcedown</code></a> à la condition qu'une pression suffisamment en baisse ait été observée pour mettre fin au "clic forcé".</dd> <dt> <h3 id="Évènements_de_toucher">Évènements de toucher</h3> </dt> - <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/touchcancel_event"><code>touchcancel</code></a></dt> <dd>Déclenché quand un ou plusieurs points de toucher ont été altérés d'une manière relative à l'implantation (par exemple, trop de points de contacts ont été créés).<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}}.</dd> - <dt>{{domxref("Element/touchend_event", "touchend")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchcancel"><code>ontouchcancel</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/touchend_event"><code>touchend</code></a></dt> <dd>Déclenché quand un ou plusieurs points de toucher sont retirés de la surface tactile.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}}</dd> - <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchend"><code>ontouchend</code></a></dd> + <dt><a href="/fr/docs/Web/API/Element/touchmove_event"><code>touchmove</code></a></dt> <dd>Déclenché quand un ou plusieurs points de toucher sont déplacés sur la surface tactile.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}}</dd> - <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchmove"><code>ontouchmove</code></a></dd> + <dt><a href="/fr/docs/Web/API/Element/touchstart_event"><code>touchstart</code></a></dt> <dd>Déclenché quand un plusieurs points de toucher sont placés sur la surface tactile.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}}.</dd> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchstart"><code>ontouchstart</code></a>.</dd> </dl> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="specifications">Spécifications</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Web Animations", '', '')}}</td> - <td>{{Spec2("Web Animations")}}</td> - <td>Ajoute la méthode <code>getAnimations()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Undo Manager', '', 'Element')}}</td> - <td>{{Spec2('Undo Manager')}}</td> - <td>Ajoute les propriétés <code>undoScope</code> et <code>undoManager</code>.</td> - </tr> - <tr> - <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Events 2')}}</td> - <td>Ajoute les gestionnaires d'évènements suivants : <code>ongotpointercapture</code> et<code>onlostpointercapture</code>.<br> - Ajoute les méthodes suivantes : <code>setPointerCapture()</code> et <code>releasePointerCapture()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Events')}}</td> - <td>Ajoute les gestionnaires d'évènements suivants : <code>ongotpointercapture</code> et <code>onlostpointercapture</code>.<br> - Ajoute les méthodes suivantes : <code>setPointerCapture()</code> et <code>releasePointerCapture()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> - <td>{{Spec2('Selectors API Level 1')}}</td> - <td>Ajoute les méthodes suivantes : <code>querySelector()</code> et <code>querySelectorAll()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Lock')}}</td> - <td>Ajoute la méthode<code>requestPointerLock()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> - <td>{{Spec2('Fullscreen')}}</td> - <td>Ajoute la méthode <code>requestFullscreen().</code></td> - </tr> - <tr> - <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('DOM Parsing')}}</td> - <td>Ajoute les propriétés suivantes : <code>innerHTML</code> et <code>outerHTML</code>.<br> - Ajoute les méthodes suivantes : <code>insertAdjacentHTML()</code>.</td> - </tr> - <tr> - <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Ajoute les propriétés suivantes : <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code> et <code>clientHeight</code>.<br> - Ajoute les méthodes suivantes : <code>getClientRects()</code>, <code>getBoundingClientRect()</code> et <code>scrollIntoView()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Ajoute l'héritage de l'interface {{domxref("ElementTraversal")}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Supprime les méthodes suivantes : <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, et <code>setIdAttributeNode()</code>.<br> - Supprime la propriété <code>schemaTypeInfo</code>.<br> - Modifie la valeur retournée de <code>getElementsByTag()</code> et <code>getElementsByTagNS()</code>.<br> - Déplace <code>hasAttributes()</code> de l'interface <code>Node</code> ici.<br> - Insère<code>insertAdjacentElement()</code> et <code>insertAdjacentText()</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Ajoute les méthodes suivantes : <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code> et <code>setIdAttributeNode()</code>. Ces méthodes n'ont jamais été implémentées et ont été supprimées dans des spécifications ultérieures.<br> - Ajoute la propriété <code>schemaTypeInfo</code>. Cette propriété n'a jamais été implémentée et a été supprimée dans des spécificationq ultérieures.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>La méthode <code>normalize()</code> a été déplacée vers {{domxref("Node")}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("api.Element")}}</p> +<p>{{Compat}}</p> diff --git a/files/fr/web/api/eventtarget/index.html b/files/fr/web/api/eventtarget/index.html index 1532d2fce7..99ea213416 100644 --- a/files/fr/web/api/eventtarget/index.html +++ b/files/fr/web/api/eventtarget/index.html @@ -9,6 +9,7 @@ tags: - EventTarget - Interface - Événements DOM +browser-compat: api.EventTarget translation_of: Web/API/EventTarget --- <nav>{{ApiRef("DOM Events")}}</nav> @@ -17,7 +18,7 @@ translation_of: Web/API/EventTarget <p>{{domxref ("Element")}}, {{domxref ("Document")}} et {{domxref ("Window")}} sont les cibles d'événements les plus fréquentes, mais d'autres objets peuvent également être des cibles d'événements. Par exemple {{domxref ("XMLHttpRequest")}}, {{domxref ("AudioNode")}}, {{domxref ("AudioContext")}} et autres.</p> -<p>De nombreuses cibles d'événements (y compris des éléments, des documents et des fenêtres) supporte également la définition de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Event_handlers">gestionnaires d'événements</a> via les propriétés et attributs <code>onevent</code>.</p> +<p>De nombreuses cibles d'événements (y compris des éléments, des documents et des fenêtres) supporte également la définition de <a href="/fr/docs/Web/Guide/DOM/Events/Event_handlers">gestionnaires d'événements</a> via les propriétés et attributs <code>onevent</code>.</p> <p>{{InheritanceDiagram}}</p> @@ -43,7 +44,7 @@ translation_of: Web/API/EventTarget <p>Mozilla inclut quelques extensions à utiliser par les cibles d'événements implémentées par JS pour implémenter les propriétés <code>onevent</code>.</p> -<p>Voir aussi <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/WebIDL_bindings">liaisons WebIDL</a>.</p> +<p>Voir aussi <a href="/fr/docs/Mozilla/WebIDL_bindings">liaisons WebIDL</a>.</p> <ul> <li><code>void <strong>setEventHandler</strong>(DOMString <var>type</var>, EventHandler <var>handler</var>)</code> {{non-standard_inline}}</li> @@ -92,43 +93,18 @@ EventTarget.prototype.dispatchEvent = function (event) { } </pre> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Pas de changement.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - <td>Quelques paramètres sont désormais optionnels (<code>listener</code>), ou acceptent la valeur nulle (<code>useCapture</code>).</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td> - <td>{{Spec2('DOM2 Events')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.EventTarget")}}</p> +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatiblité des navigateurs</h2> + +<p>{{Compat}}</p> <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Reference/Events">Référence d'événement</a> - les événements disponibles sur la plateforme.</li> - <li> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events">Guide du développeur d'événements</a></li> + <li><a href="/fr/docs/Web/Reference/Events">Référence d'événement</a> - les événements disponibles sur la plateforme.</li> + <li><a href="/fr/docs/Web/Guide/DOM/Events">Guide du développeur d'événements</a></li> <li>{{domxref("Event")}} interface</li> </ul> diff --git a/files/fr/web/api/formdata/has/index.html b/files/fr/web/api/formdata/has/index.html index 82ad7bb947..0074201183 100644 --- a/files/fr/web/api/formdata/has/index.html +++ b/files/fr/web/api/formdata/has/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/FormData/has <p>La méthode <code><strong>has()</strong></code> de l'interface {{domxref("FormData")}} renvoie un booléen indiquant si un objet <code>FormData</code> contient une certaine clé.</p> <div class="note"> -<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -74,7 +74,7 @@ formData.has('username'); // Retourne true <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="En/Using XMLHttpRequest">Utilisation de XMLHttpRequest</a></li> - <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="en/DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utilisation des objects FormData </a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="En/Using XMLHttpRequest">Utilisation de XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="en/DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utilisation des objects FormData </a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/fr/web/api/formdata/keys/index.html b/files/fr/web/api/formdata/keys/index.html index 2aa0122f78..b6b9ad2acf 100644 --- a/files/fr/web/api/formdata/keys/index.html +++ b/files/fr/web/api/formdata/keys/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/FormData/keys <p>La méthode <code>FormData.keys()</code> renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des objets {{domxref("USVString")}}.</p> <div class="note"> -<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -73,7 +73,7 @@ cle2</pre> <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/fr/web/api/notification/actions/index.html b/files/fr/web/api/notification/actions/index.html index 64c0650649..3f484723f7 100644 --- a/files/fr/web/api/notification/actions/index.html +++ b/files/fr/web/api/notification/actions/index.html @@ -51,6 +51,6 @@ translation_of: Web/API/Notification/actions <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> <li>{{DOMxRef("Notification.maxActions")}}</li> </ul> diff --git a/files/fr/web/api/notification/body/index.html b/files/fr/web/api/notification/body/index.html index fd6bdbbcbb..d89bd55769 100644 --- a/files/fr/web/api/notification/body/index.html +++ b/files/fr/web/api/notification/body/index.html @@ -48,5 +48,5 @@ translation_of: Web/API/Notification/body <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/close/index.html b/files/fr/web/api/notification/close/index.html index d8d7671766..37f7f929b6 100644 --- a/files/fr/web/api/notification/close/index.html +++ b/files/fr/web/api/notification/close/index.html @@ -76,5 +76,5 @@ translation_of: Web/API/Notification/close <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/data/index.html b/files/fr/web/api/notification/data/index.html index 1abb8eb28e..e6e29516f2 100644 --- a/files/fr/web/api/notification/data/index.html +++ b/files/fr/web/api/notification/data/index.html @@ -50,5 +50,5 @@ translation_of: Web/API/Notification/data <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/dir/index.html b/files/fr/web/api/notification/dir/index.html index 612152ed86..6e694e6d14 100644 --- a/files/fr/web/api/notification/dir/index.html +++ b/files/fr/web/api/notification/dir/index.html @@ -58,5 +58,5 @@ translation_of: Web/API/Notification/dir <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/icon/index.html b/files/fr/web/api/notification/icon/index.html index 441ed4c989..19eac0702c 100644 --- a/files/fr/web/api/notification/icon/index.html +++ b/files/fr/web/api/notification/icon/index.html @@ -48,5 +48,5 @@ translation_of: Web/API/Notification/icon <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/image/index.html b/files/fr/web/api/notification/image/index.html index bd84cc0b1d..0ad86d51a3 100644 --- a/files/fr/web/api/notification/image/index.html +++ b/files/fr/web/api/notification/image/index.html @@ -47,5 +47,5 @@ translation_of: Web/API/Notification/image <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/index.html b/files/fr/web/api/notification/index.html index 78de3344d7..207ba16762 100644 --- a/files/fr/web/api/notification/index.html +++ b/files/fr/web/api/notification/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Notification --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">L'interface Notification de l'<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API">API Notifications</a> est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.</span></p> +<p><span class="seoSummary">L'interface Notification de l'<a href="/fr/docs/Web/API/Notifications_API">API Notifications</a> est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.</span></p> <h2 id="Constructeur">Constructeur</h2> @@ -101,7 +101,7 @@ translation_of: Web/API/Notification <h3 id="Méthodes_dinstance">Méthodes d'instance</h3> -<p><em>Ces propriétés ne sont disponibles que sur une instance de l'objet </em><code>Notification</code><em> ou via son </em><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a><em>. L'objet </em><code>Notification</code><em> hérite également de l'interface {{domxref ("EventTarget")}}.</em></p> +<p><em>Ces propriétés ne sont disponibles que sur une instance de l'objet </em><code>Notification</code><em> ou via son </em><a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a><em>. L'objet </em><code>Notification</code><em> hérite également de l'interface {{domxref ("EventTarget")}}.</em></p> <dl> <dt>{{domxref("Notification.close()")}}</dt> @@ -173,5 +173,5 @@ translation_of: Web/API/Notification <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/lang/index.html b/files/fr/web/api/notification/lang/index.html index 4dfdac7556..91134377e5 100644 --- a/files/fr/web/api/notification/lang/index.html +++ b/files/fr/web/api/notification/lang/index.html @@ -49,5 +49,5 @@ translation_of: Web/API/Notification/lang <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/maxactions/index.html b/files/fr/web/api/notification/maxactions/index.html index e83daddaf0..f780fc27a1 100644 --- a/files/fr/web/api/notification/maxactions/index.html +++ b/files/fr/web/api/notification/maxactions/index.html @@ -58,6 +58,6 @@ console.log(`This device can display at most ${maxActions} actions on each notif <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> <li>{{domxref("Notification.actions")}}</li> </ul> diff --git a/files/fr/web/api/notification/notification/index.html b/files/fr/web/api/notification/notification/index.html index 6da9861c9c..48578eb688 100644 --- a/files/fr/web/api/notification/notification/index.html +++ b/files/fr/web/api/notification/notification/index.html @@ -8,15 +8,16 @@ tags: - Notification - Notifications - Reference +browser-compat: api.Notification.Notification translation_of: Web/API/Notification/Notification --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">Le constructeur <strong><code>Notification()</code></strong> crée une nouvelle instance d'objet {{domxref ("Notification")}}, qui représente une notification utilisateur.</span></p> +<p>Le constructeur <strong><code>Notification()</code></strong> crée une nouvelle instance d'objet <a href="/fr/docs/Web/API/notification"><code>Notification</code></a>, qui représente une notification utilisateur.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">const <var>myNotification</var> = new Notification(<var>title</var>, <var>options</var>)</pre> +<pre class="brush: js syntaxbox">const <var>myNotification</var> = new Notification(<var>title</var>, <var>options</var>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -27,18 +28,18 @@ translation_of: Web/API/Notification/Notification <dd>Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont: <ul> <li><code>dir</code>: La direction dans laquelle afficher la notification. La valeur par défaut est <code>auto</code>, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de <code>ltr</code> et <code>rtl</code> (bien que la plupart des navigateurs semblent ignorer ces paramètres.)</li> - <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li> - <li><code>badge</code>: Un {{domxref ("USVString")}} contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</li> - <li><code>body</code>: Un {{domxref ("DOMString")}} représentant le corps du texte de la notification, qui est affiché sous le titre.</li> - <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.</li> - <li><code>icon</code>: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.</li> - <li><code>image</code>: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.</li> + <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant une <a href="https://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="https://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li> + <li><code>badge</code>: Un <a href="/fr/docs/Web/API/USVString"><code>USVString</code></a> contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</li> + <li><code>body</code>: Un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le corps du texte de la notification, qui est affiché sous le titre.</li> + <li><code>tag</code>: Un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant un tag d'identification pour la notification.</li> + <li><code>icon</code>: Une <a href="/fr/docs/Web/API/USVString"><code>USVString</code></a> contenant l'URL d'une icône à afficher dans la notification.</li> + <li><code>image</code>: Une <a href="/fr/docs/Web/API/USVString"><code>USVString</code></a> contenant l'URL d'une image à afficher dans la notification.</li> <li><code>data</code>: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.</li> - <li><code>vibrate</code>: Un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification.</li> - <li><code>renotify</code>: Un {{domxref ("Boolean")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est <code>false</code>, ce qui signifie qu'ils ne seront pas notifiés.</li> - <li><code>requireInteraction</code>: Un {{domxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est <code>false</code>.</li> - <li><code>actions</code>: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur.</li> - <li><code>silent</code>: Un {{domxref ("Boolean")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est <code>false</code>, ce qui signifie qu'il ne sera pas silencieux.</li> + <li><code>vibrate</code>: Un <a href="/fr/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification.</li> + <li><code>renotify</code>: Un <a href="/fr/docs/Web/API/Boolean"><code>Boolean</code></a> spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est <code>false</code>, ce qui signifie qu'ils ne seront pas notifiés.</li> + <li><code>requireInteraction</code>: Un <a href="/fr/docs/Web/API/Boolean"><code>Boolean</code></a> indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est <code>false</code>.</li> + <li><code>actions</code>: Un tableau de <a href="/fr/docs/Web/API/NotificationAction"><code>NotificationAction</code></a> représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur.</li> + <li><code>silent</code>: Un <a href="/fr/docs/Web/API/Boolean"><code>Boolean</code></a> spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est <code>false</code>, ce qui signifie qu'il ne sera pas silencieux.</li> </ul> </dd> </dl> @@ -47,42 +48,27 @@ translation_of: Web/API/Notification/Notification <p>Dans notre <a href="https://chrisdavidmills.github.io/emogotchi/">démo Emogotchi</a> (<a href="https://github.com/mdn/emogotchi">voir le code source</a>), nous exécutons une fonction <code>spawnNotification()</code> lorsque nous voulons déclencher une notification. La fonction reçoit des paramètres pour spécifier le corps, l'icône et le titre souhaités, puis elle crée l'objet <code>options</code> nécessaire et déclenche la notification à l'aide du constructeur <code>Notification()</code>.</p> -<pre class="brush: js notranslate">function spawnNotification(theBody, theIcon, theTitle) { - const options = { - body: theBody, - icon: theIcon - } - const n = new Notification(theTitle, options) +<pre class="brush: js notranslate">function spawnNotification(body, icon, title) { + const options = { + body: body, + icon: icon + }; + const n = new Notification(title, options); }</pre> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Web Notifications","#dom-notification-notification","Notification() constructor")}}</td> - <td>{{Spec2('Web Notifications')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Notification.Notification")}}</p> +<h2 id="specifications">Spécifications</h2> + +{{Specifications}} + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> <h3 id="Notes_Chrome">Notes Chrome</h3> <p>À partir de Chrome 49, les notifications ne fonctionnent pas en mode navigation privée.</p> -<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> +<p>Chrome pour Android lance une erreur <code>TypeError</code> lors de l'appel du constructeur <code>Notification</code>. Il ne prend en charge que la création de notifications à partir d'un service worker. Consultez le <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=481856">Chromium issue tracker</a> pour plus de détails.</p> <h3 id="Notes_Internet_Explorer">Notes Internet Explorer</h3> @@ -92,5 +78,5 @@ translation_of: Web/API/Notification/Notification <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/onclose/index.html b/files/fr/web/api/notification/onclose/index.html index b204c7075d..5d5edbde16 100644 --- a/files/fr/web/api/notification/onclose/index.html +++ b/files/fr/web/api/notification/onclose/index.html @@ -29,5 +29,5 @@ Notification.onclose = (event) => { ... } <ul> <li>{{domxref("Notification")}}</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/onerror/index.html b/files/fr/web/api/notification/onerror/index.html index 8475f85cc4..476e5cb9d7 100644 --- a/files/fr/web/api/notification/onerror/index.html +++ b/files/fr/web/api/notification/onerror/index.html @@ -48,5 +48,5 @@ translation_of: Web/API/Notification/onerror <ul> <li>{{domxref("Notification")}}</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/onshow/index.html b/files/fr/web/api/notification/onshow/index.html index 9701a3fc04..bdb0953b6f 100644 --- a/files/fr/web/api/notification/onshow/index.html +++ b/files/fr/web/api/notification/onshow/index.html @@ -29,5 +29,5 @@ translation_of: Web/API/Notification/onshow <ul> <li>{{domxref("Notification")}}</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/renotify/index.html b/files/fr/web/api/notification/renotify/index.html index 0b8389761e..a79c385380 100644 --- a/files/fr/web/api/notification/renotify/index.html +++ b/files/fr/web/api/notification/renotify/index.html @@ -52,5 +52,5 @@ translation_of: Web/API/Notification/renotify <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/requestpermission/index.html b/files/fr/web/api/notification/requestpermission/index.html index 37a781ea03..b5b1222762 100644 --- a/files/fr/web/api/notification/requestpermission/index.html +++ b/files/fr/web/api/notification/requestpermission/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Notification/requestPermission </div> <div class="blockIndicator note"> -<p><strong>Note</strong>: Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a> pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.</p> +<p><strong>Note</strong>: Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez <a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a> pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.</p> </div> <p><span class="seoSummary">La méthode <strong><code>requestPermission()</code></strong> de l'interface {{domxref ("Notification")}} demande l'autorisation à l'utilisateur pour l'origine actuelle d'afficher des notifications.</span></p> @@ -115,5 +115,5 @@ translation_of: Web/API/Notification/requestPermission <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/requireinteraction/index.html b/files/fr/web/api/notification/requireinteraction/index.html index df26718bb8..d598a97269 100644 --- a/files/fr/web/api/notification/requireinteraction/index.html +++ b/files/fr/web/api/notification/requireinteraction/index.html @@ -48,5 +48,5 @@ translation_of: Web/API/Notification/requireInteraction <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/silent/index.html b/files/fr/web/api/notification/silent/index.html index bfd9a16b50..5452c77398 100644 --- a/files/fr/web/api/notification/silent/index.html +++ b/files/fr/web/api/notification/silent/index.html @@ -50,5 +50,5 @@ translation_of: Web/API/Notification/silent <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/tag/index.html b/files/fr/web/api/notification/tag/index.html index 38a7683588..7794c70e61 100644 --- a/files/fr/web/api/notification/tag/index.html +++ b/files/fr/web/api/notification/tag/index.html @@ -51,5 +51,5 @@ translation_of: Web/API/Notification/tag <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/timestamp/index.html b/files/fr/web/api/notification/timestamp/index.html index 28625dfc53..ca54bf330c 100644 --- a/files/fr/web/api/notification/timestamp/index.html +++ b/files/fr/web/api/notification/timestamp/index.html @@ -50,5 +50,5 @@ translation_of: Web/API/Notification/timestamp <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/title/index.html b/files/fr/web/api/notification/title/index.html index 7b046666cf..40edbb0790 100644 --- a/files/fr/web/api/notification/title/index.html +++ b/files/fr/web/api/notification/title/index.html @@ -48,5 +48,5 @@ translation_of: Web/API/Notification/title <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/vibrate/index.html b/files/fr/web/api/notification/vibrate/index.html index cd3527b56d..f9945d7c8a 100644 --- a/files/fr/web/api/notification/vibrate/index.html +++ b/files/fr/web/api/notification/vibrate/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Notification/vibrate <h3 id="Return_Value" name="Return_Value">Valeur</h3> -<p>Un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a>, tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.</p> +<p>Un <a href="/fr/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a>, tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.</p> <h2 id="Spécifications">Spécifications</h2> @@ -50,5 +50,5 @@ translation_of: Web/API/Notification/vibrate <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notifications_api/index.html b/files/fr/web/api/notifications_api/index.html index f0b8fdfd0b..1a5dc8eb8e 100644 --- a/files/fr/web/api/notifications_api/index.html +++ b/files/fr/web/api/notifications_api/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/Notifications_API <p>Cela créera une boîte de dialogue, proche de cette apparence:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/17008/Screen_Shot_2019-12-11_at_9.59.14_AM.png" style="border-style: solid; border-width: 1px; display: block; height: 183px; margin: 0px auto; width: 643px;"></p> +<p><img alt="" src="screen_shot_2019-12-11_at_9.59.14_am.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> <p>De là, l'utilisateur peut choisir d'autoriser les notifications de cette origine ou de les bloquer. Une fois le choix effectué, le paramètre persistera généralement pour la session en cours.</p> @@ -37,10 +37,10 @@ translation_of: Web/API/Notifications_API <p>Ensuite, une nouvelle notification est créée à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}. Auquel on doit passé un titre en argument et il peut éventuellement recevoir un objet d'options pour personnalisés la notification, telles que la direction du texte, le corps du texte, l'icône à afficher, le son de notification à lire, etc.</p> -<p>En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a>, pour permettre aux service worker de déclencher des notifications.</p> +<p>En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'<a href="/fr/docs/Web/API/ServiceWorker_API">API ServiceWorker</a>, pour permettre aux service worker de déclencher des notifications.</p> <div class="note"> -<p><strong>Note</strong>: Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a>.</p> +<p><strong>Note</strong>: Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez <a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a>.</p> </div> <h2 id="Les_interfaces_de_Notifications">Les interfaces de Notifications</h2> @@ -87,5 +87,5 @@ translation_of: Web/API/Notifications_API <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.html b/files/fr/web/api/serviceworkerregistration/shownotification/index.html index 9568f1894c..d65ab4a999 100644 --- a/files/fr/web/api/serviceworkerregistration/shownotification/index.html +++ b/files/fr/web/api/serviceworkerregistration/shownotification/index.html @@ -17,12 +17,12 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification <p><span class="seoSummary">La méthode <strong><code>showNotification()</code></strong> de l'interface {{domxref("ServiceWorkerRegistration")}} crée une notification dans un service worker actif.</span></p> <div class="note"> -<p><strong>Note</strong>: Cette fonctionnalité est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note</strong>: Cette fonctionnalité est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>serviceWorkerRegistration</em>.showNotification(<em>title</em>, [<em>options</em>])</pre> +<pre class="syntaxbox"><em>serviceWorkerRegistration</em>.showNotification(<em>title</em>, [<em>options</em>])</pre> <h3 id="Paramètres">Paramètres</h3> @@ -34,7 +34,7 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification <ul> <li><code>actions</code>: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur. Les membres du tableau doivent être un objet. Il peut contenir les valeurs suivantes: <ul> - <li>action: Une {{domxref("DOMString")}} représentant <span class="tlid-translation translation" lang="fr"><span title="">une action utilisateur à afficher sur la notification</span></span>.</li> + <li>action: Une {{domxref("DOMString")}} représentant une action utilisateur à afficher sur la notification.</li> <li>title: Une {{domxref("DOMString")}} contenant le texte d'action à montrer à l'utilisateur.</li> <li>icon: Une {{domxref("USVString")}} contenant l'URL d'une icône à afficher avec l'action.</li> </ul> @@ -45,13 +45,13 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification <li><code>dir</code>: La direction dans laquelle afficher la notification. La valeur par défaut est <code>auto</code>, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de <code>ltr</code> et <code>rtl</code> (bien que la plupart des navigateurs semblent ignorer ces paramètres.)</li> <li><code>icon</code>: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.</li> <li><code>image</code>: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.</li> - <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li> + <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une <a href="https://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li> <li><code>renotify</code>: Un {{domxref ("Boolean", "Booléen")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est <code>false</code>, ce qui signifie qu'ils ne seront pas notifiés.</li> <li><code>requireInteraction</code>: Un {{domxref ("Boolean", "Booléen")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est <code>false</code>.</li> <li><code>silent</code>: Un {{domxref ("Boolean", "Booléen")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est <code>false</code>, ce qui signifie qu'il ne sera pas silencieux.</li> <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.</li> <li><code>timestamp</code>: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer.</li> - <li><code>vibrate</code>: Un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, [300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms.</li> + <li><code>vibrate</code>: Un <a href="/fr/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, [300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms.</li> </ul> </dd> </dl> @@ -62,7 +62,7 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification <h2 id="Exemples">Exemples</h2> -<pre class="brush: js notranslate">navigator.serviceWorker.register('sw.js') +<pre class="brush: js">navigator.serviceWorker.register('sw.js') function showNotification() { Notification.requestPermission((result) => { diff --git a/files/fr/web/http/cors/errors/corsrequestnothttp/index.html b/files/fr/web/http/cors/errors/corsrequestnothttp/index.html index 62c13d99d3..640ac4c7b4 100644 --- a/files/fr/web/http/cors/errors/corsrequestnothttp/index.html +++ b/files/fr/web/http/cors/errors/corsrequestnothttp/index.html @@ -19,13 +19,13 @@ translation_of: Web/HTTP/CORS/Errors/CORSRequestNotHttp <h2 id="Raison">Raison</h2> -<pre class="syntaxbox notranslate"> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">Raison : la requête CORS n’utilise pas http.</span></span></span></span></pre> +<pre class="syntaxbox">Raison : la requête CORS n’utilise pas http.</pre> <h2 id="Quest_ce_qui_na_pas_fonctionné">Qu'est ce qui n'a pas fonctionné ?</h2> <p>Les requêtes {{Glossary("CORS")}} ne peuvent utiliser que les URL HTTPS, mais l'URL spécifiée par la requête est d'un type différent. Cela se produit souvent si l'URL spécifie un fichier local, en utilisant un URL de la forme <code>file:///</code>.</p> -<p>Pour résoudre ce problème, assurez-vous simplement d'utiliser les URL HTTPS lorsque vous émettez des requêtes impliquant CORS , comme {{domxref("XMLHttpRequest")}}, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch</a> APIs, Web Fonts (<code>@font-face</code>), <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL textures</a>, et des stylesheets XSL.</p> +<p>Pour résoudre ce problème, assurez-vous simplement d'utiliser les URL HTTPS lorsque vous émettez des requêtes impliquant CORS , comme {{domxref("XMLHttpRequest")}}, <a href="/fr/docs/Web/API/Fetch_API">Fetch</a> APIs, Web Fonts (<code>@font-face</code>), <a href="/fr/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL textures</a>, et des stylesheets XSL.</p> <h3 id="Sécurité_des_fichiers_locaux_dans_Firefox_68">Sécurité des fichiers locaux dans Firefox 68</h3> @@ -36,8 +36,8 @@ translation_of: Web/HTTP/CORS/Errors/CORSRequestNotHttp <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">Erreurs liées à CORS</a></li> + <li><a href="/fr/docs/Web/HTTP/CORS/Errors">Erreurs liées à CORS</a></li> <li>Glossaire: {{Glossary("CORS")}}</li> - <li><a href="/en-US/docs/Web/HTTP/CORS">Introduction à CORS</a></li> - <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">C'est quoi une URL?</a></li> + <li><a href="/fr/docs/Web/HTTP/CORS">Introduction à CORS</a></li> + <li><a href="/fr/docs/Learn/Common_questions/What_is_a_URL">C'est quoi une URL?</a></li> </ul> diff --git a/files/fr/web/http/headers/cache-control/index.html b/files/fr/web/http/headers/cache-control/index.html index ae9d7bc85e..254df474ee 100644 --- a/files/fr/web/http/headers/cache-control/index.html +++ b/files/fr/web/http/headers/cache-control/index.html @@ -84,14 +84,14 @@ Cache-Control: stale-if-error=<seconds> <p>Une réponse est normalement mise en cache par le navigateur si</p> <ul> - <li>il a un code de statut de <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/301">301</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/302">302</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/307">307</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/308">308</a></code>, or <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/410">410</a></code> <strong>et</strong></li> + <li>il a un code de statut de <code><a href="/fr/docs/Web/HTTP/Status/301">301</a></code>, <code><a href="/fr/docs/Web/HTTP/Status/302">302</a></code>, <code><a href="/fr/docs/Web/HTTP/Status/307">307</a></code>, <code><a href="/fr/docs/Web/HTTP/Status/308">308</a></code>, or <code><a href="/fr/docs/Web/HTTP/Status/410">410</a></code> <strong>et</strong></li> <li><code>Cache-Control</code> n'a pas de <code>no-store</code>, ou <em>s'il s'agit d'un mandataire</em>, il n'a pas d'adresse <code>privée</code> <strong>et</strong></li> - <li><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization">Authorization</a></code> n'est pas fixée</li> + <li><code><a href="/fr/docs/Web/HTTP/Headers/Authorization">Authorization</a></code> n'est pas fixée</li> <li>soit <ul> - <li>a un code de statut de <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/301">301</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/302">302</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/307">307</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/308">308</a></code>, ou <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/410">410</a></code> <strong>ou</strong></li> + <li>a un code de statut de <code><a href="/fr/docs/Web/HTTP/Status/301">301</a></code>, <code><a href="/fr/docs/Web/HTTP/Status/302">302</a></code>, <code><a href="/fr/docs/Web/HTTP/Status/307">307</a></code>, <code><a href="/fr/docs/Web/HTTP/Status/308">308</a></code>, ou <code><a href="/fr/docs/Web/HTTP/Status/410">410</a></code> <strong>ou</strong></li> <li>a un <code>public</code>, <code>max-age</code> ou <code>s-maxage</code> dans <code>Cache-Control</code> <strong>ou</strong></li> - <li>a <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires">Expires</a></code> fixé</li> + <li>a <code><a href="/fr/docs/Web/HTTP/Headers/Expires">Expires</a></code> fixé</li> </ul> </li> </ul> @@ -149,7 +149,7 @@ Cache-Control: stale-if-error=<seconds> <dt><code>no-transform</code></dt> <dd>Aucune conversion ou transformation ne devraient être réalisée sur la ressource. Ainsi, les en-tête <code>Content-Encoding</code>, <code>Content-Range</code> et <code>Content-Type</code> ne devraient jamais être modifiés par un proxy (serveur mandataire). Un proxy non-transparent pourrait, en l'absence de cet en-tête, convertir ou compresser (avec pertes) des images pour réduire la place occupée en cache ou diminuer le volume de données à transférer sur un lien lent.</dd> <dt><code>only-if-cached</code></dt> - <dd>Réglé par le <em>client </em>pour indiquer "ne pas utiliser le réseau" pour la réponse. Le cache doit soit répondre en utilisant une réponse stockée, soit répondre avec un code d'état <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/504">504</a></code>. Les en-têtes conditionnels tels que <code>If-None-Match</code> ne doivent pas être définis. Il n'y a aucun effet si <code>only-if-cached</code> est défini par un serveur dans le cadre d'une réponse.</dd> + <dd>Réglé par le <em>client </em>pour indiquer "ne pas utiliser le réseau" pour la réponse. Le cache doit soit répondre en utilisant une réponse stockée, soit répondre avec un code d'état <code><a href="/fr/docs/Web/HTTP/Status/504">504</a></code>. Les en-têtes conditionnels tels que <code>If-None-Match</code> ne doivent pas être définis. Il n'y a aucun effet si <code>only-if-cached</code> est défini par un serveur dans le cadre d'une réponse.</dd> </dl> <h2 id="Exemples">Exemples</h2> @@ -231,7 +231,7 @@ Cache-Control: no-cache, max-age=0, stale-while-revalidate=300 <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/Web/HTTP/Caching_FAQ">HTTP Caching FAQ</a></li> + <li><a href="/fr/docs/Web/HTTP/Caching_FAQ">HTTP Caching FAQ</a></li> <li><a href="https://www.mnot.net/cache_docs/">Caching Tutorial for Web Authors and Webmasters</a></li> <li>Guide: <em><a href="https://csswizardry.com/2019/03/cache-control-for-civilians"><code>Cache-Control</code> for civilians</a></em></li> <li>{{HTTPHeader("Age")}}</li> diff --git a/files/fr/web/http/headers/content-language/index.html b/files/fr/web/http/headers/content-language/index.html index 5466ebbd42..a31053cc56 100644 --- a/files/fr/web/http/headers/content-language/index.html +++ b/files/fr/web/http/headers/content-language/index.html @@ -60,7 +60,7 @@ Content-Language: de-DE, en-CA <h3 id="Indiquer_la_langue_dans_laquelle_un_document_est_écrit">Indiquer la langue dans laquelle un document est écrit</h3> -<p>L'attribut global <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code> est utilisé sur des éléments HTML pour indiquer la langue d'une page HTML entière ou une partie de celle-ci.</p> +<p>L'attribut global <code><a href="/fr/docs/Web/HTML/Global_attributes/lang">lang</a></code> est utilisé sur des éléments HTML pour indiquer la langue d'une page HTML entière ou une partie de celle-ci.</p> <pre class="brush: html notranslate"><html lang="de"></pre> @@ -102,6 +102,6 @@ Content-Language: de-DE, en-CA <p><a href="https://www.w3.org/International/questions/qa-http-and-lang.en">HTTP headers, meta elements and language information</a></p> </li> <li> - <p><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">HTML <code>lang</code> attribute</a></p> + <p><a href="/fr/docs/Web/HTML/Global_attributes/lang">HTML <code>lang</code> attribute</a></p> </li> </ul> diff --git a/files/fr/web/http/headers/content-security-policy/frame-ancestors/index.html b/files/fr/web/http/headers/content-security-policy/frame-ancestors/index.html index 1417d96bb9..c512933db4 100644 --- a/files/fr/web/http/headers/content-security-policy/frame-ancestors/index.html +++ b/files/fr/web/http/headers/content-security-policy/frame-ancestors/index.html @@ -57,7 +57,7 @@ Content-Security-Policy: frame-ancestors <source> <source>; <dl> <dt><host-source></dt> - <dd>Des hôtes Internet par leur nom de domaine ou adresse IP, aussi bien qu'un <a href="https://wiki.developer.mozilla.org/en-US/docs/URIs_and_URLs">protocole</a> et/ou un numéro de port. L'adresse du site peut inclure un caractère de remplacement optionnel (l'astérisque <code>'*'</code>), qui ne peut être utilisée que pour indiquer un sous-domaine ou que tous les ports existants sont des sources valides. Vous ne devez pas mettre de guillemets simples.<br> + <dd>Des hôtes Internet par leur nom de domaine ou adresse IP, aussi bien qu'un <a href="/fr/docs/URIs_and_URLs">protocole</a> et/ou un numéro de port. L'adresse du site peut inclure un caractère de remplacement optionnel (l'astérisque <code>'*'</code>), qui ne peut être utilisée que pour indiquer un sous-domaine ou que tous les ports existants sont des sources valides. Vous ne devez pas mettre de guillemets simples.<br> Exemples : <ul> <li><code>http://*.example.com</code>: correspondra à toutes les tentatives d'accès pour tous les sous-domaines de example.com via le protocole <code>http:</code>.</li> @@ -73,9 +73,9 @@ Content-Security-Policy: frame-ancestors <source> <source>; <dd>Un protocole tel que <code>http:</code> or <code>https:</code>. Les deux-points sont nécessaires et vous ne devez pas mettre de guillemets. Vous pouvez aussi spécifier des schémas de données bien que ce ne soit pas recommandé. <ul> <li><code>data:</code> Autorise <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">les URI <code>data:</code></a> à être utilisées comme source de contenu.<em> Cette pratique manque de sécurité ; une personne malveillante peut aussi injecter des URI data: arbitraires. Utilisez cette valeur avec parcimonie et certainement pas pour des scripts.</em></li> - <li><code>mediastream:</code> permet aux <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/MediaStream_API">URI <code>mediastream:</code></a> d'être utilisées comme source de contenu.</li> - <li><code>blob:</code> permet aux <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Blob">URI <code>blob:</code></a> d'être utilisées comme source de contenu.</li> - <li><code>filesystem:</code> Allows <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/FileSystem">URI <code>filesystem:</code></a> d'être utilisées comme source de contenu.</li> + <li><code>mediastream:</code> permet aux <a href="/fr/docs/Web/API/MediaStream_API">URI <code>mediastream:</code></a> d'être utilisées comme source de contenu.</li> + <li><code>blob:</code> permet aux <a href="/fr/docs/Web/API/Blob">URI <code>blob:</code></a> d'être utilisées comme source de contenu.</li> + <li><code>filesystem:</code> Allows <a href="/fr/docs/Web/API/FileSystem">URI <code>filesystem:</code></a> d'être utilisées comme source de contenu.</li> </ul> </dd> <dt><code>'self'</code></dt> diff --git a/files/fr/web/http/headers/content-security-policy/index.html b/files/fr/web/http/headers/content-security-policy/index.html index 4d4a843a19..4ffcff7b78 100644 --- a/files/fr/web/http/headers/content-security-policy/index.html +++ b/files/fr/web/http/headers/content-security-policy/index.html @@ -124,11 +124,11 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy </dl> <div class="warning"> -<p>Bien que la directive <a href="https://wiki.developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a> est prévue remplacer la directive <code><strong>report-uri</strong></code> maintenant dépréciée, <a href="https://wiki.developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a> n'est pas encore supportée par la plupart des navigateurs modernes. Par rétrocompatibilité avec les navigateurs courants et tout en prévoyant une compatibilité future quand les navigateurs supporteront <a href="https://wiki.developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a>, vous pouvez spécifier les deux directives <code><strong>report-uri</strong></code> et <a href="https://wiki.developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a>:</p> +<p>Bien que la directive <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a> est prévue remplacer la directive <code><strong>report-uri</strong></code> maintenant dépréciée, <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a> n'est pas encore supportée par la plupart des navigateurs modernes. Par rétrocompatibilité avec les navigateurs courants et tout en prévoyant une compatibilité future quand les navigateurs supporteront <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a>, vous pouvez spécifier les deux directives <code><strong>report-uri</strong></code> et <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a>:</p> <pre class="syntaxbox notranslate">Content-Security-Policy: ...; report-uri https://endpoint.com; report-to groupname</pre> -<p>Dans les navigateurs qui supportent <a href="https://wiki.developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a>, la directive <code><strong>report-uri</strong></code> sera ignorée.</p> +<p>Dans les navigateurs qui supportent <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a>, la directive <code><strong>report-uri</strong></code> sera ignorée.</p> </div> <dl> diff --git a/files/fr/web/http/headers/index.html b/files/fr/web/http/headers/index.html index a493fb6715..95bcc91ab5 100644 --- a/files/fr/web/http/headers/index.html +++ b/files/fr/web/http/headers/index.html @@ -321,7 +321,7 @@ translation_of: Web/HTTP/Headers <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt> <dd>indique si un navigateur doit être autorisé à afficher une page dans un {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} ou {{HTMLElement("object")}}.</dd> <dt>{{HTTPHeader("X-Permitted-Cross-Domain-Policies")}}</dt> - <dd>Sépcifie si un fichier de règlementation interdomaines (<code>crossdomain.xml</code>) est autorisé. Ce fichier peut définir une règle pour accorder aux clients (comme Adobe Flash Player, Adobe Acrobat, Microsoft Silverlight ou Apache Flex) la permission de gérer des données entre domaines qui seraient autrement restreintes à cause de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">Same-Origin Policy</a>. Voir la <a href="https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html">spécification Cross-domain Policy File</a> pour plus d'informations.</dd> + <dd>Sépcifie si un fichier de règlementation interdomaines (<code>crossdomain.xml</code>) est autorisé. Ce fichier peut définir une règle pour accorder aux clients (comme Adobe Flash Player, Adobe Acrobat, Microsoft Silverlight ou Apache Flex) la permission de gérer des données entre domaines qui seraient autrement restreintes à cause de <a href="/fr/docs/Web/Security/Same-origin_policy">Same-Origin Policy</a>. Voir la <a href="https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html">spécification Cross-domain Policy File</a> pour plus d'informations.</dd> <dt>{{HTTPHeader("X-Powered-By")}}</dt> <dd>peut être défini par l'environnement hôte ou par d'autres cadriciels, il contient des informations sur eux sans fournir aucun information utile à l'application ni aux visiteurs. Désactivez cet en-tête pour éviter d'exposer des informations et des vulnérabilités potentielles.</dd> <dt>{{HTTPHeader("X-XSS-Protection")}}</dt> diff --git a/files/fr/web/http/methods/trace/index.html b/files/fr/web/http/methods/trace/index.html index 97585ec305..50422020f7 100644 --- a/files/fr/web/http/methods/trace/index.html +++ b/files/fr/web/http/methods/trace/index.html @@ -72,5 +72,5 @@ original_slug: Web/HTTP/Méthode/TRACE <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/HTTP/Méthode">Méthodes HTTP</a></li> + <li><a href="/fr/docs/Web/HTTP/Méthode">Méthodes HTTP</a></li> </ul> diff --git a/files/fr/web/javascript/reference/classes/private_class_fields/index.html b/files/fr/web/javascript/reference/classes/private_class_fields/index.html index 7d5aff7d9c..c8df9cbd19 100644 --- a/files/fr/web/javascript/reference/classes/private_class_fields/index.html +++ b/files/fr/web/javascript/reference/classes/private_class_fields/index.html @@ -202,6 +202,6 @@ new ClassWithPrivateAccessor(); <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes/Class_fields">Champs de classe publiques</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Classes/Class_fields">Champs de classe publiques</a></li> <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li> </ul> diff --git a/files/fr/web/javascript/reference/classes/public_class_fields/index.html b/files/fr/web/javascript/reference/classes/public_class_fields/index.html index c464973a96..6344539840 100644 --- a/files/fr/web/javascript/reference/classes/public_class_fields/index.html +++ b/files/fr/web/javascript/reference/classes/public_class_fields/index.html @@ -15,7 +15,7 @@ original_slug: Web/JavaScript/Reference/Classes/Class_fields <p>Les déclarations de champs, tant publics que privés, sont <a href="https://github.com/tc39/proposal-class-fields">une fonctionnalité expérimentale (étape 3)</a> proposée au <a href="https://tc39.github.io/beta/">TC39</a>, le comité des standards JavaScript.</p> -<p>La prise en charge dans les navigateurs est limitée, mais cette fonctionnalité peut être utilisée à travers une étape de contruction avec des systèmes tels que <a href="https://babeljs.io/">Babel</a>. Voir <a href="https://wiki.developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes/Class_fields$edit#Browser_compatibility">l'information de compatibilité</a> ci-dessous.</p> +<p>La prise en charge dans les navigateurs est limitée, mais cette fonctionnalité peut être utilisée à travers une étape de contruction avec des systèmes tels que <a href="https://babeljs.io/">Babel</a>. Voir <a href="/fr/docs/Web/JavaScript/Reference/Classes/Class_fields$edit#Browser_compatibility">l'information de compatibilité</a> ci-dessous.</p> </div> <p>Les champs publics, tant statiques que d'instance, sont des propriétés qui peuvent être écrites, et qui sont énumérables et configurables. En tant que telles, à la différence de leurs contreparties privées, elles participent à l'héritage du prototype.</p> diff --git a/files/fr/web/svg/element/ellipse/index.html b/files/fr/web/svg/element/ellipse/index.html index f896739821..4ca81837ec 100644 --- a/files/fr/web/svg/element/ellipse/index.html +++ b/files/fr/web/svg/element/ellipse/index.html @@ -57,7 +57,7 @@ translation_of: Web/SVG/Element/ellipse <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt> <dd>Plus notamment : {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</dd> <dt>Attributs d'événements</dt> - <dd><a href="/fr/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Attributs d'événément globaux</a>, <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Attributs d'événément graphiques</a></dd> + <dd><a href="/fr/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Attributs d'événément globaux</a>, <a href="/fr/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Attributs d'événément graphiques</a></dd> <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt> <dd>Plus notamment : {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</dd> <dt>Attributs ARIA</dt> diff --git a/files/fr/web/svg/element/pattern/index.html b/files/fr/web/svg/element/pattern/index.html index 800b18c89c..85628e4936 100644 --- a/files/fr/web/svg/element/pattern/index.html +++ b/files/fr/web/svg/element/pattern/index.html @@ -2,119 +2,101 @@ title: <pattern> slug: Web/SVG/Element/pattern tags: - - Conteneur SVG - - Eléments(2) + - Element - SVG + - SVG Container +browser-compat: svg.elements.pattern translation_of: Web/SVG/Element/pattern --- <div>{{SVGRef}}</div> -<p>L'élément <strong><code><pattern></code></strong> définit un objet graphique qui peut être redessiné à des intervalles de coordonnées x et y répétés ("en mosaïque") pour couvrir une surface.</p> +<p>L'élément <strong><code><pattern></code></strong> définit un objet graphique qui peut être redessiné à des intervalles de coordonnées x et y répétés ("en mosaïque") pour couvrir une surface.</p> -<p>Le <strong><code><pattern></code></strong> est référéne par les attributs {{SVGAttr("fill")}} et {{SVGAttr("stroke")}} sur les autres éléments graphiques, pour appliquer un remplissage ou une bordure sur ces éléments avec le motif référencé.</p> +<p>Le <strong><code><pattern></code></strong> est référéne par les attributs {{SVGAttr("fill")}} et {{SVGAttr("stroke")}} sur les autres éléments graphiques, pour appliquer un remplissage ou une bordure sur ces éléments avec le motif référencé.</p> -<pre class="notranslate">html, body, svg { height: 100% } -</pre> +<div id="example"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { height: 100% }</pre> +</div> -<pre class="notranslate"><svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> - <defs> - <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%"> - <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> - </pattern> - </defs> +<pre class="brush: html"><svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> + <defs> + <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%"> + <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> + </pattern> + </defs> - <circle cx="50" cy="50" r="50" fill="url(#star)"/> - <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> + <circle cx="50" cy="50" r="50" fill="url(#star)"/> + <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> </svg></pre> +</div> -<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> +<p>{{EmbedLiveSample('example', 150, '100%')}}</p> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> <dl> <dt>{{SVGAttr("height")}}</dt> <dd>Cet attribut détermine la hauteur du motif de mosaïque.<br> - <small><em>Type de valeur </em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><longueur></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><pourcentage></strong></a>; <em>Valeur par défaut </em>: <code>0</code>; <em>Animable </em>: <strong>oui</strong></small></dd> + <small><em>Type de valeur </em>: <a href="/fr/docs/Web/SVG/Content_type#Length"><strong><longueur></strong></a>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><strong><pourcentage></strong></a>; <em>Valeur par défaut </em>: <code>0</code>; <em>Animable </em>: <strong>oui</strong></small></dd> <dt>{{SVGAttr("href")}}</dt> <dd>Cet attribut référence un patron de motif qui fournit les valeurs par défaut des attributs de l'élément <code><pattern></code>.<br> - <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Valeur par défaut </em>: <em>none</em>; <em>Animable</em>: <strong>yes</strong></small></dd> + <small><em>Type de valeur</em>: <a href="/fr/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Valeur par défaut </em>: <em>none</em>; <em>Animable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("patternContentUnits")}}</dt> - <dd>Cet attribut définit le système de coordonnées pour le contenu de {{SVGElement("pattern")}}.<br> - <small><em>Type de valeur </em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Valeur par défaut </em>: <code>userSpaceOnUse</code>; <em>Animable</em>: <strong>yes</strong></small> - <p class="note"><strong>Note :</strong> Cet attribut n'a pas d'effet si l'attribut <code>viewBox</code> est définit sur l'élément <code><pattern></code>.</p> + <dd>Cet attribut définit le système de coordonnées pour le contenu de {{SVGElement("pattern")}}.<br> + <small><em>Type de valeur </em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Valeur par défaut </em>: <code>userSpaceOnUse</code>; <em>Animable</em>: <strong>yes</strong></small> + <p class="note"><strong>Note :</strong> Cet attribut n'a pas d'effet si l'attribut <code>viewBox</code> est définit sur l'élément <code><pattern></code>.</p> </dd> <dt>{{SVGAttr("patternTransform")}}</dt> - <dd>Cet attribut contient la définition d'une transformation optionnelle supplémentaire du système de coordonnées du motif vers celui de la cible.<br> - <small><em>Type de valeur </em>: <strong><a href="/docs/Web/SVG/Content_type#Transform-list"><transform-list></a></strong>; <em>Valeur par défaut </em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dd>Cet attribut contient la définition d'une transformation optionnelle supplémentaire du système de coordonnées du motif vers celui de la cible.<br> + <small><em>Type de valeur </em>: <strong><a href="/fr/docs/Web/SVG/Content_type#Transform-list"><transform-list></a></strong>; <em>Valeur par défaut </em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("patternUnits")}}</dt> - <dd>Cet attribut définit le système de coordonnées pour les attributs <code>x</code>, <code>y</code>, <code>width</code> , et <code>height</code>.<br> - <small><em>Type de valeur </em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Valeur par défaut </em>: <code>objectBoundingBox</code>; <em>Animable</em>: <strong>yes</strong></small></dd> + <dd>Cet attribut définit le système de coordonnées pour les attributs <code>x</code>, <code>y</code>, <code>width</code> , et <code>height</code>.<br> + <small><em>Type de valeur </em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Valeur par défaut </em>: <code>objectBoundingBox</code>; <em>Animable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("preserveAspectRatio")}}</dt> <dd>Cet attribut définit comme le fragment SVG doit être déformé s'il est embarqué dans un conteneur avec un ratio d'aspect différent.<br> - <small><em>Type de valeur </em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Valeur par défaut </em>: <code>xMidYMid meet</code>; <em>Animable</em>: <strong>yes</strong></small></dd> + <small><em>Type de valeur </em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Valeur par défaut </em>: <code>xMidYMid meet</code>; <em>Animable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("viewBox")}}</dt> <dd>Cet attribut définit les limites de la fenêtre de rendu du SVG pour le fragment du motif.<br> - <small><em>Type de valeur </em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>Valeur par défaut </em>: none; <em>Animable</em>: <strong>yes</strong></small></dd> + <small><em>Type de valeur </em>: <strong><a href="/fr/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>Valeur par défaut </em>: none; <em>Animable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("width")}}</dt> <dd>Cet attribut détermine la largeur du motif de mosaïque.<br> - <small><em>Type de valeur </em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut </em>: <code>0</code>; <em>Animable</em>: <strong>yes</strong></small></dd> + <small><em>Type de valeur </em>: <a href="/fr/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut </em>: <code>0</code>; <em>Animable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("x")}}</dt> <dd>Cet attribut détermine le déplacement en coordonnée x du motif de mosaïque.<br> - <small><em>Type de valeur </em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut </em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>Type de valeur </em>: <a href="/fr/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut </em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt> - <dd>Cet attribut référence un patron de motif qui fournit des valeurs par défaut pour les attributs du <code><pattern></code>.<br> - <small><em>Type de valeur </em>: <a href="/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Valeur par défaut </em>: <em>none</em>; <em>Animable</em>: <strong>yes</strong></small> - <p class="note"><strong>Note :</strong> Pour les navigateurs implémentant <code>href</code>, si à la fois <code>href</code> et <code>xlink:href</code> sont définis, <code>xlink:href</code> sera ignoré et seulement <code>href</code> sera utilisé.</p> + <dd>Cet attribut référence un patron de motif qui fournit des valeurs par défaut pour les attributs du <code><pattern></code>.<br> + <small><em>Type de valeur </em>: <a href="/fr/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Valeur par défaut </em>: <em>none</em>; <em>Animable</em>: <strong>yes</strong></small> + <p class="note"><strong>Note :</strong> Pour les navigateurs implémentant <code>href</code>, si à la fois <code>href</code> et <code>xlink:href</code> sont définis, <code>xlink:href</code> sera ignoré et seulement <code>href</code> sera utilisé.</p> </dd> <dt>{{SVGAttr("y")}}</dt> <dd>Cet attribut détermine le déplacement en coordonnée y du motif de mosaïque.<br> - <small><em>Type de valeur </em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut </em>: <code>0</code>; <em>Animable</em>: <strong>yes</strong></small></dd> + <small><em>Type de valeur </em>: <a href="/fr/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut </em>: <code>0</code>; <em>Animable</em>: <strong>yes</strong></small></dd> <dt> - <h3 id="Global_attributes">Global attributes</h3> - <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Core">Attributs principaux</a></dt> + + <h3 id="global_attributes">Attributs globaux</h3> + + <a href="/fr/docs/Web/SVG/Attribute/Core">Attributs principaux</a></dt> <dd><small>Plus notamment : {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> - <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt> + <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt> <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt> + <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt> <dd><small>Plus notamment : {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> - <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt> + <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt> <dd><small>Plus notamment : {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> <dt>Attributs XLink</dt> <dd><small>Plus notamment : {{SVGAttr("xlink:title")}}</small></dd> </dl> -<h2 id="Contexte_dutilisation">Contexte d'utilisation</h2> +<h2 id="usage_notes">Notes d'utilisation</h2> <p>{{svginfo}}</p> -<h2 id="Interface_DOM">Interface DOM </h2> - -<p>Cet élement implémente l'interface <code><a href="/en/DOM/SVGPatternElement" title="en/DOM/SVGPatternElement">SVGPatternElement</a></code>.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('SVG2', 'pservers.html#Patterns', '<pattern>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'pservers.html#Patterns', '<pattern>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.pattern")}}</p> +<h2 id="specifications">Spécifications</h2> + +{{Specifications}} + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> diff --git a/files/fr/web/svg/element/polygon/index.html b/files/fr/web/svg/element/polygon/index.html index ac9c3fbb62..e4981d0eb3 100644 --- a/files/fr/web/svg/element/polygon/index.html +++ b/files/fr/web/svg/element/polygon/index.html @@ -6,38 +6,38 @@ tags: - Reference - SVG - SVG Graphique +browser-compat: svg.elements.polygon translation_of: Web/SVG/Element/polygon --- <div>{{SVGRef}}</div> -<p>L'élément <strong><code><polygon></code></strong> délimite une forme close composée d'un groupe de plusieurs segments de droites. Le dernier point est relié au premier afin de fermer la forme et de relier les traits entre deux. Pour créer une forme ouverte, voir l'élément {{SVGElement("polyline")}}.</p> +<p>L'élément <strong><code><polygon></code></strong> délimite une forme close composée d'un groupe de plusieurs segments de droites. Le dernier point est relié au premier afin de fermer la forme et de relier les traits entre deux. Pour créer une forme ouverte, voir l'élément {{SVGElement("polyline")}}.</p> -<div id="Exemple"> +<div id="example"> <div class="hidden"> <pre class="brush: css">html,body,svg { height:100% }</pre> </div> <pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- Exemple d'un polygone avec le remplissage par défaut --> - <polygon points="0,100 50,25 50,75 100,0" /> + <polygon points="0,100 50,25 50,75 100,0" /> <!-- Le même polygone sans remplissage et avec un contour --> - <polygon points="100,100 150,25 150,75 200,0" - fill="none" stroke="black" /> + <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg></pre> - -<p>{{ EmbedLiveSample('SVG', '120', '120', '', 'Web/SVG/Element/polygon') }}</p> </div> +<div>{{EmbedLiveSample('example', '100', '100')}}</div> + <h2 id="Attributs">Attributs</h2> <dl> <dt>{{SVGAttr('points')}}</dt> <dd>Cette attribut défini une liste de point (paire de coordonnées absolue x et y ) nécessaire pour dessiner le polygone.<br> - <small><em>Type de valeur</em>: <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>+ ; <em>Valeur par défaut</em>: <code>""</code>; <em>Peut être animé</em>: <strong>oui</strong></small></dd> + <small><em>Type de valeur</em>: <a href="/fr/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>+ ; <em>Valeur par défaut</em>: <code>""</code>; <em>Peut être animé</em>: <strong>oui</strong></small></dd> <dt>{{SVGAttr("pathLength")}}</dt> <dd>Cet attribut spécifie la taille totale pour le chemin dans l'unité de l'utilisateur.<br> - <small><em>Type de valeur</em>: <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>; <em>Valeur par défaut</em>: <em>aucune</em>; <em>Peut être animé</em>: <strong>oui</strong></small></dd> + <small><em>Type de valeur</em>: <a href="/fr/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>; <em>Valeur par défaut</em>: <em>aucune</em>; <em>Peut être animé</em>: <strong>oui</strong></small></dd> </dl> <h3 id="Attributs_Globaux">Attributs Globaux</h3> @@ -47,11 +47,11 @@ translation_of: Web/SVG/Element/polygon <dd><small>Principalement: {{SVGAttr('id')}} et {{SVGAttr('tabindex')}}</small></dd> <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attribut de style</a></dt> <dd><small>{{SVGAttr('class')}} et {{SVGAttr('style')}}</small></dd> - <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing">Attributs conditionnels</a></dt> + <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs conditionnels</a></dt> <dd><small>Principalement: {{SVGAttr('requiredExtensions')}} et {{SVGAttr('systemLanguage')}}</small></dd> <dt>Attributs d'évènements</dt> - <dd><small><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Attribut d'évènement global</a>, <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Attribut d'évènement graphique</a></small></dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt> + <dd><small><a href="/fr/docs/Web/SVG/Attribute/Events#global_event_attributes">Attribut d'évènement global</a>, <a href="/fr/docs/Web/SVG/Attribute/Events#graphical_event_attributes">Attribut d'évènement graphique</a></small></dd> + <dt><a href="h/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt> <dd><small>Principalement: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}} et {{SVGAttr('visibility')}}</small></dd> <dt>Attributs ARIA</dt> <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> @@ -65,35 +65,13 @@ translation_of: Web/SVG/Element/polygon <p>Cet élément implémente l'interface {{domxref("SVGPolygonElement")}}.</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">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('SVG2', 'shapes.html#PolygonElement', '<polygon>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td>Pas de changement</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '<polygon>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2> - - - -<p>{{Compat("svg.elements.polygon")}}</p> +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité avec les navigateurs</h2> + +<p>{{Compat}}</p> <h2 id="Voir_également">Voir également</h2> diff --git a/files/fr/web/web_components/index.html b/files/fr/web/web_components/index.html index bb4fba0dcb..811f67a39b 100644 --- a/files/fr/web/web_components/index.html +++ b/files/fr/web/web_components/index.html @@ -32,7 +32,7 @@ translation_of: Web/Web_Components <p>Généralement, l'approche basique pour la création d'un composant Web est la suivante:</p> <ol> - <li>Créer une classe dans laquelle est spécifié la fonctionnalité du composant Web en utilisant la syntaxe de classe ECMAScript 2015 (voir les <a href="https://wiki.developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes">Classes</a> pour de plus amples informations).</li> + <li>Créer une classe dans laquelle est spécifié la fonctionnalité du composant Web en utilisant la syntaxe de classe ECMAScript 2015 (voir les <a href="/fr/docs/Web/JavaScript/Reference/Classes">Classes</a> pour de plus amples informations).</li> <li>Enregistrer le nouvel élément personnalisé en utilisant la méthode {{domxref("CustomElementRegistry.define()")}}, avec en paramètre le nom de l'élément à définir, la classe ou la fonction dans laquelle la fonctionnalité est spécifiée, et <span id="p3">optionnellement</span>, de quel élément celui-ci hérite-t-il.</li> <li>Si nécessaire, connecter un shadow DOM à l'élément personnalisé en utilisant la méthode {{domxref("Element.attachShadow()")}}. Ajouter les éléments-fils, les écouteurs d'événements, etc., au shadow DOM en utilisant les méthodes DOM usuelles.</li> <li>Si nécessaire, définir un template HTML en utilisant {{htmlelement("template")}} et {{htmlelement("slot")}}. Toujours en utilisant les méthodes DOM usuelles pour cloner le template et le connecter au shadow DOM.</li> |