diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-05 15:44:38 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-11-05 15:44:38 +0100 |
| commit | 79843297a1d97045c504575ab9a6a29b3af8ffae (patch) | |
| tree | ac5d42490285f37fb933ca83034505ecdd784dc9 /files/fr/web/api | |
| parent | 086e7141b8da9a5c008353582b8f72d7b5cda5b4 (diff) | |
| download | translated-content-79843297a1d97045c504575ab9a6a29b3af8ffae.tar.gz translated-content-79843297a1d97045c504575ab9a6a29b3af8ffae.tar.bz2 translated-content-79843297a1d97045c504575ab9a6a29b3af8ffae.zip | |
Fixes #2842 - Fixing EmbedLiveSample errors for fr docs (#2851)
* Fixes #2842 for CSS pages
* Fixes #2842 for Web API pages
* Fixes #2842 for other sections
* Fix EmbedLiveSample for moved CSS page
* Fixes #2842 for conflicting / orphaned docs
Diffstat (limited to 'files/fr/web/api')
98 files changed, 158 insertions, 670 deletions
diff --git a/files/fr/web/api/batterymanager/charging/index.md b/files/fr/web/api/batterymanager/charging/index.md index e1521666a4..88d4c3b253 100644 --- a/files/fr/web/api/batterymanager/charging/index.md +++ b/files/fr/web/api/batterymanager/charging/index.md @@ -32,7 +32,7 @@ navigator.getBattery().then(function(battery) { }); ``` -{{ EmbedLiveSample('Example', '100%', 30) }} +{{ EmbedLiveSample('Exemple', '100%', 30) }} ## Spécifications diff --git a/files/fr/web/api/batterymanager/chargingtime/index.md b/files/fr/web/api/batterymanager/chargingtime/index.md index d469bded62..e87591bbcd 100644 --- a/files/fr/web/api/batterymanager/chargingtime/index.md +++ b/files/fr/web/api/batterymanager/chargingtime/index.md @@ -36,7 +36,7 @@ navigator.getBattery().then(function(battery) { }); ``` -{{ EmbedLiveSample('Example', '100%', 30) }} +{{ EmbedLiveSample('Exemple', '100%', 30) }} ## Spécifications diff --git a/files/fr/web/api/batterymanager/dischargingtime/index.md b/files/fr/web/api/batterymanager/dischargingtime/index.md index 4cfac1fdde..2b42f214d4 100644 --- a/files/fr/web/api/batterymanager/dischargingtime/index.md +++ b/files/fr/web/api/batterymanager/dischargingtime/index.md @@ -34,7 +34,7 @@ navigator.getBattery().then(function(battery) { }); ``` -{{ EmbedLiveSample('Example', '100%', 30) }} +{{ EmbedLiveSample('Exemple', '100%', 30) }} ## Spécifications diff --git a/files/fr/web/api/batterymanager/level/index.md b/files/fr/web/api/batterymanager/level/index.md index dbaa9d3eca..1da93e8bfd 100644 --- a/files/fr/web/api/batterymanager/level/index.md +++ b/files/fr/web/api/batterymanager/level/index.md @@ -34,7 +34,7 @@ navigator.getBattery().then(function(battery) { }); ``` -{{ EmbedLiveSample('Example', '100%', 30, '', 'Web/API/BatteryManager/level') }} +{{ EmbedLiveSample('Exemple', '100%', 30, '', 'Web/API/BatteryManager/level') }} ## Spécifications diff --git a/files/fr/web/api/canvas_api/index.md b/files/fr/web/api/canvas_api/index.md index 3b26e6ff1f..0cef55c848 100644 --- a/files/fr/web/api/canvas_api/index.md +++ b/files/fr/web/api/canvas_api/index.md @@ -1,10 +1,6 @@ --- title: API canvas slug: Web/API/Canvas_API -tags: - - API - - Canvas - - Reference translation_of: Web/API/Canvas_API --- {{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}} @@ -76,7 +72,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Références diff --git a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md index 7581b9eb2e..be0df6f74b 100644 --- a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md @@ -227,7 +227,7 @@ canvas.addEventListener("mouseout",function(e){ ball.draw(); ``` -{{EmbedLiveSample("deuxième_démo", "610", "310")}} +{{EmbedLiveSample("Deuxième_démo", "610", "310")}} ## Effet de traînée @@ -297,7 +297,7 @@ canvas.addEventListener("mouseout",function(e){ ball.draw(); ``` -{{EmbedLiveSample("troisième_démo", "610", "310")}} +{{EmbedLiveSample("Troisième_démo", "610", "310")}} ## Ajout d'un contrôle de souris @@ -376,7 +376,7 @@ ball.draw(); Déplacez la balle en utilisant votre souris et relâchez-la avec un click. -{{EmbedLiveSample("Ajout_d'un_contrôle_de_souris", "610", "310")}} +{{EmbedLiveSample("Ajout_d\'un_contrôle_de_souris", "610", "310")}} ## Casse-briques diff --git a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md index 9449c304d0..8165c90b46 100644 --- a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md +++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md @@ -1,12 +1,6 @@ --- title: Ajout de styles et de couleurs slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors -tags: - - Canvas - - Couleurs - - Formes géométriques - - Graphismes - - Tutorial translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs --- @@ -65,7 +59,7 @@ draw(); Le résultat ressemble à ceci: -{{EmbedLiveSample("A_fillStyle_example", 160, 160, "canvas_fillstyle.png")}} +{{EmbedLiveSample("Un_exemple_fillStyle", 160, 160, "canvas_fillstyle.png")}} ### Un exemple `strokeStyle` @@ -96,7 +90,7 @@ draw(); Le résultat ressemble à ceci : -{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}} +{{EmbedLiveSample("Un_exemple_strokeStyle", "180", "180", "canvas_strokestyle.png")}} ## Transparence @@ -156,7 +150,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}} +{{EmbedLiveSample("Un_exemple_globalAlpha", "180", "180", "canvas_globalalpha.png")}} ### Un exemple en utilisant `rgba()` @@ -194,7 +188,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}} +{{EmbedLiveSample("Un_exemple_en_utilisant_rgba", "180", "180", "canvas_rgba.png")}} ## Le style des lignes @@ -246,7 +240,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_lineWidth_example", "180", "180", "canvas_linewidth.png")}} +{{EmbedLiveSample("Un_exemple_lineWidth", "180", "180", "canvas_linewidth.png")}} Pour l'obtention de lignes nettes, il faut comprendre comment les lignes sont tracées. Ci-dessous, la grille représente la grille de coordonnées. Les carrés sont des pixels réels de l'écran. Dans la première grille, un rectangle (2,1) à (5,5) est rempli. La zone entière couverte par les lignes (rouge clair) tombe sur les limites des pixels, de sorte que le rectangle rempli résultant aura des bords nets. @@ -314,7 +308,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}} +{{EmbedLiveSample("Un_exemple_de_lineCap", "180", "180", "canvas_linecap.png")}} ### Un exemple de `lineJoin` @@ -357,7 +351,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_lineJoin_example", "180", "180", "canvas_linejoin.png")}} +{{EmbedLiveSample("Un_exemple_de_lineJoin", "180", "180", "canvas_linejoin.png")}} ### Une démonstration de la propriété `miterLimit` @@ -432,7 +426,7 @@ document.getElementById('miterLimit').value = document.getElementById('canvas'). draw(); ``` -{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "canvas_miterlimit.png")}} +{{EmbedLiveSample("Une_démonstration_de_la_propriété_miterLimit", "400", "180", "canvas_miterlimit.png")}} ### Utilisation de lignes pointillées @@ -467,7 +461,7 @@ function march() { march(); ``` -{{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}} +{{EmbedLiveSample("Utilisation_de_lignes_pointillées", "120", "120", "marching-ants.png")}} ## Dégradés @@ -540,7 +534,7 @@ Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avo Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur. Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir. -{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}} +{{EmbedLiveSample("Un_exemple_de_createLinearGradient", "180", "180", "canvas_lineargradient.png")}} ### Un exemple de `createRadialGradient` @@ -595,7 +589,7 @@ Dans ce cas, nous avons légèrement décalé le point de départ du point final Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente. Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales. Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé `# 019F62 = rgba (1,159,98,1)`. -{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}} +{{EmbedLiveSample("Un_exemple_de_createRadialGradient", "180", "180", "canvas_radialgradient.png")}} ## Modèles @@ -657,7 +651,7 @@ draw(); Le résultat ressemble à ceci : -{{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}} +{{EmbedLiveSample("Un_exemple_de_createPattern", "180", "180", "canvas_createpattern.png")}} ## Ombres @@ -707,7 +701,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "shadowed-string.png")}} +{{EmbedLiveSample("Un_exemple_de_texte_ombré", "180", "100", "shadowed-string.png")}} Nous allons regarder la propriété de la `font` _(police de caratères)_ et la méthode `fillText` dans le chapitre suivant sur le [dessin de texte](/fr/docs/Dessin_de_texte_avec_canvas). @@ -740,6 +734,6 @@ function draw() { draw(); ``` -{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "fill-rule.png")}} +{{EmbedLiveSample("Règles_de_remplissage_Canvas", "110", "110", "fill-rule.png")}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}} diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/index.md index 3e0bf39741..2ad36d77c9 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/index.md +++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.md @@ -1,16 +1,12 @@ --- title: Composition et découpe slug: Web/API/Canvas_API/Tutorial/Compositing -tags: - - Canvas - - Composition - - dessin translation_of: Web/API/Canvas_API/Tutorial/Compositing original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition --- {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}} -Dans tous nos [exemples précédents](/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations), les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété `globalCompositeOperation`. En complément, la propriété `clip` nous permet de cacher les parties des formes que nous ne désirons pas. +Dans tous nos [exemples précédents](/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations), les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété `globalCompositeOperation`. En complément, la propriété `clip` nous permet de cacher les parties des formes que nous ne désirons pas. ## `globalCompositeOperation` @@ -19,9 +15,9 @@ Nous pouvons non seulement dessiner de nouvelles formes derrière des formes exi - {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}} - : Cela configure le type d'opération de composition à appliquer lorsqu'on dessine de nouvelles formes, où le type correspond à une string qui fait référence à une des douze opérations de composition possibles. -Reportez-vous aux [exemples de compositon](/fr/docs/Tutoriel_canvas/Composition/Example) pour le code des exemples suivants. +Reportez-vous aux [exemples de compositon](/fr/docs/Tutoriel_canvas/Composition/Example) pour le code des exemples suivants. -{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}} +{{EmbedLiveSample("globalCompositeOperation", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}} ## Détourage @@ -29,18 +25,18 @@ Un détourage (_clipping path_ en anglais) est comme une forme de canvas standar  -Si nous comparons le détourage à la propriété `globalCompositeOperation` vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec `source-in` et `source-atop`. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte. +Si nous comparons le détourage à la propriété `globalCompositeOperation` vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec `source-in` et `source-atop`. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte. -Dans le chapitre "[dessiner des formes avec le canevas](/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)", nous n'avions mentionné que les méthodes `stroke()` et `fill()`, mais il y en a une troisième: `clip()` — elle permet de faire des détourages. +Dans le chapitre "[dessiner des formes avec le canevas](/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)", nous n'avions mentionné que les méthodes `stroke()` et `fill()`, mais il y en a une troisième: `clip()` — elle permet de faire des détourages. - {{domxref("CanvasRenderingContext2D.clip", "clip()")}} - : Transforme le chemin en cours de création en détourage effectif. -Il faut utiliser `clip()` plutot que `closePath()` pour fermer un chemin et enfaire un détourage. +Il faut utiliser `clip()` plutot que `closePath()` pour fermer un chemin et enfaire un détourage. -Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente. +Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente. -### Un exemple de `clip` +### Un exemple de `clip` Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...). @@ -101,10 +97,10 @@ function drawStar(ctx, r) { draw(); ``` -Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à  `clip()`. Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable. +Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à `clip()`. Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable. -Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction `drawStar()`. Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage. +Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction `drawStar()`. Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage. -{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}} +{{EmbedLiveSample("Un_exemple_de_clip", "180", "180", "canvas_clip.png")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}} diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md index 8cb24960db..61065903eb 100644 --- a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md +++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md @@ -1,11 +1,6 @@ --- title: Dessin de texte avec canvas slug: Web/API/Canvas_API/Tutorial/Drawing_text -tags: - - Canvas - - Graphismes - - HTML - - Tutoriels translation_of: Web/API/Canvas_API/Tutorial/Drawing_text original_slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas --- @@ -42,7 +37,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_fillText_example", 310, 110)}} +{{EmbedLiveSample("Un_exemple_fillText", 310, 110)}} ### Un exemple de strokeText @@ -64,7 +59,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_strokeText_example", 310, 110)}} +{{EmbedLiveSample("Un_exemple_de_strokeText", 310, 110)}} ## Style de texte @@ -104,7 +99,7 @@ ctx.textBaseline = 'hanging'; ctx.strokeText('Hello world', 0, 100); ``` -#### Playable code +#### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> @@ -144,7 +139,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('Playable_code', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Mesures de texte avancées diff --git a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md index 45651bb30a..1339a2cb47 100644 --- a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md +++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md @@ -95,7 +95,7 @@ Dans cet exemple, nous utilisons la méthode [getImageData() ](/fr/docs/Web/API/ } canvas.addEventListener('mousemove', pick); -{{ EmbedLiveSample('A_color_picker', 610, 240) }} +{{ EmbedLiveSample('Une_pipette_à _couleur', 610, 240) }} ## Peinture des données pixel dans un contexte @@ -166,7 +166,7 @@ function dessiner(img) { } ``` -{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }} +{{ EmbedLiveSample('Niveaux_de_gris_et_inversion_de_couleurs', 330, 270) }} ## Zoom et anticrénelage @@ -233,7 +233,7 @@ function draw(img) { } ``` -{{ EmbedLiveSample('exemple_de_zoom', 620, 490) }} +{{ EmbedLiveSample('Exemple_de_zoom', 620, 490) }} ## Sauvegarde des images diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/index.md b/files/fr/web/api/canvas_api/tutorial/using_images/index.md index 358204912c..b562f3c8f0 100644 --- a/files/fr/web/api/canvas_api/tutorial/using_images/index.md +++ b/files/fr/web/api/canvas_api/tutorial/using_images/index.md @@ -1,12 +1,6 @@ --- title: Utilisation d'images slug: Web/API/Canvas_API/Tutorial/Using_images -tags: - - Advanced - - Canvas - - Graphics - - HTML - - Tutorial translation_of: Web/API/Canvas_API/Tutorial/Using_images original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_d'images --- @@ -150,7 +144,7 @@ function draw() { Le graphique résultant ressemble à ceci : -{{EmbedLiveSample("example_a_simple_line_graph", 220, 160, "canvas_backdrop.png")}} +{{EmbedLiveSample("Exemple_un_graphique_linéaire_simple", 220, 160, "canvas_backdrop.png")}} ## Mise à l'échelle @@ -190,7 +184,7 @@ function draw() { Le canevas résultant ressemble à ceci : -{{EmbedLiveSample("example_tiling_an_image", 160, 160, "canvas_scale_image.png")}} +{{EmbedLiveSample("Exemple_mosaïque_à _partir_d\'une_image", 160, 160, "canvas_scale_image.png")}} ## Découpage @@ -237,7 +231,7 @@ function draw() { Nous avons pris une approche différente pour charger les images cette fois. Au lieu de les charger en créant de nouveaux objets [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement), nous les avons incluses comme balises [`<img>`](/fr/docs/Web/HTML/Element/Img) directement dans notre source HTML et avons récupéré les images depuis ceux-ci. Les images sont masquées via la propriété CSS [`display`](/fr/docs/Web/CSS/display) qui vaut `none`. -{{EmbedLiveSample("example_framing_an_image", 160, 160, "canvas_drawimage2.jpg")}} +{{EmbedLiveSample("Exemple_encadrer_une_image", 160, 160, "canvas_drawimage2.jpg")}} Chaque [`<img>`](/fr/docs/Web/HTML/Element/Img) se voit attribuer un attribut `id`, ce qui facilite leur sélection en utilisant [`document.getElementById()`](/fr/docs/Web/API/Document/getElementById). Nous utilisons `drawImage()` pour découper le rhinocéros de la première image et le mettre à l'échelle sur le canevas, puis dessiner le cadre par-dessus en utilisant un deuxième appel `drawImage()`. @@ -323,7 +317,7 @@ function draw() { } ``` -{{EmbedLiveSample("art_gallery_example", 725, 400)}} +{{EmbedLiveSample("Exemple_d\'une_galerie_d'art", 725, 400)}} ## Contrôler la mise à l'échelle de l'image diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.md b/files/fr/web/api/canvasgradient/addcolorstop/index.md index 7af56a60ec..b4a77e50dc 100644 --- a/files/fr/web/api/canvasgradient/addcolorstop/index.md +++ b/files/fr/web/api/canvasgradient/addcolorstop/index.md @@ -93,7 +93,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md index 0656bd50da..608ac3d142 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md @@ -1,11 +1,6 @@ --- title: CanvasRenderingContext2D.arc() slug: Web/API/CanvasRenderingContext2D/arc -tags: - - Canvas - - CanvasRenderingContext2D - - Method - - Reference translation_of: Web/API/CanvasRenderingContext2D/arc --- {{APIRef}} @@ -96,7 +91,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('Playable_code', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Exemple avec différentes formes @@ -132,7 +127,7 @@ for (var i = 0; i < 4; i++) { } ``` -{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }} +{{ EmbedLiveSample('Exemple_avec_différentes_formes', 160, 210, "canvas_arc.png") }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md index b663d63dd6..931290cd90 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md @@ -1,10 +1,6 @@ --- title: CanvasRenderingContext2D.beginPath() slug: Web/API/CanvasRenderingContext2D/beginPath -tags: - - API - - Canvas - - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/beginPath --- {{APIRef}} @@ -100,7 +96,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 460) }} +{{ EmbedLiveSample('Code_jouable', 700, 460) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md index eb9c087775..6a49fdd769 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md @@ -79,7 +79,7 @@ ctx.fill(); Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus. -{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}} +{{EmbedLiveSample('Fonctionnement_de_bezierCurveTo', 315, 165)}} ### Une courbe cubique de Bézier simple @@ -107,7 +107,7 @@ contexte2D.stroke(); #### Résultat -{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}} +{{EmbedLiveSample('Une_courbe_cubique_de_Bézier_simple', 700, 180)}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md index f11c76ec20..6806016159 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.clearRect() slug: Web/API/CanvasRenderingContext2D/clearRect -tags: - - API - - Canvas - - CanvasRendering2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/clearRect --- {{APIRef}} @@ -110,7 +104,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 400) }} +{{ EmbedLiveSample('Code_jouable', 700, 400) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md index 73798baafa..9d08469a66 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md @@ -1,8 +1,6 @@ --- title: CanvasRenderingContext2D.closePath() slug: Web/API/CanvasRenderingContext2D/closePath -tags: - - Méthode translation_of: Web/API/CanvasRenderingContext2D/closePath --- {{APIRef}} @@ -84,7 +82,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 400) }} +{{ EmbedLiveSample('Code_jouable', 700, 400) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md index 3fe6679a76..7257471422 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md @@ -1,13 +1,6 @@ --- title: CanvasRenderingContext2D.createLinearGradient() slug: Web/API/CanvasRenderingContext2D/createLinearGradient -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Gradients - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient --- {{APIRef}} @@ -109,7 +102,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md index b56729678a..72818f6705 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md @@ -1,13 +1,6 @@ --- title: CanvasRenderingContext2D.direction slug: Web/API/CanvasRenderingContext2D/direction -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Experimental - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/direction --- {{APIRef}} {{SeeCompatTable}} @@ -96,7 +89,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{EmbedLiveSample('code_jouable', 700, 360)}} +{{EmbedLiveSample('Code_jouable', 700, 360)}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md index e7bb8508f3..8f4751d083 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.drawImage() slug: Web/API/CanvasRenderingContext2D/drawImage -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/drawImage --- {{APIRef}} @@ -119,7 +113,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md index 197d6aad25..445be59e65 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.ellipse() slug: Web/API/CanvasRenderingContext2D/ellipse -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Experimental - - Méthode translation_of: Web/API/CanvasRenderingContext2D/ellipse --- {{APIRef}} {{SeeCompatTable}} @@ -101,7 +95,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md index d7197dc21c..6d79084923 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md @@ -1,15 +1,11 @@ --- title: CanvasRenderingContext2D.fill() slug: Web/API/CanvasRenderingContext2D/fill -tags: - - API - - Canvas - - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/fill --- {{APIRef}} -La méthode **`CanvasRenderingContext2D`\*\***`.fill()`\*\* de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair. +La méthode **`CanvasRenderingContext2D.fill()`** de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair. ## Syntaxe @@ -91,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Utiliser l'option `fillRule` @@ -174,7 +170,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{EmbedLiveSample('code_jouable_2', 700, 360)}} +{{EmbedLiveSample('Code_jouable_2', 700, 360)}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md index d8fc1404f8..39a285d53f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md @@ -1,11 +1,6 @@ --- title: CanvasRenderingContext2D.fillRect() slug: Web/API/CanvasRenderingContext2D/fillRect -tags: - - API - - Canvas - - CanvasRendering2D - - Méthode translation_of: Web/API/CanvasRenderingContext2D/fillRect --- {{APIRef}} @@ -92,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md index 539ce49e67..6ef47681ac 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.fillStyle slug: Web/API/CanvasRenderingContext2D/fillStyle -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/fillStyle --- {{APIRef}} @@ -93,7 +87,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Un exemple `fillStyle` avec les boucles `for` @@ -116,7 +110,7 @@ for (var i = 0; i < 6; i++){ Le résultat devrait ressembler à ça: -{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}} +{{EmbedLiveSample("Un_exemple_fillStyle_avec_les_boucles_for", 160, 160, "canvas_fillstyle.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md index 73d1a75588..300d43b927 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.fillText() slug: Web/API/CanvasRenderingContext2D/fillText -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/fillText --- {{APIRef}} @@ -96,7 +90,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.md b/files/fr/web/api/canvasrenderingcontext2d/font/index.md index 37ebc8f81b..da5771f46a 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/font/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.font slug: Web/API/CanvasRenderingContext2D/font -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/font --- {{APIRef}} @@ -85,7 +79,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Chargement de polices avec l'API CSS Font Loading diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md index 3ffbf48e4e..3ad6330fcf 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.globalAlpha slug: Web/API/CanvasRenderingContext2D/globalAlpha -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/globalAlpha --- {{APIRef}}La propriété **CanvasRenderingContext2D.globalAlpha** de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). @@ -95,7 +89,7 @@ zoneTexte.addEventListener('input', dessinerCanevas); window.addEventListener('load', dessinerCanevas); ``` -{{ EmbedLiveSample('code_jouable', 700, 380) }} +{{ EmbedLiveSample('Code_jouable', 700, 380) }} ### Un exemple de `globalAlpha` @@ -130,7 +124,7 @@ for (i = 0; i < 7; i++){ <canvas id="canevas" width="150" height="150"></canvas> ``` -{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}} +{{EmbedLiveSample("Un_exemple_de_globalAlpha", "180", "180", "canvas_globalalpha.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md index c82c88770b..232cc556c8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md @@ -15,11 +15,7 @@ Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dan `type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser. -### Types - -{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}} - -## Examples +## Exemples ### Changer l'opération de composition @@ -48,7 +44,7 @@ ctx.fillRect(50, 50, 100, 100); #### Résultat -{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }} +{{ EmbedLiveSample('Exemples', 700, 180) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md index 27fa24574b..3ab0e43267 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md @@ -1,14 +1,6 @@ --- title: CanvasRenderingContext2D.imageSmoothingEnabled slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled -tags: - - API - - Canevas - - Canvas - - CanvasRenderingContext2D - - Experimental - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled --- {{APIRef}} {{SeeCompatTable}} @@ -26,7 +18,7 @@ Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise - `valeur` - : Un {{jsxref("Boolean")}} indiquant de lisser les images ou non. -## exemples +## Exemples ### Désactiver le lissage d'image @@ -68,7 +60,7 @@ img.onload = function() { #### Résultat -{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }} +{{ EmbedLiveSample('Exemples', 700, 240) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md index 033a50cd4c..e3666e004c 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.lineCap slug: Web/API/CanvasRenderingContext2D/lineCap -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/lineCap --- {{APIRef}} @@ -101,7 +95,7 @@ zoneTexte.addEventListener('input', dessinerCanevas); window.addEventListener('load', dessinerCanevas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Un exemple de `lineCap` @@ -138,7 +132,7 @@ for (var i = 0; i < lineCap.length; i++) { <canvas id="canevas" width="150" height="150"></canvas> ``` -{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}} +{{EmbedLiveSample("Un_exemple_de_lineCap", "180", "180", "canvas_linecap.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md index c438190f71..f6d0829ac0 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -1,13 +1,6 @@ --- title: CanvasRenderingContext2D.lineJoin slug: Web/API/CanvasRenderingContext2D/lineJoin -tags: - - API - - Canvas - - Propriété - - arrondit - - coin - - stroke translation_of: Web/API/CanvasRenderingContext2D/lineJoin --- {{APIRef}} @@ -65,7 +58,7 @@ ctx.stroke(); #### Résultat -{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }} +{{ EmbedLiveSample('Modifier_les_jointures_d\'un_tracé', 700, 180) }} ### Comparaison des jointures de lignes @@ -92,7 +85,7 @@ for (let i = 0; i < lineJoin.length; i++) { } ``` -{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}} +{{EmbedLiveSample("Comparaison_des_jointures_de_lignes", "180", "180", "canvas_linejoin.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md index 776fe0223d..a262401891 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.lineTo() slug: Web/API/CanvasRenderingContext2D/lineTo -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/lineTo --- {{APIRef}} @@ -91,7 +85,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md index e2bd2fb269..9321ee8b6d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md @@ -1,10 +1,6 @@ --- title: CanvasRenderingContext2D.moveTo() slug: Web/API/CanvasRenderingContext2D/moveTo -tags: - - API - - Canvas - - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/moveTo --- {{APIRef}} @@ -89,7 +85,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md index 7b95e52523..d94c8c919b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md @@ -1,19 +1,6 @@ --- title: CanvasRenderingContext2D.quadraticCurveTo() slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo -tags: - - API - - Bézier - - Canevas - - Canvas - - CanvasRenderingContext2D - - Courbe - - Courbe de Bézier - - Courbe quadratique - - Courbe quadratique de Bézier - - Méthode - - Quadratique - - Reference translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo --- {{APIRef}} @@ -77,7 +64,7 @@ contexte2D.fill(); Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu. -{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}} +{{EmbedLiveSample('Comment_quadraticCurveTo_fonctionne', 315, 165)}} ### Une courbe quadratique simple @@ -105,7 +92,7 @@ contexte2D.stroke(); #### Résultat -{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}} +{{EmbedLiveSample('Une_courbe_quadratique_simple', 700, 180)}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md index 982b8594f8..af68823cc5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md @@ -1,11 +1,6 @@ --- title: CanvasRenderingContext2D.rect() slug: Web/API/CanvasRenderingContext2D/rect -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode translation_of: Web/API/CanvasRenderingContext2D/rect --- {{APIRef}} @@ -89,7 +84,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md index 3aec5226fa..4caa6d9e16 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.rotate() slug: Web/API/CanvasRenderingContext2D/rotate -tags: - - API - - Cancas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/rotate --- {{APIRef}} @@ -93,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md index f8ca5735cb..7e7d1fff82 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.scale() slug: Web/API/CanvasRenderingContext2D/scale -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/scale --- {{APIRef}} @@ -93,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Utilisation de `scale` pour un retournement horizontal ou vertical @@ -140,7 +134,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable_2', 700, 360) }} +{{ EmbedLiveSample('Code_jouable_2', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md index 520e2c8bb5..85d5078d2c 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md @@ -1,17 +1,6 @@ --- title: CanvasRenderingContext2D.setLineDash() slug: Web/API/CanvasRenderingContext2D/setLineDash -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Lignes - - Modèle - - Méthodes - - Pointillés - - Reference - - patterns - - setLineDash translation_of: Web/API/CanvasRenderingContext2D/setLineDash --- {{APIRef}} @@ -114,7 +103,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 10, 410) }} +{{ EmbedLiveSample('Code_jouable', 10, 410) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md index a1dcc5a0f9..94c34409d5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.setTransform() slug: Web/API/CanvasRenderingContext2D/setTransform -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/setTransform --- {{APIRef}} @@ -99,7 +93,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md index 8d06004dc7..86f5f960aa 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md @@ -79,7 +79,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md index 0c696da8c0..f2b1f67edc 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.strokeRect() slug: Web/API/CanvasRenderingContext2D/strokeRect -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/strokeRect --- {{APIRef}} @@ -91,7 +85,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md index 1bde6b2ed5..aab6253a44 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -87,7 +87,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Un exemple `strokeStyle` @@ -113,7 +113,7 @@ for (var i = 0; i < 6; i++) { Le résultat devrait ressembler à ça: -{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}} +{{EmbedLiveSample("Un_exemple_strokeStyle", "180", "180", "canvas_strokestyle.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md index 3778eedf4f..2f7db41cd4 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.strokeText() slug: Web/API/CanvasRenderingContext2D/strokeText -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/strokeText --- {{APIRef}} @@ -96,7 +90,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md index a6da0bb4f9..a591fee3fd 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.textAlign slug: Web/API/CanvasRenderingContext2D/textAlign -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/textAlign --- {{APIRef}} @@ -59,7 +53,7 @@ ctx.strokeText('Hello world', 0, 100); Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -#### Playable code +#### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> @@ -99,7 +93,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md index 24253e2225..8b2b9c8b80 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.textBaseline slug: Web/API/CanvasRenderingContext2D/textBaseline -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/textBaseline --- {{APIRef}} @@ -101,7 +95,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md index 204a89deb2..e3ac8f2edd 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.transform() slug: Web/API/CanvasRenderingContext2D/transform -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/transform --- {{APIRef}} @@ -102,7 +96,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md index 561d1897b1..2c38c52591 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.translate() slug: Web/API/CanvasRenderingContext2D/translate -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/translate --- {{APIRef}} @@ -93,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/document/caretrangefrompoint/index.md b/files/fr/web/api/document/caretrangefrompoint/index.md index a0e0d2282c..a9fd2392a8 100644 --- a/files/fr/web/api/document/caretrangefrompoint/index.md +++ b/files/fr/web/api/document/caretrangefrompoint/index.md @@ -1,12 +1,6 @@ --- title: Document.caretRangeFromPoint() slug: Web/API/Document/caretRangeFromPoint -tags: - - API - - DOM - - Document - - Insertion - - Méthode translation_of: Web/API/Document/caretRangeFromPoint --- {{APIRef("DOM")}}{{Non-standard_header}} @@ -80,7 +74,7 @@ for (i=0 ; i < paragraphs.length; i++) { } ``` -{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }} +{{ EmbedLiveSample('Exemple', '', '', '', 'Web/API/Document/caretRangeFromPoint') }} ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/createdocumentfragment/index.md b/files/fr/web/api/document/createdocumentfragment/index.md index d4bf794671..e9e2ec325d 100644 --- a/files/fr/web/api/document/createdocumentfragment/index.md +++ b/files/fr/web/api/document/createdocumentfragment/index.md @@ -1,13 +1,6 @@ --- title: document.createDocumentFragment slug: Web/API/Document/createDocumentFragment -tags: - - API - - DOM - - Document - - HTML - - Méthode - - Reference translation_of: Web/API/Document/createDocumentFragment --- {{ApiRef("DOM")}} @@ -56,7 +49,7 @@ element.appendChild(fragment); ### Résultat -{{EmbedLiveSample("Example", 600, 140)}} +{{EmbedLiveSample("Exemple", 600, 140)}} ## Spécification diff --git a/files/fr/web/api/document/createelement/index.md b/files/fr/web/api/document/createelement/index.md index e68fb79530..98fcfd0f37 100644 --- a/files/fr/web/api/document/createelement/index.md +++ b/files/fr/web/api/document/createelement/index.md @@ -1,13 +1,6 @@ --- title: document.createElement slug: Web/API/Document/createElement -tags: - - API - - Création - - DOM - - Document - - Elements - - Méthodes translation_of: Web/API/Document/createElement --- {{APIRef("DOM")}} @@ -68,7 +61,7 @@ function addElement () { } ``` -{{EmbedLiveSample("Basic_example", 500, 50)}} +{{EmbedLiveSample("Exemple_de_base", 500, 50)}} ### Exemple de composant web diff --git a/files/fr/web/api/document/domcontentloaded_event/index.md b/files/fr/web/api/document/domcontentloaded_event/index.md index 5fa9889813..92c383e65d 100644 --- a/files/fr/web/api/document/domcontentloaded_event/index.md +++ b/files/fr/web/api/document/domcontentloaded_event/index.md @@ -145,7 +145,7 @@ document.addEventListener('DOMContentLoaded', (event) => { #### Résultat -{{ EmbedLiveSample('Live_example', '100%', '160px') }} +{{ EmbedLiveSample('Démonstration', '100%', '160px') }} ## Spécifications diff --git a/files/fr/web/api/document/dragstart_event/index.md b/files/fr/web/api/document/dragstart_event/index.md index 2e0cc56f99..152aeaeb86 100644 --- a/files/fr/web/api/document/dragstart_event/index.md +++ b/files/fr/web/api/document/dragstart_event/index.md @@ -43,7 +43,7 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un élà | `altKey` {{readonlyInline}} | boolean | `true` if the alt key was down when the event was fired. `false` otherwise. | | `metaKey` {{readonlyInline}} | boolean | `true` if the meta key was down when the event was fired. `false` otherwise. | -## Exemple：dropzone +## Exemple : dropzone ### HTML Content @@ -134,7 +134,7 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un élà  }, false); ``` -{{ EmbedLiveSample('Example：dropzone') }} +{{ EmbedLiveSample('Exemple_dropzone') }} ## Spécifications diff --git a/files/fr/web/api/document/elementsfrompoint/index.md b/files/fr/web/api/document/elementsfrompoint/index.md index e275e5780d..275ad2f1e8 100644 --- a/files/fr/web/api/document/elementsfrompoint/index.md +++ b/files/fr/web/api/document/elementsfrompoint/index.md @@ -66,7 +66,7 @@ if (document.elementsFromPoint) { ### Résultat -{{EmbedLiveSample('Example', '420', '120')}} +{{EmbedLiveSample('Exemples', '420', '120')}} ## Spécifications diff --git a/files/fr/web/api/document/getelementbyid/index.md b/files/fr/web/api/document/getelementbyid/index.md index cc1a21f505..c73932122d 100644 --- a/files/fr/web/api/document/getelementbyid/index.md +++ b/files/fr/web/api/document/getelementbyid/index.md @@ -1,13 +1,6 @@ --- title: document.getElementById slug: Web/API/Document/getElementById -tags: - - API - - DOM - - Document - - Elements - - Identifiant - - Méthodes translation_of: Web/API/Document/getElementById --- {{ ApiRef("DOM") }} @@ -59,7 +52,7 @@ function changeColor(newColor) { ### Résultat -{{ EmbedLiveSample('Example1', 250, 100) }} +{{ EmbedLiveSample('Exemple', 250, 100) }} ## Notes d'utilisation @@ -67,7 +60,7 @@ L'écriture de la lettre capitale de « Id » dans le nom de cette méthode _d Contrairement à d'autres méthodes de recherche d'éléments, comme {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, `getElementById` est uniquement disponible comme méthode de l'objet global `document` et _n'est pas_ disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction. -## Exemple +## Autre exemple ```html <!doctype html> diff --git a/files/fr/web/api/document/keypress_event/index.md b/files/fr/web/api/document/keypress_event/index.md index f079811072..9d2fdf06f7 100644 --- a/files/fr/web/api/document/keypress_event/index.md +++ b/files/fr/web/api/document/keypress_event/index.md @@ -1,12 +1,6 @@ --- title: keypress slug: Web/API/Document/keypress_event -tags: - - DOM - - Déprécié - - Evènement - - KeyboardEvent - - Reference translation_of: Web/API/Document/keypress_event --- {{APIRef}} {{deprecated_header}} @@ -70,7 +64,7 @@ function logKey(e) { } ``` -{{EmbedLiveSample("addEventListener_keypress_example")}} +{{EmbedLiveSample("Exemples")}} ### Équivalent `onkeypress` diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md index 78199ae55a..680aae3ece 100644 --- a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md +++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md @@ -2,11 +2,6 @@ title: Explorer un tableau HTML avec des interfaces DOM et JavaScript slug: >- Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces -tags: - - DOM - - Guide - - HTML - - JavaScript translation_of: >- Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript @@ -17,7 +12,7 @@ Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondam > **Note :**Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML). -## Exemple: Création d'un tableau HTML dynamiquement (`Sample1.html`) +## Création d'un tableau HTML dynamiquement ### Contenu HTML @@ -64,7 +59,7 @@ function generate_table() { } ``` -{{ EmbedLiveSample('Overview_of_Sample1.html') }} +{{ EmbedLiveSample('Création_d\'un_tableau_HTML_dynamiquement') }} Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés : @@ -113,7 +108,7 @@ Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et se Vous pouvez construire ce tableau ainsi que ses éléments enfants internes en utilisant juste quelques méthodes DOM. Conservez à l'esprit le modèle en arbre des structures que vous comptez créer, cela rendra plus facile l'écriture du code nécessaire. Dans l'arbre \<table> de la figure 1, l'élément \<table> a un enfant, l'élément \<tbody>, qui lui-même a deux enfants \<tr>, qui à leur tour ont chacun un enfant \<td>. Enfin, chacun de ces éléments \<td> a un enfant, un nœud texte. -## Exemple : Définition de la couleur d'arrière-plan d'un paragraphe +## Définition de la couleur d'arrière-plan d'un paragraphe `getElementsByTagName` est à la fois une méthode de l'interface Document et de l'interface Element. Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette. Le premier élément de la liste se trouve à la position \[0] dans le tableau. @@ -144,13 +139,13 @@ function set_background() { } ``` -{{ EmbedLiveSample('Setting_background_of_a_paragraph') }} +{{ EmbedLiveSample('Définition_de_la_couleur_d\'arrière-plan_d\'un_paragraphe') }} Dans cet exemple, on assigne à la variable `myP` l'objet DOM du second élément `p` du corps (body). 1. On récupère d'abord une liste de tous les éléments body avec - ```html + ```js myBody = document.getElementsByTagName("body")[0] ``` @@ -158,13 +153,13 @@ Dans cet exemple, on assigne à la variable `myP` l'objet DOM du second élémen 2. Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant - ```html + ```js myBodyElements = myBody.getElementsByTagName("p"); ``` 3. Pour finir on prend le deuxième élément de la liste des éléments p avec - ```html + ```js myP = myBodyElements[1]; ``` diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md index 0348ed4df2..99b70402e6 100644 --- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md @@ -1,11 +1,6 @@ --- title: Utilisation du DOM Level 1 Core du W3C slug: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core -tags: - - Arbre - - DOM - - Noeud - - Texte translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C --- @@ -76,7 +71,7 @@ Supposons que l'auteur désire prendre le document présenté plus haut et chang } ``` -{{ EmbedLiveSample('A_simple_example', 800, 300) }} +{{ EmbedLiveSample('Un_exemple_simple', 800, 300) }} Vous pouvez voir ce script dans [un exemple complet](http://www.mozilla.org/docs/dom/technote/intro/example.html). diff --git a/files/fr/web/api/domtokenlist/add/index.md b/files/fr/web/api/domtokenlist/add/index.md index 9052727e6e..7320b0432f 100644 --- a/files/fr/web/api/domtokenlist/add/index.md +++ b/files/fr/web/api/domtokenlist/add/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList.add() slug: Web/API/DOMTokenList/add -tags: - - API - - Ajout - - Chaînes de caractères - - DOM - - Listes - - Méthodes translation_of: Web/API/DOMTokenList/add --- {{APIRef("DOM")}} @@ -48,7 +41,7 @@ span.textContent = classes; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} Vous pouvez ajouter plusieurs _token_ : diff --git a/files/fr/web/api/domtokenlist/contains/index.md b/files/fr/web/api/domtokenlist/contains/index.md index ca3978e077..4d4b942e74 100644 --- a/files/fr/web/api/domtokenlist/contains/index.md +++ b/files/fr/web/api/domtokenlist/contains/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList.contains() slug: Web/API/DOMTokenList/contains -tags: - - API - - Chaînes de caractères - - DOM - - Listes - - Méthodes - - Recherche contenu translation_of: Web/API/DOMTokenList/contains --- {{APIRef("DOM")}} @@ -52,7 +45,7 @@ if(result) { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/entries/index.md b/files/fr/web/api/domtokenlist/entries/index.md index 113f23c1b0..784e530c17 100644 --- a/files/fr/web/api/domtokenlist/entries/index.md +++ b/files/fr/web/api/domtokenlist/entries/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList.entries() slug: Web/API/DOMTokenList/entries -tags: - - API - - Chaînes de caractères - - DOM - - Itérateurs - - Listes - - Méthodes translation_of: Web/API/DOMTokenList/entries --- {{APIRef("DOM")}} @@ -46,7 +39,7 @@ for(var value of iterator) { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/foreach/index.md b/files/fr/web/api/domtokenlist/foreach/index.md index 917b80e9c2..b63d1bae03 100644 --- a/files/fr/web/api/domtokenlist/foreach/index.md +++ b/files/fr/web/api/domtokenlist/foreach/index.md @@ -1,14 +1,6 @@ --- title: DOMTokenList.forEach() slug: Web/API/DOMTokenList/forEach -tags: - - API - - Boucle - - Chaînes de caractères - - DOM - - Itérateurs - - Méthodes - - Pour chaque translation_of: Web/API/DOMTokenList/forEach --- {{APIRef("DOM")}} @@ -67,7 +59,7 @@ classes.forEach( ### Résultat -{{ EmbedLiveSample('Example', '100%', 60) }} +{{ EmbedLiveSample('Exemple', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/index.md b/files/fr/web/api/domtokenlist/index.md index 8cbf548fc2..365fb85739 100644 --- a/files/fr/web/api/domtokenlist/index.md +++ b/files/fr/web/api/domtokenlist/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList slug: Web/API/DOMTokenList -tags: - - API - - Chaînes de caractères - - DOM - - Interface - - Listes - - Marques translation_of: Web/API/DOMTokenList --- {{APIRef("DOM")}} @@ -67,7 +60,7 @@ para.textContent = 'paragraph classList is "' + classes + '"'; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Découpage des espaces et suppression des doublons @@ -86,7 +79,7 @@ span.textContent = 'span classList is "' + classes + '"'; La sortie ressemble à ceci : -{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }} +{{ EmbedLiveSample('Découpage_des_espaces_et_suppression_des_doublons', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/item/index.md b/files/fr/web/api/domtokenlist/item/index.md index c1d22f88c5..eb7bbdf3e8 100644 --- a/files/fr/web/api/domtokenlist/item/index.md +++ b/files/fr/web/api/domtokenlist/item/index.md @@ -1,12 +1,6 @@ --- title: DOMTokenList.item() slug: Web/API/DOMTokenList/item -tags: - - API - - Chaînes de caractères - - DOM - - Listes - - Méthodes translation_of: Web/API/DOMTokenList/item --- {{APIRef("DOM")}} @@ -47,7 +41,7 @@ span.textContent = item; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/keys/index.md b/files/fr/web/api/domtokenlist/keys/index.md index f5408bd2c6..3c4d955edc 100644 --- a/files/fr/web/api/domtokenlist/keys/index.md +++ b/files/fr/web/api/domtokenlist/keys/index.md @@ -1,15 +1,6 @@ --- title: DOMTokenList.keys() slug: Web/API/DOMTokenList/keys -tags: - - API - - Boucle - - Clés - - DOM - - Itérateur - - Listes - - Méthodes - - for of translation_of: Web/API/DOMTokenList/keys --- {{APIRef("DOM")}} @@ -52,7 +43,7 @@ for(var value of iterator) { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/length/index.md b/files/fr/web/api/domtokenlist/length/index.md index 877b240632..e9d508cf22 100644 --- a/files/fr/web/api/domtokenlist/length/index.md +++ b/files/fr/web/api/domtokenlist/length/index.md @@ -1,12 +1,6 @@ --- title: DOMTokenList.length slug: Web/API/DOMTokenList/length -tags: - - API - - DOM - - Listes - - Longueur - - Propriétés translation_of: Web/API/DOMTokenList/length --- {{APIRef("DOM")}} @@ -43,7 +37,7 @@ span.textContent = 'classList length = ' + length; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/remove/index.md b/files/fr/web/api/domtokenlist/remove/index.md index 98f8ccbe34..4a48ffbc3f 100644 --- a/files/fr/web/api/domtokenlist/remove/index.md +++ b/files/fr/web/api/domtokenlist/remove/index.md @@ -1,12 +1,6 @@ --- title: DOMTokenList.remove() slug: Web/API/DOMTokenList/remove -tags: - - API - - DOM - - Listes - - Méthodes - - Suppression translation_of: Web/API/DOMTokenList/remove --- {{APIRef("DOM")}} @@ -47,7 +41,7 @@ span.textContent = classes; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} Pour supprimer plusieurs classes à la fois, vous pouvez utiliser un tableau (_array_) avec la [syntaxe de décomposition](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition). L'ordre des classes n'a pas d'importance : diff --git a/files/fr/web/api/domtokenlist/replace/index.md b/files/fr/web/api/domtokenlist/replace/index.md index a352208494..d8f97450a8 100644 --- a/files/fr/web/api/domtokenlist/replace/index.md +++ b/files/fr/web/api/domtokenlist/replace/index.md @@ -1,12 +1,6 @@ --- title: DOMTokenList.replace() slug: Web/API/DOMTokenList/replace -tags: - - API - - DOM - - Listes - - Méthodes - - Remplacement translation_of: Web/API/DOMTokenList/replace --- {{APIRef("DOM")}} @@ -53,7 +47,7 @@ try { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/value/index.md b/files/fr/web/api/domtokenlist/value/index.md index 675415f3fc..6ff0072761 100644 --- a/files/fr/web/api/domtokenlist/value/index.md +++ b/files/fr/web/api/domtokenlist/value/index.md @@ -1,11 +1,6 @@ --- title: DOMTokenList.value slug: Web/API/DOMTokenList/value -tags: - - API - - DOM - - Méthodes - - Valeur translation_of: Web/API/DOMTokenList/value --- {{APIRef("DOM")}} @@ -40,7 +35,7 @@ span.textContent = classes.value; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/values/index.md b/files/fr/web/api/domtokenlist/values/index.md index 43db920fe6..491b265cba 100644 --- a/files/fr/web/api/domtokenlist/values/index.md +++ b/files/fr/web/api/domtokenlist/values/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList.values() slug: Web/API/DOMTokenList/values -tags: - - API - - DOM - - Itérateurs - - Listes - - Méthodes - - Valeurs translation_of: Web/API/DOMTokenList/values --- {{APIRef("DOM")}} @@ -50,7 +43,7 @@ for(var value of iterator) { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/element/compositionstart_event/index.md b/files/fr/web/api/element/compositionstart_event/index.md index b1370d4893..55971fdc43 100644 --- a/files/fr/web/api/element/compositionstart_event/index.md +++ b/files/fr/web/api/element/compositionstart_event/index.md @@ -1,12 +1,6 @@ --- title: compositionstart slug: Web/API/Element/compositionstart_event -tags: - - Element - - Event - - Input method - - Reference - - compositionstart translation_of: Web/API/Element/compositionstart_event original_slug: Web/Events/compositionstart --- @@ -120,7 +114,7 @@ inputElement.addEventListener('compositionend', handleEvent); #### Résultat -{{ EmbedLiveSample('Live_example', '100%', '180px') }} +{{ EmbedLiveSample('Exemple_concret', '100%', '180px') }} ## Spécifications diff --git a/files/fr/web/api/element/getboundingclientrect/index.md b/files/fr/web/api/element/getboundingclientrect/index.md index 5e64f11e08..aa37626b39 100644 --- a/files/fr/web/api/element/getboundingclientrect/index.md +++ b/files/fr/web/api/element/getboundingclientrect/index.md @@ -1,28 +1,6 @@ --- title: Element.getBoundingClientRect() slug: Web/API/Element/getBoundingClientRect -tags: - - API - - Boundary - - Bounding - - Bounds - - CSSOM View - - Client - - Containing - - DOM - - Element - - Enclosing - - Method - - Méthode - - Minimum - - Rectangle - - Reference - - Smallest - - clientHeight - - getBoundingClientRect - - getClientRects - - offsetHeight - - scrollHeight translation_of: Web/API/Element/getBoundingClientRect --- {{APIRef("DOM")}} @@ -92,7 +70,7 @@ for (let key in rect) { } ``` -{{EmbedLiveSample('Example', '100%', 640)}} +{{EmbedLiveSample('Exemple', '100%', 640)}} Remarquez comme les `width`/`height` sont égales à `width`/`height` + `padding`. diff --git a/files/fr/web/api/element/queryselector/index.md b/files/fr/web/api/element/queryselector/index.md index bee72ee47a..876070c34a 100644 --- a/files/fr/web/api/element/queryselector/index.md +++ b/files/fr/web/api/element/queryselector/index.md @@ -1,21 +1,6 @@ --- title: Element.querySelector() slug: Web/API/Element/querySelector -tags: - - API - - CSS - - CSS Selectors - - DOM - - Element - - Elements - - Finding Elements - - Locating Elements - - Method - - Reference - - Searching Elements - - Selecting Elements - - Selectors - - querySelector translation_of: Web/API/Element/querySelector --- {{APIRef("DOM")}} @@ -82,7 +67,7 @@ document.getElementById("output").innerHTML = (baseElement.querySelector("div sp Le résultat ressemble à ceci : -{{EmbedLiveSample('the_entire_hierarchy_counts', '', 200)}} +{{EmbedLiveSample('Exemple', '', 200)}} ### Plus d'exemples diff --git a/files/fr/web/api/element/scrollheight/index.md b/files/fr/web/api/element/scrollheight/index.md index dd8d5f4d78..02e1c29792 100644 --- a/files/fr/web/api/element/scrollheight/index.md +++ b/files/fr/web/api/element/scrollheight/index.md @@ -17,8 +17,6 @@ L'attribut en lecture seule **`element.scrollHeight`** est une mesure de la haut ## Exemple -## Exemple - Avec l'évènement {{domxref("GlobalEventHandlers/onscroll", "onscroll")}}, cette équivalence peut s'avérer utile afin de déterminer si un utilisateur a lu du texte ou non (voir aussi les propriétés {{domxref("element.scrollTop")}} et {{domxref("element.clientHeight")}}). La case à cocher de la démo est désactivée et ne peut être cochée tant que l'ensemble du contenu n'a pas défilé. diff --git a/files/fr/web/api/element/scrolltop/index.md b/files/fr/web/api/element/scrolltop/index.md index dc72baf8f8..aabf8af9f8 100644 --- a/files/fr/web/api/element/scrolltop/index.md +++ b/files/fr/web/api/element/scrolltop/index.md @@ -1,11 +1,6 @@ --- title: Element.scrollTop slug: Web/API/Element/scrollTop -tags: - - API - - CSSOM View - - Property - - Reference translation_of: Web/API/Element/scrollTop --- {{APIRef("DOM")}} @@ -76,7 +71,7 @@ button.onclick = function () { ### Résultat -{{EmbedLiveSample("Example")}} +{{EmbedLiveSample("Exemple")}} ## Spécifications diff --git a/files/fr/web/api/element/setattribute/index.md b/files/fr/web/api/element/setattribute/index.md index ffd46a3092..f86cbf065c 100644 --- a/files/fr/web/api/element/setattribute/index.md +++ b/files/fr/web/api/element/setattribute/index.md @@ -1,12 +1,6 @@ --- title: Element.setAttribute() slug: Web/API/Element/setAttribute -tags: - - API - - Attributs - - DOM - - Element - - Méthode translation_of: Web/API/Element/setAttribute --- {{APIRef("DOM")}} @@ -63,7 +57,7 @@ Ceci démontre 2 choses : - le premier appel de `setAttribute()` ci-dessus montre la modification de la valeur de l'attribut `name` en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur ([Chrome](https://developers.google.com/web/tools/chrome-devtools/inspect-styles), [Edge](https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer), [Firefox](/en-US/docs/Tools/Page_Inspector), [Safari](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html)). - Pour définir la valeur d'un attribut booléen, tel que `disabled`, vous pouvez spécifier n'importe quelle valeur. Une chaîne vide ou le nom de l'attribut sont des valeurs recommandées. Tout ce qui compte est que si l'attribut est présent, quelle que soit sa valeur réelle, sa valeur est considérée comme `true` (_vraie_). L'absence de l'attribut signifie que sa valeur est `false` (_fausse_). En définissant la valeur de l'attribut `disabled` sur la chaîne vide (""), nous définissons `disabled` sur `true`, ce qui entraîne la désactivation du bouton. -{{ EmbedLiveSample('Example', '300', '50') }} +{{ EmbedLiveSample('Exemple', '300', '50') }} {{DOMAttributeMethods}} diff --git a/files/fr/web/api/event/eventphase/index.md b/files/fr/web/api/event/eventphase/index.md index f6721c8a8d..0fa5698321 100644 --- a/files/fr/web/api/event/eventphase/index.md +++ b/files/fr/web/api/event/eventphase/index.md @@ -189,7 +189,7 @@ function Clear() { } ``` -{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }} +{{ EmbedLiveSample('Exemple', '', '700', '', 'Web/API/Event/eventPhase') }} ## Spécifications diff --git a/files/fr/web/api/event/preventdefault/index.md b/files/fr/web/api/event/preventdefault/index.md index 7e8b7057f4..ae1be51ad2 100644 --- a/files/fr/web/api/event/preventdefault/index.md +++ b/files/fr/web/api/event/preventdefault/index.md @@ -1,12 +1,6 @@ --- title: Event.preventDefault() slug: Web/API/Event/preventDefault -tags: - - API - - DOM - - Event - - Method - - Reference translation_of: Web/API/Event/preventDefault browser-compat: api.Event.preventDefault --- @@ -52,7 +46,7 @@ document.querySelector("#id-checkbox").addEventListener("click", function(event) #### Résultat -{{EmbedLiveSample("blocking_default_click_handling")}} +{{EmbedLiveSample("Bloquer_la_gestion_du_clic_par_défaut")}} ### Empêcher les pressions du clavier sur un champ texte @@ -90,7 +84,7 @@ function bloqueSaisie(evt) { #### Résultat -{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}} +{{EmbedLiveSample('Empêcher_les_pressions_du_clavier_sur_un_champ_texte', 600, 200)}} ## Notes diff --git a/files/fr/web/api/event/timestamp/index.md b/files/fr/web/api/event/timestamp/index.md index f053b897e7..fde4ad5b7d 100644 --- a/files/fr/web/api/event/timestamp/index.md +++ b/files/fr/web/api/event/timestamp/index.md @@ -1,12 +1,6 @@ --- title: Event.timeStamp slug: Web/API/Event/timeStamp -tags: - - API - - DOM - - Evènement - - Propriétés - - temps translation_of: Web/API/Event/timeStamp --- {{ApiRef("DOM")}} @@ -49,7 +43,7 @@ document.body.addEventListener("keypress", getTime); ### Résultat -{{EmbedLiveSample("Example", "100%", 100)}} +{{EmbedLiveSample("Exemple", "100%", 100)}} ## Précision du temps réduite diff --git a/files/fr/web/api/event/type/index.md b/files/fr/web/api/event/type/index.md index 854f67f717..4774093a5b 100644 --- a/files/fr/web/api/event/type/index.md +++ b/files/fr/web/api/event/type/index.md @@ -70,7 +70,7 @@ Pour une liste des types d'événements disponibles, aller voir la page [Référ ### Résultat -{{EmbedLiveSample('Example')}} +{{EmbedLiveSample('Exemples')}} ## Spécifications diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.md b/files/fr/web/api/eventtarget/addeventlistener/index.md index 4139ecb2de..686f4a9e63 100644 --- a/files/fr/web/api/eventtarget/addeventlistener/index.md +++ b/files/fr/web/api/eventtarget/addeventlistener/index.md @@ -1,31 +1,6 @@ --- title: EventTarget.addEventListener() slug: Web/API/EventTarget/addEventListener -tags: - - API - - Cible - - DOM - - Evènement - - Gestionnaires d'évènements - - JavaScript - - Méthode - - Méthodes - - Reference - - Réception d'Évènements - - attachEvent - - Écouteurs - - Écouteurs d'Évènements - - AccessOuterData - - Detecting Events - - Event Handlers - - Event Listener - - EventTarget - - Method - - PassingData - - Receiving Events - - addEventListener - - events - - mselementresize translation_of: Web/API/EventTarget/addEventListener --- {{APIRef("DOM Events")}} @@ -179,7 +154,7 @@ Dans ce code, `modifyText()` est un écouteur pour les évènements `click` enre #### Résultat -{{EmbedLiveSample('Add_a_simple_listener')}} +{{EmbedLiveSample('Ajouter_un_écouteur_simple')}} ### Écouteur d'évènement avec une fonction anonyme @@ -212,7 +187,7 @@ Notez que l'écouteur est une fonction anonyme encapsulant le code qui peut às #### Résultat -{{EmbedLiveSample('Event_listener_with_anonymous_function')}} +{{EmbedLiveSample('Écouteur_d\'évènement_avec_une_fonction_anonyme')}} ### Écouteur d'évènement avec une fonction fléchée @@ -245,7 +220,7 @@ el.addEventListener("click", () => { #### Résultat -{{EmbedLiveSample('Event_listener_with_an_arrow_function')}} +{{EmbedLiveSample('Écouteur_d\'évènement_avec_une_fonction_fléchée')}} Notez que si les fonctions anonymes et fléchées sont similaires, elles ont des liaisons `this` différentes. Alors que les fonctions anonymes (et toutes les fonctions JavaScript traditionnelles) créent leurs propres liaisons `this`, les fonctions fléchées héritent la liaison `this` de la fonction contenante. [Voir la page sur l'opérateur `this` pour plus d'informations.](fr/docs/Web/JavaScript/Reference/Operators/this#avec_les_fonctions_fléchées) @@ -363,7 +338,7 @@ function nonePassiveHandler(event) { Cliquez les conteneurs _extérieur_, _milieu_, _intérieurs_ respectivement pour voir comment les options fonctionnent. Vous pouvez ouvrir la console pour observer les différents messages émis. -{{EmbedLiveSample('Example_of_options_usage', '', '320')}} +{{EmbedLiveSample('Exemple_d\'utilisation_des_options', '', '320')}} Avant d'utiliser une valeur particulière dans l'objet `options`, c'est une bonne idée que de s'assurer que le navigateur de l'utilisateur la prend en charge, du fait qu'elles sont un ajout que tous les navigateurs n'ont pas pris en charge historiquement. Voir {{anch("Safely_detecting_option_support", "Détection sûre du support des options")}} pour les détails. @@ -404,7 +379,7 @@ Dans l'exemple ci-dessus, nous modifions le code de l'exemple {{anch('Add_a_simp #### Résultat -{{EmbedLiveSample('Add_a_abortable_listener')}} +{{EmbedLiveSample('Ajout_d\'un_écouteur_annulable')}} ## Autres notes diff --git a/files/fr/web/api/filereader/readasdataurl/index.md b/files/fr/web/api/filereader/readasdataurl/index.md index 01642d791a..bc00d1b624 100644 --- a/files/fr/web/api/filereader/readasdataurl/index.md +++ b/files/fr/web/api/filereader/readasdataurl/index.md @@ -1,12 +1,6 @@ --- title: FileReader.readAsDataURL() slug: Web/API/FileReader/readAsDataURL -tags: - - API - - API File - - Fichiers - - Méthode - - Reference translation_of: Web/API/FileReader/readAsDataURL --- {{APIRef("API File")}} @@ -51,7 +45,7 @@ function previewFile() { ### Résultat en direct -{{EmbedLiveSample("Example", "100%", 240)}} +{{EmbedLiveSample("Exemple", "100%", 240)}} diff --git a/files/fr/web/api/globaleventhandlers/onselect/index.md b/files/fr/web/api/globaleventhandlers/onselect/index.md index f2b8e48654..4f34d3f008 100644 --- a/files/fr/web/api/globaleventhandlers/onselect/index.md +++ b/files/fr/web/api/globaleventhandlers/onselect/index.md @@ -1,12 +1,6 @@ --- title: GlobalEventHandlers.onselect slug: Web/API/GlobalEventHandlers/onselect -tags: - - API - - Gestionnaire d'événement - - HTML DOM - - Propriété - - Reference translation_of: Web/API/GlobalEventHandlers/onselect --- {{ ApiRef("HTML DOM") }} @@ -49,7 +43,7 @@ textarea.onselect = enregistrerSelection; ### Résultat -{{EmbedLiveSample("Examples")}} +{{EmbedLiveSample("Exemples")}} ## Spécification diff --git a/files/fr/web/api/htmlbuttonelement/labels/index.md b/files/fr/web/api/htmlbuttonelement/labels/index.md index 02edee6291..4740520501 100644 --- a/files/fr/web/api/htmlbuttonelement/labels/index.md +++ b/files/fr/web/api/htmlbuttonelement/labels/index.md @@ -1,10 +1,6 @@ --- title: HTMLButtonElement.labels slug: Web/API/HTMLButtonElement/labels -tags: - - API - - DOM - - Propriété translation_of: Web/API/HTMLButtonElement/labels --- {{APIRef("DOM")}} @@ -40,7 +36,7 @@ window.addEventListener("DOMContentLoaded", function() { }); ``` -{{EmbedLiveSample("Example", "100%", 30)}} +{{EmbedLiveSample("Exemple", "100%", 30)}} ## Spécifications diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.md b/files/fr/web/api/htmlelement/beforeinput_event/index.md index de24c8836e..b37e99d8f3 100644 --- a/files/fr/web/api/htmlelement/beforeinput_event/index.md +++ b/files/fr/web/api/htmlelement/beforeinput_event/index.md @@ -68,7 +68,7 @@ function updateValue(e) { ### Résultat -{{EmbedLiveSample("Examples")}} +{{EmbedLiveSample("Exemples")}} ## Spécifications diff --git a/files/fr/web/api/htmlelement/change_event/index.md b/files/fr/web/api/htmlelement/change_event/index.md index 9f239a8004..ca287d947d 100644 --- a/files/fr/web/api/htmlelement/change_event/index.md +++ b/files/fr/web/api/htmlelement/change_event/index.md @@ -1,14 +1,6 @@ --- title: change slug: Web/API/HTMLElement/change_event -tags: - - Change - - DOM - - Event - - HTML - - Reference - - Web - - Élément HTML translation_of: Web/API/HTMLElement/change_event --- {{APIRef}} @@ -97,7 +89,7 @@ selectElement.addEventListener('change', (event) => { #### Résultat -{{ EmbedLiveSample('Lélément_<select>', '100%', '75px') }} +{{ EmbedLiveSample('Lélément_select', '100%', '75px') }} ### L'élément d'entrée de texte diff --git a/files/fr/web/api/htmlelement/hidden/index.md b/files/fr/web/api/htmlelement/hidden/index.md index 8cbd7090df..6c2121924c 100644 --- a/files/fr/web/api/htmlelement/hidden/index.md +++ b/files/fr/web/api/htmlelement/hidden/index.md @@ -104,7 +104,7 @@ h1 { ### Résultat -{{ EmbedLiveSample('Example', 560, 200) }} +{{ EmbedLiveSample('Exemple', 560, 200) }} ## Spécifications diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.md b/files/fr/web/api/htmlelement/iscontenteditable/index.md index 717a7f65e0..f558a3446b 100644 --- a/files/fr/web/api/htmlelement/iscontenteditable/index.md +++ b/files/fr/web/api/htmlelement/iscontenteditable/index.md @@ -1,13 +1,6 @@ --- title: HTMLElement.isContentEditable slug: Web/API/HTMLElement/isContentEditable -tags: - - HTML DOM - - Propriété - - Reference - - lecture seule - - Édition - - Élément HTML translation_of: Web/API/HTMLElement/isContentEditable --- {{ APIRef("HTML DOM") }} @@ -39,7 +32,7 @@ document.getElementById("infoText2").innerHTML += document.getElementById("myTex ### Résultat -{{ EmbedLiveSample('Example') }} +{{ EmbedLiveSample('Exemple') }} ## Spécifications diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.md b/files/fr/web/api/htmltablerowelement/insertcell/index.md index 38ce65bf91..4d9f632f14 100644 --- a/files/fr/web/api/htmltablerowelement/insertcell/index.md +++ b/files/fr/web/api/htmltablerowelement/insertcell/index.md @@ -64,7 +64,7 @@ addRow('my-table'); ### Résultat -{{EmbedLiveSample("Example")}} +{{EmbedLiveSample("Exemple")}} ## Spécifications diff --git a/files/fr/web/api/intersection_observer_api/index.md b/files/fr/web/api/intersection_observer_api/index.md index 1b1d75b7d3..40fdb41249 100644 --- a/files/fr/web/api/intersection_observer_api/index.md +++ b/files/fr/web/api/intersection_observer_api/index.md @@ -1,11 +1,6 @@ --- title: Intersection Observer API slug: Web/API/Intersection_Observer_API -tags: - - API - - IntersectionObserver - - Reference - - Web translation_of: Web/API/Intersection_Observer_API --- {{SeeCompatTable}}{{DefaultAPISidebar("Intersection Observer API")}} @@ -276,7 +271,7 @@ function intersectionCallback(entries) { } ``` -{{EmbedLiveSample("exemple_de_seuil", 500, 500)}} +{{EmbedLiveSample("Exemple_de_seuil", 500, 500)}} ## Interfaces diff --git a/files/fr/web/api/keyboardevent/code/index.md b/files/fr/web/api/keyboardevent/code/index.md index a0a0e9c050..471e63789c 100644 --- a/files/fr/web/api/keyboardevent/code/index.md +++ b/files/fr/web/api/keyboardevent/code/index.md @@ -1,13 +1,6 @@ --- title: KeyboardEvent.code slug: Web/API/KeyboardEvent/code -tags: - - API - - Code - - DOM Events - - KeyboardEvent - - Propriété - - Reference translation_of: Web/API/KeyboardEvent/code --- {{APIRef("DOM Events")}} @@ -200,7 +193,7 @@ window.addEventListener("keydown", function(event) { Pour essayer le code ci-dessus, cliquez sur le bouton ci-dessous: -{{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}} +{{EmbedLiveSample("Gérer_les_événements_de_clavier_dans_un_jeu", 420, 460)}} Ce code peut être amélioré de plusieurs manières. La plupart des jeux réels surveillent les événements {{event("keydown")}}, démarrent le mouvement lorsque cela se produit et stoppent le mouvement lorsque l'événement {{event("keyup")}} se produit, au lieu de compter sur des répétitions de touches. Cela permettrait des mouvements plus fluides et plus rapides, mais permettrait également au joueur de bouger et de diriger en même temps. Des transitions ou des animations peuvent également être utilisées pour rendre le mouvement du navire plus fluide. Pour permettre cela, il ne faudrait pas utiliser de `switch`, ni de `else if`.ff diff --git a/files/fr/web/api/location/index.md b/files/fr/web/api/location/index.md index 3766646973..d66720d6a7 100644 --- a/files/fr/web/api/location/index.md +++ b/files/fr/web/api/location/index.md @@ -1,13 +1,6 @@ --- title: Location slug: Web/API/Location -tags: - - API - - HTML DOM - - Interface - - JavaScript - - Location - - Reference translation_of: Web/API/Location --- {{APIRef("HTML DOM")}} @@ -63,7 +56,7 @@ body {display:table-cell; text-align:center; vertical-align:middle; font-family: ### Result -{{EmbedLiveSample('Anatomy_Of_Location')}} +{{EmbedLiveSample('Anatomie_d\'une_Location')}} ## Propriétés diff --git a/files/fr/web/api/mouseevent/index.md b/files/fr/web/api/mouseevent/index.md index 6f9eada357..aa691d61f8 100644 --- a/files/fr/web/api/mouseevent/index.md +++ b/files/fr/web/api/mouseevent/index.md @@ -1,14 +1,6 @@ --- title: MouseEvent slug: Web/API/MouseEvent -tags: - - API - - DOM - - Interface - - Reference - - Référence(2) - - Souris - - évènements translation_of: Web/API/MouseEvent --- {{APIRef("DOM Events")}} @@ -148,7 +140,7 @@ document.getElementById("button").addEventListener('click', simulateClick); Cliquez sur le bouton pour voir comment l'exemple fonctionne : -{{ EmbedLiveSample('Example', '', '', '') }} +{{ EmbedLiveSample('Exemple', '', '', '') }} ## Spécifications diff --git a/files/fr/web/api/node/isequalnode/index.md b/files/fr/web/api/node/isequalnode/index.md index e86aa2118c..3afb00dfe7 100644 --- a/files/fr/web/api/node/isequalnode/index.md +++ b/files/fr/web/api/node/isequalnode/index.md @@ -1,12 +1,6 @@ --- title: Node.isEqualNode() slug: Web/API/Node/isEqualNode -tags: - - API - - Comparaison - - DOM - - Méthodes - - Noeuds translation_of: Web/API/Node/isEqualNode --- {{APIRef("DOM")}} @@ -59,7 +53,7 @@ output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) ### Résultats -{{ EmbedLiveSample('Example', 480) }} +{{ EmbedLiveSample('Exemple', 480) }} ## Spécifications diff --git a/files/fr/web/api/node/issamenode/index.md b/files/fr/web/api/node/issamenode/index.md index 682d50b9e7..5b57ac5cbb 100644 --- a/files/fr/web/api/node/issamenode/index.md +++ b/files/fr/web/api/node/issamenode/index.md @@ -1,11 +1,6 @@ --- title: Node.isSameNode() slug: Web/API/Node/isSameNode -tags: - - API - - DOM - - Méthodes - - Noeuds translation_of: Web/API/Node/isSameNode --- {{APIRef("DOM")}} @@ -58,7 +53,7 @@ output.innerHTML += "div 0 same as div 2: " + divList[0].isSameNode(divList[2]) ### Résultats -{{ EmbedLiveSample('Example', 480) }} +{{ EmbedLiveSample('Exemple', 480) }} ## Spécifications diff --git a/files/fr/web/api/notifications_api/using_the_notifications_api/index.md b/files/fr/web/api/notifications_api/using_the_notifications_api/index.md index 6a8a3ac80e..654b256979 100644 --- a/files/fr/web/api/notifications_api/using_the_notifications_api/index.md +++ b/files/fr/web/api/notifications_api/using_the_notifications_api/index.md @@ -242,7 +242,7 @@ window.addEventListener('load', function () { Voir le résultat de cet exemple : -{{EmbedLiveSample('tag_example', '100%', 30)}} +{{EmbedLiveSample('Exemple_d\'utilisation_des_balises', '100%', 30)}} ## Spécifications diff --git a/files/fr/web/api/storagemanager/estimate/index.md b/files/fr/web/api/storagemanager/estimate/index.md index 7c551573bf..4ed46854c1 100644 --- a/files/fr/web/api/storagemanager/estimate/index.md +++ b/files/fr/web/api/storagemanager/estimate/index.md @@ -45,7 +45,7 @@ navigator.storage.estimate().then(function(estimate) { ### Résultat -{{ EmbedLiveSample('Example', 600, 40) }} +{{ EmbedLiveSample('Exemple', 600, 40) }} ## Spécifications diff --git a/files/fr/web/api/webgl_api/by_example/color_masking/index.md b/files/fr/web/api/webgl_api/by_example/color_masking/index.md index 61afaba6f3..8345a669f9 100644 --- a/files/fr/web/api/webgl_api/by_example/color_masking/index.md +++ b/files/fr/web/api/webgl_api/by_example/color_masking/index.md @@ -1,13 +1,6 @@ --- title: Masque de couleur slug: Web/API/WebGL_API/By_example/Color_masking -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL translation_of: Web/API/WebGL_API/By_example/Color_masking original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur --- @@ -17,7 +10,7 @@ original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur Dans cet article, on modifie des couleurs aléatoires grâce à un masque de couleur. Cela permet de limiter la plage de couleurs affichées à certains tons. -{{EmbedLiveSample("color-masking-source",660,425)}} +{{EmbedLiveSample("Appliquer_un_masque_sur_des_couleurs_aléatoires",660,425)}} ### Appliquer un masque sur des couleurs aléatoires diff --git a/files/fr/web/api/window/find/index.md b/files/fr/web/api/window/find/index.md index 3c0ea82ff3..ee36dd5c17 100644 --- a/files/fr/web/api/window/find/index.md +++ b/files/fr/web/api/window/find/index.md @@ -62,7 +62,7 @@ findString = function findText(text) { ### Résultat -{{EmbedLiveSample("Example")}} +{{EmbedLiveSample("Exemple")}} ## Notes |