diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
| commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
| tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files | |
| parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
| download | translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip | |
convert content to md
Diffstat (limited to 'files')
1498 files changed, 72480 insertions, 91427 deletions
diff --git a/files/fr/web/api/abortsignal/index.md b/files/fr/web/api/abortsignal/index.md index 11a48ef3d1..e45e67e308 100644 --- a/files/fr/web/api/abortsignal/index.md +++ b/files/fr/web/api/abortsignal/index.md @@ -9,39 +9,36 @@ tags: - Reference translation_of: Web/API/AbortSignal --- -<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> +{{APIRef("DOM")}}{{SeeCompatTable}} -<p>L'interface <strong><code>AbortSignal</code></strong> représente un objet signal qui vous permet de communiquer avec une requête DOM (telle que Fetch) et de l'annuler si nécessaire par un objet {{domxref("AbortController")}}.</p> +L'interface **`AbortSignal`** représente un objet signal qui vous permet de communiquer avec une requête DOM (telle que Fetch) et de l'annuler si nécessaire par un objet {{domxref("AbortController")}}. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>L'interface AbortSignal hérite des propriétés de son interface parent {{domxref("EventTarget")}}.</em></p> +_L'interface AbortSignal hérite des propriétés de son interface parent {{domxref("EventTarget")}}._ -<dl> - <dt>{{domxref("AbortSignal.aborted")}} {{readonlyInline}}</dt> - <dd>Un {{domxref("Boolean")}} (<em>booléen</em>) qui indique si les requêtes avec lesquelles le signal communique sont annulées (<code>true</code>) ou non (<code>false</code>).</dd> -</dl> +- {{domxref("AbortSignal.aborted")}} {{readonlyInline}} + - : Un {{domxref("Boolean")}} (_booléen_) qui indique si les requêtes avec lesquelles le signal communique sont annulées (`true`) ou non (`false`). -<h3 id="Gestionnaire_dévènement">Gestionnaire d'évènement</h3> +### Gestionnaire d'évènement -<dl> - <dt>{{domxref("AbortSignal.onabort")}}</dt> - <dd>appelé quand un évènement {{event("abort_(dom_abort_api)", "abort")}} est lancé, c'est-à-dire quand les requêtes DOM avec lesquelles le signal communique sont annulées.</dd> -</dl> +- {{domxref("AbortSignal.onabort")}} + - : appelé quand un évènement {{event("abort_(dom_abort_api)", "abort")}} est lancé, c'est-à-dire quand les requêtes DOM avec lesquelles le signal communique sont annulées. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p><em>L'interface AbortSignal hérite des méthodes de son interface parent {{domxref("EventTarget")}}.</em></p> +_L'interface AbortSignal hérite des méthodes de son interface parent {{domxref("EventTarget")}}._ -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a>.</p> +Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'[API Fetch](/fr/docs/Web/API/Fetch_API). -<p>Tout d'abord, nous créons un contrôleur en utilisant le constructeur {{domxref("AbortController.AbortController","AbortController()")}}, puis nous saisissons une référence associée à son objet {{domxref("AbortSignal")}} au moyen de la propriété {{domxref("AbortController.signal")}}.</p> +Tout d'abord, nous créons un contrôleur en utilisant le constructeur {{domxref("AbortController.AbortController","AbortController()")}}, puis nous saisissons une référence associée à son objet {{domxref("AbortSignal")}} au moyen de la propriété {{domxref("AbortController.signal")}}. -<p>Lorsque la <a href="/fr/docs/Web/API/GlobalFetch/fetch">requête fetch</a> (<em>extraction</em>) est lancée, nous transmettons le paramètre <code>AbortSignal</code> en tant qu'option dans l'objet d'options de la requête (voir <code>{signal}</code> ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements.</p> +Lorsque la [requête fetch](/fr/docs/Web/API/GlobalFetch/fetch) (_extraction_) est lancée, nous transmettons le paramètre `AbortSignal` en tant qu'option dans l'objet d'options de la requête (voir `{signal}` ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements. -<pre class="brush: js">var controller = new AbortController(); +```js +var controller = new AbortController(); var signal = controller.signal; var downloadBtn = document.querySelector('.download'); @@ -61,38 +58,24 @@ function fetchVideo() { }).catch(function(e) { reports.textContent = 'Download error: ' + e.message; }) -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Lorsque <code>abort()</code> est appelé, la réponse <code>fetch()</code> rejette avec une erreur <code>AbortError</code>.</p> -</div> +> **Note :** Lorsque `abort()` est appelé, la réponse `fetch()` rejette avec une erreur `AbortError`. -<p>vous pouvez trouver un exemple de travail complet sur GitHub — voir <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">voir cas d'usage concret</a>).</p> +vous pouvez trouver un exemple de travail complet sur GitHub — voir [abort-api](https://github.com/mdn/dom-examples/tree/master/abort-api) ([voir cas d'usage concret](https://mdn.github.io/dom-examples/abort-api/)). -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Status | Comment | +| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}} | {{Spec2('DOM WHATWG')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.AbortSignal")}}</p> +{{Compat("api.AbortSignal")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Fetch_API">API Fetch</a></li> - <li><a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a> par Jake Archibald (en)</li> -</ul> +- [API Fetch](/fr/docs/Web/API/Fetch_API) +- [Abortable Fetch](https://developers.google.com/web/updates/2017/09/abortable-fetch) par Jake Archibald (en) diff --git a/files/fr/web/api/analysernode/analysernode/index.md b/files/fr/web/api/analysernode/analysernode/index.md index a10fd3ee15..1b030e1dbf 100644 --- a/files/fr/web/api/analysernode/analysernode/index.md +++ b/files/fr/web/api/analysernode/analysernode/index.md @@ -3,47 +3,33 @@ title: AnalyserNode() slug: Web/API/AnalyserNode/AnalyserNode translation_of: Web/API/AnalyserNode/AnalyserNode --- -<p>{{APIRef("'Web Audio API'")}}{{SeeCompatTable}}</p> - -<p>Le constructeur <strong><code>AnalyserNode</code></strong> crée un nouvel objet {{domxref("AnalyserNode")}}.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">var analyserNode = new AnalyserNode(context, options)</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><em>context</em></dt> - <dd>Référence à un {{domxref("AudioContext")}}.</dd> - <dt><em>options</em> {{optional_inline}}</dt> - <dd><p>Un objet avec les propriétés suivantes :</p> - <ul> - <li><code>fftSize</code>: taille initiale sde la FFT pour l'analyse du domaine fréquentiel . La valeur par défaut est 2048.</li> - <li><code>maxDecibels</code>: valeur maximale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -30.</li> - <li><code>minDecibels</code>: valeur minimale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -100.</li> - <li><code>smoothingTimeConstant</code>: valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8</li> - </ul> - </dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API','#the-analysernode-interface','AnalyserNode')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td>Première définition.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<p>{{Compat("api.AnalyserNode.AnalyserNode")}}</p> +{{APIRef("'Web Audio API'")}}{{SeeCompatTable}} + +Le constructeur **`AnalyserNode`** crée un nouvel objet {{domxref("AnalyserNode")}}. + +## Syntax + + var analyserNode = new AnalyserNode(context, options) + +### Paramètres + +- _context_ + - : Référence à un {{domxref("AudioContext")}}. +- _options_ {{optional_inline}} + + - : Un objet avec les propriétés suivantes : + + - `fftSize`: taille initiale sde la FFT pour l'analyse du domaine fréquentiel . La valeur par défaut est 2048. + - `maxDecibels`: valeur maximale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -30. + - `minDecibels`: valeur minimale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -100. + - `smoothingTimeConstant`: valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8 + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Web Audio API','#the-analysernode-interface','AnalyserNode')}} | {{Spec2('Web Audio API')}} | Première définition. | + +## Compatibilité navigateurs + +{{Compat("api.AnalyserNode.AnalyserNode")}} diff --git a/files/fr/web/api/analysernode/fftsize/index.md b/files/fr/web/api/analysernode/fftsize/index.md index 966bf915dd..8016e057f1 100644 --- a/files/fr/web/api/analysernode/fftsize/index.md +++ b/files/fr/web/api/analysernode/fftsize/index.md @@ -3,32 +3,32 @@ title: AnalyserNode.fftSize slug: Web/API/AnalyserNode/fftSize translation_of: Web/API/AnalyserNode/fftSize --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<p>La propriété <code>fftSize</code> de l'objet {{ domxref("AnalyserNode") }} est un nombre entier non signé qui représente la taille de la FFT (<a href="/en-US/docs/">transfomation de Fourier rapide</a>) à utiliser pour déterminer le domaine fréquentiel.<br> - <br> - La valeur de la propriété <code>fftSize</code> property's doit être une puissance de 2 non nulle située dans l'intervalle compris entre <code>32</code> et 32768 ; sa valeur par défaut est <code>2048</code>.</p> +La propriété `fftSize` de l'objet {{ domxref("AnalyserNode") }} est un nombre entier non signé qui représente la taille de la FFT ([transfomation de Fourier rapide](/en-US/docs/)) à utiliser pour déterminer le domaine fréquentiel. -<div class="note"> -<p><strong>Note :</strong> Si la valeur n'est pas une puissance de 2, ou si elle ne se trouve pas dans l'intervalle spécifiée, l'exception <code>INDEX_SIZE_ERR</code> est levée.</p> -</div> +La valeur de la propriété `fftSize` property's doit être une puissance de 2 non nulle située dans l'intervalle compris entre `32` et 32768 ; sa valeur par défaut est `2048`. -<h2 id="Syntaxe">Syntaxe</h2> +> **Note :** Si la valeur n'est pas une puissance de 2, ou si elle ne se trouve pas dans l'intervalle spécifiée, l'exception `INDEX_SIZE_ERR` est levée. -<pre class="brush: js">var contexteAudio = new AudioContext(); +## Syntaxe + +```js +var contexteAudio = new AudioContext(); var analyseur = contexteAudio.createAnalyser(); analyseur.fftSize = 2048; -</pre> +``` -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un nombre entier non signé.</p> +Un nombre entier non signé. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple suivant montre comment créer simplement un <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p> +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +```js +var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var analyseur = contexteAudio.createAnalyser(); ... @@ -57,7 +57,7 @@ function dessiner() { var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon; var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { + for(var i = 0; i < tailleMemoireTampon; i++) { var v = tableauDonnees[i] / 128.0; var y = v * HAUTEUR/2; @@ -75,31 +75,19 @@ function dessiner() { contexteCanvas.stroke(); }; - dessiner();</pre> + dessiner(); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}} | {{Spec2('Web Audio API')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.AnalyserNode.fftSize")}}</p> +{{Compat("api.AnalyserNode.fftSize")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/frequencybincount/index.md b/files/fr/web/api/analysernode/frequencybincount/index.md index 90a99b7f10..003229afbe 100644 --- a/files/fr/web/api/analysernode/frequencybincount/index.md +++ b/files/fr/web/api/analysernode/frequencybincount/index.md @@ -3,26 +3,28 @@ title: AnalyserNode.frequencyBinCount slug: Web/API/AnalyserNode/frequencyBinCount translation_of: Web/API/AnalyserNode/frequencyBinCount --- -<p>{{ APIRef("Web Audio API") }}<br> - <br> - La propriété <strong><code>frequencyBinCount</code></strong> de l'objet <a href="/fr/docs/Web/API/AnalyserNode"><code>AnalyserNode</code></a> est un nombre entier non signé équivalent à la moitié la taille de la FFT. Il correspond en général au nombre de valeurs que vous aurez à manipuler pour la visualisation.</p> +{{ APIRef("Web Audio API") }} -<h2 id="Syntaxe">Syntaxe</h2> +La propriété **`frequencyBinCount`** de l'objet [`AnalyserNode`](/fr/docs/Web/API/AnalyserNode) est un nombre entier non signé équivalent à la moitié la taille de la FFT. Il correspond en général au nombre de valeurs que vous aurez à manipuler pour la visualisation. -<pre class="brush: js">var contexteAudio = new AudioContext(); +## Syntaxe + +```js +var contexteAudio = new AudioContext(); var analyseur = contexteAudio.createAnalyser(); var tailleMemoireTampon = analyseur.frequencyBinCount; -</pre> +``` -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un nombre entier non signé.</p> +Un nombre entier non signé. -<h2 id="Example">Example</h2> +## Example -<p>L'exemple suivant montre comment créer simplement un <code>AnalyserNode</code> avec <a href="/fr/docs/Web/API/AudioContext"><code>AudioContext</code></a>, puis utiliser <a href="/fr/docs/Web/API/Window/requestAnimationFrame"><code>requestAnimationFrame</code></a> et <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p> +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +```js +var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var analyseur = contexteAudio.createAnalyser(); analyseur.minDecibels = -90; analyseur.maxDecibels = -10; @@ -48,7 +50,7 @@ function dessiner() { var hauteurBarre; var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { + for(var i = 0; i < tailleMemoireTampon; i++) { hauteurBarre = tableauDonnees[i]; contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; @@ -58,31 +60,19 @@ function dessiner() { } }; -dessiner();</pre> +dessiner(); +``` -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}} | {{Spec2('Web Audio API')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.AnalyserNode.frequencyBinCount")}}</p> +{{Compat("api.AnalyserNode.frequencyBinCount")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/getbytefrequencydata/index.md b/files/fr/web/api/analysernode/getbytefrequencydata/index.md index dde3750690..13b054ee57 100644 --- a/files/fr/web/api/analysernode/getbytefrequencydata/index.md +++ b/files/fr/web/api/analysernode/getbytefrequencydata/index.md @@ -3,17 +3,16 @@ title: AnalyserNode.getByteFrequencyData() slug: Web/API/AnalyserNode/getByteFrequencyData translation_of: Web/API/AnalyserNode/getByteFrequencyData --- -<p>{{ APIRef("Web Audio API") }}<br> - <br> - La méthode <strong><code>getByteFrequencyData()</code></strong> de l'objet <a href="/fr/docs/Web/API/AnalyserNode"><code>AnalyserNode</code></a> copie les données de fréquence dans le {{domxref("Uint8Array")}} passé en argument.</p> +{{ APIRef("Web Audio API") }} -<div> -<p>Si le tableau a moins d'éléments que {{domxref("AnalyserNode.frequencyBinCount")}}, les excédants sont supprimés; s'il en a davantage, les excédants sont ignorés.</p> -</div> +La méthode **`getByteFrequencyData()`** de l'objet [`AnalyserNode`](/fr/docs/Web/API/AnalyserNode) copie les données de fréquence dans le {{domxref("Uint8Array")}} passé en argument. -<h2 id="Syntaxe">Syntaxe</h2> +Si le tableau a moins d'éléments que {{domxref("AnalyserNode.frequencyBinCount")}}, les excédants sont supprimés; s'il en a davantage, les excédants sont ignorés. -<pre class="brush: js">var contexteAudio = new AudioContext(); +## Syntaxe + +```js +var contexteAudio = new AudioContext(); var analyseur = contexteAudio.createAnalyser(); // Uint8Array devrait avoir la même taille que frequencyBinCount @@ -21,17 +20,18 @@ var tableauDonnees = new Uint8Array(analyseur.frequencyBinCount); // remplit le Uint8Array avec les données retournées par la méthode getByteFrequencyData() analyseur.getByteFrequencyData(tableauDonnees); -</pre> +``` -<h3 id="Retourne">Retourne</h3> +### Retourne -<p>Un {{domxref("Uint8Array")}}.</p> +Un {{domxref("Uint8Array")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple suivant montre comment créer simplement un <code>AnalyserNode</code> avec <a href="/fr/docs/Web/API/AudioContext"><code>AudioContext</code></a>, puis utiliser <a href="/fr/docs/Web/API/Window/requestAnimationFrame"><code>requestAnimationFrame</code></a> et <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p> +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +```js +var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var analyseur = contexteAudio.createAnalyser(); ... @@ -55,7 +55,7 @@ function dessiner() { var hauteurBarre; var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { + for(var i = 0; i < tailleMemoireTampon; i++) { hauteurBarre = tableauDonnees[i]; contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; @@ -65,39 +65,24 @@ function dessiner() { } }; -dessiner();</pre> - -<h2 id="Paramètres">Paramètres</h2> +dessiner(); +``` -<dl> - <dt>array</dt> - <dd>Le {{domxref("Uint8Array")}} dans lequel seront copiées les données relatives à la fréquence.</dd> -</dl> +## Paramètres -<h2 id="Spécifications">Spécifications</h2> +- array + - : Le {{domxref("Uint8Array")}} dans lequel seront copiées les données relatives à la fréquence. -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +## Spécifications -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}} | {{Spec2('Web Audio API')}} | | -<p>{{Compat("api.AnalyserNode.getByteFrequencyData")}}</p> +## Compatibilité navigateurs -<h2 id="Voir_aussi">Voir aussi</h2> +{{Compat("api.AnalyserNode.getByteFrequencyData")}} -<p><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></p> +## Voir aussi -<ul> -</ul> +[Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md index 1610af5c55..7d1f2801af 100644 --- a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md +++ b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md @@ -3,34 +3,35 @@ title: AnalyserNode.getByteTimeDomainData() slug: Web/API/AnalyserNode/getByteTimeDomainData translation_of: Web/API/AnalyserNode/getByteTimeDomainData --- -<p>{{ APIRef("Mountain View APIRef Project") }}</p> +{{ APIRef("Mountain View APIRef Project") }} -<div> -<p>La méthode <strong><code>getByteTimeDomainData()</code></strong> de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde, ou du domaine temporel, dans un tableau {{domxref("Uint8Array")}} passé en paramètre.</p> +La méthode **`getByteTimeDomainData()`** de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde, ou du domaine temporel, dans un tableau {{domxref("Uint8Array")}} passé en paramètre. -<p>Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.</p> -</div> +Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var contexteAudio = new AudioContext(); +```js +var contexteAudio = new AudioContext(); var analyseur = contexteAudio.createAnalyser(); // La taille du tableau Uint8Array doit correspondre à la valeur de la propriété fftSize var tableauDonnees = new Uint8Array(analyseur.fftSize); // remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData() -analyseur.getByteTimeDomainData(tableauDonnees); </pre> +analyseur.getByteTimeDomainData(tableauDonnees); +``` -<h3 id="Renvoie">Renvoie</h3> +### Renvoie -<p>Un tableau {{domxref("Uint8Array")}}.</p> +Un tableau {{domxref("Uint8Array")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple suivant montre comment créer simplement un <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p> +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +```js +var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var analyseur = contexteAudio.createAnalyser(); ... @@ -59,7 +60,7 @@ function dessiner() { var largeurBarre = WIDTH * 1.0 / tailleMemoireTampon; var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { + for(var i = 0; i < tailleMemoireTampon; i++) { var v = tableauDonnees[i] / 128.0; var y = v * HAUTEUR/2; @@ -77,38 +78,24 @@ function dessiner() { contexteCanvas.stroke(); }; - dessiner();</pre> + dessiner(); +``` -<h2 id="Paramètres">Paramètres</h2> +## Paramètres -<dl> - <dt>array</dt> - <dd>Le tableau {{domxref("Uint8Array")}} dans lequel les données temporelles seront copiées.</dd> -</dl> +- array + - : Le tableau {{domxref("Uint8Array")}} dans lequel les données temporelles seront copiées. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}} | {{Spec2('Web Audio API')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.AnalyserNode.getByteTimeDomainData")}}</p> +{{Compat("api.AnalyserNode.getByteTimeDomainData")}} -<h2 id="See_also">See also</h2> +## See also -<ul> - <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/getfloatfrequencydata/index.md b/files/fr/web/api/analysernode/getfloatfrequencydata/index.md index fb4e6e2785..0cc626b2f2 100644 --- a/files/fr/web/api/analysernode/getfloatfrequencydata/index.md +++ b/files/fr/web/api/analysernode/getfloatfrequencydata/index.md @@ -3,17 +3,16 @@ title: AnalyserNode.getFloatFrequencyData() slug: Web/API/AnalyserNode/getFloatFrequencyData translation_of: Web/API/AnalyserNode/getFloatFrequencyData --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<div> -<p>La méthode <strong><code>getFloatFrequencyData()</code></strong> de l'interface {{ domxref("AnalyserNode") }} copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.</p> +La méthode **`getFloatFrequencyData()`** de l'interface {{ domxref("AnalyserNode") }} copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre. -<p>Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.frequencyBinCount")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.</p> -</div> +Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.frequencyBinCount")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var contexteAudio = new AudioContext(); +```js +var contexteAudio = new AudioContext(); var analyseur = contexteAudio.createAnalyser(); // La taille du tableau Float32Array doit correspondre à la valeur de la propriété frequencyBinCount @@ -21,24 +20,23 @@ var tableauDonnees = new Float32Array(analyseur.frequencyBinCount); // remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData() analyseur.getByteTimeDomainData(tableauDonnees); -</pre> +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>array</code></dt> - <dd>{{domxref("Float32Array")}} dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est <code>-<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.</dd> -</dl> +- `array` + - : {{domxref("Float32Array")}} dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est `-Infinity`. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p><code>undefined</code>.</p> +`undefined`. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple suivant montre comment créer simplement un <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p> +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +```js +var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var analyseur = contexteAudio.createAnalyser(); ... @@ -60,7 +58,7 @@ function dessiner() { var hauteurBarre; var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { + for(var i = 0; i < tailleMemoireTampon; i++) { hauteurBarre = (tableauDonnees[i] + 140)*2; contexteCanvas.fillStyle = 'rgb(' + Math.floor(hauteurBarre+100) + ',50,50)'; contexteCanvas.fillRect(x, HEIGHT-hauteurBarre/2, largeurBarre, hauteurBarre/2); @@ -68,38 +66,24 @@ function dessiner() { } }; -dessiner();</pre> +dessiner(); +``` -<h2 id="Paramètres_2">Paramètres</h2> +## Paramètres -<dl> - <dt>array</dt> - <dd>Le tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine fréquentiel.</dd> -</dl> +- array + - : Le tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine fréquentiel. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}} | {{Spec2('Web Audio API')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.AnalyserNode.getFloatFrequencyData")}}</p> +{{Compat("api.AnalyserNode.getFloatFrequencyData")}} -<h2 id="See_also">See also</h2> +## See also -<ul> - <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/getfloattimedomaindata/index.md b/files/fr/web/api/analysernode/getfloattimedomaindata/index.md index a69bb7d0b3..1388f536b1 100644 --- a/files/fr/web/api/analysernode/getfloattimedomaindata/index.md +++ b/files/fr/web/api/analysernode/getfloattimedomaindata/index.md @@ -3,17 +3,16 @@ title: AnalyserNode.getFloatTimeDomainData() slug: Web/API/AnalyserNode/getFloatTimeDomainData translation_of: Web/API/AnalyserNode/getFloatTimeDomainData --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<div> -<p>La méthode <strong><code>getFloatTimeDomainData()</code></strong> de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde ou du domaine temporel, dans un tableau {{domxref("Float32Array")}} passé en paramètre.</p> +La méthode **`getFloatTimeDomainData()`** de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde ou du domaine temporel, dans un tableau {{domxref("Float32Array")}} passé en paramètre. -<p>Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.</p> -</div> +Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var contexteAudio = new AudioContext(); +```js +var contexteAudio = new AudioContext(); var analyseur = contexteAudio.createAnalyser(); // La taille du tableau Float32Array doit correspondre à la valeur de la propriété fftSize @@ -21,17 +20,18 @@ var tableauDonnees = new Float32Array(analyseur.fftSize); // remplit le tableau Float32Array avec les données renvoyées par la méthode getFloatTimeDomainData() analyseur.getFloatTimeDomainData(tableauDonnees); -</pre> +``` -<h3 id="Renvoie">Renvoie</h3> +### Renvoie -<p>Un tableau {{domxref("Float32Array")}}.</p> +Un tableau {{domxref("Float32Array")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple suivant montre comment créer simplement un <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p> +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +```js +var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var analyseur = contexteAudio.createAnalyser(); ... @@ -56,7 +56,7 @@ function dessiner() { var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon; var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { + for(var i = 0; i < tailleMemoireTampon; i++) { var v = tableauDonnees[i] * 200.0; var y = HAUTEUR/2 + v; @@ -72,40 +72,26 @@ function dessiner() { contexteCanvas.stroke(); }; -dessiner();</pre> +dessiner(); +``` -<p> </p> -<h2 id="Paramètres">Paramètres</h2> -<dl> - <dt>array</dt> - <dd>Un tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine temporel.</dd> -</dl> +## Paramètres -<h2 id="Spécifications">Spécifications</h2> +- array + - : Un tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine temporel. -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +## Spécifications -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}} | {{Spec2('Web Audio API')}} | | -<p>{{Compat("api.AnalyserNode.getFloatTimeDomainData")}}</p> +## Compatibilité navigateurs -<h2 id="Voir_aussi">Voir aussi</h2> +{{Compat("api.AnalyserNode.getFloatTimeDomainData")}} -<ul> - <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/index.md b/files/fr/web/api/analysernode/index.md index 217c8b7f64..26a61aa63f 100644 --- a/files/fr/web/api/analysernode/index.md +++ b/files/fr/web/api/analysernode/index.md @@ -7,99 +7,92 @@ tags: - Reference translation_of: Web/API/AnalyserNode --- -<div>{{APIRef("Web Audio API")}}</div> +{{APIRef("Web Audio API")}} -<p>L' interface <strong><code>AnalyserNode</code></strong><strong> </strong>représente un noeud capable de fournir en temps réel des informations d'analyse de la fréquence et du domaine temporel. C'est un {{domxref("AudioNode")}} qui transmet le flux audio inchangé depuis l'entrée vers la sortie, mais permet de capturer les données générées pour les traiter et/ou les visualiser.</p> +L' interface **`AnalyserNode`\*\*** \*\*représente un noeud capable de fournir en temps réel des informations d'analyse de la fréquence et du domaine temporel. C'est un {{domxref("AudioNode")}} qui transmet le flux audio inchangé depuis l'entrée vers la sortie, mais permet de capturer les données générées pour les traiter et/ou les visualiser. -<p>Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée.</p> +Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée. -<p><img alt="Sans modifier le flux audio, le nœud permet d'obtenir la fréquence et les données temporelles associées en utilisant une transformée de Fourier rapide." src="fttaudiodata_en.svg"></p> + <table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn>Nombre d'entrées</dfn></th> - <td><code>1</code></td> - </tr> - <tr> - <th scope="row"><dfn>Nombre de sorties</dfn></th> - <td><code>1</code> (mais peut ne pas être connectée)</td> - </tr> - <tr> - <th scope="row"><dfn>Mode de comptage des canaux</dfn></th> - <td><code>"explicit"</code></td> - </tr> - <tr> - <th scope="row"><dfn>Nombre de canaux</dfn></th> - <td><code>1</code></td> - </tr> - <tr> - <th scope="row"><dfn>Interprétation du canal</dfn></th> - <td><code>"speakers"</code></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"><dfn>Nombre d'entrées</dfn></th> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row"><dfn>Nombre de sorties</dfn></th> + <td><code>1</code> (mais peut ne pas être connectée)</td> + </tr> + <tr> + <th scope="row"><dfn>Mode de comptage des canaux</dfn></th> + <td><code>"explicit"</code></td> + </tr> + <tr> + <th scope="row"><dfn>Nombre de canaux</dfn></th> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row"><dfn>Interprétation du canal</dfn></th> + <td><code>"speakers"</code></td> + </tr> + </tbody> </table> -<h2 id="Héritage">Héritage</h2> +## Héritage -<p>L'interface hérite des parents suivants:</p> +L'interface hérite des parents suivants: -<p>{{InheritanceDiagram}}</p> +{{InheritanceDiagram}} -<h2 id="Constructeur">Constructeur</h2> +## Constructeur -<dl> - <dt>{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}</dt> - <dd>Crée une nouvelle instance de l'objet <code>AnalyserNode</code>.</dd> -</dl> +- {{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}} + - : Crée une nouvelle instance de l'objet `AnalyserNode`. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>Hérite des propriétés de son parent. </em><em>{{domxref("AudioNode")}}</em>.</p> +_Hérite des propriétés de son parent._ _{{domxref("AudioNode")}}_. -<dl> - <dt>{{domxref("AnalyserNode.fftSize")}}</dt> - <dd>Entier long non signé qui représente la taille de la <a href="/en-US/docs/">FFT</a> (transformation de Fourier rapide) qui sera utilisé pour déterminer le domaine fréquentiel.</dd> - <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt> - <dd>Entier long non signé égal à la moitié fftSize. C'est en général le nombre de valeurs qu'on manipule pour la visualisation.</dd> - <dt>{{domxref("AnalyserNode.minDecibels")}}</dt> - <dd>Nombre flottant à double précision qui représente la valeur minimale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur minimum de la plage de résultats de <code>getByteFrequencyData()</code>.</dd> - <dt>{{domxref("AnalyserNode.maxDecibels")}}</dt> - <dd>Nombre flottant à double précision qui représente la valeur maximale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur maximum de la plage de résultats de <code>getByteFrequencyData()</code>.</dd> - <dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt> - <dd>Nombre flottant à double précision qui représente la moyenne de la trame en cours avec la dernière trame analysée - elle permet de lisser la transition entre les valeurs.</dd> -</dl> +- {{domxref("AnalyserNode.fftSize")}} + - : Entier long non signé qui représente la taille de la [FFT](/en-US/docs/) (transformation de Fourier rapide) qui sera utilisé pour déterminer le domaine fréquentiel. +- {{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}} + - : Entier long non signé égal à la moitié fftSize. C'est en général le nombre de valeurs qu'on manipule pour la visualisation. +- {{domxref("AnalyserNode.minDecibels")}} + - : Nombre flottant à double précision qui représente la valeur minimale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur minimum de la plage de résultats de `getByteFrequencyData()`. +- {{domxref("AnalyserNode.maxDecibels")}} + - : Nombre flottant à double précision qui représente la valeur maximale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur maximum de la plage de résultats de `getByteFrequencyData()`. +- {{domxref("AnalyserNode.smoothingTimeConstant")}} + - : Nombre flottant à double précision qui représente la moyenne de la trame en cours avec la dernière trame analysée - elle permet de lisser la transition entre les valeurs. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p> +_Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. -<dl> - <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt> - <dd>Copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.</dd> -</dl> +- {{domxref("AnalyserNode.getFloatFrequencyData()")}} + - : Copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre. -<dl> - <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt> - <dd>Copie les données de fréquence dans un tableau {{domxref("Uint8Array")}} passé en paramètre.</dd> - <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt> - <dd>Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Float32Array")}} passé en paramètre.</dd> -</dl> +<!----> -<dl> - <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt> - <dd>Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Uint8Array")}} passé en paramètre.</dd> -</dl> +- {{domxref("AnalyserNode.getByteFrequencyData()")}} + - : Copie les données de fréquence dans un tableau {{domxref("Uint8Array")}} passé en paramètre. +- {{domxref("AnalyserNode.getFloatTimeDomainData()")}} + - : Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Float32Array")}} passé en paramètre. -<h2 id="Exemples">Exemples</h2> +<!----> -<div class="note"> -<p><strong>Note :</strong>: Voir <a href="/fr/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualisations avec la Web Audio API</a> pour plus d'informations.</p> -</div> +- {{domxref("AnalyserNode.getByteTimeDomainData()")}} + - : Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Uint8Array")}} passé en paramètre. -<p>L'exemple suivant montre comment créer simplement un <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p> +## Exemples -<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +> **Note :**: Voir [Visualisations avec la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) pour plus d'informations. + +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). + +```js +var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var analyseur = contexteAudio.createAnalyser(); ... @@ -130,7 +123,7 @@ function dessiner() { var sliceWidth = WIDTH * 1.0 / tailleMemoireTampon; var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { + for(var i = 0; i < tailleMemoireTampon; i++) { var v = tableauDonnees[i] / 128.0; var y = v * HEIGHT/2; @@ -148,31 +141,19 @@ function dessiner() { contexteCanvas.stroke(); }; - dessiner();</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> + dessiner(); +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | +| {{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}} | {{Spec2('Web Audio API')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.AnalyserNode")}}</p> +{{Compat("api.AnalyserNode")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/maxdecibels/index.md b/files/fr/web/api/analysernode/maxdecibels/index.md index 046c1bcf64..8273d1f001 100644 --- a/files/fr/web/api/analysernode/maxdecibels/index.md +++ b/files/fr/web/api/analysernode/maxdecibels/index.md @@ -3,32 +3,32 @@ title: AnalyserNode.maxDecibels slug: Web/API/AnalyserNode/maxDecibels translation_of: Web/API/AnalyserNode/maxDecibels --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<p>La propriété <strong><code>maxDecibels</code></strong> de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes <code>getFloatFrequencyData()</code> et <code>getByteFrequencyData()</code>.</p> +La propriété **`maxDecibels`** de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes `getFloatFrequencyData()` et `getByteFrequencyData()`. -<p>Sa valeur par défaut est <code>-30</code>.</p> +Sa valeur par défaut est `-30`. -<div class="note"> -<p><strong>Note :</strong> Si une valeur supérieure à <code>AnalyserNode.maxDecibels</code> est indiquée, une erreur <code>INDEX_SIZE_ERR</code> est levée.</p> -</div> +> **Note :** Si une valeur supérieure à `AnalyserNode.maxDecibels` est indiquée, une erreur `INDEX_SIZE_ERR` est levée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var contexteAudio = new AudioContext(); +```js +var contexteAudio = new AudioContext(); var analyseur = contexteAudio.createAnalyser(); analyseur.maxDecibels = -10; -</pre> +``` -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un nombre flottant à double précision.</p> +Un nombre flottant à double précision. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple suivant montre comment créer simplement un <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p> +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +```js +var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var analyseur = contexteAudio.createAnalyser(); analyseur.minDecibels = -90; analyseur.maxDecibels = -10; @@ -54,7 +54,7 @@ function dessiner() { var hauteurBarre; var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { + for(var i = 0; i < tailleMemoireTampon; i++) { hauteurBarre = tableauDonnees[i]; contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; @@ -64,31 +64,19 @@ function dessiner() { } }; -dessiner();</pre> +dessiner(); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}} | {{Spec2('Web Audio API')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.AnalyserNode.maxDecibels")}}</p> +{{Compat("api.AnalyserNode.maxDecibels")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/mindecibels/index.md b/files/fr/web/api/analysernode/mindecibels/index.md index af3c639646..c33c9be56f 100644 --- a/files/fr/web/api/analysernode/mindecibels/index.md +++ b/files/fr/web/api/analysernode/mindecibels/index.md @@ -3,32 +3,32 @@ title: AnalyserNode.minDecibels slug: Web/API/AnalyserNode/minDecibels translation_of: Web/API/AnalyserNode/minDecibels --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<p>La propriété <strong><code>minDecibels</code></strong> de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur minimum pour l'intervalle de résultats des méthodes <code>getFloatFrequencyData()</code> et <code>getByteFrequencyData()</code>.</p> +La propriété **`minDecibels`** de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur minimum pour l'intervalle de résultats des méthodes `getFloatFrequencyData()` et `getByteFrequencyData()`. -<p>Sa valeur par défaut est <code>-100</code>.</p> +Sa valeur par défaut est `-100`. -<div class="note"> -<p><strong>Note :</strong> Si une valeur inférieure à <code>AnalyserNode.minDecibels</code> est indiquée, une erreur <code>INDEX_SIZE_ERR</code> est levée.</p> -</div> +> **Note :** Si une valeur inférieure à `AnalyserNode.minDecibels` est indiquée, une erreur `INDEX_SIZE_ERR` est levée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var contexteAudio = new AudioContext(); +```js +var contexteAudio = new AudioContext(); var analyseur = contexteAudio.createAnalyser(); analyseur.maxDecibels = -90; -</pre> +``` -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un nombre flottant à double précision.</p> +Un nombre flottant à double précision. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple suivant montre comment créer simplement un <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p> +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +```js +var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var analyseur = contexteAudio.createAnalyser(); analyseur.minDecibels = -90; analyseur.maxDecibels = -10; @@ -54,7 +54,7 @@ function dessiner() { var hauteurBarre; var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { + for(var i = 0; i < tailleMemoireTampon; i++) { hauteurBarre = tableauDonnees[i]; canvasCtx.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; @@ -64,31 +64,19 @@ function dessiner() { } }; -dessiner();</pre> +dessiner(); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}} | {{Spec2('Web Audio API')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.AnalyserNode.minDecibels")}}</p> +{{Compat("api.AnalyserNode.minDecibels")}} -<h2 id="See_also">See also</h2> +## See also -<ul> - <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/smoothingtimeconstant/index.md b/files/fr/web/api/analysernode/smoothingtimeconstant/index.md index 5e438dd47b..627d35e4b5 100644 --- a/files/fr/web/api/analysernode/smoothingtimeconstant/index.md +++ b/files/fr/web/api/analysernode/smoothingtimeconstant/index.md @@ -3,36 +3,36 @@ title: AnalyserNode.smoothingTimeConstant slug: Web/API/AnalyserNode/smoothingTimeConstant translation_of: Web/API/AnalyserNode/smoothingTimeConstant --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<p>La propriété <strong><code>smoothingTimeConstant</code></strong> de l'interface {{ domxref("AnalyserNode") }} est un nombre flottant à double précision qui représente une moyenne entre le buffer courant et le buffer précédent - elle sert à lisser la transition entre les valeurs.</p> +La propriété **`smoothingTimeConstant`** de l'interface {{ domxref("AnalyserNode") }} est un nombre flottant à double précision qui représente une moyenne entre le buffer courant et le buffer précédent - elle sert à lisser la transition entre les valeurs. -<p>La valeur est <code>0.8</code> par défaut; elle doit être comprise entre <code>0</code> et <code>1</code>. Lorsqu'elle vaut 0, aucune moyenne n'est effectuée, tandis que la valeur 1 signifie que le chevauchement entre le buffer en cours et le buffer précédent est conséquent lors du calcul des valeurs, ce qui a pour effet d'adoucir le changement lors des appels {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}}.</p> +La valeur est `0.8` par défaut; elle doit être comprise entre `0` et `1`. Lorsqu'elle vaut 0, aucune moyenne n'est effectuée, tandis que la valeur 1 signifie que le chevauchement entre le buffer en cours et le buffer précédent est conséquent lors du calcul des valeurs, ce qui a pour effet d'adoucir le changement lors des appels {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}}. -<p>En termes techniques, on applique une <a href="http://webaudio.github.io/web-audio-api/#blackman-window">fenêtre de Blackman</a> pour lisser les valeurs dans le temps. La valeur par défaut convient à la plupart des cas.</p> +En termes techniques, on applique une [fenêtre de Blackman](http://webaudio.github.io/web-audio-api/#blackman-window) pour lisser les valeurs dans le temps. La valeur par défaut convient à la plupart des cas. -<div class="note"> -<p><strong>Note :</strong> Si la valeur n'est pas comprise entre 0 et 1, une exception <code>INDEX_SIZE_ERR</code> est levée.</p> -</div> +> **Note :** Si la valeur n'est pas comprise entre 0 et 1, une exception `INDEX_SIZE_ERR` est levée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var contexteAudio = new AudioContext(); +```js +var contexteAudio = new AudioContext(); var analyseur = contexteAudio.createAnalyser(); analyseur.smoothingTimeConstant = 1; -</pre> +``` -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un nombre flottant à double précision.</p> +Un nombre flottant à double précision. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple suivant montre comment créer simplement un <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p> +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -<p><code>Si vou sêtes curieux du fonctionnement de smoothingTimeConstant()</code>, essayez de cloner l'exemple ci-dessous et d'affecter : <code>analyser.smoothingTimeConstant = 0;</code>. Vous verrez que les changements de valeur sont bien plus discordants.</p> +`Si vou sêtes curieux du fonctionnement de smoothingTimeConstant()`, essayez de cloner l'exemple ci-dessous et d'affecter : `analyser.smoothingTimeConstant = 0;`. Vous verrez que les changements de valeur sont bien plus discordants. -<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +```js +var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var analyseur = contexteAudio.createAnalyser(); analyseur.minDecibels = -90; analyseur.maxDecibels = -10; @@ -59,7 +59,7 @@ function dessiner() { var hauteurBarre; var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { + for(var i = 0; i < tailleMemoireTampon; i++) { hauteurBarre = tableauDonnees[i]; contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; @@ -69,31 +69,19 @@ function dessiner() { } }; -dessiner();</pre> +dessiner(); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}} | {{Spec2('Web Audio API')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.AnalyserNode.smoothingTimeConstant")}}</p> +{{Compat("api.AnalyserNode.smoothingTimeConstant")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/animation/index.md b/files/fr/web/api/animation/index.md index d2a3f61044..d8e34a9cdb 100644 --- a/files/fr/web/api/animation/index.md +++ b/files/fr/web/api/animation/index.md @@ -12,111 +12,92 @@ tags: - web animation api translation_of: Web/API/Animation --- -<p>{{ APIRef("Web Animations API") }}{{SeeCompatTable}}</p> - -<p>L'interface <strong><code>Animation</code></strong> de <a href="/en-US/docs/Web/API/Web_Animations_API">l'API Web Animations</a> correspond à un lecteur d'animations et offre les commandes nécessaires au contrôle et à la chronologie d'un noeud ou d'une source d'animation.</p> - -<h2 id="Constructeur">Constructeur</h2> - -<dl> - <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt> - <dd>Crée une nouvelle instance de l'objet <code>Animation</code>.</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{domxref("Animation.currentTime")}}</dt> - <dd>La valeur actuelle de temps de l'animation en millisecondes, que l'animation soit en pause ou en cours. Si l'animation ne possède pas de {{domxref("AnimationTimeline", "timeline")}}, est inactive ou n'a toujours pas été lancée, la valeur est <code>null</code>.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.effect")}}</dt> - <dd>Récupère et défini le {{domxref("KeyframeEffect")}} associé à cette animation.</dd> - <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt> - <dd>Retourne la <code>Promise </code>terminée en cours pour cette animation.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.id")}}</dt> - <dd>Récupère et défini le <code>String</code> utilisé pour identifier l'animation.</dd> - <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt> - <dd>Retourne une valeur énumérée qui décit l'état de lecture de l'animation.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.playbackRate")}}</dt> - <dd>Retourne et défini la fréquence de lecture de l'animation.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt> - <dd>Retourne la <code>Promise </code>prête en cours pour l'animation.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.startTime")}}</dt> - <dd>Retourne et défini le moment prévu auquel la lecture de l'animation devrait commencer.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.timeline")}}</dt> - <dd>Retourne et défini la {{domxref("AnimationTimeline", "timeline")}} associée à cette animation.</dd> -</dl> - -<h3 id="Gestionnaire_d'événements">Gestionnaire d'événements</h3> - -<dl> - <dt>{{domxref("Animation.oncancel")}}</dt> - <dd>Retourne et défini le gestionnaire d'événement pour l'événement <code>cancel </code>(annuler).</dd> - <dt>{{domxref("Animation.onfinish")}}</dt> - <dd>Retourne et défini le gestionnaire d'événement pour l'événement <code>finish</code> (terminer).</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{domxref("Animation.cancel()")}}</dt> - <dd>Supprime toutes les {{domxref("KeyframeEffect", "keyframeEffects")}} dues à cette animation et interomp la lecture.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.finish()")}}</dt> - <dd>Cherche la fin de l'animation, en fonction que l'animation soit en lecture normale ou inversée.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.pause()")}}</dt> - <dd>Suspend la lecture de l'animation.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.play()")}}</dt> - <dd>Démarre ou reprend la lecture de l'animation, ou redémarre l'animation au début si celle-ci est déjà terminée.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.reverse()")}}</dt> - <dd>Inverse la direction de lecture, en s'arrêtant au début de l'animation. Si l'animation est terminée ou annulée, elle sera jouée de la fin vers le début.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td> - <td>{{Spec2("Web Animations")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Animation")}}</p>
\ No newline at end of file +{{ APIRef("Web Animations API") }}{{SeeCompatTable}} + +L'interface **`Animation`** de [l'API Web Animations](/en-US/docs/Web/API/Web_Animations_API) correspond à un lecteur d'animations et offre les commandes nécessaires au contrôle et à la chronologie d'un noeud ou d'une source d'animation. + +## Constructeur + +- {{domxref("Animation.Animation()", "Animation()")}} + - : Crée une nouvelle instance de l'objet `Animation`. + +## Propriétés + +- {{domxref("Animation.currentTime")}} + - : La valeur actuelle de temps de l'animation en millisecondes, que l'animation soit en pause ou en cours. Si l'animation ne possède pas de {{domxref("AnimationTimeline", "timeline")}}, est inactive ou n'a toujours pas été lancée, la valeur est `null`. + +<!----> + +- {{domxref("Animation.effect")}} + - : Récupère et défini le {{domxref("KeyframeEffect")}} associé à cette animation. +- {{domxref("Animation.finished")}} {{readOnlyInline}} + - : Retourne la `Promise `terminée en cours pour cette animation. + +<!----> + +- {{domxref("Animation.id")}} + - : Récupère et défini le `String` utilisé pour identifier l'animation. +- {{domxref("Animation.playState")}} {{readOnlyInline}} + - : Retourne une valeur énumérée qui décit l'état de lecture de l'animation. + +<!----> + +- {{domxref("Animation.playbackRate")}} + - : Retourne et défini la fréquence de lecture de l'animation. + +<!----> + +- {{domxref("Animation.ready")}} {{readOnlyInline}} + - : Retourne la `Promise `prête en cours pour l'animation. + +<!----> + +- {{domxref("Animation.startTime")}} + - : Retourne et défini le moment prévu auquel la lecture de l'animation devrait commencer. + +<!----> + +- {{domxref("Animation.timeline")}} + - : Retourne et défini la {{domxref("AnimationTimeline", "timeline")}} associée à cette animation. + +### Gestionnaire d'événements + +- {{domxref("Animation.oncancel")}} + - : Retourne et défini le gestionnaire d'événement pour l'événement `cancel `(annuler). +- {{domxref("Animation.onfinish")}} + - : Retourne et défini le gestionnaire d'événement pour l'événement `finish` (terminer). + +## Méthodes + +- {{domxref("Animation.cancel()")}} + - : Supprime toutes les {{domxref("KeyframeEffect", "keyframeEffects")}} dues à cette animation et interomp la lecture. + +<!----> + +- {{domxref("Animation.finish()")}} + - : Cherche la fin de l'animation, en fonction que l'animation soit en lecture normale ou inversée. + +<!----> + +- {{domxref("Animation.pause()")}} + - : Suspend la lecture de l'animation. + +<!----> + +- {{domxref("Animation.play()")}} + - : Démarre ou reprend la lecture de l'animation, ou redémarre l'animation au début si celle-ci est déjà terminée. + +<!----> + +- {{domxref("Animation.reverse()")}} + - : Inverse la direction de lecture, en s'arrêtant au début de l'animation. Si l'animation est terminée ou annulée, elle sera jouée de la fin vers le début. + +## Spécifications + +| Spécification | État | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- | +| {{SpecName("Web Animations", "#the-animation-interface", "Animation")}} | {{Spec2("Web Animations")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.Animation")}} diff --git a/files/fr/web/api/animation/starttime/index.md b/files/fr/web/api/animation/starttime/index.md index 48d8361bf8..9ea48fff52 100644 --- a/files/fr/web/api/animation/starttime/index.md +++ b/files/fr/web/api/animation/starttime/index.md @@ -11,30 +11,25 @@ tags: translation_of: Web/API/Window/mozAnimationStartTime original_slug: Web/API/Window/mozAnimationStartTime --- -<p>{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko42")}}</p> +{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko42")}} -<p>Renvoie l'heure, en millisecondes depuis l'époque, à laquelle les animations ont commencé maintenant doivent être considérées comme ayant commencé. Cette valeur doit être utilisée à la place, par exemple, <code><a href="/en/JavaScript/Reference/Global_Objects/Date/now">Date.now()</a></code>, car cette valeur sera la même pour toutes les animations lancées dans cette fenêtre pendant cet intervalle d'actualisation, leur permettant de rester synchronisées les unes avec les autres.</p> +Renvoie l'heure, en millisecondes depuis l'époque, à laquelle les animations ont commencé maintenant doivent être considérées comme ayant commencé. Cette valeur doit être utilisée à la place, par exemple, [`Date.now()`](/en/JavaScript/Reference/Global_Objects/Date/now), car cette valeur sera la même pour toutes les animations lancées dans cette fenêtre pendant cet intervalle d'actualisation, leur permettant de rester synchronisées les unes avec les autres. -<p>Cela permet également aux animations basées sur JavaScript de rester synchronisées avec les transitions CSS et les animations SMIL déclenchées pendant le même intervalle d'actualisation.</p> +Cela permet également aux animations basées sur JavaScript de rester synchronisées avec les transitions CSS et les animations SMIL déclenchées pendant le même intervalle d'actualisation. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>time</em> = window.mozAnimationStartTime; -</pre> + time = window.mozAnimationStartTime; -<h3 id="Parameters">Paramètres</h3> +### Paramètres -<ul> - <li><em><code>time</code></em> est le temps en millisecondes depuis l'époque à laquelle les animations de la fenêtre actuelle doivent être considérées comme ayant démarré.</li> -</ul> +- _`time`_ est le temps en millisecondes depuis l'époque à laquelle les animations de la fenêtre actuelle doivent être considérées comme ayant démarré. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.mozAnimationStartTime")}}</p> +{{Compat("api.Window.mozAnimationStartTime")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{domxref("window.mozRequestAnimationFrame()")}}</li> - <li>{{domxref("window.onmozbeforepaint")}}</li> -</ul> +- {{domxref("window.mozRequestAnimationFrame()")}} +- {{domxref("window.onmozbeforepaint")}} diff --git a/files/fr/web/api/animationevent/animationevent/index.md b/files/fr/web/api/animationevent/animationevent/index.md index aa793738cf..e8be077157 100644 --- a/files/fr/web/api/animationevent/animationevent/index.md +++ b/files/fr/web/api/animationevent/animationevent/index.md @@ -3,63 +3,45 @@ title: AnimationEvent() slug: Web/API/AnimationEvent/AnimationEvent translation_of: Web/API/AnimationEvent/AnimationEvent --- -<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p> +{{APIRef("Web Animations")}}{{SeeCompatTable}} -<p>Le constructeur <code><strong>AnimationEvent()</strong></code> retourne un nouvel {{domxref("AnimationEvent")}}, représentant un évènement en relation avec une animation.</p> +Le constructeur **`AnimationEvent()`** retourne un nouvel {{domxref("AnimationEvent")}}, représentant un évènement en relation avec une animation. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>animationEvent</em> = new AnimationEvent(<em>type</em>, {animationName: <em>aPropertyName</em>, - elapsedTime : <em>aFloat</em>, - pseudoElement: <em>aPseudoElementName</em>}); -</pre> + animationEvent = new AnimationEvent(type, {animationName: aPropertyName, + elapsedTime : aFloat, + pseudoElement: aPseudoElementName}); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<p><em>Le constructeur <code>AnimationEvent()</code> </em>constructeur hérite également des arguments de <em> {{domxref("Event.Event", "Event()")}}.</em></p> +*Le constructeur `AnimationEvent()` *constructeur hérite également des arguments de _{{domxref("Event.Event", "Event()")}}._ -<dl> - <dt><code>type</code></dt> - <dd>Un {{domxref("DOMString")}} représentant le nom du type de <code>AnimationEvent</code>. Il est sensible à la casse (majuscule-minuscule) et peut être: <code>'animationstart'</code>, <code>'animationend'</code>, or <code>'animationiteration'</code>.</dd> - <dt><code>animationName</code> {{optional_inline}}</dt> - <dd>Un {{domxref("DOMString")}} contenant la valeur de la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut <code>""</code>.</dd> - <dt><code>elapsedTime</code> {{optional_inline}}</dt> - <dd>Un <code>float</code> donne le montant de temps d'une application qui a fonctionné, en secondes, quand l'évenenement est déclenché, excluant le temps de pause des animations. Pour un évènement <code>"animationstart"</code> , <code>elapsedTime</code> est de <code>0.0</code> jusqu'a ce qu'il y ai une valeur négative pour une valeur {{cssxref("animation-delay")}}, dans le case où l'évenement est déclenché par <code>elapsedTime</code> contenant <code>(-1 * </code><em>délais</em><code>)</code>. SA valeur par défaut vaut <code>0.0</code>.</dd> - <dt><code>pseudoElement</code> {{optional_inline}}</dt> - <dd>Is a {{domxref("DOMString")}}, starting with <code>"::"</code>, containing the name of the <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: <code>""</code>. It defaults to <code>""</code>.</dd> -</dl> +- `type` + - : Un {{domxref("DOMString")}} représentant le nom du type de `AnimationEvent`. Il est sensible à la casse (majuscule-minuscule) et peut être: `'animationstart'`, `'animationend'`, or `'animationiteration'`. +- `animationName` {{optional_inline}} + - : Un {{domxref("DOMString")}} contenant la valeur de la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut `""`. +- `elapsedTime` {{optional_inline}} + - : Un `float` donne le montant de temps d'une application qui a fonctionné, en secondes, quand l'évenenement est déclenché, excluant le temps de pause des animations. Pour un évènement `"animationstart"` , `elapsedTime` est de `0.0` jusqu'a ce qu'il y ai une valeur négative pour une valeur {{cssxref("animation-delay")}}, dans le case où l'évenement est déclenché par `elapsedTime` contenant `(-1 * `_délais_`)`. SA valeur par défaut vaut `0.0`. +- `pseudoElement` {{optional_inline}} + - : Is a {{domxref("DOMString")}}, starting with `"::"`, containing the name of the [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: `""`. It defaults to `""`. -<h3 id="Return_value">Return value</h3> +### Return value -<p>A new {{domxref("AnimationEvent")}}, initialized per any provided options.</p> +A new {{domxref("AnimationEvent")}}, initialized per any provided options. -<h2 id="Specifications">Specifications</h2> +## Specifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}</td> - <td>{{ Spec2('CSS3 Animations')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------- | +| {{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }} | {{ Spec2('CSS3 Animations')}} | Initial definition. | -<h2 id="Browser_compatibility">Browser compatibility</h2> +## Browser compatibility -<p>{{Compat("api.AnimationEvent.AnimationEvent")}}</p> +{{Compat("api.AnimationEvent.AnimationEvent")}} -<h2 id="See_also">See also</h2> +## See also -<ul> - <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li> - <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}</li> - <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li> -</ul> +- [Using CSS animations](/en-US/docs/CSS/Using_CSS_animations) +- Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}} +- The {{domxref("AnimationEvent")}} interface it belongs to. diff --git a/files/fr/web/api/animationevent/animationname/index.md b/files/fr/web/api/animationevent/animationname/index.md index c47cf112be..d3ff5d4520 100644 --- a/files/fr/web/api/animationevent/animationname/index.md +++ b/files/fr/web/api/animationevent/animationname/index.md @@ -10,41 +10,26 @@ tags: - Reference translation_of: Web/API/AnimationEvent/animationName --- -<p>{{SeeCompatTable}}{{ apiref("AnimationEvent") }}</p> +{{SeeCompatTable}}{{ apiref("AnimationEvent") }} -<p>La propriété en lecture seule <code><strong>AnimationEvent.animationName</strong></code> est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.</p> +La propriété en lecture seule **`AnimationEvent.animationName`** est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>nom</em> = <em>AnimationEvent</em>.animationName</pre> + nom = AnimationEvent.animationName -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName')}}</td> - <td>{{Spec2('CSS3 Animations')}}</td> - <td>Première définition.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName')}} | {{Spec2('CSS3 Animations')}} | Première définition. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.AnimationEvent.animationName")}}</p> +{{Compat("api.AnimationEvent.animationName")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li> - <li>{{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li> - <li>L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient.</li> -</ul> +- [Utiliser les animations CSS](/fr/docs/CSS/Animations_CSS) +- {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}. +- L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient. diff --git a/files/fr/web/api/animationevent/elapsedtime/index.md b/files/fr/web/api/animationevent/elapsedtime/index.md index 2b5dcaeece..fa48fdb4e1 100644 --- a/files/fr/web/api/animationevent/elapsedtime/index.md +++ b/files/fr/web/api/animationevent/elapsedtime/index.md @@ -10,43 +10,28 @@ tags: - Reference translation_of: Web/API/AnimationEvent/elapsedTime --- -<p>{{SeeCompatTable}}{{ apiref("AnimationEvent") }}</p> +{{SeeCompatTable}}{{ apiref("AnimationEvent") }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>La propriété en lecture seule <code><strong>AnimationEvent.elapsedTime</strong></code> est un <code>float</code> indiquant la quantité de temps pendant laquelle l'animation a tournée, en secondes, quand l'évènement a été déclenché, excluant tout temps où l'animation était en pause. Pour un évènement <code>"animationstart", </code><code>elapsedTime</code> est <code>0.0</code> sauf si {{cssxref("animation-delay")}} a une valeur négative, dans ce cas l'évènement est déclenché avec <code>elapsedTime </code>contenant <code>(-1 * </code><em>délai</em><code>)</code>.</p> +La propriété en lecture seule **`AnimationEvent.elapsedTime`** est un `float` indiquant la quantité de temps pendant laquelle l'animation a tournée, en secondes, quand l'évènement a été déclenché, excluant tout temps où l'animation était en pause. Pour un évènement ` "animationstart", ``elapsedTime` est `0.0` sauf si {{cssxref("animation-delay")}} a une valeur négative, dans ce cas l'évènement est déclenché avec `elapsedTime `contenant `(-1 * `_délai_`)`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>temps</em> = <em>AnimationEvent</em>.elapsedTime</pre> + temps = AnimationEvent.elapsedTime -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-elapsedTime', 'AnimationEvent.elapsedTime') }}</td> - <td>{{ Spec2('CSS3 Animations')}}</td> - <td>Première définition</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- | +| {{ SpecName('CSS3 Animations', '#AnimationEvent-elapsedTime', 'AnimationEvent.elapsedTime') }} | {{ Spec2('CSS3 Animations')}} | Première définition | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.AnimationEvent.elapsedTime")}}</p> +{{Compat("api.AnimationEvent.elapsedTime")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li> - <li>Propriétés CSS et règles @ en relations avec les animations CSS: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li> - <li>L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient.</li> -</ul> +- [Utiliser les animations CSS](/fr/docs/CSS/Animations_CSS) +- Propriétés CSS et règles @ en relations avec les animations CSS: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}. +- L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient. diff --git a/files/fr/web/api/animationevent/index.md b/files/fr/web/api/animationevent/index.md index 9b24b82be1..a576a5d556 100644 --- a/files/fr/web/api/animationevent/index.md +++ b/files/fr/web/api/animationevent/index.md @@ -9,70 +9,46 @@ tags: - Web Animations translation_of: Web/API/AnimationEvent --- -<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p> +{{SeeCompatTable}}{{APIRef("Web Animations API")}} -<p>L'interface <code><strong>AnimationEvent</strong></code> représentent les évènements apportant des informations sur les <a href="/fr/docs/CSS/Animations_CSS">animations CSS</a>.</p> +L'interface **`AnimationEvent`** représentent les évènements apportant des informations sur les [animations CSS](/fr/docs/CSS/Animations_CSS). -<p>{{InheritanceDiagram}}</p> +{{InheritanceDiagram}} -<dl> -</dl> +## Constructeur -<h2 id="Constructeur">Constructeur</h2> +- {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}} + - : Créer un évènement AnimationEvent avec les paramètres spécifiés. -<dl> - <dt>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</dt> - <dd>Créer un évènement AnimationEvent avec les paramètres spécifiés.</dd> -</dl> +## Propriétés -<h2 id="Propriétés">Propriétés</h2> +_Hérite également des propriétés de son parent {{domxref("Event")}}._ -<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}.</em></p> +- {{domxref("AnimationEvent.animationName")}} {{readonlyInline}} + - : Est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition. +- {{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}} + - : Est un nombre à virgule flottante, donnant le temps pendant lequel l'animation s'est déroulée, en secondes, quand l'évènement est déclenché, en excluant tous les temps de pause de l'animation. Pour un évènement `animationstart`, `elapsedTime` est à 0.0 sauf si {{cssxref("animation-delay")}} a une valeur négative. Dans ce cas, l'évènement sera déclenché avec `elapsedTime` contenant (-1 \* la valeur de `animation-delay`). +- {{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}} + - : est une {{domxref("DOMString")}}, démarrant avec '::', contenant le nom du pseudo-élément où l'animation se déroule. Si l'animation ne se déroule pas sur un pseudo-élément, mais sur un élément, la chaîne de caractères sera vide. -<dl> - <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt> - <dd>Est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.</dd> - <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt> - <dd>Est un nombre à virgule flottante, donnant le temps pendant lequel l'animation s'est déroulée, en secondes, quand l'évènement est déclenché, en excluant tous les temps de pause de l'animation. Pour un évènement <code>animationstart</code>, <code>elapsedTime</code> est à 0.0 sauf si {{cssxref("animation-delay")}} a une valeur négative. Dans ce cas, l'évènement sera déclenché avec <code>elapsedTime</code> contenant (-1 * la valeur de <code>animation-delay</code>).</dd> - <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt> - <dd>est une {{domxref("DOMString")}}, démarrant avec '::', contenant le nom du pseudo-élément où l'animation se déroule. Si l'animation ne se déroule pas sur un pseudo-élément, mais sur un élément, la chaîne de caractères sera vide.</dd> -</dl> +## Méthodes -<h2 id="Méthodes">Méthodes</h2> +_Hérite également des propriétés de son parent {{domxref("Event")}}._ -<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}.</em></p> +- {{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}} + - : Initialise un AnimationEvent créé avec la méthode obsolète {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}. -<dl> - <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt> - <dd>Initialise un AnimationEvent créé avec la méthode obsolète {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}.</dd> -</dl> +## Spécifications -<h2 id="Spécifications">Spécifications</h2> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }} | {{ Spec2('CSS3 Animations') }} | Première définition. | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td> - <td>{{ Spec2('CSS3 Animations') }}</td> - <td>Première définition.</td> - </tr> - </tbody> -</table> +## Compatibilité des navigateurs -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +{{Compat("api.AnimationEvent")}} -<p>{{Compat("api.AnimationEvent")}}</p> +## Voir également -<h2 id="Voir_également">Voir également</h2> - -<ul> - <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li> - <li>{{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li> -</ul> +- [Utiliser les animations CSS](/fr/docs/CSS/Animations_CSS) +- {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}. diff --git a/files/fr/web/api/animationevent/pseudoelement/index.md b/files/fr/web/api/animationevent/pseudoelement/index.md index 9bee1cda03..1799a5b9da 100644 --- a/files/fr/web/api/animationevent/pseudoelement/index.md +++ b/files/fr/web/api/animationevent/pseudoelement/index.md @@ -9,40 +9,26 @@ tags: - Reference translation_of: Web/API/AnimationEvent/pseudoElement --- -<p>{{SeeCompatTable}}{{ apiref("AnimationEvent") }}</p> - -<p>La propriété en lecture seule <code><strong>AnimationEvent.pseudoElement</strong></code> est une {{domxref("DOMString")}}, commençant par <code>'::'</code>, contenant le nom du <a href="/fr/docs/CSS/Pseudo-éléments">pseudo-élément</a> sur lequel tourne l'animation. Si l'animation ne tourne pas sur un pseudo-élément, mais sur un élément, c'est une chaîne de caractère vide : <code>''</code><code>.</code></p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox"><em>nom</em> = <em>AnimationEvent</em>.pseudoElement</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-pseudoElement', 'AnimationEvent.pseudoElement') }}</td> - <td>{{ Spec2('CSS3 Animations')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.AnimationEvent.pseudoElement")}}</p> - -<h2 id="Voir_également">Voir également</h2> - -<ul> - <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li> - <li>Propriétés et règles @ en relation avec les animations CSS : {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li> - <li>L'interface {{domxref("AnimationEvent")}} à laquelle elle est rattachée.</li> -</ul> +{{SeeCompatTable}}{{ apiref("AnimationEvent") }} + +La propriété en lecture seule **`AnimationEvent.pseudoElement`** est une {{domxref("DOMString")}}, commençant par `'::'`, contenant le nom du [pseudo-élément](/fr/docs/CSS/Pseudo-éléments) sur lequel tourne l'animation. Si l'animation ne tourne pas sur un pseudo-élément, mais sur un élément, c'est une chaîne de caractère vide : ` ''``. ` + +## Syntaxe + + nom = AnimationEvent.pseudoElement + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{ SpecName('CSS3 Animations', '#AnimationEvent-pseudoElement', 'AnimationEvent.pseudoElement') }} | {{ Spec2('CSS3 Animations')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.AnimationEvent.pseudoElement")}} + +## Voir également + +- [Utiliser les animations CSS](/fr/docs/CSS/Animations_CSS) +- Propriétés et règles @ en relation avec les animations CSS : {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}. +- L'interface {{domxref("AnimationEvent")}} à laquelle elle est rattachée. diff --git a/files/fr/web/api/atob/index.md b/files/fr/web/api/atob/index.md index b7b3b16a43..d99df91aed 100644 --- a/files/fr/web/api/atob/index.md +++ b/files/fr/web/api/atob/index.md @@ -10,69 +10,40 @@ tags: translation_of: Web/API/WindowOrWorkerGlobalScope/atob original_slug: Web/API/WindowOrWorkerGlobalScope/atob --- -<p>{{APIRef ("HTML DOM")}}<br> - La fonction <code>WindowOrWorkerGlobalScope.atob()</code> décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31.</p> +{{APIRef ("HTML DOM")}} +La fonction `WindowOrWorkerGlobalScope.atob()` décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31. -<p>Pour une utilisation avec des chaînes Unicode ou UTF-8, voir <a href="/fr/docs/D%C3%A9coder_encoder_en_base64">cette note sur l'encodage et le décodage Base64</a> et <a href="/fr-FR/docs/Web/API/window.btoa#Unicode_Strings">cette note sur btoa()</a>.</p> +Pour une utilisation avec des chaînes Unicode ou UTF-8, voir [cette note sur l'encodage et le décodage Base64](/fr/docs/D%C3%A9coder_encoder_en_base64) et [cette note sur btoa()](/fr-FR/docs/Web/API/window.btoa#Unicode_Strings). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="eval">var donneesDecodees = scope.atob(<em>donneesEncodees</em>); -</pre> + var donneesDecodees = scope.atob(donneesEncodees); -<h3 id="Déclenche">Déclenche</h3> +### Déclenche -<p>Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée en entrée n'est pas un multiple de 4.</p> +Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée en entrée n'est pas un multiple de 4. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="eval"><em>donneesEncodees</em> = window.btoa('Salut, monde'); // encode une chaîne -<em>donneesDecodees</em> = window.atob(<em>donneesEncodees</em>); // décode la chaîne -</pre> + donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne + donneesDecodees = window.atob(donneesEncodees); // décode la chaîne -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Méthode déplacée dans le mixin <code>WindowOrWorkerGlobalScope</code> dans la spéc la plus récente.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>WindowBase64</code> (les propriétés se trouvaient sur la cible avant cela).</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | +| {{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}. | +| {{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}} | {{Spec2('HTML5.1')}} | Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement. | +| {{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.WindowOrWorkerGlobalScope.atob")}}</p> +{{Compat("api.WindowOrWorkerGlobalScope.atob")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> - <li><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Les URL de <code>données</code></a></li> - <li>{{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}}</li> - <li><a href="/fr-FR/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> -</ul> +- [Base64 encoding and decoding](/Web/API/WindowBase64/Base64_encoding_and_decoding) +- [Les URL de `données`](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) +- {{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}} +- [Components.utils.importGlobalProperties](/fr-FR/docs/Components.utils.importGlobalProperties) diff --git a/files/fr/web/api/attr/index.md b/files/fr/web/api/attr/index.md index 8a97846bae..930c7df714 100644 --- a/files/fr/web/api/attr/index.md +++ b/files/fr/web/api/attr/index.md @@ -7,155 +7,119 @@ tags: - DOM translation_of: Web/API/Attr --- -<div>{{APIRef("DOM")}}</div> - -<p>Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr.</p> - -<div class="warning"> -<p><strong>Attention :</strong> À partir de Gecko 7.0 {{geckoRelease ("7.0")}}, ceux qui vont être retirés afficheront des messages d'avertissement dans la console. Vous devriez modifier votre code en conséquence. Voir {{anch("Propriétés et méthodes dépréciées")}} pour une liste complète.</p> -</div> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{domxref("Attr.name", "name")}} {{readOnlyInline}}</dt> - <dd>Le nom de l'attribut.</dd> - <dt>{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}</dt> - <dd>Une {{domxref("DOMString","Chaîne de caractères")}} représentant l'URI de l'espace nom de l'attribut ou <code>null</code> s'il n'y a pas d'espace nom.</dd> - <dt>{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}</dt> - <dd>Une {{domxref("DOMString","Chaîne de caractères")}} représentant la partie locale du nom qualifié de l'attribut.</dd> - <dt>{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}</dt> - <dd>Une {{domxref("DOMString","Chaîne de caractères")}} représentant le préfixe de l'espace nom de l'attribut, ou <code>null</code> si aucun préfixe n'est spécifié.</dd> - <dt>{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}</dt> - <dd>L'élément contenant l'attribut.</dd> -</dl> - -<div class="note"> -<p><strong>Note :</strong> DOM Niveau 4 a supprimé cette propriété . L'hypothèse était que puisque nous obtenons un objet Attr d'un {{domxref("Element")}}, nous devrions déjà connaître les éléments associés.<br> - Comme cela n'est pas vrai quand les objets <code>Attr</code> sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété.</p> - -<p>Gecko affiche une note de dépréciation à partir de Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}.</p> -</div> - -<dl> - <dt>{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}</dt> - <dd>Cette propriété renvoie toujours la valeur <code>true</code>. À l'origine, elle renvoyait true si l'attribut était explicitement spécifié dans le code source ou par un script, et <code>false</code> si sa valeur provenait de la valeur par défaut définie dans la DTD du document.</dd> - <dt>{{domxref("Attr.value", "Value")}}</dt> - <dd>La valeur de l'attribut.</dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> DOM Niveau 3 a défini <code>namespaceURI</code>, <code>localName</code> et <code>prefix</code> sur l'interface {{domxref("Node")}}. Dans DOM4 ils ont été déplacés vers <code>Attr</code>.</p> - -<p>Cette modification est implémentée dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.</p> -</div> - -<h2 id="Propriétés_et_méthodes_dépréciées">Propriétés et méthodes dépréciées</h2> - -<p>Les propriétés suivantes ont été dépréciées. Si elle est disponible, la méthode ou propriété de remplacement appropriée est fournie.</p> - -<dl> - <dt><code>attributes</code></dt> - <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd> - <dt><code>childNodes </code> {{obsolete_inline(14)}}</dt> - <dd>Cette propriété retourne désormais toujours <code>un</code> {{domxref("NodeList")}} vide.</dd> - <dt><code>firstChild </code> {{obsolete_inline(14)}}</dt> - <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd> - <dt><code>isId</code> {{readOnlyInline}}</dt> - <dd>Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par un {{Glossary("DTD")}} ou une autre description de schéma.</dd> - <dt><code>lastChild </code> {{obsolete_inline(14)}}</dt> - <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd> - <dt><code>nextSibling</code></dt> - <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd> - <dt><code>nodeName</code></dt> - <dd>Utilisez {{domxref("Attr.name")}} à la place.</dd> - <dt><code>nodeType</code></dt> - <dd>Cette propriété retourne toujours 2. (<code>ATTRIBUTE_NODE</code>).</dd> - <dt><code>nodeValue</code></dt> - <dd>Utilisez {{domxref("Attr.value")}} à la place.</dd> - <dt><code>ownerDocument</code></dt> - <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd> - <dt><code>parentNode</code></dt> - <dd>Cette propriété retourne désormais toujours NULL.</dd> - <dt><code>previousSibling</code></dt> - <dd>Cette propriété retourne désormais toujours NULL.</dd> - <dt><code>schemaTypeInfo</code> {{obsolete_inline}} {{readOnlyInline}}</dt> - <dd>Les informations de type associées à cet attribut. Bien que l'information de type contenue dans cet attribut soit garantie après le chargement du document ou l'appel de {{domxref("Document.normalizeDocument")}}, cette propriété peut ne pas être fiable si le nœud a été déplacé.</dd> - <dt><code>specified</code></dt> - <dd>Cette propriété retourne désormais toujours true.</dd> - <dt><code>textContent</code></dt> - <dd>Utilisez {{domxref ("Attr.value")}} à la place.</dd> -</dl> - -<p><br> - Les méthodes suivantes ont été dépréciées:</p> - -<dl> - <dt><code>appendChild() </code> {{obsolete_inline(14)}}</dt> - <dd>Modifiez à la place la valeur de {{domxref ("Attr.value")}}.</dd> - <dt><code>cloneNode()</code></dt> - <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd> - <dt><code>createAttribute()</code></dt> - <dd>Utilisez {{domxref("Attr.setAttribute()")}} à la place.</dd> - <dt><code>createAttributeNS()</code></dt> - <dd>Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.</dd> - <dt><code>getAttributeNode()</code></dt> - <dd>Utilisez {{domxref("Attr.getAttribute()")}} à la place.</dd> - <dt><code>getAttributeNodeNS()</code></dt> - <dd>Utilisez {{domxref("Attr.getAttributeNS()")}} à la place.</dd> - <dt><code>hasAttributes() </code>{{obsolete_inline("21.0")}}</dt> - <dd>Cette méthode retourne désormais toujours false.</dd> - <dt><code>hasChildNodes()</code></dt> - <dd>Cette méthode retourne désormais toujours false.</dd> - <dt><code>insertBefore()</code></dt> - <dd>Modifiez à la place la valeur de {{domxref ("Attr.value")}}.</dd> - <dt><code>isSupported()</code></dt> - <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd> - <dt><code>isEqualNode()</code></dt> - <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd> - <dt><code>normalize()</code></dt> - <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd> - <dt><code>removeAttributeNode()</code></dt> - <dd>Utilisez {{domxref("Attr.removeAttribute()")}} à la place.</dd> - <dt><code>removeChild() </code> {{obsolete_inline(14)}}</dt> - <dd>Modifiez à la place la valeur de {{domxref("Attr.value")}}.</dd> - <dt><code>replaceChild() </code> {{obsolete_inline(14)}}</dt> - <dd>Modifiez à la place la valeur de {{domxref("Attr.value")}}.</dd> - <dt><code>setAttributeNode()</code></dt> - <dd>Utilisez {{domxref("Attr.setAttribute()")}} à la place.</dd> - <dt><code>setAttributeNodeNS()</code></dt> - <dd>Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#interface-attr", "Attr")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Ajoute la propriété <code>ownerElement</code> property</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#interface-attr", "Attr")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>A déplacé les <code>namespaceURI</code>, <code>prefix</code> et <code>localName</code> de {{domxref("Node")}} vers cet API et supprimé <code>ownerElement</code>, <code>schemaTypeInfo</code> et <code>isId</code>.</td> - </tr> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Attr")}}</p> +{{APIRef("DOM")}} + +Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr. + +> **Attention :** À partir de Gecko 7.0 {{geckoRelease ("7.0")}}, ceux qui vont être retirés afficheront des messages d'avertissement dans la console. Vous devriez modifier votre code en conséquence. Voir {{anch("Propriétés et méthodes dépréciées")}} pour une liste complète. + +## Propriétés + +- {{domxref("Attr.name", "name")}} {{readOnlyInline}} + - : Le nom de l'attribut. +- {{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}} + - : Une {{domxref("DOMString","Chaîne de caractères")}} représentant l'URI de l'espace nom de l'attribut ou `null` s'il n'y a pas d'espace nom. +- {{domxref("Attr.localName", "localName")}} {{readOnlyInline}} + - : Une {{domxref("DOMString","Chaîne de caractères")}} représentant la partie locale du nom qualifié de l'attribut. +- {{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}} + - : Une {{domxref("DOMString","Chaîne de caractères")}} représentant le préfixe de l'espace nom de l'attribut, ou `null` si aucun préfixe n'est spécifié. +- {{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}} + - : L'élément contenant l'attribut. + +> **Note :** DOM Niveau 4 a supprimé cette propriété . L'hypothèse était que puisque nous obtenons un objet Attr d'un {{domxref("Element")}}, nous devrions déjà connaître les éléments associés. +> Comme cela n'est pas vrai quand les objets `Attr` sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété. +> +> Gecko affiche une note de dépréciation à partir de Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}. + +- {{domxref("Attr.specified", "specified")}} {{readOnlyInline}} + - : Cette propriété renvoie toujours la valeur `true`. À l'origine, elle renvoyait true si l'attribut était explicitement spécifié dans le code source ou par un script, et `false` si sa valeur provenait de la valeur par défaut définie dans la DTD du document. +- {{domxref("Attr.value", "Value")}} + - : La valeur de l'attribut. + +> **Note :** DOM Niveau 3 a défini `namespaceURI`, `localName` et `prefix` sur l'interface {{domxref("Node")}}. Dans DOM4 ils ont été déplacés vers `Attr`. +> +> Cette modification est implémentée dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0. + +## Propriétés et méthodes dépréciées + +Les propriétés suivantes ont été dépréciées. Si elle est disponible, la méthode ou propriété de remplacement appropriée est fournie. + +- `attributes` + - : Cette propriété retourne désormais toujours `NULL`. +- `childNodes `{{obsolete_inline(14)}} + - : Cette propriété retourne désormais toujours `un` {{domxref("NodeList")}} vide. +- `firstChild `{{obsolete_inline(14)}} + - : Cette propriété retourne désormais toujours `NULL`. +- `isId` {{readOnlyInline}} + - : Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par un {{Glossary("DTD")}} ou une autre description de schéma. +- `lastChild `{{obsolete_inline(14)}} + - : Cette propriété retourne désormais toujours `NULL`. +- `nextSibling` + - : Cette propriété retourne désormais toujours `NULL`. +- `nodeName` + - : Utilisez {{domxref("Attr.name")}} à la place. +- `nodeType` + - : Cette propriété retourne toujours 2. (`ATTRIBUTE_NODE`). +- `nodeValue` + - : Utilisez {{domxref("Attr.value")}} à la place. +- `ownerDocument` + - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré. +- `parentNode` + - : Cette propriété retourne désormais toujours NULL. +- `previousSibling` + - : Cette propriété retourne désormais toujours NULL. +- `schemaTypeInfo` {{obsolete_inline}} {{readOnlyInline}} + - : Les informations de type associées à cet attribut. Bien que l'information de type contenue dans cet attribut soit garantie après le chargement du document ou l'appel de {{domxref("Document.normalizeDocument")}}, cette propriété peut ne pas être fiable si le nœud a été déplacé. +- `specified` + - : Cette propriété retourne désormais toujours true. +- `textContent` + - : Utilisez {{domxref ("Attr.value")}} à la place. + +Les méthodes suivantes ont été dépréciées: + +- `appendChild() `{{obsolete_inline(14)}} + - : Modifiez à la place la valeur de {{domxref ("Attr.value")}}. +- `cloneNode()` + - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré. +- `createAttribute()` + - : Utilisez {{domxref("Attr.setAttribute()")}} à la place. +- `createAttributeNS()` + - : Utilisez {{domxref("Attr.setAttributeNS()")}} à la place. +- `getAttributeNode()` + - : Utilisez {{domxref("Attr.getAttribute()")}} à la place. +- `getAttributeNodeNS()` + - : Utilisez {{domxref("Attr.getAttributeNS()")}} à la place. +- `hasAttributes() `{{obsolete_inline("21.0")}} + - : Cette méthode retourne désormais toujours false. +- `hasChildNodes()` + - : Cette méthode retourne désormais toujours false. +- `insertBefore()` + - : Modifiez à la place la valeur de {{domxref ("Attr.value")}}. +- `isSupported()` + - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré. +- `isEqualNode()` + - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré. +- `normalize()` + - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré. +- `removeAttributeNode()` + - : Utilisez {{domxref("Attr.removeAttribute()")}} à la place. +- `removeChild() `{{obsolete_inline(14)}} + - : Modifiez à la place la valeur de {{domxref("Attr.value")}}. +- `replaceChild() `{{obsolete_inline(14)}} + - : Modifiez à la place la valeur de {{domxref("Attr.value")}}. +- `setAttributeNode()` + - : Utilisez {{domxref("Attr.setAttribute()")}} à la place. +- `setAttributeNodeNS()` + - : Utilisez {{domxref("Attr.setAttributeNS()")}} à la place. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| {{SpecName("DOM WHATWG", "#interface-attr", "Attr")}} | {{Spec2("DOM WHATWG")}} | Ajoute la propriété `ownerElement` property | +| {{SpecName("DOM4", "#interface-attr", "Attr")}} | {{Spec2("DOM4")}} | A déplacé les `namespaceURI`, `prefix` et `localName` de {{domxref("Node")}} vers cet API et supprimé `ownerElement`, `schemaTypeInfo` et `isId`. | +| {{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}} | {{Spec2("DOM3 Core")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.Attr")}} diff --git a/files/fr/web/api/attr/localname/index.md b/files/fr/web/api/attr/localname/index.md index c23a595af4..a2f6f2e717 100644 --- a/files/fr/web/api/attr/localname/index.md +++ b/files/fr/web/api/attr/localname/index.md @@ -8,78 +8,61 @@ tags: - Reference translation_of: Web/API/Attr/localName --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>La propriété <code><strong>Attr.localName</strong></code>, en lecture seule, renvoie la partie locale du nom qualifié d'un élément.</p> +La propriété **`Attr.localName`**, en lecture seule, renvoie la partie locale du nom qualifié d'un élément. -<div class="note"> -<p><strong>Note :</strong> Avant DOM4, cette API était définie dans l'interface {{domxref("Node")}}.</p> -</div> +> **Note :** Avant DOM4, cette API était définie dans l'interface {{domxref("Node")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>name</var> = <var>attribute</var>.localName -</pre> + name = attribute.localName -<h3 id="Valeur_renvoyée">Valeur renvoyée</h3> +### Valeur renvoyée -<p>Une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui représente la partie locale du nom qualifié de l'élément.</p> +Une {{domxref("DOMString")}} _(chaîne de caractères)_ qui représente la partie locale du nom qualifié de l'élément. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Cet exemple affiche "id" dans une fenêtre d'alerte.</p> +Cet exemple affiche "id" dans une fenêtre d'alerte. -<h3 id="Contenu_HTML">Contenu HTML</h3> +### Contenu HTML -<pre class="brush: html"><button id="exemple">Clique ici</button></pre> +```html +<button id="exemple">Clique ici</button> +``` -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> +### Contenu JavaScript -<pre class="brush: js">const element = document.querySelector("#exemple"); +```js +const element = document.querySelector("#exemple"); element.addEventListener("click", function() { const attribute = element.attributes[0]; alert(attribute.localName); }); -</pre> +``` -<p>{{ EmbedLiveSample('Exemple','100%',30) }}</p> +{{ EmbedLiveSample('Exemple','100%',30) }} -<h2 id="Notes">Notes</h2> +## Notes -<p>Le nom local d'un attribut est la partie du nom qualifié de cet attribut avant les deux points. les noms qualifiés sont utilisés en XML, dans les espaces de nom de certains documents.</p> +Le nom local d'un attribut est la partie du nom qualifié de cet attribut avant les deux points. les noms qualifiés sont utilisés en XML, dans les espaces de nom de certains documents. -<div class="note"> -<p><strong>Note :</strong> dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML.</p> -</div> +> **Note :** dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM4', '#interface-attr', 'Attr.localName')}}</td> - <td>{{Spec2('DOM4')}}</td> - <td>première définition</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------- | ------------------------ | ------------------- | +| {{SpecName('DOM4', '#interface-attr', 'Attr.localName')}} | {{Spec2('DOM4')}} | première définition | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Attr.localName")}}</p> +{{Compat("api.Attr.localName")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{domxref("Attr.namespaceURI")}}</li> - <li>{{domxref("Attr.prefix")}}</li> - <li>{{domxref("Element.localName")}}</li> - <li>{{domxref("Node.localName")}}</li> -</ul> +- {{domxref("Attr.namespaceURI")}} +- {{domxref("Attr.prefix")}} +- {{domxref("Element.localName")}} +- {{domxref("Node.localName")}} diff --git a/files/fr/web/api/attr/namespaceuri/index.md b/files/fr/web/api/attr/namespaceuri/index.md index 73f89cbdeb..a8d555f0d8 100644 --- a/files/fr/web/api/attr/namespaceuri/index.md +++ b/files/fr/web/api/attr/namespaceuri/index.md @@ -8,67 +8,52 @@ tags: - namespaceURI translation_of: Web/API/Attr/namespaceURI --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>La propriété en lecture seule <code><strong>Attr.namespaceURI</strong></code> retourne l'URI d'espace de nom de l'attribut, ou <code>null</code> si l'élément n'est pas dans un espace de noms.</p> +La propriété en lecture seule **`Attr.namespaceURI`** retourne l'URI d'espace de nom de l'attribut, ou `null` si l'élément n'est pas dans un espace de noms. -<div class="note"> -<p><strong>Note :</strong> Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.</p> -</div> +> **Note :** Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>namespace</var> = <var>attribute</var>.namespaceURI</pre> + namespace = attribute.namespaceURI -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Dans cet extrait de code, un attribut est examiné pour son {{domxref("localName")}} et son <code>namespaceURI</code>. Si le <code>namespaceURI</code> renvoie l'espace de noms XUL et le <code>localName</code> retourne "browser" (<em>navigateur</em>), alors le noeud est compris comme étant un <code><browser/></code> XUL.</p> +Dans cet extrait de code, un attribut est examiné pour son {{domxref("localName")}} et son `namespaceURI`. Si le `namespaceURI` renvoie l'espace de noms XUL et le `localName` retourne "browser" (_navigateur_), alors le noeud est compris comme étant un `<browser/>` XUL. -<pre class="brush:js">if (attribute.localName == "value" && +```js +if (attribute.localName == "value" && attribute.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // ceci est une valeur XUL -}</pre> +} +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>Ce n'est pas une valeur calculée, mais le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un attribut est figé à l'heure de création de l'attribut.</p> +Ce n'est pas une valeur calculée, mais le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un attribut est figé à l'heure de création de l'attribut. -<p>Dans Firefox 3.5 et précédents, l'URI d'espace de nom pour les attributs HTML dans les documents HTML est <code>null</code>. Dans les versions ultérieures, en conformité avec HTML5, il est <code><a href="https://www.w3.org/1999/xhtml">https://www.w3.org/1999/xhtml</a></code> comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}</p> +Dans Firefox 3.5 et précédents, l'URI d'espace de nom pour les attributs HTML dans les documents HTML est `null`. Dans les versions ultérieures, en conformité avec HTML5, il est [`https://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) comme dans XHTML. {{gecko_minversion_inline("1.9.2")}} -<p>Vous pouvez créer un attribut avec le <code>namespaceURI</code> spécifié en utilisant la méthode de DOM niveau 2 {{domxref("Element.setAttributeNS")}}.</p> +Vous pouvez créer un attribut avec le `namespaceURI` spécifié en utilisant la méthode de DOM niveau 2 {{domxref("Element.setAttributeNS")}}. -<p>Selon la spécification <a href="https://www.w3.org/TR/xml-names11/">Namespaces en XML</a>, un attribut n'hérite pas de l'espace de noms de l'élément auquel il est attaché. Si un attribut n'est pas explicitement donné à un espace de noms, il n'a pas d'espace de noms.</p> +Selon la spécification [Namespaces en XML](https://www.w3.org/TR/xml-names11/), un attribut n'hérite pas de l'espace de noms de l'élément auquel il est attaché. Si un attribut n'est pas explicitement donné à un espace de noms, il n'a pas d'espace de noms. -<p>Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un nœud particulier, ne peut pas être modifié.</p> +Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un nœud particulier, ne peut pas être modifié. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------ | ------------------- | +| {{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}} | {{Spec2("DOM4")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Attr.namespaceURI")}}</p> +{{Compat("api.Attr.namespaceURI")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Attr.localName")}}</li> - <li>{{domxref("Attr.prefix")}}</li> - <li>{{domxref("Element.namespaceURI")}}</li> - <li>{{domxref("Node.namespaceURI")}}</li> -</ul> +- {{domxref("Attr.localName")}} +- {{domxref("Attr.prefix")}} +- {{domxref("Element.namespaceURI")}} +- {{domxref("Node.namespaceURI")}} diff --git a/files/fr/web/api/attr/prefix/index.md b/files/fr/web/api/attr/prefix/index.md index 92f9bcfe1b..94ebc28721 100644 --- a/files/fr/web/api/attr/prefix/index.md +++ b/files/fr/web/api/attr/prefix/index.md @@ -8,58 +8,41 @@ tags: - Reference translation_of: Web/API/Attr/prefix --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>La propriété <strong><code>Attr.prefix </code></strong>en lecture seule renvoie le préfixe de l'espace de noms de l'attribut spécifié ou null si aucun préfixe n'est spécifié</p> +La propriété **`Attr.prefix `**en lecture seule renvoie le préfixe de l'espace de noms de l'attribut spécifié ou null si aucun préfixe n'est spécifié -<div class="note"> -<p><strong>Note :</strong> Avant DOM4, cette API a été définie dans l'interface {{domxref ("Node")}}.</p> -</div> +> **Note :** Avant DOM4, cette API a été définie dans l'interface {{domxref ("Node")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>string</var> = <var>attribute</var>.prefix -</pre> + string = attribute.prefix -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Le code suivant affiche "x" dans la console.</p> +Le code suivant affiche "x" dans la console. -<pre class="brush:xml"><div x:id="example" onclick="console.log(this.attributes[0].prefix)"/> -</pre> +```xml +<div x:id="example" onclick="console.log(this.attributes[0].prefix)"/> +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>Cela ne fonctionnera que lorsqu'un analyseur conscient de l'espace de noms est utilisé, c'est-à-dire lorsqu'il s'agit d'un document avec un type MIME XML. Cela ne fonctionnera pas pour les documents HTML.</p> +Cela ne fonctionnera que lorsqu'un analyseur conscient de l'espace de noms est utilisé, c'est-à-dire lorsqu'il s'agit d'un document avec un type MIME XML. Cela ne fonctionnera pas pour les documents HTML. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM4", "#dom-attr-prefix", "Attr.prefix")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------ | ------------------------ | ------------------- | +| {{SpecName("DOM4", "#dom-attr-prefix", "Attr.prefix")}} | {{Spec2("DOM4")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Attr.prefix")}}</p> +{{Compat("api.Attr.prefix")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{domxref("Attr.namespaceURI")}}</li> - <li>{{domxref("Attr.localName")}}</li> - <li>{{domxref("Element.prefix")}}</li> - <li>{{domxref("Node.prefix")}}</li> -</ul> +- {{domxref("Attr.namespaceURI")}} +- {{domxref("Attr.localName")}} +- {{domxref("Element.prefix")}} +- {{domxref("Node.prefix")}} diff --git a/files/fr/web/api/audiobuffer/audiobuffer/index.md b/files/fr/web/api/audiobuffer/audiobuffer/index.md index ce67efa5e8..cb565da1f0 100644 --- a/files/fr/web/api/audiobuffer/audiobuffer/index.md +++ b/files/fr/web/api/audiobuffer/audiobuffer/index.md @@ -3,47 +3,33 @@ title: AudioBuffer() slug: Web/API/AudioBuffer/AudioBuffer translation_of: Web/API/AudioBuffer/AudioBuffer --- -<p>{{APIRef("Web Audio API")}}{{SeeCompatTable}}</p> - -<p>Le constructeur <strong><code>AudioBuffer</code></strong> créer un nouvel objet {{domxref("AudioBuffer")}}.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">var audioBuffer = new AudioBuffer([options]); -var audioBuffer = new AudioBuffer(context[, options]);</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><em>context </em>{{obsolete_inline("")}}</dt> - <dd>Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. Consultez la section Compatibilité du navigateur pour plus de détails.</dd> - <dt><em>options</em> {{optional_inline}}</dt> - <dd>Les options sont les suivantes: - <ul> - <li><code>length</code>: Longueur de l'échantillonnage du tampon.</li> - <li><code>numberOfChannels</code>: Nombre de cannaux du buffer. La valeur par défaut est 1. </li> - <li><code>sampleRate</code>: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'échantillonnage du <code>context</code> utilisé dans la construction de cet objet </li> - </ul> - </dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API','#AudioBuffer','AudioBuffer')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2> - -<p>{{Compat("api.AudioBuffer.AudioBuffer")}}</p> +{{APIRef("Web Audio API")}}{{SeeCompatTable}} + +Le constructeur **`AudioBuffer`** créer un nouvel objet {{domxref("AudioBuffer")}}. + +## Syntax + + var audioBuffer = new AudioBuffer([options]); + var audioBuffer = new AudioBuffer(context[, options]); + +### Parameters + +- *context* {{obsolete_inline("")}} + - : Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. Consultez la section Compatibilité du navigateur pour plus de détails. +- _options_ {{optional_inline}} + + - : Les options sont les suivantes: + + - `length`: Longueur de l'échantillonnage du tampon. + - `numberOfChannels`: Nombre de cannaux du buffer. La valeur par défaut est 1. + - `sampleRate`: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'échantillonnage du `context` utilisé dans la construction de cet objet + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName('Web Audio API','#AudioBuffer','AudioBuffer')}} | {{Spec2('Web Audio API')}} | Définition initiale | + +## Compatibilité des Navigateurs + +{{Compat("api.AudioBuffer.AudioBuffer")}} diff --git a/files/fr/web/api/audiobuffer/copyfromchannel/index.md b/files/fr/web/api/audiobuffer/copyfromchannel/index.md index 2ae87ca120..16936ddad9 100644 --- a/files/fr/web/api/audiobuffer/copyfromchannel/index.md +++ b/files/fr/web/api/audiobuffer/copyfromchannel/index.md @@ -8,55 +8,41 @@ tags: - Web Audio API translation_of: Web/API/AudioBuffer/copyFromChannel --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<p>La méthode <code>copyFromChannel() </code>de l'interface {{ domxref("AudioBuffer") }} copie les échantillons de l'un des canaux de l'<code>AudioBuffer</code> dans un tableau.</p> +La méthode `copyFromChannel() `de l'interface {{ domxref("AudioBuffer") }} copie les échantillons de l'un des canaux de l'`AudioBuffer` dans un tableau. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>tableauDonnees</em>.copyFromChannel(<em>destination</em>,numeroCanal,decalageDebut);</pre> + tableauDonnees.copyFromChannel(destination,numeroCanal,decalageDebut); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><em>destination</em></dt> - <dd>Un tableau {{domxref("Float32Array")}} dans lequel copier les données.</dd> - <dt><em>channelNumber</em></dt> - <dd>Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si <em>channelNumber</em> est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception <code>INDEX_SIZE_ERR est</code> levée.</dd> - <dt><em>startInChannel</em> {{optional_inline}}</dt> - <dd>Un offset optionnel à partir duquel copier les données. Si la valeur de <em>startInChannel</em> est supérieure à {{domxref("AudioBuffer.length")}}, une exception <code>INDEX_SIZE_ERR</code> est levée.</dd> -</dl> +- _destination_ + - : Un tableau {{domxref("Float32Array")}} dans lequel copier les données. +- _channelNumber_ + - : Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. +- _startInChannel_ {{optional_inline}} + - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate); +```js +var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate); var autreTableau = new Float32Array(length); tableauDonnees.copyFromChannel(autreTableau,1,0); -</pre> - -<h2 id="Spécification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<p>{{Compat("api.AudioBuffer.copyFromChannel")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité navigateurs + +{{Compat("api.AudioBuffer.copyFromChannel")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffer/copytochannel/index.md b/files/fr/web/api/audiobuffer/copytochannel/index.md index 38a6393ebc..2dffa72fa8 100644 --- a/files/fr/web/api/audiobuffer/copytochannel/index.md +++ b/files/fr/web/api/audiobuffer/copytochannel/index.md @@ -3,58 +3,44 @@ title: AudioBuffer.copyToChannel() slug: Web/API/AudioBuffer/copyToChannel translation_of: Web/API/AudioBuffer/copyToChannel --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<p>La méthode <code>copyToChannel() </code>de l'interface {{ domxref("AudioBuffer") }} copie les échantillons du tableau source vers le canal de l'<code>AudioBuffer</code> spécifié.</p> +La méthode `copyToChannel() `de l'interface {{ domxref("AudioBuffer") }} copie les échantillons du tableau source vers le canal de l'`AudioBuffer` spécifié. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>myArrayBuffer</em>.copyToChannel(<em>source</em>, <em>channelNumber</em>, <em>startInChannel</em>);</pre> + myArrayBuffer.copyToChannel(source, channelNumber, startInChannel); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><em>source</em></dt> - <dd>Le tableau {{jsxref("Float32Array")}} depuis lequel copier les données.</dd> - <dt><em>channelNumber</em></dt> - <dd>Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si <em>channelNumber</em> est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception <code>INDEX_SIZE_ERR est</code> levée.</dd> - <dt><em>startInChannel {{optional_inline}}</em></dt> - <dd>Un offset optionnel à partir duquel copier les données. Si la valeur de <em>startInChannel</em> est supérieure à {{domxref("AudioBuffer.length")}}, une exception <code>INDEX_SIZE_ERR</code> est levée.</dd> -</dl> +- _source_ + - : Le tableau {{jsxref("Float32Array")}} depuis lequel copier les données. +- _channelNumber_ + - : Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. +- _startInChannel {{optional_inline}}_ + - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate); +```js +var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate); var autreTableau = new Float32Array; // Copy les données depuis le second canal vers le second tableau. tableauDonnees.copyFromChannel(autreTableau,1,0); // Copie les données depuis le second tableau vers le premier canal du premier tableau. A présent les deux canaux ont des données identiques. tableauDonnees.copyToChannel (autreTableau,0,0); -</pre> - -<h2 id="Spécification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<p>{{Compat("api.AudioBuffer.copyToChannel")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité navigateurs + +{{Compat("api.AudioBuffer.copyToChannel")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffer/duration/index.md b/files/fr/web/api/audiobuffer/duration/index.md index 447932473d..ffb7fdaeae 100644 --- a/files/fr/web/api/audiobuffer/duration/index.md +++ b/files/fr/web/api/audiobuffer/duration/index.md @@ -3,24 +3,25 @@ title: AudioBuffer.duration slug: Web/API/AudioBuffer/duration translation_of: Web/API/AudioBuffer/duration --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<div> -<p>La propriéré <code>duration</code> de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer.</p> -</div> +La propriéré `duration` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var tableauTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); -tableauTampon.duration;</pre> +```js +var tableauTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); +tableauTampon.duration; +``` -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Nombre flottant à double précision.</p> +Nombre flottant à double précision. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">// Stereo +```js +// Stereo var nombreCanaux = 2; // Crée une mémoire tampon vide de 2 secondes @@ -31,10 +32,10 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA bouton.onclick = function() { // remplit la mémoire tampon avec du bruit blanc // valeurs aléatoires entre -1.0 et 1.0 - for (var canal = 0; canal < nombreCanaux; canal++) { + for (var canal = 0; canal < nombreCanaux; canal++) { // génère le tableau contenant les données var tampon = tableauDonnees.getChannelData(canal); - for (var i = 0; i < nombreFrames; i++) { + for (var i = 0; i < nombreFrames; i++) { // Math.random() donne une valeur comprise entre [0; 1.0] // l'audio doit être compris entre [-1.0; 1.0] tampon[i] = Math.random() * 2 - 1; @@ -42,31 +43,18 @@ bouton.onclick = function() { } console.log(tableauDonnees.duration); } -</pre> +``` -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}} | {{Spec2('Web Audio API')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.AudioBuffer.duration")}}</p> +{{Compat("api.AudioBuffer.duration")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffer/getchanneldata/index.md b/files/fr/web/api/audiobuffer/getchanneldata/index.md index 7f64f907a0..67b9c0d234 100644 --- a/files/fr/web/api/audiobuffer/getchanneldata/index.md +++ b/files/fr/web/api/audiobuffer/getchanneldata/index.md @@ -3,24 +3,27 @@ title: AudioBuffer.getChannelData() slug: Web/API/AudioBuffer/getChannelData translation_of: Web/API/AudioBuffer/getChannelData --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<p>La méthode <code>getChannelData() </code>de l'interface {{ domxref("AudioBuffer") }} renvoie un {{domxref("Float32Array")}} contenant les données PCM associées au canal spécifié (0 correspondant au premier canal).</p> +La méthode `getChannelData() `de l'interface {{ domxref("AudioBuffer") }} renvoie un {{domxref("Float32Array")}} contenant les données PCM associées au canal spécifié (0 correspondant au premier canal). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); -var tampon = tableauDonnees.getChannelData(canal);</pre> +```js +var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); +var tampon = tableauDonnees.getChannelData(canal); +``` -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un {{domxref("Float32Array")}}.</p> +Un {{domxref("Float32Array")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Dans l'exemple suivant crée un buffer de 2 secondes, le remplit avec du bruit blanc puis le lit via un {{ domxref("AudioBufferSourceNode") }}. Vous pouvez aussi <a href="http://mdn.github.io/audio-buffer/">exécuter le code</a>, or <a href="https://github.com/mdn/audio-buffer">voir le code source</a>.</p> +Dans l'exemple suivant crée un buffer de 2 secondes, le remplit avec du bruit blanc puis le lit via un {{ domxref("AudioBufferSourceNode") }}. Vous pouvez aussi [exécuter le code](http://mdn.github.io/audio-buffer/), or [voir le code source](https://github.com/mdn/audio-buffer). -<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +```js +var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var bouton = document.querySelector('button'); var preformate = document.querySelector('pre'); var monScript = document.querySelector('script'); @@ -38,10 +41,10 @@ var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, cont bouton.onclick = function() { // remplit la mémoire tampon avec du bruit blanc // valeurs aléatoires entre -1.0 et 1.0 - for (var canal = 0; canal < nombreCanaux; canal++) { + for (var canal = 0; canal < nombreCanaux; canal++) { // génère le tableau contenant les données var tampon = tableauDonnees.getChannelData(canal); - for (var i = 0; i < nombreFrames; i++) { + for (var i = 0; i < nombreFrames; i++) { // Math.random() donne une valeur comprise entre [0; 1.0] // l'audio doit être compris entre [-1.0; 1.0] tampon[i] = Math.random() * 2 - 1; @@ -61,38 +64,24 @@ bouton.onclick = function() { // lance la lecture du so source.start(); -}</pre> +} +``` -<h2 id="Paramètres">Paramètres</h2> +## Paramètres -<dl> - <dt>channel</dt> - <dd>The channel property is an index representing the particular channel to get data for. An index value of 0 represents the first channel. If the <code>channel</code> index value is greater than of equal to {{domxref("AudioBuffer.numberOfChannels")}}, an <code>INDEX_SIZE_ERR</code> exception will be thrown.</dd> -</dl> +- channel + - : The channel property is an index representing the particular channel to get data for. An index value of 0 represents the first channel. If the `channel` index value is greater than of equal to {{domxref("AudioBuffer.numberOfChannels")}}, an `INDEX_SIZE_ERR` exception will be thrown. -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}} | {{Spec2('Web Audio API')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.AudioBuffer.getChannelData")}}</p> +{{Compat("api.AudioBuffer.getChannelData")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffer/index.md b/files/fr/web/api/audiobuffer/index.md index faa4f0f309..b914ca7a11 100644 --- a/files/fr/web/api/audiobuffer/index.md +++ b/files/fr/web/api/audiobuffer/index.md @@ -8,48 +8,43 @@ tags: - Web Audio API translation_of: Web/API/AudioBuffer --- -<p>{{APIRef("Web Audio API")}}</p> +{{APIRef("Web Audio API")}} -<p>L'interface AudioBuffer représente une ressource audio stockée en mémoire, créée à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes avec {{ domxref("AudioContext.createBuffer()") }}. Une fois mises en mémoire dans un AudioBuffer, les données audio sont transférées dans un {{ domxref("AudioBufferSourceNode") }} afin d'être lues.<br> - <br> - Ce type d'objet est conçu pour contenir de petit extraits audio, durant généralement moins de 45s. Pour les sons plus longs, les objets implémentant {{domxref ("MediaAudioElementSourceNode")}} sont plus adaptés. La mémoire tampon contient des données au format non entrelacé IEEE 32-bit PCM linéaire, avec une portée nominale comprise entre -1 et +1. S'il y a plusieurs canaux, ils sont stockés dans des mémoires-tampon distinctes.</p> +L'interface AudioBuffer représente une ressource audio stockée en mémoire, créée à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes avec {{ domxref("AudioContext.createBuffer()") }}. Une fois mises en mémoire dans un AudioBuffer, les données audio sont transférées dans un {{ domxref("AudioBufferSourceNode") }} afin d'être lues. -<h2 id="Constructeur">Constructeur</h2> +Ce type d'objet est conçu pour contenir de petit extraits audio, durant généralement moins de 45s. Pour les sons plus longs, les objets implémentant {{domxref ("MediaAudioElementSourceNode")}} sont plus adaptés. La mémoire tampon contient des données au format non entrelacé IEEE 32-bit PCM linéaire, avec une portée nominale comprise entre -1 et +1. S'il y a plusieurs canaux, ils sont stockés dans des mémoires-tampon distinctes. -<dl> - <dt>{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}</dt> - <dd>Crée et retourne un nouvel objet <code>AudioBuffer</code>.</dd> -</dl> +## Constructeur -<h2 id="Propriétés">Propriétés</h2> +- {{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}} + - : Crée et retourne un nouvel objet `AudioBuffer`. -<dl> - <dt>{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}</dt> - <dd>Retourne un nombre flottant qui représente la fréquence d'échantillonnage, en échantillons par seconde, des données PCM stockées dans la mémoire tampon.</dd> - <dt>{{domxref("AudioBuffer.length")}} {{readonlyInline}}</dt> - <dd>Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon.</dd> - <dt>{{domxref("AudioBuffer.duration")}} {{readonlyInline}}</dt> - <dd>Retourne un nombre à virgule flottante de double précision qui représente la durée, exprimée en secondes, des données PCM stockées dans la mémoire tampon.</dd> - <dt>{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}</dt> - <dd>Retourne un nombre entier qui représente le nombre de canaux audio discrets décrits par les données PCM stockées dans la mémoire tampon.</dd> -</dl> +## Propriétés -<h2 id="Méthodes">Méthodes</h2> +- {{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}} + - : Retourne un nombre flottant qui représente la fréquence d'échantillonnage, en échantillons par seconde, des données PCM stockées dans la mémoire tampon. +- {{domxref("AudioBuffer.length")}} {{readonlyInline}} + - : Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon. +- {{domxref("AudioBuffer.duration")}} {{readonlyInline}} + - : Retourne un nombre à virgule flottante de double précision qui représente la durée, exprimée en secondes, des données PCM stockées dans la mémoire tampon. +- {{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}} + - : Retourne un nombre entier qui représente le nombre de canaux audio discrets décrits par les données PCM stockées dans la mémoire tampon. -<dl> - <dt>{{domxref("AudioBuffer.getChannelData()")}}</dt> - <dd>Retourne un {{domxref ("Float32Array")}} contenant les données PCM associés au canal, défini par l'index du canal (0 représentant le premier canal).</dd> - <dt>{{domxref("AudioBuffer.copyFromChannel()")}}</dt> - <dd>Copie les échantillons du canal associé à <code>AudioBuffer</code> dans un tableau de destination.</dd> - <dt>{{domxref("AudioBuffer.copyToChannel()")}}</dt> - <dd>Copie les échantillons dans le canal associé à <code>AudioBuffer</code>, depuis le tableau <code>source</code>.</dd> -</dl> +## Méthodes -<h2 id="Exemple">Exemple</h2> +- {{domxref("AudioBuffer.getChannelData()")}} + - : Retourne un {{domxref ("Float32Array")}} contenant les données PCM associés au canal, défini par l'index du canal (0 représentant le premier canal). +- {{domxref("AudioBuffer.copyFromChannel()")}} + - : Copie les échantillons du canal associé à `AudioBuffer` dans un tableau de destination. +- {{domxref("AudioBuffer.copyToChannel()")}} + - : Copie les échantillons dans le canal associé à `AudioBuffer`, depuis le tableau `source`. -<p>L'exemple suivant montre comment créer un <code>AudioBuffer</code> et le remplir avec du bruit blanc. Le code source est disponible sur notre repo <a href="https://github.com/mdn/audio-buffer">audio-buffer demo</a>; une <a href="http://mdn.github.io/audio-buffer/">version live</a> est également consultable.</p> +## Exemple -<pre class="brush: js">// Stéréo +L'exemple suivant montre comment créer un `AudioBuffer` et le remplir avec du bruit blanc. Le code source est disponible sur notre repo [audio-buffer demo](https://github.com/mdn/audio-buffer); une [version live](http://mdn.github.io/audio-buffer/) est également consultable. + +```js +// Stéréo var nombreCanaux = 2; // Crée une mémoire tampon vide de 2 secondes @@ -60,10 +55,10 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA bouton.onclick = function() { // remplit la mémoire tampon avec du bruit blanc // valeurs aléatoires entre -1.0 et 1.0 - for (var canal = 0; canal < nombreCanaux; canal++) { + for (var canal = 0; canal < nombreCanaux; canal++) { // génère le tableau contenant les données var tampon = tableauDonnees.getChannelData(canal); - for (var i = 0; i < nombreFrames; i++) { + for (var i = 0; i < nombreFrames; i++) { // Math.random() donne une valeur comprise entre [0; 1.0] // l'audio doit être compris entre [-1.0; 1.0] tampon[i] = Math.random() * 2 - 1; @@ -84,31 +79,19 @@ bouton.onclick = function() { // lance la lecture du so source.start(); -}</pre> +} +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#AudioBuffer-section', 'AudioBuffer')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName('Web Audio API', '#AudioBuffer-section', 'AudioBuffer')}} | {{Spec2('Web Audio API')}} | Définition initiale | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.AudioBuffer")}}</p> +{{Compat("api.AudioBuffer")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffer/length/index.md b/files/fr/web/api/audiobuffer/length/index.md index f61ff06e0d..eae0885d58 100644 --- a/files/fr/web/api/audiobuffer/length/index.md +++ b/files/fr/web/api/audiobuffer/length/index.md @@ -3,25 +3,25 @@ title: AudioBuffer.length slug: Web/API/AudioBuffer/length translation_of: Web/API/AudioBuffer/length --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<div> -<p>La propriété <code>length</code> de l'interface {{ domxref("AudioBuffer") }} renvoie un entier représentant la longueur, en trames d'échantillonage, des données PCM stockées dans la mémoire-tampon.</p> -</div> +La propriété `length` de l'interface {{ domxref("AudioBuffer") }} renvoie un entier représentant la longueur, en trames d'échantillonage, des données PCM stockées dans la mémoire-tampon. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var tableauMemoireTampon = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); +```js +var tableauMemoireTampon = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); tableauMemoireTampon.length; -</pre> +``` -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un nombre entier.</p> +Un nombre entier. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">// Stereo +```js +// Stereo var nombreCanaux = 2; // Crée une mémoire tampon vide de 2 secondes @@ -33,41 +33,29 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA bouton.onclick = function() { // remplit la mémoire tampon avec du bruit blanc // valeurs aléatoires entre -1.0 et 1.0 - for (var canal = 0; canal < nombreCanaux; canal++) { + for (var canal = 0; canal < nombreCanaux; canal++) { // génère le tableau contenant les données var tampon = tableauDonnees.getChannelData(canal); - for (var i = 0; i < nombreFrames; i++) { + for (var i = 0; i < nombreFrames; i++) { // Math.random() donne une valeur comprise entre [0; 1.0] // l'audio doit être compris entre [-1.0; 1.0] tampon[i] = Math.random() * 2 - 1; } } console.log(tableauDonnees.length); -}</pre> - -<h2 id="Spécification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<p>{{Compat("api.AudioBuffer.length")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +} +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité navigateurs + +{{Compat("api.AudioBuffer.length")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffer/numberofchannels/index.md b/files/fr/web/api/audiobuffer/numberofchannels/index.md index 470397e34d..0c7c2c1ced 100644 --- a/files/fr/web/api/audiobuffer/numberofchannels/index.md +++ b/files/fr/web/api/audiobuffer/numberofchannels/index.md @@ -3,25 +3,25 @@ title: AudioBuffer.numberOfChannels slug: Web/API/AudioBuffer/numberOfChannels translation_of: Web/API/AudioBuffer/numberOfChannels --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<div> -<p>La propriété <code>numberOfChannels</code> de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre entier représentant le nombre de canaux audio diiscrets décrits par les données PCM stockées dans la mémoire-tampon.</p> -</div> +La propriété `numberOfChannels` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre entier représentant le nombre de canaux audio diiscrets décrits par les données PCM stockées dans la mémoire-tampon. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); +```js +var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); tableauMemoireTampon.numberOfChannels; -</pre> +``` -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un nombre entier.</p> +Un nombre entier. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">// Stereo +```js +// Stereo var nombreCanaux = 2; // Crée une mémoire tampon vide de 2 secondes @@ -33,10 +33,10 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA bouton.onclick = function() { // remplit la mémoire tampon avec du bruit blanc // valeurs aléatoires entre -1.0 et 1.0 - for (var canal = 0; canal < nombreCanaux; canal++) { + for (var canal = 0; canal < nombreCanaux; canal++) { // génère le tableau contenant les données var tampon = tableauDonnees.getChannelData(canal); - for (var i = 0; i < nombreFrames; i++) { + for (var i = 0; i < nombreFrames; i++) { // Math.random() donne une valeur comprise entre [0; 1.0] // l'audio doit être compris entre [-1.0; 1.0] tampon[i] = Math.random() * 2 - 1; @@ -44,31 +44,18 @@ bouton.onclick = function() { } console.log(tableauDonnees.numberOfChannels); } -</pre> - -<h2 id="Spécification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<p>{{Compat("api.AudioBuffer.numberOfChannels")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité navigateurs + +{{Compat("api.AudioBuffer.numberOfChannels")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffer/samplerate/index.md b/files/fr/web/api/audiobuffer/samplerate/index.md index 79e2abb6d2..7992a06828 100644 --- a/files/fr/web/api/audiobuffer/samplerate/index.md +++ b/files/fr/web/api/audiobuffer/samplerate/index.md @@ -3,25 +3,25 @@ title: AudioBuffer.sampleRate slug: Web/API/AudioBuffer/sampleRate translation_of: Web/API/AudioBuffer/sampleRate --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<div> -<p>La propriété <code>sampleRate</code> de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon.</p> -</div> +La propriété `sampleRate` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); +```js +var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); tableauMemoireTampon.sampleRate; -</pre> +``` -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un nombre à virgule flottante indiquant le taux d'échantillonnage actuelle des données du tampon, en echantillonnage par seconde.</p> +Un nombre à virgule flottante indiquant le taux d'échantillonnage actuelle des données du tampon, en echantillonnage par seconde. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">// Stereo +```js +// Stereo var nombreCanaux = 2; // Crée une mémoire tampon vide de 2 secondes @@ -33,10 +33,10 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA bouton.onclick = function() { // remplit la mémoire tampon avec du bruit blanc // valeurs aléatoires entre -1.0 et 1.0 - for (var canal = 0; canal < nombreCanaux; canal++) { + for (var canal = 0; canal < nombreCanaux; canal++) { // génère le tableau contenant les données var tampon = tableauDonnees.getChannelData(canal); - for (var i = 0; i < nombreFrames; i++) { + for (var i = 0; i < nombreFrames; i++) { // Math.random() donne une valeur comprise entre [0; 1.0] // l'audio doit être compris entre [-1.0; 1.0] tampon[i] = Math.random() * 2 - 1; @@ -44,31 +44,18 @@ bouton.onclick = function() { } console.log(tableauDonnees.sampleRate); } -</pre> - -<h2 id="Spécification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2> - -<p>{{Compat("api.AudioBuffer.sampleRate")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité des Navigateurs + +{{Compat("api.AudioBuffer.sampleRate")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffersourcenode/buffer/index.md b/files/fr/web/api/audiobuffersourcenode/buffer/index.md index 377e917158..81421a685b 100644 --- a/files/fr/web/api/audiobuffersourcenode/buffer/index.md +++ b/files/fr/web/api/audiobuffersourcenode/buffer/index.md @@ -3,36 +3,34 @@ title: AudioBufferSourceNode.buffer slug: Web/API/AudioBufferSourceNode/buffer translation_of: Web/API/AudioBufferSourceNode/buffer --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<p>La propriété <code><strong>buffer</strong></code> de l'interface {{ domxref("AudioBufferSourceNode") }} donne la possibilité de lire un son en utilisant un {{domxref("AudioBuffer")}} comme ressource audio.</p> +La propriété **`buffer`** de l'interface {{ domxref("AudioBufferSourceNode") }} donne la possibilité de lire un son en utilisant un {{domxref("AudioBuffer")}} comme ressource audio. -<p>Si la propriété <code>buffer</code> a la valeur NULL, elle définit un canal unique silencieux (chaque échantillon vaut 0).</p> +Si la propriété `buffer` a la valeur NULL, elle définit un canal unique silencieux (chaque échantillon vaut 0). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>AudioBufferSourceNode</em>.buffer = <em>soundBuffer</em>; -</pre> + AudioBufferSourceNode.buffer = soundBuffer; -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un {{domxref("AudioBuffer")}} qui contient les données représentant le son que le noeud va lire.</p> +Un {{domxref("AudioBuffer")}} qui contient les données représentant le son que le noeud va lire. -<h2 id="Exemple">Exemple</h2> +## Exemple -<div class="note"> -<p><strong>Note :</strong> Pour un exemple complet, voir <a href="http://mdn.github.io/audio-buffer/">le code interprété</a>, ou <a href="https://github.com/mdn/audio-buffer">le code source</a>.</p> -</div> +> **Note :** Pour un exemple complet, voir [le code interprété](http://mdn.github.io/audio-buffer/), ou [le code source](https://github.com/mdn/audio-buffer). -<pre class="brush: js">var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate); +```js +var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate); button.onclick = function() { // Remplit le buffer avec du bruit blanc; // valeurs aléatoires entre -1.0 et 1.0 - for (var channel = 0; channel < channels; channel++) { + for (var channel = 0; channel < channels; channel++) { // Crée le ArrayBuffer qui contient effectivement les données var nowBuffering = myArrayBuffer.getChannelData(channel); - for (var i = 0; i < frameCount; i++) { + for (var i = 0; i < frameCount; i++) { // Math.random() is in [0; 1.0] // audio doit être compris entre [-1.0; 1.0] nowBuffering[i] = Math.random() * 2 - 1; @@ -43,31 +41,19 @@ button.onclick = function() { // C'est le AudioNode à utiliser pour jouer un AudioBuffer var source = audioCtx.createBufferSource(); // Définit le buffer dans l'AudioBufferSourceNode - source.buffer = myArrayBuffer;</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Web Audio API", "#widl-AudioBufferSourceNode-buffer", "buffer")}}</td> - <td>{{Spec2("Web Audio API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<p>{{Compat("api.AudioBufferSourceNode.buffer")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<p>{{page("/en-US/docs/Web/API/AudioBufferSourceNode","See_also")}}</p> + source.buffer = myArrayBuffer; +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName("Web Audio API", "#widl-AudioBufferSourceNode-buffer", "buffer")}} | {{Spec2("Web Audio API")}} | Définition initiale | + +## Compatibilité navigateurs + +{{Compat("api.AudioBufferSourceNode.buffer")}} + +## Voir aussi + +{{page("/en-US/docs/Web/API/AudioBufferSourceNode","See_also")}} diff --git a/files/fr/web/api/audiobuffersourcenode/detune/index.md b/files/fr/web/api/audiobuffersourcenode/detune/index.md index bb352ab774..457bab06ba 100644 --- a/files/fr/web/api/audiobuffersourcenode/detune/index.md +++ b/files/fr/web/api/audiobuffersourcenode/detune/index.md @@ -8,37 +8,38 @@ tags: - Web Audio API translation_of: Web/API/AudioBufferSourceNode/detune --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<p>La propriété <code>detune</code> de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a> représentant le désaccord des oscillations en <a href="http://en.wikipedia.org/wiki/Cent_%28music%29">cents</a>.</p> +La propriété `detune` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccord des oscillations en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). -<p>Ses valeur sont comprises entre -1200 et 1200.</p> +Ses valeur sont comprises entre -1200 et 1200. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var source = contexteAudio.createBufferSource(); -source.detune.value = 100; // valeur en cents</pre> +```js +var source = contexteAudio.createBufferSource(); +source.detune.value = 100; // valeur en cents +``` -<div class="note"> -<p><strong>Note:</strong> bien que l'<code>AudioParam</code> renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.</p> -</div> +> **Note :** bien que l'`AudioParam` renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas. -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un {{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a>.</p> +Un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate). -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">var audioCtx = new AudioContext(); +```js +var audioCtx = new AudioContext(); var nbChan = 2; var nbFrames = audioCtx.sampleRate * 2.0; var audioBuffer = audioCtx.createBuffer(nbChan, nbFrames, audioCtx.sampleRate); -for (var chan = 0; chan < nbChan; chan++) { +for (var chan = 0; chan < nbChan; chan++) { var chanData = audioBuffer.getChannelData(chan); - for (var i = 0; i < nbFrames; i++) { + for (var i = 0; i < nbFrames; i++) { chanData[i] = Math.random() * 2 - 1; } } @@ -48,33 +49,18 @@ source.buffer = audioBuffer; source.connect(audioCtx.destination); source.detune.value = 100; // valeur en cents source.start(); -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +``` -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Spécifications +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}} | {{Spec2('Web Audio API')}} | | +## Compatibilité navigateurs -<p>{{Compat("api.AudioBufferSourceNode.detune")}}</p> +{{Compat("api.AudioBufferSourceNode.detune")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffersourcenode/index.md b/files/fr/web/api/audiobuffersourcenode/index.md index ce90a90902..0942b127dd 100644 --- a/files/fr/web/api/audiobuffersourcenode/index.md +++ b/files/fr/web/api/audiobuffersourcenode/index.md @@ -9,81 +9,75 @@ tags: - Web Audio API translation_of: Web/API/AudioBufferSourceNode --- -<p>{{APIRef("Web Audio API")}}</p> +{{APIRef("Web Audio API")}} -<p>L'interface <strong>AudioBufferSourceNode</strong> est un {{domxref("AudioScheduledSourceNode")}} qui représente une source audio constituée de données audio en mémoire, stockées dans un {{domxref ("AudioBuffer")}}. Elle est particulièrement utile pour lire des sons qui requierrent des conditions de lecture particulières, comme la synchronisation sur un certain rythme, et peuvent être stockés en mémoire. Si ce type de son doit être lu depuis le disque ou le réseau, il conviendra d'utiliser un {{domxref("AudioWorkletNode")}}.</p> +L'interface **AudioBufferSourceNode** est un {{domxref("AudioScheduledSourceNode")}} qui représente une source audio constituée de données audio en mémoire, stockées dans un {{domxref ("AudioBuffer")}}. Elle est particulièrement utile pour lire des sons qui requierrent des conditions de lecture particulières, comme la synchronisation sur un certain rythme, et peuvent être stockés en mémoire. Si ce type de son doit être lu depuis le disque ou le réseau, il conviendra d'utiliser un {{domxref("AudioWorkletNode")}}. -<p>{{InheritanceDiagram}}</p> +{{InheritanceDiagram}} -<p>Un AudioBufferSourceNode n'a pas d'entrée et il comporte une unique sortie, dont le nombre de canaux est spécifié par la propriété {{domxref("AudioBufferSourceNode.buffer", "buffer")}}. Si aucun buffer n'est paramétré, c'est-à-dire si la valeur de l'attribut est NULL, la sortie contient un seul canal silencieux (chaque échantillon vaut 0).</p> +Un AudioBufferSourceNode n'a pas d'entrée et il comporte une unique sortie, dont le nombre de canaux est spécifié par la propriété {{domxref("AudioBufferSourceNode.buffer", "buffer")}}. Si aucun buffer n'est paramétré, c'est-à-dire si la valeur de l'attribut est NULL, la sortie contient un seul canal silencieux (chaque échantillon vaut 0). -<p><br> - Un {{domxref("AudioBufferSourceNode")}} ne peut être joué qu'une seule fois; autrement dit un seul appel à la fonction <code>AudioBufferSourceNode.start()</code> est autorisé. Pour rejouer le son, il faut créer un nouvel <code>AudioBufferSourceNode</code>. Heureusement ces noeuds ne demandent pas beaucoup de ressource, et les véritables <code>AudioBuffer</code>s peuvent être réutilisés. On dit que les <code>AudioBufferSourceNode</code>s doivent être utilisés en mode "one shot": une fois que la lecture est lancée, toutes les références peuvent être supprimées, et elles seront collectées par le ramasse-miette automatiquement quand la lecture des sons sera terminée.</p> +Un {{domxref("AudioBufferSourceNode")}} ne peut être joué qu'une seule fois; autrement dit un seul appel à la fonction `AudioBufferSourceNode.start()` est autorisé. Pour rejouer le son, il faut créer un nouvel `AudioBufferSourceNode`. Heureusement ces noeuds ne demandent pas beaucoup de ressource, et les véritables `AudioBuffer`s peuvent être réutilisés. On dit que les `AudioBufferSourceNode`s doivent être utilisés en mode "one shot": une fois que la lecture est lancée, toutes les références peuvent être supprimées, et elles seront collectées par le ramasse-miette automatiquement quand la lecture des sons sera terminée. -<p>Plusieurs appels à la fonction <code>AudioBufferSourceNode.stop()</code> sont autorisés. Le dernier appel remplace le précédent, à condition que le <code>AudioBufferSourceNode </code>n'ait pas déjà atteint la fin du buffer.</p> +Plusieurs appels à la fonction `AudioBufferSourceNode.stop()` sont autorisés. Le dernier appel remplace le précédent, à condition que le `AudioBufferSourceNode `n'ait pas déjà atteint la fin du buffer. -<p><img alt="L'objet AudioBufferSourceNode prend le contenu d'un AudioBuffer et le convertit en audio" src="webaudioaudiobuffersourcenode.png"></p> + <table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn>Nombre d'entrées</dfn></th> - <td><code>0</code></td> - </tr> - <tr> - <th scope="row"><dfn>Nombre de sorties</dfn></th> - <td><code>1</code></td> - </tr> - <tr> - <th scope="row"><dfn>Nombre de canaux</dfn></th> - <td>défini par l'objet {{domxref("AudioBuffer")}} associé</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"><dfn>Nombre d'entrées</dfn></th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row"><dfn>Nombre de sorties</dfn></th> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row"><dfn>Nombre de canaux</dfn></th> + <td>défini par l'objet {{domxref("AudioBuffer")}} associé</td> + </tr> + </tbody> </table> -<h2 id="Constructeur">Constructeur</h2> +## Constructeur -<dl> - <dt>{{domxref("AudioBufferSourceNode.AudioBufferSourceNode", "AudioBufferSourceNode()")}}</dt> - <dd>Crée et retourne un nouvel objet <code>AudioBufferSourceNode</code>. Un {{domxref("AudioBufferSourceNode")}} peut être instancié à l'aide la méthode {{domxref("AudioContext.createBufferSource()")}}.</dd> -</dl> +- {{domxref("AudioBufferSourceNode.AudioBufferSourceNode", "AudioBufferSourceNode()")}} + - : Crée et retourne un nouvel objet `AudioBufferSourceNode`. Un {{domxref("AudioBufferSourceNode")}} peut être instancié à l'aide la méthode {{domxref("AudioContext.createBufferSource()")}}. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>Hérite des propriétés de son parent, {{domxref("AudioNode")}}.</em></p> +_Hérite des propriétés de son parent, {{domxref("AudioNode")}}._ -<dl> - <dt>{{domxref("AudioBufferSourceNode.buffer")}}</dt> - <dd>{{domxref ("AudioBuffer")}} qui définit la ressource à jouer; lorsqu'il a la valeur NULL, définit un canal unique silencieux (dans lequel chaque échantillon vaut 0.0).</dd> - <dt>{{domxref("AudioBufferSourceNode.detune")}}</dt> - <dd>{{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a> représentant le désaccordage de la fréquence exprimé en <a href="http://en.wikipedia.org/wiki/Cent_%28music%29">cents</a>. Cette valeur est composée à partir du <code>playbackRate</code> pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est <code>0</code> (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞.</dd> - <dt>{{domxref("AudioBufferSourceNode.loop")}}</dt> - <dd>Attribut booléen indiquant si la ressource doit être lue de nouveau lorsque la fin de l'{{domxref ("AudioBuffer")}} est atteinte. Sa valeur par défaut est <code>false</code>.</dd> - <dt>{{domxref("AudioBufferSourceNode.loopStart")}} {{optional_inline}}</dt> - <dd>Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la lecture doit reprendre. Sa valeur par défaut est 0.</dd> - <dt>{{domxref("AudioBufferSourceNode.loopEnd")}} {{optional_inline}}</dt> - <dd>Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la relecture doit s'arrêter (et éventuellement boucler à nouveau). Sa valeur par défaut est 0.</dd> - <dt>{{domxref("AudioBufferSourceNode.playbackRate")}}</dt> - <dd>{{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> qui définit le facteur de vitesse à laquelle la ressource audio sera jouée. Comme aucune correction de pitch n'est appliquée sur la sortie, il peut être utilisé pour modifier le pitch de l'échantillon.</dd> -</dl> +- {{domxref("AudioBufferSourceNode.buffer")}} + - : {{domxref ("AudioBuffer")}} qui définit la ressource à jouer; lorsqu'il a la valeur NULL, définit un canal unique silencieux (dans lequel chaque échantillon vaut 0.0). +- {{domxref("AudioBufferSourceNode.detune")}} + - : {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccordage de la fréquence exprimé en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). Cette valeur est composée à partir du `playbackRate` pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est `0` (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞. +- {{domxref("AudioBufferSourceNode.loop")}} + - : Attribut booléen indiquant si la ressource doit être lue de nouveau lorsque la fin de l'{{domxref ("AudioBuffer")}} est atteinte. Sa valeur par défaut est `false`. +- {{domxref("AudioBufferSourceNode.loopStart")}} {{optional_inline}} + - : Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la lecture doit reprendre. Sa valeur par défaut est 0. +- {{domxref("AudioBufferSourceNode.loopEnd")}} {{optional_inline}} + - : Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la relecture doit s'arrêter (et éventuellement boucler à nouveau). Sa valeur par défaut est 0. +- {{domxref("AudioBufferSourceNode.playbackRate")}} + - : {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) qui définit le facteur de vitesse à laquelle la ressource audio sera jouée. Comme aucune correction de pitch n'est appliquée sur la sortie, il peut être utilisé pour modifier le pitch de l'échantillon. -<h3 id="Gestionnaires_d'évènement">Gestionnaires d'évènement</h3> +### Gestionnaires d'évènement -<p><em>Hérite des gestionnaires d'évènement de son parent, {{domxref("AudioScheduledSourceNode")}}</em>.</p> +_Hérite des gestionnaires d'évènement de son parent, {{domxref("AudioScheduledSourceNode")}}_. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p><em>Hérite des méthodes de son parent, {{domxref("AudioNode")}}.</em></p> +_Hérite des méthodes de son parent, {{domxref("AudioNode")}}._ -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Cet exemple crée un tampon de deux secondes, le remplit avec du bruit blanc et le joue par l'intermédiaire d'un <code>AudioBufferSourceNode</code>.</p> +Cet exemple crée un tampon de deux secondes, le remplit avec du bruit blanc et le joue par l'intermédiaire d'un `AudioBufferSourceNode`. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez aussi <a href="http://mdn.github.io/audio-buffer/">exécuter the code</a>, ou <a href="https://github.com/mdn/audio-buffer">regarder le code source</a>.</p> -</div> +> **Note :** Vous pouvez aussi [exécuter the code](http://mdn.github.io/audio-buffer/), ou [regarder le code source](https://github.com/mdn/audio-buffer). -<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +```js +var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var bouton = document.querySelector('button'); var pre = document.querySelector('pre'); var monScript = document.querySelector('script'); @@ -102,10 +96,10 @@ var myArrayBuffer = contexteAudio.createBuffer(2, compteurTrames, contexteAudio. bouton.onclick = function() { // remplit le tampon avec du bruit blanc; // valeurs aléatoires entre -1.0 et 1.0 - for (var canal = 0; canal < canaux; canal++) { + for (var canal = 0; canal < canaux; canal++) { // crée le ArrayBuffer qui contient les données var nowBuffering = myArrayBuffer.getChannelData(canal); - for (var i = 0; i < compteurTrames; i++) { + for (var i = 0; i < compteurTrames; i++) { // Math.random() est compris entre [0; 1.0] // audio doit être compris entre [-1.0; 1.0] nowBuffering[i] = Math.random() * 2 - 1; @@ -122,35 +116,21 @@ bouton.onclick = function() { source.connect(contexteAudio.destination); // lance la lecture de la source source.start(); -}</pre> - -<div class="note"> -<p><strong>Note :</strong> Pour un exemple de <code>decodeAudioData</code>(), voir la page {{domxref("AudioContext.decodeAudioData")}}.</p> -</div> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#AudioBufferSourceNode-section', 'AudioBufferSourceNode')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td></td> - </tr> - </tbody> -</table> +} +``` + +> **Note :** Pour un exemple de `decodeAudioData`(), voir la page {{domxref("AudioContext.decodeAudioData")}}. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#AudioBufferSourceNode-section', 'AudioBufferSourceNode')}} | {{Spec2('Web Audio API')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<div>{{Compat("api.AudioBufferSourceNode")}}</div> +{{Compat("api.AudioBufferSourceNode")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffersourcenode/loop/index.md b/files/fr/web/api/audiobuffersourcenode/loop/index.md index 739e46de9c..7238b300f4 100644 --- a/files/fr/web/api/audiobuffersourcenode/loop/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loop/index.md @@ -9,35 +9,33 @@ tags: - Web Audio API translation_of: Web/API/AudioBufferSourceNode/loop --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<div> -<p>La propriété <code>loop</code> de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}.</p> -</div> +La propriété `loop` de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}. -<p>La valeur par défaut de la propriété <code>loop </code>est <code>false</code>.</p> +La valeur par défaut de la propriété `loop `est `false`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var source = audioCtx.createBufferSource(); +```js +var source = audioCtx.createBufferSource(); source.loop = true; -</pre> +``` -<h3 id="Value">Value</h3> +### Value -<p>Un booléen.</p> +Un booléen. -<p>Lorsque la lecture en boucle est activée, le son commence à jouer au point spécifié lorsque {{domxref("AudioBufferSourceNode.start", "start()")}} est appelée. Quand il atteint le point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}, il recommence au point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}</p> +Lorsque la lecture en boucle est activée, le son commence à jouer au point spécifié lorsque {{domxref("AudioBufferSourceNode.start", "start()")}} est appelée. Quand il atteint le point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}, il recommence au point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}} -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de <code>playbackRate</code> en temps réel. Quand la lecture est terminée, elle boucle.</p> +Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de `playbackRate` en temps réel. Quand la lecture est terminée, elle boucle. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez <a href="http://mdn.github.io/decode-audio-data/">essayer un exemple live</a> (or <a href="https://github.com/mdn/decode-audio-data">voir la source</a>.)</p> -</div> +> **Note :** Vous pouvez [essayer un exemple live](http://mdn.github.io/decode-audio-data/) (or [voir la source](https://github.com/mdn/decode-audio-data).) -<pre class="brush: js">function getData() { +```js +function getData() { source = audioCtx.createBufferSource(); request = new XMLHttpRequest(); @@ -70,31 +68,19 @@ play.onclick = function() { source.start(0); play.setAttribute('disabled', 'disabled'); playbackControl.removeAttribute('disabled'); -}</pre> - -<h2 id="Spécification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<p>{{Compat("api.AudioBufferSourceNode.loop")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +} +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité navigateurs + +{{Compat("api.AudioBufferSourceNode.loop")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffersourcenode/loopend/index.md b/files/fr/web/api/audiobuffersourcenode/loopend/index.md index c580e48ecb..b9aa87e87a 100644 --- a/files/fr/web/api/audiobuffersourcenode/loopend/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loopend/index.md @@ -10,31 +10,31 @@ tags: - Web Audio API translation_of: Web/API/AudioBufferSourceNode/loopEnd --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<p>La propriété <strong><code>loopEnd</code></strong> de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la relecture doit s'arrêter, et éventuellement boucler de nouveau en reprenant à la position indiquée par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}. Elle n'est prise en compte que si la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} vaut <code>true.</code></p> +La propriété **`loopEnd`** de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la relecture doit s'arrêter, et éventuellement boucler de nouveau en reprenant à la position indiquée par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}. Elle n'est prise en compte que si la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} vaut `true.` -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var source = contexteAudio.createBufferSource(); +```js +var source = contexteAudio.createBufferSource(); source.loopEnd = 3; -</pre> +``` -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un nombre flottant à double précision. La valeur par défaut est <code>0</code>.</p> +Un nombre flottant à double précision. La valeur par défaut est `0`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés <code>playbackRate</code>, <code>loopStart</code> et <code>loopEnd</code> à la volée.</p> +Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés `playbackRate`, `loopStart` et `loopEnd` à la volée. -<p>Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant <code>loopStart</code> et <code>loopEnd</code>. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.</p> +Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant `loopStart` et `loopEnd`. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau. -<div class="note"> -<p><strong>Note :</strong> Voir <a href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a href="https://github.com/mdn/decode-audio-data">son code source</a>.</p> -</div> +> **Note :** Voir [l'exemple complet](http://mdn.github.io/decode-audio-data/) et [son code source](https://github.com/mdn/decode-audio-data). -<pre class="brush: js">function getData() { +```js +function getData() { source = contexteAudio.createBufferSource(); requete = new XMLHttpRequest(); @@ -75,31 +75,19 @@ loopstartControl.oninput = function() { loopendControl.oninput = function() { source.loopEnd = loopendControl.value; loopendValue.innerHTML = loopendControl.value; -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.AudioBufferSourceNode.loopEnd")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +} +``` + +## Spécifications + +| Spécification | Statut | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.AudioBufferSourceNode.loopEnd")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md index 11a5b2165e..c5455f647e 100644 --- a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md @@ -3,30 +3,30 @@ title: AudioBufferSourceNode.loopStart slug: Web/API/AudioBufferSourceNode/loopStart translation_of: Web/API/AudioBufferSourceNode/loopStart --- -<p>{{ APIRef("Web Audio API") }}<br> - La propriété <code>loopStart</code> de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la lecture doit reprendre lors d'une boucle. Elle n'est prise en compte que lorque la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} est <code>true</code>.</p> +{{ APIRef("Web Audio API") }} +La propriété `loopStart` de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la lecture doit reprendre lors d'une boucle. Elle n'est prise en compte que lorque la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} est `true`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var source = contexteAudio.createBufferSource(); +```js +var source = contexteAudio.createBufferSource(); source.loopStart = 3; -</pre> +``` -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un nombre flottant à double précision. La valeur par défaut est <code>0</code>.</p> +Un nombre flottant à double précision. La valeur par défaut est `0`. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés <code>playbackRate</code>, <code>loopStart</code> et <code>loopEnd</code> à la volée.</p> +Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés `playbackRate`, `loopStart` et `loopEnd` à la volée. -<p>Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant <code>loopStart</code> et <code>loopEnd</code>. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.</p> +Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant `loopStart` et `loopEnd`. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau. -<div class="note"> -<p><strong>Note :</strong> Voir <a href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a href="https://github.com/mdn/decode-audio-data">son code source</a>.</p> -</div> +> **Note :** Voir [ l'exemple complet](http://mdn.github.io/decode-audio-data/) et [son code source](https://github.com/mdn/decode-audio-data). -<pre class="brush: js">function getData() { +```js +function getData() { source = contexteAudio.createBufferSource(); requete = new XMLHttpRequest(); @@ -67,31 +67,19 @@ loopstartControl.oninput = function() { loopendControl.oninput = function() { source.loopEnd = loopendControl.value; loopendValue.innerHTML = loopendControl.value; -}</pre> - -<h2 id="Spécification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<p>{{Compat("api.AudioBufferSourceNode.loopStart")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +} +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité navigateurs + +{{Compat("api.AudioBufferSourceNode.loopStart")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md index 5f13016165..ff1797b523 100644 --- a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md +++ b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md @@ -3,49 +3,44 @@ title: AudioBufferSourceNode.playbackRate slug: Web/API/AudioBufferSourceNode/playbackRate translation_of: Web/API/AudioBufferSourceNode/playbackRate --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<div> -<p>La propriété <code>playbackRate</code> de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type <a href="/en-US/docs/DOM/AudioParam#k-rate">k-rate</a> qui définit la vitesse à laquelle le contenu audio sera lu.</p> -</div> +La propriété `playbackRate` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/en-US/docs/DOM/AudioParam#k-rate) qui définit la vitesse à laquelle le contenu audio sera lu. -<p>Une valeur de 1.0 (c'est ) indique que le son doit être lu à la vitesse de son taux d'échantillonnage, une valeur inférieure qu'il doit être lu plus lentement, et une valeur supérieure plus rapidement. la valeur par défaut est <code>1.0</code>. Pour toute autre valeur l'<code>AudioBufferSourceNode</code> rééchantillone le son avant de l'envoyer vers la sortie.</p> +Une valeur de 1.0 (c'est ) indique que le son doit être lu à la vitesse de son taux d'échantillonnage, une valeur inférieure qu'il doit être lu plus lentement, et une valeur supérieure plus rapidement. la valeur par défaut est `1.0`. Pour toute autre valeur l'`AudioBufferSourceNode` rééchantillone le son avant de l'envoyer vers la sortie. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var source = contexteAudio.createBufferSource(); +```js +var source = contexteAudio.createBufferSource(); source.playbackRate.value = 1.25; // proportion : 25% plus rapide que la vitesse normale -</pre> +``` -<div class="note"> -<p><strong>Note :</strong> Bien que le <code>AudioParam</code> renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.</p> -</div> +> **Note :** Bien que le `AudioParam` renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas. -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un {{domxref("AudioParam")}} dont la {{domxref("AudioParam.value", "value")}} est un nombre flottant à double précision, qui représente la vitesse de lecture d'un son en proportion décimale du taux d'échantillonnage original.</p> +Un {{domxref("AudioParam")}} dont la {{domxref("AudioParam.value", "value")}} est un nombre flottant à double précision, qui représente la vitesse de lecture d'un son en proportion décimale du taux d'échantillonnage original. -<p>Considérons un buffer audio échantillonné à 44.1 kHz (44,100 échantillons par seconde). Observons l'effet de quelques valeurs de la propriété <code>playbackRate</code> :</p> +Considérons un buffer audio échantillonné à 44.1 kHz (44,100 échantillons par seconde). Observons l'effet de quelques valeurs de la propriété `playbackRate` : -<ul> - <li>un <code>playbackRate</code> de 1.0 entraîne une lecture à vitesse originale : 44,100 Hz.</li> - <li>un <code>playbackRate</code> de 0.5 entraîne une lecture à la moitié de la vitesse originale : 22,050 Hz.</li> - <li>un <code>playbackRate</code> de 2.0 entraîne une lecture au double de la vitesse originale : 88,200 Hz.</li> -</ul> +- un `playbackRate` de 1.0 entraîne une lecture à vitesse originale : 44,100 Hz. +- un `playbackRate` de 0.5 entraîne une lecture à la moitié de la vitesse originale : 22,050 Hz. +- un `playbackRate` de 2.0 entraîne une lecture au double de la vitesse originale : 88,200 Hz. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés <code>playbackRate</code>, <code>loopStart</code> et <code>loopEnd</code> à la volée.</p> +Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés `playbackRate`, `loopStart` et `loopEnd` à la volée. -<div class="note"> -<p><strong>Note :</strong> Voir <a href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a href="https://github.com/mdn/decode-audio-data">son code source</a>.</p> -</div> +> **Note :** Voir [ l'exemple complet](http://mdn.github.io/decode-audio-data/) et [son code source](https://github.com/mdn/decode-audio-data). -<pre class="brush: html"><input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1"> -<span class="playback-rate-value">1.0</span> -</pre> +```html +<input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1"> +<span class="playback-rate-value">1.0</span> +``` -<pre class="brush: js">function getData() { +```js +function getData() { source = contexteAudio.createBufferSource(); requete = new XMLHttpRequest(); @@ -94,31 +89,19 @@ stop.onclick = function() { playbackControl.oninput = function() { source.playbackRate.value = playbackControl.value; playbackValue.innerHTML = playbackControl.value; -}</pre> - -<h2 id="Spécification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<p>{{Compat("api.AudioBufferSourceNode.playbackRate")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +} +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité navigateurs + +{{Compat("api.AudioBufferSourceNode.playbackRate")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffersourcenode/start/index.md b/files/fr/web/api/audiobuffersourcenode/start/index.md index b07993659d..a8d0fbeee7 100644 --- a/files/fr/web/api/audiobuffersourcenode/start/index.md +++ b/files/fr/web/api/audiobuffersourcenode/start/index.md @@ -3,83 +3,62 @@ title: AudioBufferSourceNode.start() slug: Web/API/AudioBufferSourceNode/start translation_of: Web/API/AudioBufferSourceNode/start --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<div> -<p>La méthode <code>start()</code> de l'interface {{ domxref("AudioBufferSourceNode") }} permet de planifier la lecture du buffer audio.</p> -</div> +La méthode `start()` de l'interface {{ domxref("AudioBufferSourceNode") }} permet de planifier la lecture du buffer audio. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>AudioBufferSourceNode</em>.start([<em>when</em>][, <em>offset</em>][, <em>duration</em>]); -</pre> + AudioBufferSourceNode.start([when][, offset][, duration]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>when {{optional_inline}}</dt> - <dd>Le paramètre <code>when</code> indique <em>à quel moment</em> la lecture doit commencer. Si <code>when</code> représente une date passée, la lecture commence immédiatement. Si la méthode est invoquée plus d'une fois, ou après un appel à <code>AudioBufferSourceNode.stop()</code>, une exception est levée.<br> - Le temps, en secondes, auquel la lecture doit commencer, spécifié dans le même systèmes de coordonnées temporalles utilisé par {{domxref("AudioContext")}}. Si <code>when</code> est inférieur à ({{domxref("AudioContext.currentTime")}}, ou égal à 0, la lecture commence immédiatement. <strong>La valeur par défaut est 0.</strong></dd> - <dt>offset {{optional_inline}}</dt> - <dd>Décalage, en secondes, indiquant où la lecture doit commencer. Par example, pour lancer la lecture au milieu d'un son durant 10 secondes, l'<code>offset</code> doit être 5. La valeur par défaut, 0, démarre la lecture au début du buffer. Les valeurs supérieures à la fin du son sont silencieusement ajustées à la valeur maximum possible (basée sur les propriétés {{domxref("AudioBuffer.duration", "duration")}} et/ou {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}). Le calcul du décalage se fait en utilisant le taux d'échantillonnage original, donc même lorsqu'un son est lu au double de sa vitesse, le milieu d'un buffer de 10 secondes est toujours 5.</dd> - <dt>duration {{optional_inline}}</dt> - <dd>Le paramètre <code>duration</code>, dont la valeur par défaut est la longueur du contenu moins le décalage (offset) du début de lecture, indique la longueur du contenu audio qui doit être lue.<br> - Durée du son qui doit être lue, en secondes. Si ce paramètre n'est pas spécifié ou a pour valeur 0 (valeur par défaut), le son est lu jusqu'à la fin, s'il n'est pas arrêté par la méthode {{domxref("AudioScheduledSourceNode.stop", "stop()")}}. L'utilisation de ce paramètre est fonctionellement équivalente à l'appel de la méthode <code>start(when, offset)</code> suivi de la méthode <code>stop(when+duration)</code>.</dd> -</dl> +- when {{optional_inline}} + - : Le paramètre `when` indique _à quel moment_ la lecture doit commencer. Si `when` représente une date passée, la lecture commence immédiatement. Si la méthode est invoquée plus d'une fois, ou après un appel à `AudioBufferSourceNode.stop()`, une exception est levée. + Le temps, en secondes, auquel la lecture doit commencer, spécifié dans le même systèmes de coordonnées temporalles utilisé par {{domxref("AudioContext")}}. Si `when` est inférieur à ({{domxref("AudioContext.currentTime")}}, ou égal à 0, la lecture commence immédiatement. **La valeur par défaut est 0.** +- offset {{optional_inline}} + - : Décalage, en secondes, indiquant où la lecture doit commencer. Par example, pour lancer la lecture au milieu d'un son durant 10 secondes, l'`offset` doit être 5. La valeur par défaut, 0, démarre la lecture au début du buffer. Les valeurs supérieures à la fin du son sont silencieusement ajustées à la valeur maximum possible (basée sur les propriétés {{domxref("AudioBuffer.duration", "duration")}} et/ou {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}). Le calcul du décalage se fait en utilisant le taux d'échantillonnage original, donc même lorsqu'un son est lu au double de sa vitesse, le milieu d'un buffer de 10 secondes est toujours 5. +- duration {{optional_inline}} + - : Le paramètre `duration`, dont la valeur par défaut est la longueur du contenu moins le décalage (offset) du début de lecture, indique la longueur du contenu audio qui doit être lue. + Durée du son qui doit être lue, en secondes. Si ce paramètre n'est pas spécifié ou a pour valeur 0 (valeur par défaut), le son est lu jusqu'à la fin, s'il n'est pas arrêté par la méthode {{domxref("AudioScheduledSourceNode.stop", "stop()")}}. L'utilisation de ce paramètre est fonctionellement équivalente à l'appel de la méthode `start(when, offset)` suivi de la méthode `stop(when+duration)`. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>{{jsxref("undefined")}}.</p> +{{jsxref("undefined")}}. -<h3 id="Exceptions">Exceptions</h3> +### Exceptions -<dl> - <dt><code>TypeError</code></dt> - <dd>Une valeur négative a été spécifiée pour au moins l'un des trois paramètres de temps. N'essayez pas de trafiquer les lois de la physique.</dd> - <dt><code>InvalidStateError</code></dt> - <dd><code>start()</code> a déjà été appelé. Cette fonction ne peut être appelée qu'une seule fois pour chaque <code>AudioBufferSourceNode</code>.</dd> -</dl> +- `TypeError` + - : Une valeur négative a été spécifiée pour au moins l'un des trois paramètres de temps. N'essayez pas de trafiquer les lois de la physique. +- `InvalidStateError` + - : `start()` a déjà été appelé. Cette fonction ne peut être appelée qu'une seule fois pour chaque `AudioBufferSourceNode`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>L'exemple le plus simple lance la lecture du buffer audio depuis le début - inutile de spécifier des paramètres dans ce cas:</p> +L'exemple le plus simple lance la lecture du buffer audio depuis le début - inutile de spécifier des paramètres dans ce cas: -<pre class="brush: js">source.start();</pre> +```js +source.start(); +``` -<p>L'exemple suivant, plus complexe, jouera, après une seconde de pause, un tronçon d'une durée de 10 secondes à partir de la 3ème seconde des données en mémoire.</p> +L'exemple suivant, plus complexe, jouera, après une seconde de pause, un tronçon d'une durée de 10 secondes à partir de la 3ème seconde des données en mémoire. -<pre class="brush: js">source.start(contexteAudio.currentTime + 1,3,10);</pre> +```js +source.start(contexteAudio.currentTime + 1,3,10); +``` -<div class="note"> -<p><strong>Note :</strong> Pour un exemple plus complexe montrant la méthode <code>start()</code> en action, consulter l'exemple {{domxref("AudioContext.decodeAudioData")}}. Voir aussi <a href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a href="https://github.com/mdn/decode-audio-data">son code source</a>.</p> -</div> +> **Note :** Pour un exemple plus complexe montrant la méthode `start()` en action, consulter l'exemple {{domxref("AudioContext.decodeAudioData")}}. Voir aussi [ l'exemple complet](http://mdn.github.io/decode-audio-data/) et [son code source](https://github.com/mdn/decode-audio-data). -<dl> -</dl> +## Spécification -<h2 id="Spécification">Spécification</h2> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}} | {{Spec2('Web Audio API')}} | | -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +## Compatibilité navigateurs -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +{{Compat("api.AudioBufferSourceNode.start")}} -<p>{{Compat("api.AudioBufferSourceNode.start")}}</p> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiocontext/createmediaelementsource/index.md b/files/fr/web/api/audiocontext/createmediaelementsource/index.md index 3809f56dcd..298453e5e9 100644 --- a/files/fr/web/api/audiocontext/createmediaelementsource/index.md +++ b/files/fr/web/api/audiocontext/createmediaelementsource/index.md @@ -3,39 +3,36 @@ title: AudioContext.createMediaElementSource() slug: Web/API/AudioContext/createMediaElementSource translation_of: Web/API/AudioContext/createMediaElementSource --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<div> -<p>La méthode <code>createMediaElementSource()</code> de l’interface {{ domxref("AudioContext") }} est utilisée pour créer un nouvel objet {{ domxref("MediaElementAudioSourceNode") }} d’après un élément HTML {{ htmlelement("audio") }} ou {{ htmlelement("video") }} existant, permettant ainsi de jouer et de manipuler l’audio de cet élément.</p> -</div> +La méthode `createMediaElementSource()` de l’interface {{ domxref("AudioContext") }} est utilisée pour créer un nouvel objet {{ domxref("MediaElementAudioSourceNode") }} d’après un élément HTML {{ htmlelement("audio") }} ou {{ htmlelement("video") }} existant, permettant ainsi de jouer et de manipuler l’audio de cet élément. -<p>Pour plus de détails à propos des nœuds source audio des éléments média, constultez la page de référence de {{ domxref("MediaElementAudioSourceNode") }}.</p> +Pour plus de détails à propos des nœuds source audio des éléments média, constultez la page de référence de {{ domxref("MediaElementAudioSourceNode") }}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var audioCtx = new AudioContext(); -var source = audioCtx.createMediaElementSource(myMediaElement);</pre> +```js +var audioCtx = new AudioContext(); +var source = audioCtx.createMediaElementSource(myMediaElement); +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>myMediaElement</code></dt> - <dd>Un objet {{domxref("HTMLMediaElement")}} que vous voulez injecter dans un graphe de traitement audio pour le manipuler.</dd> -</dl> +- `myMediaElement` + - : Un objet {{domxref("HTMLMediaElement")}} que vous voulez injecter dans un graphe de traitement audio pour le manipuler. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Un {{domxref("MediaElementAudioSourceNode")}}.</p> +Un {{domxref("MediaElementAudioSourceNode")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Cet exemple simple crée une source depuis un élément {{ htmlelement("audio") }} grâce à <code>createMediaElementSource()</code>, puis passe le signal audio à travers un {{ domxref("GainNode") }} avant de l’injecter dans le {{ domxref("AudioDestinationNode") }} pour la lecture. Quand le pointeur de la souris est déplacé, la fonction <code>updatePage()</code> est invoquée, et calcule le gain actuel comme rapport de la position Y de la souris divisée par la hauteur totale de la fenêtre. Vous pouvez ainsi augmenter ou diminuer le volume de la musique jouée, en déplaçant le pointeur de la souris vers le haut ou vers le bas.</p> +Cet exemple simple crée une source depuis un élément {{ htmlelement("audio") }} grâce à `createMediaElementSource()`, puis passe le signal audio à travers un {{ domxref("GainNode") }} avant de l’injecter dans le {{ domxref("AudioDestinationNode") }} pour la lecture. Quand le pointeur de la souris est déplacé, la fonction `updatePage()` est invoquée, et calcule le gain actuel comme rapport de la position Y de la souris divisée par la hauteur totale de la fenêtre. Vous pouvez ainsi augmenter ou diminuer le volume de la musique jouée, en déplaçant le pointeur de la souris vers le haut ou vers le bas. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez également <a href="http://mdn.github.io/webaudio-examples/media-source-buffer/">voir cet exemple en temps réel</a>, ou <a href="https://github.com/mdn/webaudio-examples/tree/master/media-source-buffer">examiner le code source</a>.</p> -</div> +> **Note :** Vous pouvez également [voir cet exemple en temps réel](http://mdn.github.io/webaudio-examples/media-source-buffer/), ou [examiner le code source](https://github.com/mdn/webaudio-examples/tree/master/media-source-buffer). -<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +```js +var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var myAudio = document.querySelector('audio'); var pre = document.querySelector('pre'); var myScript = document.querySelector('script'); @@ -70,35 +67,21 @@ function updatePage(e) { // et le nœud gain à la destination, de sorte qu’on puisse jouer la // musique et ajuster le volume avec le curseur de la souris source.connect(gainNode); -gainNode.connect(audioCtx.destination);</pre> - -<div class="note"> -<p><strong>Note :</strong> Du fait de l’appel à <code>createMediaElementSource()</code>, la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur.</p> -</div> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.AudioContext.createMediaElementSource")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +gainNode.connect(audioCtx.destination); +``` + +> **Note :** Du fait de l’appel à `createMediaElementSource()`, la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur. + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.AudioContext.createMediaElementSource")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiocontext/index.md b/files/fr/web/api/audiocontext/index.md index 6378d52164..e855ad68ed 100644 --- a/files/fr/web/api/audiocontext/index.md +++ b/files/fr/web/api/audiocontext/index.md @@ -10,163 +10,140 @@ tags: - Web Audio API translation_of: Web/API/AudioContext --- -<p>{{APIRef("Web Audio API")}}</p> - -<p>L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte.</p> - -<p>Un contexte audio peut être la cible d'événements, par conséquent il implémente l'interface {{domxref ("EventTarget")}}.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Constructeur">Constructeur</h2> - -<dl> - <dt>{{domxref("AudioContext.AudioContext", "AudioContext()")}}</dt> - <dd>Crée et retourne un nouvel objet <code>AudioContext</code>.</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt> - <dd>Renvoie un double flottant, qui représente un temps en secondes en augmentation continue, utilisé pour situer dans le temps. Il commence à <code>0</code>.</dd> - <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt> - <dd>Retourne un {{domxref ("AudioDestinationNode")}} représentant la destination finale de tous les fichiers audio dans un contexte. On peut le considérer comme un dispositif de rendu audio.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt> - <dd>Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt> - <dd>Renvoie un nombre flottant représentant la fréquence d'échantillonnage (échantillons par seconde) utilisée par tous les nœuds dans ce contexte.La fréquence d'échantillonnage d'un contexte audio ne peut pas être modifiée.</dd> - <dt>{{domxref("AudioContext.state")}} {{readonlyInline}}</dt> - <dd>Renvoie l'état actuel du contexte audio.</dd> - <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt> - <dd>Sur Firefox OS, utilisé pour renvoyer la piste audio dans laquelle sera jouée le son qui sera lancé dans le contexte audio.</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<dl> - <dt>{{domxref("AudioContext.onstatechange")}}</dt> - <dd>Un gestionnaire d'évènement déclenché par un évènement du type {{event("statechange")}}. Cela a lieu quand l'état du contexte audio change, en raison de l'appel des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}.)</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p><em>Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("AudioContext.close()")}}</dt> - <dd>Supprime le contexte audio, et libère toutes les ressources audio système qu'il utilisait.</dd> - <dt>{{domxref("AudioContext.createBuffer()")}}</dt> - <dd>Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }}</dd> - <dt>{{domxref("AudioContext.createBufferSource()")}}</dt> - <dd>Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès.</dd> - <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt> - <dd>Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}.</dd> - <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt> - <dd>Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources.</dd> - <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt> - <dd>Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur.</dd> - <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt> - <dd>Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript.</dd> - <dt>{{domxref("AudioContext.createStereoPanner()")}}</dt> - <dd>Crée un objet {{domxref ("StereoPannerNode")}} qui permet d'appliquer une panoramique sonore à une source audio.</dd> - <dt>{{domxref("AudioContext.createAnalyser()")}}</dt> - <dd>Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt> - <dd>Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt> - <dd>Crée un objet {{domxref ("ChannelMergerNode")}} qui permet de rassembler les canaux de différents flux audio en un seul flux.</dd> - <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt> - <dd>Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément.</dd> - <dt>{{domxref("AudioContext.createConvolver()")}}</dt> - <dd>Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb.</dd> - <dt>{{domxref("AudioContext.createDelay()")}}</dt> - <dd>Crée un objet {{domxref ("DelayNode")}}, utilisé pour retarder le signal audio entrant d'un certain temps. Il est également </dd> - <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt> - <dd>Crée un objet {{domxref("DynamicsCompressorNode")}} qui permet d'appliquer une compression sur un signal audio.</dd> - <dt>{{domxref("AudioContext.createGain()")}}</dt> - <dd>Crée un objet {{domxref ("GainNode")}} qui permet de controller le niveau sonore global d'un graphe audio.</dd> - <dt>{{domxref("AudioContext.createIIRFilter()")}}</dt> - <dd>Crée un objet {{domxref("IIRFilterNode")}}, qui représente un filtre de second ordre configurable comme différents types de filtres communs.</dd> - <dt>{{domxref("AudioContext.createOscillator()")}}</dt> - <dd>Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son.</dd> - <dt>{{domxref("AudioContext.createPanner()")}}</dt> - <dd>Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D.</dd> - <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt> - <dd>Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}.</dd> - <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt> - <dd>Crée un objet {{domxref ("WaveShaperNode")}}, qui permet d'implémenter des effets de distorsion non linéaires.</dd> - <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt> - <dd>Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour.</dd> - <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt> - <dd>Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut <code>responseType</code> est <code>arraybuffer</code>. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers.</dd> - <dt>{{domxref("AudioContext.resume()")}}</dt> - <dd>Reprend le défilement du temps dans un contexte audio où il a précédemment été suspendu.</dd> - <dt>{{domxref("AudioContext.suspend()")}}</dt> - <dd>Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie.</dd> -</dl> - -<h2 id="Méthodes_obsolètes">Méthodes obsolètes</h2> - -<dl> - <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt> - <dd>Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}.</dd> - <dt>{{domxref("AudioContext.createWaveTable()")}}</dt> - <dd>Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<p>Déclaration basique d'un audio context :</p> - -<pre><code>var contexteAudio = new AudioContext;</code></pre> - -<p>Variante avec gestion de la compatibilité navigateur:</p> - -<pre><code>var AudioContext = window.AudioContext || window.webkitAudioContext; -var contexteAudio = new AudioContext(); - -var oscillatorNode = contexteAudio.createOscillator(); -var gainNode = contexteAudio.createGain(); -var finish = contexteAudio.destination; -// etc.</code></pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.AudioContext")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> - <li>{{domxref("OfflineAudioContext")}}</li> -</ul> +{{APIRef("Web Audio API")}} + +L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte. + +Un contexte audio peut être la cible d'événements, par conséquent il implémente l'interface {{domxref ("EventTarget")}}. + +{{InheritanceDiagram}} + +## Constructeur + +- {{domxref("AudioContext.AudioContext", "AudioContext()")}} + - : Crée et retourne un nouvel objet `AudioContext`. + +## Propriétés + +- {{domxref("AudioContext.currentTime")}} {{readonlyInline}} + - : Renvoie un double flottant, qui représente un temps en secondes en augmentation continue, utilisé pour situer dans le temps. Il commence à `0`. +- {{domxref("AudioContext.destination")}} {{readonlyInline}} + - : Retourne un {{domxref ("AudioDestinationNode")}} représentant la destination finale de tous les fichiers audio dans un contexte. On peut le considérer comme un dispositif de rendu audio. + +<!----> + +- {{domxref("AudioContext.listener")}} {{readonlyInline}} + - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D. + +<!----> + +- {{domxref("AudioContext.sampleRate")}} {{readonlyInline}} + - : Renvoie un nombre flottant représentant la fréquence d'échantillonnage (échantillons par seconde) utilisée par tous les nœuds dans ce contexte.La fréquence d'échantillonnage d'un contexte audio ne peut pas être modifiée. +- {{domxref("AudioContext.state")}} {{readonlyInline}} + - : Renvoie l'état actuel du contexte audio. +- {{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}} + - : Sur Firefox OS, utilisé pour renvoyer la piste audio dans laquelle sera jouée le son qui sera lancé dans le contexte audio. + +### Event handlers + +- {{domxref("AudioContext.onstatechange")}} + - : Un gestionnaire d'évènement déclenché par un évènement du type {{event("statechange")}}. Cela a lieu quand l'état du contexte audio change, en raison de l'appel des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}.) + +## Méthodes + +_Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")}}._ + +- {{domxref("AudioContext.close()")}} + - : Supprime le contexte audio, et libère toutes les ressources audio système qu'il utilisait. +- {{domxref("AudioContext.createBuffer()")}} + - : Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }} +- {{domxref("AudioContext.createBufferSource()")}} + - : Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès. +- {{domxref("AudioContext.createMediaElementSource()")}} + - : Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}. +- {{domxref("AudioContext.createMediaStreamSource()")}} + - : Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources. +- {{domxref("AudioContext.createMediaStreamDestination()")}} + - : Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur. +- {{domxref("AudioContext.createScriptProcessor()")}} + - : Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript. +- {{domxref("AudioContext.createStereoPanner()")}} + - : Crée un objet {{domxref ("StereoPannerNode")}} qui permet d'appliquer une panoramique sonore à une source audio. +- {{domxref("AudioContext.createAnalyser()")}} + - : Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données. + +<!----> + +- {{domxref("AudioContext.createBiquadFilter()")}} + - : Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc. + +<!----> + +- {{domxref("AudioContext.createChannelMerger()")}} + - : Crée un objet {{domxref ("ChannelMergerNode")}} qui permet de rassembler les canaux de différents flux audio en un seul flux. +- {{domxref("AudioContext.createChannelSplitter()")}} + - : Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément. +- {{domxref("AudioContext.createConvolver()")}} + - : Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb. +- {{domxref("AudioContext.createDelay()")}} + - : Crée un objet {{domxref ("DelayNode")}}, utilisé pour retarder le signal audio entrant d'un certain temps. Il est également +- {{domxref("AudioContext.createDynamicsCompressor()")}} + - : Crée un objet {{domxref("DynamicsCompressorNode")}} qui permet d'appliquer une compression sur un signal audio. +- {{domxref("AudioContext.createGain()")}} + - : Crée un objet {{domxref ("GainNode")}} qui permet de controller le niveau sonore global d'un graphe audio. +- {{domxref("AudioContext.createIIRFilter()")}} + - : Crée un objet {{domxref("IIRFilterNode")}}, qui représente un filtre de second ordre configurable comme différents types de filtres communs. +- {{domxref("AudioContext.createOscillator()")}} + - : Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son. +- {{domxref("AudioContext.createPanner()")}} + - : Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D. +- {{domxref("AudioContext.createPeriodicWave()")}} + - : Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}. +- {{domxref("AudioContext.createWaveShaper()")}} + - : Crée un objet {{domxref ("WaveShaperNode")}}, qui permet d'implémenter des effets de distorsion non linéaires. +- {{domxref("AudioContext.createAudioWorker()")}} + - : Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour. +- {{domxref("AudioContext.decodeAudioData()")}} + - : Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut `responseType` est `arraybuffer`. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers. +- {{domxref("AudioContext.resume()")}} + - : Reprend le défilement du temps dans un contexte audio où il a précédemment été suspendu. +- {{domxref("AudioContext.suspend()")}} + - : Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie. + +## Méthodes obsolètes + +- {{domxref("AudioContext.createJavaScriptNode()")}} + - : Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}. +- {{domxref("AudioContext.createWaveTable()")}} + - : Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}. + +## Exemples + +Déclaration basique d'un audio context : + + var contexteAudio = new AudioContext; + +Variante avec gestion de la compatibilité navigateur: + + var AudioContext = window.AudioContext || window.webkitAudioContext; + var contexteAudio = new AudioContext(); + + var oscillatorNode = contexteAudio.createOscillator(); + var gainNode = contexteAudio.createGain(); + var finish = contexteAudio.destination; + // etc. + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.AudioContext")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) +- {{domxref("OfflineAudioContext")}} diff --git a/files/fr/web/api/audiolistener/index.md b/files/fr/web/api/audiolistener/index.md index b8343c1642..3b0e48616a 100644 --- a/files/fr/web/api/audiolistener/index.md +++ b/files/fr/web/api/audiolistener/index.md @@ -8,100 +8,77 @@ tags: - Web Audio API translation_of: Web/API/AudioListener --- -<p>{{APIRef("Web Audio API")}}</p> - -<p>L'interface <em>AudioListener </em>représente la position et l'orientation de l'unique personne écoutant la scène audio; elle est utilisée dans le cadre d'une <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">spatialisation audio</a>. Tous les {{domxref ("PannerNode")}} sont spatialisés par rapport à l'objet <em>AudioListener </em>stocké dans la propriété {{domxref ("AudioContext.listener")}}.</p> - -<p>Il est important de noter qu'il n'y a qu'un seul auditeur par contexte, et qu'il ne s'agit pas d'un {{domxref("AudioNode")}}.</p> - -<p><img alt="On voit ici la position, les vecteurs haut et face d'un AudioListener, avec les vecteurs haut et face à 90° l'un de l'autre." src="webaudiolistenerreduced.png"></p> - -<h2 id="Propriétés">Propriétés</h2> - -<p><em>Hérite des propriétés de son parent, </em><code>AudioNode</code>.</p> - -<div class="note"> -<p><strong>Note :</strong> Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, <code>AudioListener.positionX</code>, tandis que la même propriété est définir à l'aide de <code>AudioListener.positionX.value</code>. C'est pourquoi ces valeurs ne sont pas marquées en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL.</p> -</div> - -<dl> - <dt>{{domxref("AudioListener.positionX")}}</dt> - <dd>Position de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.</dd> - <dt>{{domxref("AudioListener.positionY")}}</dt> - <dd>Position verticale de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.</dd> - <dt>{{domxref("AudioListener.positionZ")}}</dt> - <dd>Position longitudinale (avant et arrière) de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.</dd> - <dt>{{domxref("AudioListener.forwardX")}}</dt> - <dd>Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd> - <dt>{{domxref("AudioListener.forwardY")}}</dt> - <dd>Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd> - <dt>{{domxref("AudioListener.forwardZ")}}</dt> - <dd>Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd> - <dt>{{domxref("AudioListener.upX")}}</dt> - <dd>Position horizontale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd> - <dt>{{domxref("AudioListener.upY")}}</dt> - <dd>Position verticale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd> - <dt>{{domxref("AudioListener.upZ")}}</dt> - <dd>Position longitudinale (avant et arrière) du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p><em>Hérite des propriétés de son parent, </em><code>AudioNode</code>.</p> - -<dl> - <dt>{{domxref("AudioListener.setOrientation()")}}</dt> - <dd>Définit l'orientation de l'auditeur.</dd> - <dt>{{domxref("AudioListener.setPosition()")}}</dt> - <dd>Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}} pour savoir pourquoi cette méthode est désormais obsolète.</dd> -</dl> - -<h2 id="Fonctionnalités_obsolètes">Fonctionnalités obsolètes</h2> - -<dl> - <dt>{{domxref("AudioListener.dopplerFactor")}} {{obsolete_inline}}</dt> - <dd>Nombre flottant à double précision représentant la quantité de "pitch shift" à utiliser pour le rendu d'un <a href="http://en.wikipedia.org/wiki/Doppler_effect">effet doppler</a>.</dd> - <dt>{{domxref("AudioListener.speedOfSound")}} {{obsolete_inline}}</dt> - <dd>Nombre flottant à double précision représentant la vitesse du son, en <em>mètres par seconde</em>.</dd> -</dl> - -<p>Dans une version précédente de la spécification, les propriétés <code>dopplerFactor</code> et <code>speedOfSound</code> et la méthode <code>setPosition()</code> lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes :</p> - -<ul> - <li>Seuls les {{domxref("AudioBufferSourceNode")}} étaient transposés, pas les autres noeuds source.</li> - <li>Le comportement à adopter lorsqu'un {{domxref("AudioBufferSourceNode")}} était connecté à plusieurs {{domxref("PannerNode")}} n'était pas clair.</li> - <li>Comme la vélocité du panoramique et de l'auditeur n'étaient pas des {{domxref("AudioParam")}}, la modification du pitch ne pouvait pas être appliquée uniformément, ce qui provoquait des irrégularités dans le son.</li> -</ul> - -<p>C'est la raison pour laquelle elles ont été supprimées.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>{{page("/en-US/docs/Web/API/AudioContext.createPanner","Example")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<p>{{Compat("api.AudioListener")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +{{APIRef("Web Audio API")}} + +L'interface _AudioListener_ représente la position et l'orientation de l'unique personne écoutant la scène audio; elle est utilisée dans le cadre d'une [spatialisation audio](/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics). Tous les {{domxref ("PannerNode")}} sont spatialisés par rapport à l'objet _AudioListener_ stocké dans la propriété {{domxref ("AudioContext.listener")}}. + +Il est important de noter qu'il n'y a qu'un seul auditeur par contexte, et qu'il ne s'agit pas d'un {{domxref("AudioNode")}}. + + + +## Propriétés + +_Hérite des propriétés de son parent,_ `AudioNode`. + +> **Note :** Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, `AudioListener.positionX`, tandis que la même propriété est définir à l'aide de `AudioListener.positionX.value`. C'est pourquoi ces valeurs ne sont pas marquées en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL. + +- {{domxref("AudioListener.positionX")}} + - : Position de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. +- {{domxref("AudioListener.positionY")}} + - : Position verticale de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. +- {{domxref("AudioListener.positionZ")}} + - : Position longitudinale (avant et arrière) de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. +- {{domxref("AudioListener.forwardX")}} + - : Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. +- {{domxref("AudioListener.forwardY")}} + - : Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. +- {{domxref("AudioListener.forwardZ")}} + - : Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. +- {{domxref("AudioListener.upX")}} + - : Position horizontale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. +- {{domxref("AudioListener.upY")}} + - : Position verticale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. +- {{domxref("AudioListener.upZ")}} + - : Position longitudinale (avant et arrière) du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. + +## Méthodes + +_Hérite des propriétés de son parent,_ `AudioNode`. + +- {{domxref("AudioListener.setOrientation()")}} + - : Définit l'orientation de l'auditeur. +- {{domxref("AudioListener.setPosition()")}} + - : Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}} pour savoir pourquoi cette méthode est désormais obsolète. + +## Fonctionnalités obsolètes + +- {{domxref("AudioListener.dopplerFactor")}} {{obsolete_inline}} + - : Nombre flottant à double précision représentant la quantité de "pitch shift" à utiliser pour le rendu d'un [effet doppler](http://en.wikipedia.org/wiki/Doppler_effect). +- {{domxref("AudioListener.speedOfSound")}} {{obsolete_inline}} + - : Nombre flottant à double précision représentant la vitesse du son, en _mètres par seconde_. + +Dans une version précédente de la spécification, les propriétés `dopplerFactor` et `speedOfSound` et la méthode `setPosition()` lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes : + +- Seuls les {{domxref("AudioBufferSourceNode")}} étaient transposés, pas les autres noeuds source. +- Le comportement à adopter lorsqu'un {{domxref("AudioBufferSourceNode")}} était connecté à plusieurs {{domxref("PannerNode")}} n'était pas clair. +- Comme la vélocité du panoramique et de l'auditeur n'étaient pas des {{domxref("AudioParam")}}, la modification du pitch ne pouvait pas être appliquée uniformément, ce qui provoquait des irrégularités dans le son. + +C'est la raison pour laquelle elles ont été supprimées. + +## Exemples + +{{page("/en-US/docs/Web/API/AudioContext.createPanner","Example")}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité navigateurs + +{{Compat("api.AudioListener")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audionode/index.md b/files/fr/web/api/audionode/index.md index b3e51998b0..681d72b5c9 100644 --- a/files/fr/web/api/audionode/index.md +++ b/files/fr/web/api/audionode/index.md @@ -3,68 +3,62 @@ title: AudioNode slug: Web/API/AudioNode translation_of: Web/API/AudioNode --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<p>L'interface <strong><code>AudioNode</code></strong> est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}.</p> +L'interface **`AudioNode`** est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}. -<p>{{InheritanceDiagram}}</p> +{{InheritanceDiagram}} -<p><img alt="Des objets AudioNode participant à un objet AudioContext pour créer un graphe de routage audio." src="webaudiobasics.png"></p> + +Un `AudioNode` a des entrées et sorties, chacune avec un certain nombre de _canaux_.\* *Un `AudioNode` avec zero entrée et une ou plusieurs sorties est appelée un *noeud source\*. Le traitement exact varie d'un `AudioNode` à l'autre; en général un noeud lit l'entrée, réalise un traitement, et génère de nouvelles valeurs pour la sortie, ou laisse simplement l'entrée traverser (par exemple dans le cas de l'{{domxref("AnalyserNode")}}, où le résultat du traitment du traitement est accessible à part). -<p>Un <code>AudioNode</code> a des entrées et sorties, chacune avec un certain nombre de <em>canaux</em>.<em> </em>Un <code>AudioNode</code> avec zero entrée et une ou plusieurs sorties est appelée un <em> noeud source</em>. Le traitement exact varie d'un <code>AudioNode</code> à l'autre; en général un noeud lit l'entrée, réalise un traitement, et génère de nouvelles valeurs pour la sortie, ou laisse simplement l'entrée traverser (par exemple dans le cas de l'{{domxref("AnalyserNode")}}, où le résultat du traitment du traitement est accessible à part).</p> +Plusieurs noeuds peuvent être reliés dans un _graphe de traitement_. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque `AudioNode` fait partie d'exactement un contexte. Les noeuds de traitement héritent des propriétés et méthodse d'`AudioNode`, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil [Web Audio API](/en-US/docs/Web/API/Web_Audio_API). -<p>Plusieurs noeuds peuvent être reliés dans un <em>graphe de traitement</em>. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque <code>AudioNode</code> fait partie d'exactement un contexte. Les noeuds de traitement héritent des propriétés et méthodse d'<code>AudioNode</code>, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>.</p> +> **Note :** Un `AudioNode` peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}. -<div class="note"> -<p><strong>Note :</strong> Un <code>AudioNode</code> peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}.</p> -</div> +## Propriétés -<h2 id="Propriétés">Propriétés</h2> +- {{domxref("AudioNode.context")}} {{readonlyInline}} + - : Renvoie le {{domxref("AudioContext")}} associé, c'est-à-dire l'objet représentant le graphe de traitement dont le noeud fait partie. -<dl> - <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt> - <dd>Renvoie le {{domxref("AudioContext")}} associé, c'est-à-dire l'objet représentant le graphe de traitement dont le noeud fait partie.</dd> -</dl> +<!----> -<dl> - <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt> - <dd>Renvoie le nombre d'entrées d'un noeud. Les noeuds source sont des noeuds dont la propriété <code>numberOfInputs</code> a la valeur <code>0</code>.</dd> -</dl> +- {{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}} + - : Renvoie le nombre d'entrées d'un noeud. Les noeuds source sont des noeuds dont la propriété `numberOfInputs` a la valeur `0`. -<dl> - <dt>{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt> - <dd>Renvoie le nombre de sorties d'un noeud. Les noeuds de destination — comme {{ domxref("AudioDestinationNode") }} — sont des noeuds dont cette propriété a la valeur <code>0</code>.</dd> -</dl> +<!----> -<dl> - <dt>{{domxref("AudioNode.channelCount")}}</dt> - <dd>Représente un entier utilisé pour déterminer le nombre de canaux lors d'une <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Conversion_ascendante_et_descendante">conversion ascendante ou descendante</a>. Son usage et sa définition précise dépendent de la valeur de {{domxref("AudioNode.channelCountMode")}}.</dd> -</dl> +- {{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}} + - : Renvoie le nombre de sorties d'un noeud. Les noeuds de destination — comme {{ domxref("AudioDestinationNode") }} — sont des noeuds dont cette propriété a la valeur `0`. -<dl> - <dt>{{domxref("AudioNode.channelCountMode")}}</dt> - <dd>Représente une liste énumérative qui décrit la façon dont les canaux doivent être connectés entre les entrées et les sorties.</dd> - <dt>{{domxref("AudioNode.channelInterpretation")}}</dt> - <dd>Représente une liste énumérative qui décrit la signification des canaux. Cette interprétation définit la façon dont la <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Conversion_ascendante_et_descendante">conversion ascendante ou descendante</a> est réalisée. Les valeurs possibles sont <code>"speakers"</code> ou <code>"discrete"</code>.</dd> -</dl> +<!----> -<h2 id="Méthodes">Méthodes</h2> +- {{domxref("AudioNode.channelCount")}} + - : Représente un entier utilisé pour déterminer le nombre de canaux lors d'une [conversion ascendante ou descendante](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Conversion_ascendante_et_descendante). Son usage et sa définition précise dépendent de la valeur de {{domxref("AudioNode.channelCountMode")}}. -<p><em>Implémente aussi les méthodes de l'interface </em>{{domxref("EventTarget")}}.</p> +<!----> -<dl> - <dt>{{domxref("AudioNode.connect()")}}</dt> - <dd>Permet de connecter une sortie du noeud à l'entrée d'un autre noeud, soit comme données audio, soir comme valeur d'un {{domxref("AudioParam")}}.</dd> - <dt>{{domxref("AudioNode.disconnect()")}}</dt> - <dd>Permet de déconnecter le noeud d'un autre noeud auquel il est déjà connecté.</dd> -</dl> +- {{domxref("AudioNode.channelCountMode")}} + - : Représente une liste énumérative qui décrit la façon dont les canaux doivent être connectés entre les entrées et les sorties. +- {{domxref("AudioNode.channelInterpretation")}} + - : Représente une liste énumérative qui décrit la signification des canaux. Cette interprétation définit la façon dont la [conversion ascendante ou descendante](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Conversion_ascendante_et_descendante) est réalisée. Les valeurs possibles sont `"speakers"` ou `"discrete"`. -<h2 id="Exemple">Exemple</h2> +## Méthodes -<p>Ce simple extrait de code illustre la creation de quelques noeuds audio, et la façon dont les propriétés et méthodes <code>AudioNode</code> peuvent être utilisées. Vous pouvez trouver d'autres exemples sur n'importe lequel des exemples liés sur la page <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> (par exemple <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.) </p> +_Implémente aussi les méthodes de l'interface_ {{domxref("EventTarget")}}. -<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; +- {{domxref("AudioNode.connect()")}} + - : Permet de connecter une sortie du noeud à l'entrée d'un autre noeud, soit comme données audio, soir comme valeur d'un {{domxref("AudioParam")}}. +- {{domxref("AudioNode.disconnect()")}} + - : Permet de déconnecter le noeud d'un autre noeud auquel il est déjà connecté. + +## Exemple + +Ce simple extrait de code illustre la creation de quelques noeuds audio, et la façon dont les propriétés et méthodes `AudioNode` peuvent être utilisées. Vous pouvez trouver d'autres exemples sur n'importe lequel des exemples liés sur la page [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) (par exemple [Violent Theremin](https://github.com/mdn/violent-theremin).) + +```js +var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); @@ -77,31 +71,19 @@ gainNode.connect(audioCtx.destination); oscillator.context; oscillator.numberOfInputs; oscillator.numberOfOutputs; -oscillator.channelCount;</pre> - -<h2 id="Spécification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2> - -<p>{{Compat("api.AudioNode")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +oscillator.channelCount; +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité navigateur + +{{Compat("api.AudioNode")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audioparam/index.md b/files/fr/web/api/audioparam/index.md index bd0fca5e56..6075c65599 100644 --- a/files/fr/web/api/audioparam/index.md +++ b/files/fr/web/api/audioparam/index.md @@ -8,105 +8,90 @@ tags: - Web Audio API translation_of: Web/API/AudioParam --- -<p>{{APIRef("Web Audio API")}}</p> +{{APIRef("Web Audio API")}} -<p>L'interface <strong><code>AudioParam</code></strong> représente un paramètre audio, en général un paramètre d'un {{domxref ("AudioNode")}} tel qu'un {{ domxref("GainNode.gain") }}. On peut lui donner une valeur spécifique ou définir une variation de valeur qui intervient à un certain moment et selon un certain fonctionnement.</p> +L'interface **`AudioParam`** représente un paramètre audio, en général un paramètre d'un {{domxref ("AudioNode")}} tel qu'un {{ domxref("GainNode.gain") }}. On peut lui donner une valeur spécifique ou définir une variation de valeur qui intervient à un certain moment et selon un certain fonctionnement. -<p>Il y a deux sortes de <code>AudioParam</code>, <em>a-rate</em> et <em>k-rate</em> :</p> +Il y a deux sortes de `AudioParam`, _a-rate_ et _k-rate_ : -<ul> - <li>Un <code>AudioParam</code> <em>a-rate</em> réévalue la valeur du paramètre audio pour chaque trame d'échantillons du signal audio.</li> - <li>Un <code>AudioParam</code> <em>k-rate </em>utilise la même valeur de paramètre audio initial pour l'ensemble du bloc traité, c'est-à-dire 128 échantillons.</li> -</ul> +- Un `AudioParam` _a-rate_ réévalue la valeur du paramètre audio pour chaque trame d'échantillons du signal audio. +- Un `AudioParam` _k-rate_ utilise la même valeur de paramètre audio initial pour l'ensemble du bloc traité, c'est-à-dire 128 échantillons. -<p>Chaque {{domxref ("AudioNode")}} définit lequel de ses paramètres sont <em>a-rate</em> ou <em>k-rate</em>.</p> +Chaque {{domxref ("AudioNode")}} définit lequel de ses paramètres sont _a-rate_ ou _k-rate_. -<p>Chaque <code>AudioParam</code> a une liste d'événements, initialement vide, qui définit quand et comment les valeurs changent. Si cette liste n'est pas vide, les modifications faites directement avec <code>AudioParam.value</code> sont ignorées. Cette liste d'événements permet de planifier les changements qui doivent se produire à des moments très précis à l'aide de courbes d'automatisation chronologiques arbitraires. Les informations de temps utilisées sont celles définies par {{domxref ("AudioContext.currentTime")}}.</p> +Chaque `AudioParam` a une liste d'événements, initialement vide, qui définit quand et comment les valeurs changent. Si cette liste n'est pas vide, les modifications faites directement avec `AudioParam.value` sont ignorées. Cette liste d'événements permet de planifier les changements qui doivent se produire à des moments très précis à l'aide de courbes d'automatisation chronologiques arbitraires. Les informations de temps utilisées sont celles définies par {{domxref ("AudioContext.currentTime")}}. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>Hérite des propriétés de son parent, <code>AudioNode</code>.</em></p> +_Hérite des propriétés de son parent, `AudioNode`._ -<dl> - <dt>{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}</dt> - <dd>Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'<code>AudioParam</code>.</dd> - <dt>{{domxref("AudioParam.maxValue")}} {{readonlyInline}}</dt> - <dd>Valeur maximum de la plage nominale (effective). </dd> - <dt>{{domxref("AudioParam.minValue")}} {{readonlyinline}}</dt> - <dd>Valeur minimum de la plage nominale (effective). </dd> -</dl> +- {{domxref("AudioParam.defaultValue")}} {{readonlyInline}} + - : Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'`AudioParam`. +- {{domxref("AudioParam.maxValue")}} {{readonlyInline}} + - : Valeur maximum de la plage nominale (effective). +- {{domxref("AudioParam.minValue")}} {{readonlyinline}} + - : Valeur minimum de la plage nominale (effective). -<dl> - <dt>{{domxref("AudioParam.value")}}</dt> - <dd>Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de <code>AudioParam.defaultValue</code>. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la <code>AudioParam</code> - est ignorée, sans lever aucune exception</dd> -</dl> +<!----> -<h2 id="Méthodes">Méthodes</h2> +- {{domxref("AudioParam.value")}} + - : Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de `AudioParam.defaultValue`. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la `AudioParam` - est ignorée, sans lever aucune exception -<p><em>Hérite des propriétés de son parent, AudioNode.</em></p> +## Méthodes -<dl> - <dt>{{domxref("AudioParam.setValueAtTime()")}}</dt> - <dd>Planifie un changement de la valeur d' <code>AudioParam</code> à un moment précis, <code>startTime</code>, tel que mesuré par rapport à {{domxref ("AudioContext.currentTime")}}. La nouvelle valeur est passée en argument.</dd> - <dt>{{domxref("AudioParam.linearRampToValueAtTime()")}}</dt> - <dd>Planifie un changement de la valeur d'<code>AudioParam</code>. Le changement commence à l'heure prévue pour l'événement précédent, évolue selon une rampe linéaire jusqu'à la nouvelle valeur passée dans l'argument <code>value</code>, et atteint la nouvelle valeur à l'heure indiquée par le paramètre <code>endTime</code>.</dd> - <dt>{{domxref("AudioParam.exponentialRampToValueAtTime()")}}</dt> - <dd>Planifie un changement de la valeur d'<code>AudioParam</code>. Le changement commence à l'heure prévue pour l'événement précédent, suit une rampe exponentielle jusqu'à la nouvelle valeur passée dans l'argument <code>value</code>, et atteint la nouvelle valeur à l'heure indiquée par le paramètre <code>endTime</code>.<br> - Les rampes exponentielles sont utiles lors du changement de fréquence ou de taux de lecture en raison de la façon dont l'oreille humaine fonctionne.</dd> - <dt>{{domxref("AudioParam.setTargetAtTime()")}}</dt> - <dd>Planifie le début d'un changement de la valeur d'<code>AudioParam</code>. Le changement commence à l'heure spécifiée par l'argument <code>startTime</code> et de façon exponentielle tend vers la valeur donnée par le paramètre <code>target</code>. Le taux de décroissance exponentielle est définie par le paramètre <code>timeConstant</code>. C'est le temps nécessaire à un système continu linéaire du premier ordre invariant dans le temps pour atteindre la valeur de 1 - 1 / e (environ 63,2%) donné une réponse d'entrée de l'étape (passage de 0 à 1 en valeur), Plus il est grand, plus la transition sera facile. Ceci est utile pour la décroissance ou la libération de portions d'enveloppes.</dd> - <dt>{{domxref("AudioParam.setValueCurveAtTime()")}}</dt> - <dd>Planifie des valeurs de <code>AudioParam</code> selon un jeu de valeurs, défini par le paramètre <code>values </code>({{domxref ("Float32Array")}}), mis à l'échelle pour s'adapter à l'intervalle de temps donné, en commençant à <code>startTime</code>.</dd> - <dt>{{domxref("AudioParam.cancelScheduledValues()")}}</dt> - <dd>Annule toutes les modifications futures prévues du <code>AudioParam</code>.</dd> - <dt>{{domxref("AudioParam.cancelAndHoldAtTime()")}}</dt> - <dd>Annule toutes les modifications futures prévues du <code>AudioParam</code> mais maintient sa valeur à un certain moment, en attendant que d'autres changements soient effectués. La nouvelle valeur est passée en argument.</dd> -</dl> +_Hérite des propriétés de son parent, AudioNode._ -<h2 id="Exemples">Exemples</h2> +- {{domxref("AudioParam.setValueAtTime()")}} + - : Planifie un changement de la valeur d' `AudioParam` à un moment précis, `startTime`, tel que mesuré par rapport à {{domxref ("AudioContext.currentTime")}}. La nouvelle valeur est passée en argument. +- {{domxref("AudioParam.linearRampToValueAtTime()")}} + - : Planifie un changement de la valeur d'`AudioParam`. Le changement commence à l'heure prévue pour l'événement précédent, évolue selon une rampe linéaire jusqu'à la nouvelle valeur passée dans l'argument `value`, et atteint la nouvelle valeur à l'heure indiquée par le paramètre `endTime`. +- {{domxref("AudioParam.exponentialRampToValueAtTime()")}} + - : Planifie un changement de la valeur d'`AudioParam`. Le changement commence à l'heure prévue pour l'événement précédent, suit une rampe exponentielle jusqu'à la nouvelle valeur passée dans l'argument `value`, et atteint la nouvelle valeur à l'heure indiquée par le paramètre `endTime`. + Les rampes exponentielles sont utiles lors du changement de fréquence ou de taux de lecture en raison de la façon dont l'oreille humaine fonctionne. +- {{domxref("AudioParam.setTargetAtTime()")}} + - : Planifie le début d'un changement de la valeur d'`AudioParam`. Le changement commence à l'heure spécifiée par l'argument `startTime` et de façon exponentielle tend vers la valeur donnée par le paramètre `target`. Le taux de décroissance exponentielle est définie par le paramètre `timeConstant`. C'est le temps nécessaire à un système continu linéaire du premier ordre invariant dans le temps pour atteindre la valeur de 1 - 1 / e (environ 63,2%) donné une réponse d'entrée de l'étape (passage de 0 à 1 en valeur), Plus il est grand, plus la transition sera facile. Ceci est utile pour la décroissance ou la libération de portions d'enveloppes. +- {{domxref("AudioParam.setValueCurveAtTime()")}} + - : Planifie des valeurs de `AudioParam` selon un jeu de valeurs, défini par le paramètre `values `({{domxref ("Float32Array")}}), mis à l'échelle pour s'adapter à l'intervalle de temps donné, en commençant à `startTime`. +- {{domxref("AudioParam.cancelScheduledValues()")}} + - : Annule toutes les modifications futures prévues du `AudioParam`. +- {{domxref("AudioParam.cancelAndHoldAtTime()")}} + - : Annule toutes les modifications futures prévues du `AudioParam` mais maintient sa valeur à un certain moment, en attendant que d'autres changements soient effectués. La nouvelle valeur est passée en argument. -<p>Ce premier exemple simple montre la définition de la valeur de <code>gain </code>d'un<code> </code>{{domxref("GainNode")}}. <code>gain</code> est un exemple de paramètre audio de type a-rate, car sa valeur peut potentiellement être différente pour chaque trame d'échantillon.</p> +## Exemples -<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; +Ce premier exemple simple montre la définition de la valeur de `gain `d'un` `{{domxref("GainNode")}}. `gain` est un exemple de paramètre audio de type a-rate, car sa valeur peut potentiellement être différente pour chaque trame d'échantillon. + +```js +var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); var gainNode = audioCtx.createGain(); -gainNode.gain.value = 0;</pre> +gainNode.gain.value = 0; +``` -<p>Ce deuxième exemple montre la définition de plusieurs paramètres d'un {{ domxref("BiquadFilterNode") }}. Ce sont des exemples de paramètre audio de type k-rate AudioParam's, comme les valeurs sont définies une fois pour l'ensemble des échantillons.</p> +Ce deuxième exemple montre la définition de plusieurs paramètres d'un {{ domxref("BiquadFilterNode") }}. Ce sont des exemples de paramètre audio de type k-rate AudioParam's, comme les valeurs sont définies une fois pour l'ensemble des échantillons. -<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; +```js +var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); var biquadFilter = audioCtx.createBiquadFilter(); biquadFilter.type = "lowshelf"; biquadFilter.frequency.value = 1000; -biquadFilter.gain.value = 25;</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<p>{{Compat("api.AudioParam")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +biquadFilter.gain.value = 25; +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité navigateurs + +{{Compat("api.AudioParam")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audioprocessingevent/index.md b/files/fr/web/api/audioprocessingevent/index.md index a43186edb4..430bfcbc74 100644 --- a/files/fr/web/api/audioprocessingevent/index.md +++ b/files/fr/web/api/audioprocessingevent/index.md @@ -8,88 +8,36 @@ tags: - Web Audio API translation_of: Web/API/AudioProcessingEvent --- -<p>{{APIRef("Web Audio API")}}{{deprecated_header}}</p> +{{APIRef("Web Audio API")}}{{deprecated_header}} -<p>AudioProcessingEvent représente l'évènement qui est passé lorsqu'un tampon {{domxref ("ScriptProcessorNode")}} est prêt à être traité.</p> +AudioProcessingEvent représente l'évènement qui est passé lorsqu'un tampon {{domxref ("ScriptProcessorNode")}} est prêt à être traité. -<div class="note"> -<p><strong>Note :</strong> Cette fonctionnalité est dépréciée à partir de la version du 29 Août 2014 de la spécification Web Audio API, elle sera remplacée par les <a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a>.</p> -</div> +> **Note :** Cette fonctionnalité est dépréciée à partir de la version du 29 Août 2014 de la spécification Web Audio API, elle sera remplacée par les [Audio Workers](/en-US/docs/Web/API/Web_Audio_API#Audio_Workers). -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>La liste ci-dessous inclut les propriétés héritées de son parent, {{domxref("Event")}}.</em></p> +_La liste ci-dessous inclut les propriétés héritées de son parent, {{domxref("Event")}}._ -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{ReadOnlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>La cible de l'évènement (la plus haute dans le DOM).</td> - </tr> - <tr> - <td><code>type</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Le type d'évènement.</td> - </tr> - <tr> - <td><code>bubbles</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>Indique si l'évènement se propage normalement.</td> - </tr> - <tr> - <td><code>cancelable</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>Indique s'il est possible d'annuler l'évènement.</td> - </tr> - <tr> - <td><code>playbackTime</code> {{ReadOnlyInline}}</td> - <td><code>double</code></td> - <td>Moment auquel le son sera joué, tel que défini par {{domxref("AudioContext.currentTime")}}</td> - </tr> - <tr> - <td><code>inputBuffer</code> {{ReadOnlyInline}}</td> - <td>{{domxref("AudioBuffer")}}</td> - <td>Tampon contenant les données audio à traiter en entrée. Le nombre de canaux est défini comme paramètre, <code>numberOfInputChannels</code>, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'<code>AudioBuffer</code> renvoyé est valide uniquement dans la portée de la fonction <code>onaudioprocess</code>.</td> - </tr> - <tr> - <td><code>outputBuffer</code> {{ReadOnlyInline}}</td> - <td>{{domxref("AudioBuffer")}}</td> - <td>Tampon dans lequel les données doivent être écrites en sortie. Le nombre de canaux est défini comme paramètre, <code>numberOfOutputChannels</code>, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'<code>AudioBuffer</code> renvoyé est valide uniquement dans la portée de la fonction <code>onaudioprocess</code>.</td> - </tr> - </tbody> -</table> +| Propriété | Type | Description | +| --------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` {{ReadOnlyInline}} | {{domxref("EventTarget")}} | La cible de l'évènement (la plus haute dans le DOM). | +| `type` {{ReadOnlyInline}} | {{domxref("DOMString")}} | Le type d'évènement. | +| `bubbles` {{ReadOnlyInline}} | `boolean` | Indique si l'évènement se propage normalement. | +| `cancelable` {{ReadOnlyInline}} | `boolean` | Indique s'il est possible d'annuler l'évènement. | +| `playbackTime` {{ReadOnlyInline}} | `double` | Moment auquel le son sera joué, tel que défini par {{domxref("AudioContext.currentTime")}} | +| `inputBuffer` {{ReadOnlyInline}} | {{domxref("AudioBuffer")}} | Tampon contenant les données audio à traiter en entrée. Le nombre de canaux est défini comme paramètre, `numberOfInputChannels`, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'`AudioBuffer` renvoyé est valide uniquement dans la portée de la fonction `onaudioprocess`. | +| `outputBuffer` {{ReadOnlyInline}} | {{domxref("AudioBuffer")}} | Tampon dans lequel les données doivent être écrites en sortie. Le nombre de canaux est défini comme paramètre, `numberOfOutputChannels`, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'`AudioBuffer` renvoyé est valide uniquement dans la portée de la fonction `onaudioprocess`. | -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.AudioProcessingEvent")}}</p> +{{Compat("api.AudioProcessingEvent")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audioworklet/index.md b/files/fr/web/api/audioworklet/index.md index 7e0330b10c..4a8de6b246 100644 --- a/files/fr/web/api/audioworklet/index.md +++ b/files/fr/web/api/audioworklet/index.md @@ -17,57 +17,40 @@ tags: - sound translation_of: Web/API/AudioWorklet --- -<p>{{APIRef("Web Audio API")}}{{securecontext_header}}</p> +{{APIRef("Web Audio API")}}{{securecontext_header}} -<p>L'interface <strong><code>AudioWorklet</code></strong> dans l'<a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a> est utilisée pour fournir des scripts de traitement audio personnalisés qui s'exécutent dans un thread séparé afin de fournir un traitement audio à très faible latence. Le code du worklet est exécuté dans le contexte d'exécution global {{domxref("AudioWorkletGlobalScope")}}, en utilisant un thread audio web séparé qui est partagé par le worklet et les autres nœuds audio.</p> +L'interface **`AudioWorklet`** dans l'[API Web Audio](/fr/docs/Web/API/Web_Audio_API) est utilisée pour fournir des scripts de traitement audio personnalisés qui s'exécutent dans un thread séparé afin de fournir un traitement audio à très faible latence. Le code du worklet est exécuté dans le contexte d'exécution global {{domxref("AudioWorkletGlobalScope")}}, en utilisant un thread audio web séparé qui est partagé par le worklet et les autres nœuds audio. -<p>L'accès à distance d'<code>AudioWorklet</code> du contexte audio se fait par la propriété {{domxref("BaseAudioContext.audioWorklet")}}.</p> +L'accès à distance d'`AudioWorklet` du contexte audio se fait par la propriété {{domxref("BaseAudioContext.audioWorklet")}}. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>L'interface <code>AudioWorklet</code> </em>ne définit pas de propriétés propres, mais hérite des propriétés de<em> {{domxref("Worklet")}}.</em></p> +*L'interface `AudioWorklet` *ne définit pas de propriétés propres, mais hérite des propriétés de _{{domxref("Worklet")}}._ -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p>Cette interface hérite des méthodes de<em> {{domxref('Worklet')}}. L'interface <code>AudioWorklet</code> </em>ne définit aucune méthode propre<em>.</em></p> +Cette interface hérite des méthodes de *{{domxref('Worklet')}}. L'interface `AudioWorklet`*ne définit aucune méthode propre*.* -<h2 id="Evénements">Evénements</h2> +## Evénements -<p>L'<em><code>AudioWorklet</code> </em>n'a pas d'événements auxquels il répond<em>.</em></p> +L'*`AudioWorklet` *n'a pas d'événements auxquels il répond*.* -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Voir {{domxref("AudioWorkletNode")}} pour des exemples complets de création de nœuds audio personnalisés.</p> +Voir {{domxref("AudioWorkletNode")}} pour des exemples complets de création de nœuds audio personnalisés. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API','#audioworklet','AudioWorklet')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td>Définition intiale.</td> - </tr> - </tbody> -</table> +| Spécification | Status | Commentaire | +| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName('Web Audio API','#audioworklet','AudioWorklet')}} | {{Spec2('Web Audio API')}} | Définition intiale. | -<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> +## Compatibilité du navigateur -<div> +{{Compat("api.AudioWorklet")}} +## Voir aussi -<p>{{Compat("api.AudioWorklet")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("AudioWorkletGlobalScope")}} — le contexte global d'exécution d'un <code>AudioWorklet</code></li> - <li><a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a></li> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +- {{domxref("AudioWorkletGlobalScope")}} — le contexte global d'exécution d'un `AudioWorklet` +- [API Web Audio](/fr/docs/Web/API/Web_Audio_API) +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md index ee891dad3a..61afaee4f6 100644 --- a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md +++ b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md @@ -9,74 +9,56 @@ tags: - WebAuthn translation_of: Web/API/AuthenticatorAssertionResponse/authenticatorData --- -<p>{{draft}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}</p> - -<p>La propriété <code><strong>authenticatorData</strong></code> (rattachée à l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que :</p> - -<ul> - <li>l'empreinte d'identifiant (rpIdHash pour <em>Relying Party ID Hash</em>)</li> - <li>un compteur de signature</li> - <li>un test quant à la présence de l'utilisateur</li> - <li>des marqueurs (<em>flags</em>) de vérification de l'utilisateur</li> - <li>les éventuelles extensions traitées par l'authenticateur</li> -</ul> - -<p>Cette propriété est signée par l'authenticateur (c'est l'un des deux champs qui est signé).</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: js">var authnrData = assertion.response.authnrData; -</pre> - -<h3 id="Valeur">Valeur</h3> - -<p>Un objet {{jsxref("ArrayBuffer")}} dont la propriété {{jsxref("ArrayBuffer.byteLength")}} indique qu'il mesure au moins 37 octets et qui contient les champs suivants :</p> - -<ul> - <li><code><strong>rpIdHash</strong></code> (32 octets) - Une empreinte SHA256 de l'identifiant de la partie fiable (i.e. - le domaine) tel que vu par le navigateur. Le serveur s'assurera ensuite que cette empreinte correspond à sa propre origine afin d'empêcher les tentatives de hameçonnage (<em>phishing</em>) ou d'autres attaques de l'homme du milieu (<em>man-in-the-middle</em>).</li> - <li><code><strong>flags</strong></code> (1 octet) - Une série de bits qui indique les différents attributs validés par l'authenticateur. Les bits sont décrits comme suit (où le bit 0 correspond au bit de poids faible) (tous les bits ne sont pas mentionnés car certains sont réservés pour une utilisation future) : - <ul> - <li>Bit 0 : Présence de l'utilisateur (<em>User Presence</em> - UP) : si ce bit est actif, cela signifie que l'authenticateur a validé la présence de l'utilisateur par un test de présence (<em>Test of User Presence</em> - TUP). Cela peut notamment correspondre à l'appui sur un bouton de l'authenticateur.</li> - <li>Bit 2 : Vérification de l'utilisateur (<em>User Verification</em> - UV) : si ce bit est actif, cela signifie que l'authenticateur a vérifié l'utilisateur en question via une méthode d'authentification (biométrique, code PIN, autre).</li> - <li>Bit 6 : Présence des données d'authentification vérifiées (<em>Attested Credential Data </em>- AT) : si ce bit est actif, le champ <code>attestedCredentialData</code> suivra immédiatement après les 37 premiers octets de cet objet.</li> - <li>Bit 7 : Présence des données d'extension (<em>Extension data</em> - ED) : si ce bit est actif, les données d'extensions suivront le champ <code>attestedCredentialData</code> s'il est présent ou seront situées après les 37 premiers octets de cet objet sinon.</li> - </ul> - </li> - <li><code><strong>signCount</strong></code> (4 octets) : un compteur de signature provenant de l'authenticateur. Cela permet au serveur de détecter un éventuel clonage de l'authenticateur.</li> - <li><code><strong>attestedCredentialData</strong></code> (longueur variable) : les informations d'authentification qui ont été créées. Ce champ est uniquement présent lors d'un appel à <code>navigator.credentials.create()</code>. Ces informations sont représentées par une séquence d'octets au format suivant : - <ul> - <li><code><strong>AAGUID</strong></code> (16 octets) - <em>Authenticator Attestation Globally Unique Identifier</em>, un identifiant universel unique pour l'attestation de l'authenticateur qui identifie le modèle de l'authenticateur (pas cet exemplaire en particulier) afin qu'une autre partie puisse comprendre les caractéristiques de l'authenticateur en consultant ses méta-données.</li> - <li><code><strong>credentialIdLength</strong></code> (2 octets) - la longueur, en octets, de l'identifiant d'authentification qui suit ces octets.</li> - <li><code><strong>credentialId</strong></code> (longueur variable) - un identifiant unique pour ces informations d'authentification et qui pourra être demandé pour de futures authentifications. Cette information mesure <code>credentialIdLength</code> octets.</li> - <li><code><strong>credentialPublicKey</strong></code> (longueur variable) - une clé publique encodée au format <a href="https://tools.ietf.org/html/rfc8152">COSE</a>. Cette clé publique sera stockée sur le serveur et associée au compte de l'utilisateur afin d'être utilisée pour de futures authentifications.</li> - </ul> - </li> - <li><code><strong>extensions</strong></code> (longueur variable) - Une carte optionnelle, encodée au format <a href="https://tools.ietf.org/html/rfc7049">CBOR</a>, et qui contient les extensions de l'authenticateur.</li> -</ul> - -<h2 id="Exemples">Exemples</h2> - -<p>TBD</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAuthn')}}</td> - <td>{{Spec2('WebAuthn')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.AuthenticatorAssertionResponse")}}</p> +{{draft}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}} + +La propriété **`authenticatorData`** (rattachée à l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que : + +- l'empreinte d'identifiant (rpIdHash pour _Relying Party ID Hash_) +- un compteur de signature +- un test quant à la présence de l'utilisateur +- des marqueurs (_flags_) de vérification de l'utilisateur +- les éventuelles extensions traitées par l'authenticateur + +Cette propriété est signée par l'authenticateur (c'est l'un des deux champs qui est signé). + +## Syntaxe + +```js +var authnrData = assertion.response.authnrData; +``` + +### Valeur + +Un objet {{jsxref("ArrayBuffer")}} dont la propriété {{jsxref("ArrayBuffer.byteLength")}} indique qu'il mesure au moins 37 octets et qui contient les champs suivants : + +- **`rpIdHash`** (32 octets) - Une empreinte SHA256 de l'identifiant de la partie fiable (i.e. - le domaine) tel que vu par le navigateur. Le serveur s'assurera ensuite que cette empreinte correspond à sa propre origine afin d'empêcher les tentatives de hameçonnage (_phishing_) ou d'autres attaques de l'homme du milieu (_man-in-the-middle_). +- **`flags`** (1 octet) - Une série de bits qui indique les différents attributs validés par l'authenticateur. Les bits sont décrits comme suit (où le bit 0 correspond au bit de poids faible) (tous les bits ne sont pas mentionnés car certains sont réservés pour une utilisation future) : + + - Bit 0 : Présence de l'utilisateur (_User Presence_ - UP) : si ce bit est actif, cela signifie que l'authenticateur a validé la présence de l'utilisateur par un test de présence (_Test of User Presence_ - TUP). Cela peut notamment correspondre à l'appui sur un bouton de l'authenticateur. + - Bit 2 : Vérification de l'utilisateur (_User Verification_ - UV) : si ce bit est actif, cela signifie que l'authenticateur a vérifié l'utilisateur en question via une méthode d'authentification (biométrique, code PIN, autre). + - Bit 6 : Présence des données d'authentification vérifiées (_Attested Credential Data_ - AT) : si ce bit est actif, le champ `attestedCredentialData` suivra immédiatement après les 37 premiers octets de cet objet. + - Bit 7 : Présence des données d'extension (_Extension data_ - ED) : si ce bit est actif, les données d'extensions suivront le champ `attestedCredentialData` s'il est présent ou seront situées après les 37 premiers octets de cet objet sinon. + +- **`signCount`** (4 octets) : un compteur de signature provenant de l'authenticateur. Cela permet au serveur de détecter un éventuel clonage de l'authenticateur. +- **`attestedCredentialData`** (longueur variable) : les informations d'authentification qui ont été créées. Ce champ est uniquement présent lors d'un appel à `navigator.credentials.create()`. Ces informations sont représentées par une séquence d'octets au format suivant : + + - **`AAGUID`** (16 octets) - _Authenticator Attestation Globally Unique Identifier_, un identifiant universel unique pour l'attestation de l'authenticateur qui identifie le modèle de l'authenticateur (pas cet exemplaire en particulier) afin qu'une autre partie puisse comprendre les caractéristiques de l'authenticateur en consultant ses méta-données. + - **`credentialIdLength`** (2 octets) - la longueur, en octets, de l'identifiant d'authentification qui suit ces octets. + - **`credentialId`** (longueur variable) - un identifiant unique pour ces informations d'authentification et qui pourra être demandé pour de futures authentifications. Cette information mesure `credentialIdLength` octets. + - **`credentialPublicKey`** (longueur variable) - une clé publique encodée au format [COSE](https://tools.ietf.org/html/rfc8152). Cette clé publique sera stockée sur le serveur et associée au compte de l'utilisateur afin d'être utilisée pour de futures authentifications. + +- **`extensions`** (longueur variable) - Une carte optionnelle, encodée au format [CBOR](https://tools.ietf.org/html/rfc7049), et qui contient les extensions de l'authenticateur. + +## Exemples + +TBD + +## Specifications + +| Spécification | État | Commentaires | +| -------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.AuthenticatorAssertionResponse")}} diff --git a/files/fr/web/api/authenticatorassertionresponse/index.md b/files/fr/web/api/authenticatorassertionresponse/index.md index 5b1ff20f39..2fd0d5ac37 100644 --- a/files/fr/web/api/authenticatorassertionresponse/index.md +++ b/files/fr/web/api/authenticatorassertionresponse/index.md @@ -10,58 +10,45 @@ tags: - WebAuthn translation_of: Web/API/AuthenticatorAssertionResponse --- -<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p> +{{APIRef("Web Authentication API")}}{{securecontext_header}} -<p>L'interface <code><strong>AuthenticatorAssertionResponse</strong></code>, rattachée à l'<a href="/fr/docs/Web/API/Web_Authentication_API">API Web Authentication</a>, est renvoyée par un appel à {{domxref('CredentialsContainer.get()')}} lorsqu'on a passé un objet {{domxref('PublicKeyCredential')}} en argument. Cette interface fournit une preuve à un service que l'objet possède une paire de clé et que la requête d'authentification est valide et approvée.</p> +L'interface **`AuthenticatorAssertionResponse`**, rattachée à l'[API Web Authentication](/fr/docs/Web/API/Web_Authentication_API), est renvoyée par un appel à {{domxref('CredentialsContainer.get()')}} lorsqu'on a passé un objet {{domxref('PublicKeyCredential')}} en argument. Cette interface fournit une preuve à un service que l'objet possède une paire de clé et que la requête d'authentification est valide et approvée. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt><code>AuthenticatorAssertionResponse.clientDataJSON</code></dt> - <dd>Les données du client pour l'authentification telles que l'origine et le <em>challenge</em>. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de {{domxref("AuthenticatorResponse")}}.</dd> - <dt>{{domxref("AuthenticatorAssertionResponse.authenticatorData")}}</dt> - <dd>Un objet {{jsxref("ArrayBuffer")}} contenant les informations sur l'authenticateur telles que : - <ul> - <li>l'empreinte d'identifiant (<em>Relying Party ID Hash</em>) <code>rpidHash</code></li> - <li>un compteur de signature</li> - <li>un test de présence d'utilisateur</li> - <li>des marqueurs de vérification de l'utilisateur</li> - <li>les éventuelles extensions traitées par l'authentificateur</li> - </ul> - Ce champ est l'un des deux champs qui est signé par l'authentificateur.</dd> - <dt>{{domxref("AuthenticatorAssertionResponse.signature")}}</dt> - <dd>Une signature d'assertion par rapport à {{domxref("AuthenticatorAssertionResponse.authenticatorData")}} et {{domxref("AuthenticatorResponse.clientDataJSON")}}. La signature d'assertion est créée avec la clé privée de la paire de clés (générée avec l'appel à <code>create()</code>) et est vérifiée avec la clé publique la même paire de clé.</dd> - <dt>{{domxref("AuthenticatorAssertionResponse.userHandle")}}</dt> - <dd>Un objet {{jsxref("ArrayBuffer")}} contenant un identifiant opaque pour l'utilisateur.</dd> -</dl> +- `AuthenticatorAssertionResponse.clientDataJSON` + - : Les données du client pour l'authentification telles que l'origine et le _challenge_. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de {{domxref("AuthenticatorResponse")}}. +- {{domxref("AuthenticatorAssertionResponse.authenticatorData")}} -<h2 id="Méthodes">Méthodes</h2> + - : Un objet {{jsxref("ArrayBuffer")}} contenant les informations sur l'authenticateur telles que : -<p>Aucune.</p> + - l'empreinte d'identifiant (_Relying Party ID Hash_) `rpidHash` + - un compteur de signature + - un test de présence d'utilisateur + - des marqueurs de vérification de l'utilisateur + - les éventuelles extensions traitées par l'authentificateur -<h2 id="Exemples">Exemples</h2> + Ce champ est l'un des deux champs qui est signé par l'authentificateur. -<p>TBD</p> +- {{domxref("AuthenticatorAssertionResponse.signature")}} + - : Une signature d'assertion par rapport à {{domxref("AuthenticatorAssertionResponse.authenticatorData")}} et {{domxref("AuthenticatorResponse.clientDataJSON")}}. La signature d'assertion est créée avec la clé privée de la paire de clés (générée avec l'appel à `create()`) et est vérifiée avec la clé publique la même paire de clé. +- {{domxref("AuthenticatorAssertionResponse.userHandle")}} + - : Un objet {{jsxref("ArrayBuffer")}} contenant un identifiant opaque pour l'utilisateur. -<h2 id="Spécifications">Spécifications</h2> +## Méthodes -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAuthn')}}</td> - <td>{{Spec2('WebAuthn')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +Aucune. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Exemples -<p>{{Compat("api.AuthenticatorAssertionResponse")}}</p> +TBD + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.AuthenticatorAssertionResponse")}} diff --git a/files/fr/web/api/authenticatorattestationresponse/index.md b/files/fr/web/api/authenticatorattestationresponse/index.md index 13a1741a88..b4a6dbbad3 100644 --- a/files/fr/web/api/authenticatorattestationresponse/index.md +++ b/files/fr/web/api/authenticatorattestationresponse/index.md @@ -10,46 +10,31 @@ tags: - WebAuthn translation_of: Web/API/AuthenticatorAttestationResponse --- -<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p> +{{APIRef("Web Authentication API")}}{{securecontext_header}} -<p>L'interface <strong><code>AuthenticatorAttestationResponse</code></strong>, rattachée à l'<a href="/en-US/docs/Web/API/Web_Authentication_API">API Web Authentication</a>, est renvoyée par un appel à {{domxref('CredentialsContainer.create()')}} lorsqu'un objet {{domxref('PublicKeyCredential')}} est passé à la méthode. Elle fournit une racine cryptographique de confiance pour la nouvelle paire de clés qui a été générée.</p> +L'interface **`AuthenticatorAttestationResponse`**, rattachée à l'[API Web Authentication](/en-US/docs/Web/API/Web_Authentication_API), est renvoyée par un appel à {{domxref('CredentialsContainer.create()')}} lorsqu'un objet {{domxref('PublicKeyCredential')}} est passé à la méthode. Elle fournit une racine cryptographique de confiance pour la nouvelle paire de clés qui a été générée. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt><code>AuthenticatorAttestationResponse.clientDataJSON</code></dt> - <dd>Les données relatives aux client pour l'authentification telles que l'origine et le <em>challenge</em>. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de l'interface {{domxref("AuthenticatorResponse")}}.</dd> - <dt>{{domxref("AuthenticatorAttestationResponse.attestationObject")}}</dt> - <dd>Un objet {{domxref("ArrayBuffer")}} qui contient les données de l'authenticateur ainsi qu'une instruction d'attestation pour la nouvelle paire de clés.</dd> -</dl> +- `AuthenticatorAttestationResponse.clientDataJSON` + - : Les données relatives aux client pour l'authentification telles que l'origine et le _challenge_. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de l'interface {{domxref("AuthenticatorResponse")}}. +- {{domxref("AuthenticatorAttestationResponse.attestationObject")}} + - : Un objet {{domxref("ArrayBuffer")}} qui contient les données de l'authenticateur ainsi qu'une instruction d'attestation pour la nouvelle paire de clés. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p>Aucune.</p> +Aucune. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>TBD</p> +TBD -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAuthn')}}</td> - <td>{{Spec2('WebAuthn')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| -------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.AuthenticatorAttestationResponse")}}</p> +{{Compat("api.AuthenticatorAttestationResponse")}} diff --git a/files/fr/web/api/authenticatorresponse/index.md b/files/fr/web/api/authenticatorresponse/index.md index 097cbfad44..cea562c832 100644 --- a/files/fr/web/api/authenticatorresponse/index.md +++ b/files/fr/web/api/authenticatorresponse/index.md @@ -9,49 +9,32 @@ tags: - Web Authn translation_of: Web/API/AuthenticatorResponse --- -<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p> +{{APIRef("Web Authentication API")}}{{securecontext_header}} -<p>L'interface <code><strong>AuthenticatorResponse</strong></code>, rattachée à l'<a href="/en-US/docs/Web/API/Web_Authentication_API">API Web Authentication</a>, constitue l'interface de base pour les interfaces qui fournissent une racine cryptographique de confiance pour une paire de clés. Les interfaces filles contiennent des informations relatives au navigateur telles que l'origine du <em>challenge</em> et qui peuvent être renvoyée par {{domxref("PublicKeyCredential.response")}}.</p> +L'interface **`AuthenticatorResponse`**, rattachée à l'[API Web Authentication](/en-US/docs/Web/API/Web_Authentication_API), constitue l'interface de base pour les interfaces qui fournissent une racine cryptographique de confiance pour une paire de clés. Les interfaces filles contiennent des informations relatives au navigateur telles que l'origine du _challenge_ et qui peuvent être renvoyée par {{domxref("PublicKeyCredential.response")}}. -<h2 id="Interfaces_basées_sur_AuthenticatorResponse">Interfaces basées sur <code>AuthenticatorResponse</code></h2> +## Interfaces basées sur `AuthenticatorResponse` -<p>Voici la liste des interfaces basées sur <code>AuthenticatorResponse</code>.</p> +Voici la liste des interfaces basées sur `AuthenticatorResponse`. -<ul> - <li>{{domxref("AuthenticatorAssertionResponse")}}</li> - <li>{{domxref("AuthenticatorAttestationResponse")}}</li> -</ul> +- {{domxref("AuthenticatorAssertionResponse")}} +- {{domxref("AuthenticatorAttestationResponse")}} -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt>{{domxref("AuthenticatorResponse.clientDataJSON")}}</dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Learn/JavaScript/Objects/JSON">JSON</a> stockée dans un {{domxref("ArrayBuffer")}} et qui représente les données du client passées à {{domxref("CredentialsContainer.create()")}} ou {{domxref("CredentialsContainer.get()")}}.</dd> -</dl> +- {{domxref("AuthenticatorResponse.clientDataJSON")}} + - : Une chaîne de caractères [JSON](/fr/docs/Learn/JavaScript/Objects/JSON) stockée dans un {{domxref("ArrayBuffer")}} et qui représente les données du client passées à {{domxref("CredentialsContainer.create()")}} ou {{domxref("CredentialsContainer.get()")}}. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p>Aucune.</p> +Aucune. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAuthn')}}</td> - <td>{{Spec2('WebAuthn')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| -------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.AuthenticatorResponse")}}</p> +{{Compat("api.AuthenticatorResponse")}} diff --git a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md index 3d995409bb..d33fd5eb4e 100644 --- a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md +++ b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md @@ -11,25 +11,24 @@ tags: - createBiquadFilter translation_of: Web/API/BaseAudioContext/createBiquadFilter --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<div> -<p>La méthode <code>createBiquadFilter()</code> de l'interface {{ domxref("BaseAudioContext") }} crée un {{ domxref("BiquadFilterNode") }}, qui représente un filtre de second ordre configurable comme plusieurs types de filtres communs différents.</p> -</div> +La méthode `createBiquadFilter()` de l'interface {{ domxref("BaseAudioContext") }} crée un {{ domxref("BiquadFilterNode") }}, qui représente un filtre de second ordre configurable comme plusieurs types de filtres communs différents. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">baseAudioContext.createBiquadFilter();</pre> + baseAudioContext.createBiquadFilter(); -<h3 id="Description">Retourne</h3> +### Retourne -<p>un {{domxref("BiquadFilterNode")}}.</p> +un {{domxref("BiquadFilterNode")}}. -<h2 id="Example">Exemple</h2> +## Exemple -<p>L'exemple suivant montre une utilisation basique d'un AudioContext pour créer un nœud de filtre Biquad. Pour un exemple fonctionnel complet, visitez notre démonstration <a href="https://mdn.github.io/voice-change-o-matic/">voice-change-o-matic</a> (et lisez de même le <a href="https://github.com/mdn/voice-change-o-matic">code source</a>).</p> +L'exemple suivant montre une utilisation basique d'un AudioContext pour créer un nœud de filtre Biquad. Pour un exemple fonctionnel complet, visitez notre démonstration [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) (et lisez de même le [code source](https://github.com/mdn/voice-change-o-matic)). -<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +```js +var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); //set up the different audio nodes we will use for the app var analyser = audioCtx.createAnalyser(); @@ -52,35 +51,19 @@ gainNode.connect(audioCtx.destination); biquadFilter.type = "lowshelf"; biquadFilter.frequency.setValueAtTime(1000, audioCtx.currentTime); -biquadFilter.gain.setValueAtTime(25, audioCtx.currentTime);</pre> +biquadFilter.gain.setValueAtTime(25, audioCtx.currentTime); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbiquadfilter', 'createBiquadFilter()')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- | +| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbiquadfilter', 'createBiquadFilter()')}} | {{Spec2('Web Audio API')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div> +{{Compat("api.BaseAudioContext.createBiquadFilter")}} +## Voir aussi -<p>{{Compat("api.BaseAudioContext.createBiquadFilter")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li> -</ul> +- [Utiliser l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/baseaudiocontext/createbuffer/index.md b/files/fr/web/api/baseaudiocontext/createbuffer/index.md index 55ca8f3ea5..e87275b3eb 100644 --- a/files/fr/web/api/baseaudiocontext/createbuffer/index.md +++ b/files/fr/web/api/baseaudiocontext/createbuffer/index.md @@ -11,70 +11,67 @@ tags: - createBuffer translation_of: Web/API/BaseAudioContext/createBuffer --- -<p>{{APIRef("API Web Audio")}}</p> +{{APIRef("API Web Audio")}} -<p>La méthode <code>createBuffer()</code> de l'interface {{domxref("BaseAudioContext")}} est utilisée pour créer un nouvel objet {{domxref("AudioBuffer")}} vide, qui peut ensuite être rempli.</p> +La méthode `createBuffer()` de l'interface {{domxref("BaseAudioContext")}} est utilisée pour créer un nouvel objet {{domxref("AudioBuffer")}} vide, qui peut ensuite être rempli. -<p>Pour plus de détails sur les tampons audio, consultez la page de référence {{domxref ("AudioBuffer")}}.</p> +Pour plus de détails sur les tampons audio, consultez la page de référence {{domxref ("AudioBuffer")}}. -<div class="note"> -<p><strong>Note :</strong> <code>createBuffer()</code> permettait de prendre des données compressées et de restituer des échantillons décodés, mais cette possibilité a été supprimée de la spécification, du fait que tout le décodage était effectué dans le thread principal, donc <code>createBuffer()</code> bloquait l'exécution du reste du code. La méthode asynchrone <code>decodeAudioData()</code> fait la même chose - prend l'audio compressé, par exemple, un fichier MP3, et vous renvoie directement un {{domxref("AudioBuffer")}} que vous pouvez ensuite faire jouer via {{domxref("AudioBufferSourceNode")}}. Pour des utilisations simples comme la lecture d'un fichier MP3, <code>decodeAudioData()</code> est ce que vous devriez utiliser.</p> -</div> +> **Note :** `createBuffer()` permettait de prendre des données compressées et de restituer des échantillons décodés, mais cette possibilité a été supprimée de la spécification, du fait que tout le décodage était effectué dans le thread principal, donc `createBuffer()` bloquait l'exécution du reste du code. La méthode asynchrone `decodeAudioData()` fait la même chose - prend l'audio compressé, par exemple, un fichier MP3, et vous renvoie directement un {{domxref("AudioBuffer")}} que vous pouvez ensuite faire jouer via {{domxref("AudioBufferSourceNode")}}. Pour des utilisations simples comme la lecture d'un fichier MP3, `decodeAudioData()` est ce que vous devriez utiliser. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var tampon = baseAudioContext.createBuffer(<em>nbDeCanaux</em>, <em>longueur</em>, <em>frequenceDEchantillonnage</em>);</pre> + var tampon = baseAudioContext.createBuffer(nbDeCanaux, longueur, frequenceDEchantillonnage); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<div class="note"> -<p><strong>Note :</strong> pour une explication en profondeur de la façon dont les tampons audio fonctionnent, ainsi que de leur signification, lire <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Les concepts de base de la Web Audio API</a> de notre guide des concepts de base.</p> -</div> +> **Note :** pour une explication en profondeur de la façon dont les tampons audio fonctionnent, ainsi que de leur signification, lire [Les concepts de base de la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API) de notre guide des concepts de base. -<dl> - <dt>nbDeCanaux</dt> - <dd>Un nombre entier représentant le nombre de canaux que ce tampon doit avoir. Les implémentations doivent prendre en charge un minimum de 1 canal et un maximum de 32 canaux.</dd> - <dt>longueur</dt> - <dd>Un entier représentant la taille du tampon dans les trames d'échantillons.</dd> - <dt>frequenceDEchantillonnage</dt> - <dd>La fréquence d'échantillonnage des données audio linéaires en trames d'échantillons par seconde. Une implémentation doit supporter des fréquences d'échantillonnage comprises au minimum dans la plage 22050 et 96000.</dd> -</dl> +- nbDeCanaux + - : Un nombre entier représentant le nombre de canaux que ce tampon doit avoir. Les implémentations doivent prendre en charge un minimum de 1 canal et un maximum de 32 canaux. +- longueur + - : Un entier représentant la taille du tampon dans les trames d'échantillons. +- frequenceDEchantillonnage + - : La fréquence d'échantillonnage des données audio linéaires en trames d'échantillons par seconde. Une implémentation doit supporter des fréquences d'échantillonnage comprises au minimum dans la plage 22050 et 96000. -<h3 id="Retourne">Retourne</h3> +### Retourne -<p>Un {{domxref("AudioBuffer")}}.</p> +Un {{domxref("AudioBuffer")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Tout d'abord, deux exemples triviaux simples pour aider à expliquer comment les paramètres sont utilisés :</p> +Tout d'abord, deux exemples triviaux simples pour aider à expliquer comment les paramètres sont utilisés : -<pre class="brush: js">var ctxAudio = new AudioContext(); -var tampon = ctxAudio.createBuffer(2, 22050, 44100);</pre> +```js +var ctxAudio = new AudioContext(); +var tampon = ctxAudio.createBuffer(2, 22050, 44100); +``` -<p>Si vous utilisez cet appel, vous obtiendrez un tampon stéréo (deux canaux), qui, lorsque relu avec un <code>AudioContext</code> fonctionnant à 44100Hz (très courant, la plupart des cartes son normales fonctionnent à cette fréquence), durera 0,5 seconde : 22050 trames / 44100 Hz = 0,5 seconde.</p> +Si vous utilisez cet appel, vous obtiendrez un tampon stéréo (deux canaux), qui, lorsque relu avec un `AudioContext` fonctionnant à 44100Hz (très courant, la plupart des cartes son normales fonctionnent à cette fréquence), durera 0,5 seconde : 22050 trames / 44100 Hz = 0,5 seconde. -<pre class="brush: js">var ctxAudio = new AudioContext(); -var tampon = ctxAudio.createBuffer(1, 22050, 22050);</pre> +```js +var ctxAudio = new AudioContext(); +var tampon = ctxAudio.createBuffer(1, 22050, 22050); +``` -<p>Si vous utilisez cet appel, vous obtiendrez un tampon mono (un canal), qui, lorsqu'il sera relu avec un <code>AudioContext</code> fonctionnant à 44100Hz, sera automatiquement *rééchantillonné* à 44100Hz (et produira donc 44100 trames), et durera 1,0 seconde : 44100 images / 44100Hz = 1 seconde.</p> +Si vous utilisez cet appel, vous obtiendrez un tampon mono (un canal), qui, lorsqu'il sera relu avec un `AudioContext` fonctionnant à 44100Hz, sera automatiquement \*rééchantillonné\* à 44100Hz (et produira donc 44100 trames), et durera 1,0 seconde : 44100 images / 44100Hz = 1 seconde. -<div class="note"> -<p><strong>Note :</strong> le rééchantillonnage audio est très similaire au redimensionnement d'une image : supposons que vous ayez une image 16 x 16, mais que vous vouliez qu'elle remplisse une zone 32x32: vous la redimensionnez (rééchantillonnez). Le résultat aura une qualité moindre (il pourra être flou ou bizarre, selon l'algorithme de redimensionnement), mais cela fonctionnera, et l'image redimensionnée prendra moins de place. L'audio rééchantillonné est exactement la même chose - vous économisez de l'espace, mais en pratique, vous ne pourrez pas reproduire correctement le contenu haute fréquence (les sons aigus).</p> -</div> +> **Note :** le rééchantillonnage audio est très similaire au redimensionnement d'une image : supposons que vous ayez une image 16 x 16, mais que vous vouliez qu'elle remplisse une zone 32x32: vous la redimensionnez (rééchantillonnez). Le résultat aura une qualité moindre (il pourra être flou ou bizarre, selon l'algorithme de redimensionnement), mais cela fonctionnera, et l'image redimensionnée prendra moins de place. L'audio rééchantillonné est exactement la même chose - vous économisez de l'espace, mais en pratique, vous ne pourrez pas reproduire correctement le contenu haute fréquence (les sons aigus). -<p>Examinons maintenant un exemple de <code>createBuffer()</code> plus complexe, dans lequel nous créons un tampon de deux secondes, le remplissons de bruit blanc, puis le reproduisons via {{domxref("AudioBufferSourceNode")}}. Le commentaire devrait clairement faire comprendre ce qui se passe. Vous pouvez également exécuter le code en direct ou regarder le source.</p> +Examinons maintenant un exemple de `createBuffer()` plus complexe, dans lequel nous créons un tampon de deux secondes, le remplissons de bruit blanc, puis le reproduisons via {{domxref("AudioBufferSourceNode")}}. Le commentaire devrait clairement faire comprendre ce qui se passe. Vous pouvez également exécuter le code en direct ou regarder le source. -<pre class="brush: js">var ctxAudio = new (window.AudioContext || window.webkitAudioContext)(); +```js +var ctxAudio = new (window.AudioContext || window.webkitAudioContext)(); // Création d'un tampon stéréo vide de trois secondes à la fréquence d'échantillonnage de l'AudioContext var monArrayBuffer = ctxAudio.createBuffer(2, ctxAudio.sampleRate * 3, ctxAudio.sampleRate); // Remplissage du tampon avec du bruit blanc ; // simplement des valeurs aléatoires entre -1,0 et 1,0 -for (var canal = 0; canal < monArrayBuffer.numberOfChannels; canal++) { +for (var canal = 0; canal < monArrayBuffer.numberOfChannels; canal++) { // Cela nous donne le ArrayBuffer qui contient effectivement les données var donneesCourantes = monArrayBuffer.getChannelData(canal); - for (var i = 0; i < monArrayBuffer.length; i++) { + for (var i = 0; i < monArrayBuffer.length; i++) { // Math.random() est dans [0; 1,0] // l'audio doit se trouver dans [-1,0; 1,0] donneesCourantes[i] = Math.random() * 2 - 1; @@ -90,31 +87,19 @@ source.buffer = monArrayBuffer; // de sorte que nous puissions entendre le son source.connect(ctxAudio.destination); // Démarrer la lecture de la source -source.start();</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.BaseAudioContext.createBuffer")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></li> -</ul> +source.start(); +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.BaseAudioContext.createBuffer")}} + +## Voir aussi + +- [Utilisation de l'API Web Audio](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/baseaudiocontext/createbuffersource/index.md b/files/fr/web/api/baseaudiocontext/createbuffersource/index.md index 9a9dfe08cf..b01d7c1884 100644 --- a/files/fr/web/api/baseaudiocontext/createbuffersource/index.md +++ b/files/fr/web/api/baseaudiocontext/createbuffersource/index.md @@ -3,29 +3,28 @@ title: BaseAudioContext.createBufferSource() slug: Web/API/BaseAudioContext/createBufferSource translation_of: Web/API/BaseAudioContext/createBufferSource --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<p>La méthode <code>createBufferSource()</code> de l’interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{ domxref("AudioBufferSourceNode") }}, qui peut être employé pour jouer des données audio contenues dans un objet {{ domxref("AudioBuffer") }}.</p> +La méthode `createBufferSource()` de l’interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{ domxref("AudioBufferSourceNode") }}, qui peut être employé pour jouer des données audio contenues dans un objet {{ domxref("AudioBuffer") }}. -<p>Des {{ domxref("AudioBuffer") }} peuvent être créés en utilisant {{domxref("BaseAudioContext.createBuffer")}}, ou sont retournés par la méthode {{domxref("BaseAudioContext.decodeAudioData")}} quand elle a terminé de décoder une piste audio avec succès.</p> +Des {{ domxref("AudioBuffer") }} peuvent être créés en utilisant {{domxref("BaseAudioContext.createBuffer")}}, ou sont retournés par la méthode {{domxref("BaseAudioContext.decodeAudioData")}} quand elle a terminé de décoder une piste audio avec succès. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <var>source</var> = <var>baseAudioContext</var>.createBufferSource();</pre> + var source = baseAudioContext.createBufferSource(); -<h3 id="Retourne">Retourne</h3> +### Retourne -<p>Un {{domxref("AudioBufferSourceNode")}}.</p> +Un {{domxref("AudioBufferSourceNode")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Dans cet exemple, on crée un tampon de deux secondes, on le remplit avec du bruit blanc, puis on le joue via un {{ domxref("AudioBufferSourceNode") }}. Les commentaires devraient expliquer clairement ce qui se passe.</p> +Dans cet exemple, on crée un tampon de deux secondes, on le remplit avec du bruit blanc, puis on le joue via un {{ domxref("AudioBufferSourceNode") }}. Les commentaires devraient expliquer clairement ce qui se passe. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez également <a href="https://mdn.github.io/webaudio-examples/audio-buffer/">exécuter le code en direct</a>, ou <a href="https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html">voir la source</a>.</p> -</div> +> **Note :** Vous pouvez également [exécuter le code en direct](https://mdn.github.io/webaudio-examples/audio-buffer/), ou [voir la source](https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html). -<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +```js +var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var button = document.querySelector('button'); var pre = document.querySelector('pre'); var myScript = document.querySelector('script'); @@ -43,10 +42,10 @@ var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate); button.onclick = function() { // Remplit le tampon avec du bruit blanc ; // simplement des valeurs aléatoires entre -1.0 et 1.0 - for (var channel = 0; channel < channels; channel++) { + for (var channel = 0; channel < channels; channel++) { // Ceci nous donne l’ArrayBuffer qui contient les données var nowBuffering = myArrayBuffer.getChannelData(channel); - for (var i = 0; i < frameCount; i++) { + for (var i = 0; i < frameCount; i++) { // Math.random() est parmi [0; 1.0] // audio doit être parmi [-1.0; 1.0] nowBuffering[i] = Math.random() * 2 - 1; @@ -63,31 +62,19 @@ button.onclick = function() { source.connect(audioCtx.destination); // commence la lecture de la source source.start(); -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffersource', 'createBufferSource()')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.BaseAudioContext.createBufferSource")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +} +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffersource', 'createBufferSource()')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.BaseAudioContext.createBufferSource")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/baseaudiocontext/creategain/index.md b/files/fr/web/api/baseaudiocontext/creategain/index.md index 90039ecc31..0dcba996f1 100644 --- a/files/fr/web/api/baseaudiocontext/creategain/index.md +++ b/files/fr/web/api/baseaudiocontext/creategain/index.md @@ -14,32 +14,35 @@ tags: translation_of: Web/API/BaseAudioContext/createGain original_slug: Web/API/AudioContext/createGain --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<div> -<p>La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio.</p> -</div> +La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var contexteAudio = new AudioContext(); -var gainNode = contexteAudio.createGain();</pre> +```js +var contexteAudio = new AudioContext(); +var gainNode = contexteAudio.createGain(); +``` -<h3 id="Description">Retourne</h3> +### Retourne -<p>Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio et en sortie un son dont le volume a été ajusté à un niveau indiqué par le paramètre de type <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("GainNode.gain")}}.</p> +Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio et en sortie un son dont le volume a été ajusté à un niveau indiqué par le paramètre de type [a-rate](/en-US/docs/Web/API/AudioParam#a-rate) {{domxref("GainNode.gain")}}. -<h2 id="Example">Exemple</h2> +## Exemple -<p>L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain.<br> - <br> - L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (<a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js">et son code source</a>.)</p> +L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain. -<pre class="brush: html"><div> - <button class="boutonson">Mute button</button> -</div></pre> +L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) ([et son code source](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js).) -<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +```html +<div> + <button class="boutonson">Mute button</button> +</div> +``` + +```js +var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var gainNode = contexteAudio.createGain(); var boutonSon = document.querySelector('.boutonson'), source; @@ -81,31 +84,19 @@ function couperSon () { boutonSon.id = ""; boutonSon.innerHTML = "Couper le son"; } -}</pre> - -<h2 id="Spécification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2> - -<p>{{Compat("api.BaseAudioContext.createGain")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +} +``` + +## Spécification + +| Spécification | Status | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité navigateur + +{{Compat("api.BaseAudioContext.createGain")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/baseaudiocontext/createpanner/index.md b/files/fr/web/api/baseaudiocontext/createpanner/index.md index 2c11e2a02e..12cb80751f 100644 --- a/files/fr/web/api/baseaudiocontext/createpanner/index.md +++ b/files/fr/web/api/baseaudiocontext/createpanner/index.md @@ -12,31 +12,30 @@ tags: - createPanner translation_of: Web/API/BaseAudioContext/createPanner --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<div> -<p>La méthode <code>createPanner()</code> de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{domxref("PannerNode")}}, qui sert à spatialiser dans un environnement 3D un flux audio entrant.</p> -</div> +La méthode `createPanner()` de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{domxref("PannerNode")}}, qui sert à spatialiser dans un environnement 3D un flux audio entrant. -<p>Le <em>panner node</em> est spatialisé en relation avec l'{{domxref("AudioListener") }} de l'AudioContext (défini par l'attribut {{domxref("AudioContext.listener") }}), qui représente la position et l'orientation de la personne écoutant le flux audio.</p> +Le _panner node_ est spatialisé en relation avec l'{{domxref("AudioListener") }} de l'AudioContext (défini par l'attribut {{domxref("AudioContext.listener") }}), qui représente la position et l'orientation de la personne écoutant le flux audio. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">baseAudioCtx.createPanner();</pre> + baseAudioCtx.createPanner(); -<h3 id="Retourne">Retourne</h3> +### Retourne -<p>Un {{domxref("PannerNode")}}.</p> +Un {{domxref("PannerNode")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Dans l'exemple suivant, vous pouvez voir comment la méthode <code>createPanner()</code>, l'{{domxref("AudioListener")}} et le {{domxref("PannerNode")}} peuvent être utilisés pour contrôler la spatialisation d'un flux audio. Généralement, vous définirez la position dans un espace 3D que votre écouteur et votre <em>panner</em> (source) occupaient initialement, puis ajuster la position de l'un ou des deux au fur et à mesure de l'utilisation. Vous pourriez par exemple vouloir déplacer un personnage dans un monde de jeu vidéo, et vouloir que le rendu audio change de manière réaliste tandis que le personnage s'approche ou s'éloigne d'un diffuseur audio tel qu'une chaîne stéréo. Dans cet exemple, vous pouvez voir ceci contrôlé par les fonctions <code>moveRight()</code>, <code>moveLeft()</code>, etc., qui définissent de nouvelles valeurs pour la position du <em>panner</em> via la fonction <code>PositionPanner()</code>.</p> +Dans l'exemple suivant, vous pouvez voir comment la méthode `createPanner()`, l'{{domxref("AudioListener")}} et le {{domxref("PannerNode")}} peuvent être utilisés pour contrôler la spatialisation d'un flux audio. Généralement, vous définirez la position dans un espace 3D que votre écouteur et votre _panner_ (source) occupaient initialement, puis ajuster la position de l'un ou des deux au fur et à mesure de l'utilisation. Vous pourriez par exemple vouloir déplacer un personnage dans un monde de jeu vidéo, et vouloir que le rendu audio change de manière réaliste tandis que le personnage s'approche ou s'éloigne d'un diffuseur audio tel qu'une chaîne stéréo. Dans cet exemple, vous pouvez voir ceci contrôlé par les fonctions `moveRight()`, `moveLeft()`, etc., qui définissent de nouvelles valeurs pour la position du _panner_ via la fonction `PositionPanner()`. -<p>Pour voir une implantation complète, visitez notre <a href="https://mdn.github.io/webaudio-examples/panner-node/">exemple de panner-node</a> (<a href="https://github.com/mdn/webaudio-examples/tree/master/panner-node">lisez le code source aussi !</a>) – cette démonstration vous transporte dans un environnement 2.5D appelé "Pièce de métal", où vous pouvez jouer un morceau sur une boom box et vous déplacer autour de celle-ci pour entendre comment le son change !</p> +Pour voir une implantation complète, visitez notre [exemple de panner-node](https://mdn.github.io/webaudio-examples/panner-node/) ([lisez le code source aussi !](https://github.com/mdn/webaudio-examples/tree/master/panner-node)) – cette démonstration vous transporte dans un environnement 2.5D appelé "Pièce de métal", où vous pouvez jouer un morceau sur une boom box et vous déplacer autour de celle-ci pour entendre comment le son change ! -<p>Notez la manière dont nous avons utilisé la détection de fonctionnalité pour soit donner au navigateur les nouvelles valeurs des propriétés (comme {{domxref("AudioListener.forwardX")}}) pour définir la position, etc. s'il le permet, ou d'anciennes méthodes (comme {{domxref("AudioListener.setOrientation()")}}) s'il les permet aussi mais non les nouvelles propriétés.</p> +Notez la manière dont nous avons utilisé la détection de fonctionnalité pour soit donner au navigateur les nouvelles valeurs des propriétés (comme {{domxref("AudioListener.forwardX")}}) pour définir la position, etc. s'il le permet, ou d'anciennes méthodes (comme {{domxref("AudioListener.setOrientation()")}}) s'il les permet aussi mais non les nouvelles propriétés. -<pre class="brush: js">// set up listener and panner position information +```js +// set up listener and panner position information var WIDTH = window.innerWidth; var HEIGHT = window.innerHeight; @@ -117,41 +116,21 @@ function positionPanner() { panner.setPosition(xPos,yPos,zPos); } pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos; -}</pre> - -<div class="note"> -<p><strong>Note :</strong> In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.</p> -</div> - -<h2 id="Spécifications">Spécifications</h2> +} +``` -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createpanner', 'createPanner()')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td></td> - </tr> - </tbody> -</table> +> **Note :** In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Spécifications -<div> -<div> +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- | +| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createpanner', 'createPanner()')}} | {{Spec2('Web Audio API')}} | | +## Compatibilité des navigateurs -<p>{{Compat("api.BaseAudioContext.createPanner")}}</p> -</div> -</div> +{{Compat("api.BaseAudioContext.createPanner")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li> -</ul> +- [Utiliser l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md index 5678fadb26..8df75e0fb7 100644 --- a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md +++ b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md @@ -12,42 +12,38 @@ tags: - createPeriodicWave translation_of: Web/API/BaseAudioContext/createPeriodicWave --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<p>La méthode <code>createPeriodicWave()</code> de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer une {{domxref("PeriodicWave")}} (onde périodique), qui sert à définir une onde sinusoïdale périodique qui peut être utilisée pour modeler la sortie d'un {{ domxref("OscillatorNode") }}.</p> +La méthode `createPeriodicWave()` de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer une {{domxref("PeriodicWave")}} (onde périodique), qui sert à définir une onde sinusoïdale périodique qui peut être utilisée pour modeler la sortie d'un {{ domxref("OscillatorNode") }}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var onde = <em>AudioContext</em>.createPeriodicWave(<em>réel</em>, <em>imag</em>[, <em>constraints</em>]);</pre> + var onde = AudioContext.createPeriodicWave(réel, imag[, constraints]); -<h3 id="Retour">Retour</h3> +### Retour -<p>Un {{domxref("PeriodicWave")}}.</p> +Un {{domxref("PeriodicWave")}}. -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>réel</code></dt> - <dd>Un tableau de termes cosinus (traditionnellement les termes A).</dd> - <dt><code>imag</code></dt> - <dd>Un tableau de termes sinus (traditionnellement les termes B).</dd> - <dt><code>contraintes</code> {{optional_inline}}</dt> - <dd>Un objet dictionnaire spécifiant si la normalisation doit être désactivée (si non spécifié, la normalisation est activée par défaut). Il accepte une propriété : - <ul> - <li><code>disableNormalization</code>: si réglé à <code>true</code>, la normalisation est désactivée pour l'onde périodique. Sa valeur par défaut est <code>false</code>.</li> - </ul> - </dd> -</dl> +- `réel` + - : Un tableau de termes cosinus (traditionnellement les termes A). +- `imag` + - : Un tableau de termes sinus (traditionnellement les termes B). +- `contraintes` {{optional_inline}} -<div class="note"> -<p><strong>Note :</strong> Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1.</p> -</div> + - : Un objet dictionnaire spécifiant si la normalisation doit être désactivée (si non spécifié, la normalisation est activée par défaut). Il accepte une propriété : -<h2 id="Exemple">Exemple</h2> + - `disableNormalization`: si réglé à `true`, la normalisation est désactivée pour l'onde périodique. Sa valeur par défaut est `false`. -<p>L'exemple suivant illustre un usage simple de <code>createPeriodicWave()</code>, pour créer un objet {{domxref("PeriodicWave")}} contenant une simple courbe de sinus.</p> +> **Note :** Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1. -<pre class="brush: js">var réel = new Float32Array(2); +## Exemple + +L'exemple suivant illustre un usage simple de `createPeriodicWave()`, pour créer un objet {{domxref("PeriodicWave")}} contenant une simple courbe de sinus. + +```js +var réel = new Float32Array(2); var imag = new Float32Array(2); var contexteAudio = new AudioContext(); var oscillateur = contexteAudio.createOscillator(); @@ -64,43 +60,27 @@ oscillateur.setPeriodicWave(wave); oscillateur.connect(contexteAudio.destination); oscillateur.start(); -oscillateur.stop(2);</pre> - -<p>Cela fonctionne car un son n'ayant qu'un unique harmonique est par définition une onde sinusoïdale.</p> - -<p>Ici, nous créons une <code>PeriodicWave</code> avec deux valeurs. La première est le décalage DC, qui est la valeur à la quelle l'ocillateur démarre. 0 est une bonne valeur de départ ici car nous voulons commencer la courbe au milieu de l'intervalle [-1.0; 1.0].</p> +oscillateur.stop(2); +``` -<p>La seconde valeur et les suivantes sont les composantes de sinus et de cosinus. Vous pouvez les voir comme le résultat d'une transformation de Fourier, où l'on obtient les valeurs du domaine de fréquence à partir de la valeur du domaine de temps. Ici, avec <code>createPeriodicWave()</code>, vous spécifiez les fréquences, et le navigateur calcule une transformation inverse de Fourier pour obtenir un tampon de domaine de temps pour la fréquence de l'oscillateur. Ici, nous définissons seulement un composant au volume maximal (1.0) sur l'harmonique fondamentale, ainsi on obtient une courbe sinusoïdale.</p> +Cela fonctionne car un son n'ayant qu'un unique harmonique est par définition une onde sinusoïdale. -<p>Les coefficients de la transformation de Fourier doivent être données dans un ordre <em>croissant</em> (c'est-à-dire <math><semantics><mrow><mrow><mo>(</mo><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mi>i</mi></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>c</mi><mo>+</mo><mi>d</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>i</mi></mrow></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>f</mi><mo>+</mo><mi>g</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>3</mn><mi>i</mi></mrow></msup></mrow><annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i} </annotation></semantics></math> etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique.</p> +Ici, nous créons une `PeriodicWave` avec deux valeurs. La première est le décalage DC, qui est la valeur à la quelle l'ocillateur démarre. 0 est une bonne valeur de départ ici car nous voulons commencer la courbe au milieu de l'intervalle \[-1.0; 1.0]. -<h2 id="Spécifications">Spécifications</h2> +La seconde valeur et les suivantes sont les composantes de sinus et de cosinus. Vous pouvez les voir comme le résultat d'une transformation de Fourier, où l'on obtient les valeurs du domaine de fréquence à partir de la valeur du domaine de temps. Ici, avec `createPeriodicWave()`, vous spécifiez les fréquences, et le navigateur calcule une transformation inverse de Fourier pour obtenir un tampon de domaine de temps pour la fréquence de l'oscillateur. Ici, nous définissons seulement un composant au volume maximal (1.0) sur l'harmonique fondamentale, ainsi on obtient une courbe sinusoïdale. -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createperiodicwave', 'createPeriodicWave')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td></td> - </tr> - </tbody> -</table> +Les coefficients de la transformation de Fourier doivent être données dans un ordre _croissant_ (c'est-à-dire <math><semantics><mrow><mrow><mo>(</mo><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mi>i</mi></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>c</mi><mo>+</mo><mi>d</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>i</mi></mrow></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>f</mi><mo>+</mo><mi>g</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>3</mn><mi>i</mi></mrow></msup></mrow><annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i} </annotation></semantics></math> etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Spécifications -<div> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createperiodicwave', 'createPeriodicWave')}} | {{Spec2('Web Audio API')}} | | +## Compatibilité des navigateurs -<p>{{Compat("api.BaseAudioContext.createPeriodicWave")}}</p> -</div> +{{Compat("api.BaseAudioContext.createPeriodicWave")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li> -</ul> +- [Utiliser l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/baseaudiocontext/index.md b/files/fr/web/api/baseaudiocontext/index.md index af570e1037..46c7e5d6af 100644 --- a/files/fr/web/api/baseaudiocontext/index.md +++ b/files/fr/web/api/baseaudiocontext/index.md @@ -11,126 +11,111 @@ tags: - Web Audio API translation_of: Web/API/BaseAudioContext --- -<div>{{APIRef("Web Audio API")}}</div> - -<p>L'interface <code>BaseAudioContext</code> agit comme une définition de base pour les graphiques de traitement audio en ligne et hors ligne, comme représenté par {{domxref("AudioContext")}} et {{domxref("OfflineAudioContext")}} respectivement. Vous n'utiliseriez pas <code>BaseAudioContext</code> directement — vous utiliseriez ses fonctionnalités via l'une de ces deux interfaces héréditaires.</p> - -<p>Un <code>BaseAudioContext</code> peut être une cible d'événements, il implémente donc l'interface {{domxref("EventTarget")}}.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Renvoie l'objet {{domxref("AudioWorklet")}}, utilisé pour créer des AudioNodes personnalisés avec traitement JavaScript.</dd> - <dt>{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}</dt> - <dd>Renvoie un double représentant une durée matérielle toujours croissante en secondes utilisée pour la planification. Il commence à <code>0</code>.</dd> - <dt>{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}</dt> - <dd>Renvoie un {{domxref("AudioDestinationNode")}} représentant la destination finale de tout l'audio dans le contexte. Il peut être considéré comme le périphérique de rendu audio.</dd> - <dt>{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}</dt> - <dd>Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.</dd> - <dt>{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}</dt> - <dd>Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée.</dd> - <dt>{{domxref("BaseAudioContext.state")}} {{readonlyInline}}</dt> - <dd>Renvoie l'état actuel de l'<code>AudioContext</code>.</dd> -</dl> - -<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3> - -<dl> - <dt>{{domxref("BaseAudioContext.onstatechange")}}</dt> - <dd>Un gestionnaire d'événements qui s'exécute lorsqu'un événement de type {{event("statechange")}} s'est déclenché. Cela se produit lorsque l'état de l'<code>AudioContext</code> change, en raison de l'appel de l'une des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}).</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p><em>Implémente également les méthodes de l'interface </em>{{domxref("EventTarget")}}.</p> - -<dl> - <dt>{{domxref("BaseAudioContext.createBuffer()")}}</dt> - <dd>Crée un nouvel objet {{ domxref("AudioBuffer") }} vide, qui peut ensuite être rempli de données et lu via un {{ domxref("AudioBufferSourceNode") }}.</dd> - <dt>{{domxref("BaseAudioContext.createConstantSource()")}}</dt> - <dd>Crée un objet {{domxref("ConstantSourceNode")}}, qui est une source audio qui émet en continu un signal sonore monophonique (un canal) dont les échantillons ont tous la même valeur.</dd> - <dt>{{domxref("BaseAudioContext.createBufferSource()")}}</dt> - <dd>Crée un {{domxref("AudioBufferSourceNode")}}, qui peut être utilisé pour lire et manipuler des données audio contenues dans un objet {{ domxref("AudioBuffer") }}. Les {{ domxref("AudioBuffer") }} sont créés à l'aide de {{domxref("AudioContext.createBuffer")}} ou renvoyés par {{domxref("AudioContext.decodeAudioData")}} lorsqu'il décode avec succès une piste audio.</dd> - <dt>{{domxref("BaseAudioContext.createScriptProcessor()")}}</dt> - <dd>Crée un {{domxref("ScriptProcessorNode")}}, qui peut être utilisé pour le traitement audio direct via JavaScript.</dd> - <dt>{{domxref("BaseAudioContext.createStereoPanner()")}}</dt> - <dd>Crée un {{domxref("StereoPannerNode")}}, qui peut être utilisé pour appliquer un panoramique stéréo à une source audio.</dd> - <dt>{{domxref("BaseAudioContext.createAnalyser()")}}</dt> - <dd>Crée un {{domxref("AnalyserNode")}}, qui peut être utilisé pour exposer les données de temps et de fréquence audio et par exemple pour créer des visualisations de données.</dd> - <dt>{{domxref("BaseAudioContext.createBiquadFilter()")}}</dt> - <dd>Crée un {{domxref("BiquadFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres courants: passe-haut, passe-bas, passe-bande, etc.</dd> - <dt>{{domxref("BaseAudioContext.createChannelMerger()")}}</dt> - <dd>Crée un {{domxref("ChannelMergerNode")}}, qui est utilisé pour combiner les canaux de plusieurs flux audio en un seul flux audio.</dd> - <dt>{{domxref("BaseAudioContext.createChannelSplitter()")}}</dt> - <dd>Crée un {{domxref("ChannelSplitterNode")}}, qui est utilisé pour accéder aux canaux individuels d'un flux audio et les traiter séparément.</dd> - <dt>{{domxref("BaseAudioContext.createConvolver()")}}</dt> - <dd>Crée un {{domxref("ConvolverNode")}}, qui peut être utilisé pour appliquer des effets de convolution à votre graphique audio, par exemple un effet de réverbération.</dd> - <dt>{{domxref("BaseAudioContext.createDelay()")}}</dt> - <dd>Crée un {{domxref("DelayNode")}}, qui est utilisé pour retarder le signal audio entrant d'une certaine quantité. Ce nœud est également utile pour créer des boucles de rétroaction dans un graphique d'API Web Audio.</dd> - <dt>{{domxref("BaseAudioContext.createDynamicsCompressor()")}}</dt> - <dd>Crée un {{domxref("DynamicsCompressorNode")}}, qui peut être utilisé pour appliquer une compression acoustique à un signal audio.</dd> - <dt>{{domxref("BaseAudioContext.createGain()")}}</dt> - <dd>Crée un {{domxref("GainNode")}}, qui peut être utilisé pour contrôler le volume global du graphique audio.</dd> - <dt>{{domxref("BaseAudioContext.createIIRFilter()")}}</dt> - <dd>Crée un {{domxref("IIRFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres communs différents.</dd> - <dt>{{domxref("BaseAudioContext.createOscillator()")}}</dt> - <dd>Crée un {{domxref("OscillatorNode")}}, une source représentant une forme d'one périodique. Cela génère essentiellement un ton.</dd> - <dt>{{domxref("BaseAudioContext.createPanner()")}}</dt> - <dd>Crée un {{domxref("PannerNode")}}, qui est utilisé pour spatialiser un flux audio entrant dans l'espace 3D.</dd> - <dt>{{domxref("BaseAudioContext.createPeriodicWave()")}}</dt> - <dd>Crée un {{domxref("PeriodicWave")}}, utilisé pour définir une forme d'one périodique qui peut être utilisée pour déterminer la sortie d'un {{ domxref("OscillatorNode") }}.</dd> - <dt>{{domxref("BaseAudioContext.createWaveShaper()")}}</dt> - <dd>Crée un {{domxref("WaveShaperNode")}}, qui est utilisé pour implémenter des effets de distorsion non linéaires.</dd> - <dt>{{domxref("BaseAudioContext.decodeAudioData()")}}</dt> - <dd>Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut <code>response</code> d'un {{domxref("XMLHttpRequest")}} après avoir défini le <code>responseType</code> sur <code>arraybuffer</code>. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio.</dd> - <dt>{{domxref("BaseAudioContext.resume()")}}</dt> - <dd>Reprend la progression du temps dans un contexte audio précédemment suspendu / mis en pause.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<p>Déclaration de context audio de base:</p> - -<pre class="brush: js">var audioCtx = new AudioContext();</pre> - -<p>Variante de nagivateur croisé:</p> - -<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; +{{APIRef("Web Audio API")}} + +L'interface `BaseAudioContext` agit comme une définition de base pour les graphiques de traitement audio en ligne et hors ligne, comme représenté par {{domxref("AudioContext")}} et {{domxref("OfflineAudioContext")}} respectivement. Vous n'utiliseriez pas `BaseAudioContext` directement — vous utiliseriez ses fonctionnalités via l'une de ces deux interfaces héréditaires. + +Un `BaseAudioContext` peut être une cible d'événements, il implémente donc l'interface {{domxref("EventTarget")}}. + +{{InheritanceDiagram}} + +## Propriétés + +- {{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}} + - : Renvoie l'objet {{domxref("AudioWorklet")}}, utilisé pour créer des AudioNodes personnalisés avec traitement JavaScript. +- {{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}} + - : Renvoie un double représentant une durée matérielle toujours croissante en secondes utilisée pour la planification. Il commence à `0`. +- {{domxref("BaseAudioContext.destination")}} {{readonlyInline}} + - : Renvoie un {{domxref("AudioDestinationNode")}} représentant la destination finale de tout l'audio dans le contexte. Il peut être considéré comme le périphérique de rendu audio. +- {{domxref("BaseAudioContext.listener")}} {{readonlyInline}} + - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D. +- {{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}} + - : Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée. +- {{domxref("BaseAudioContext.state")}} {{readonlyInline}} + - : Renvoie l'état actuel de l'`AudioContext`. + +### Gestionnaires d'événements + +- {{domxref("BaseAudioContext.onstatechange")}} + - : Un gestionnaire d'événements qui s'exécute lorsqu'un événement de type {{event("statechange")}} s'est déclenché. Cela se produit lorsque l'état de l'`AudioContext` change, en raison de l'appel de l'une des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}). + +## Méthodes + +_Implémente également les méthodes de l'interface_ {{domxref("EventTarget")}}. + +- {{domxref("BaseAudioContext.createBuffer()")}} + - : Crée un nouvel objet {{ domxref("AudioBuffer") }} vide, qui peut ensuite être rempli de données et lu via un {{ domxref("AudioBufferSourceNode") }}. +- {{domxref("BaseAudioContext.createConstantSource()")}} + - : Crée un objet {{domxref("ConstantSourceNode")}}, qui est une source audio qui émet en continu un signal sonore monophonique (un canal) dont les échantillons ont tous la même valeur. +- {{domxref("BaseAudioContext.createBufferSource()")}} + - : Crée un {{domxref("AudioBufferSourceNode")}}, qui peut être utilisé pour lire et manipuler des données audio contenues dans un objet {{ domxref("AudioBuffer") }}. Les {{ domxref("AudioBuffer") }} sont créés à l'aide de {{domxref("AudioContext.createBuffer")}} ou renvoyés par {{domxref("AudioContext.decodeAudioData")}} lorsqu'il décode avec succès une piste audio. +- {{domxref("BaseAudioContext.createScriptProcessor()")}} + - : Crée un {{domxref("ScriptProcessorNode")}}, qui peut être utilisé pour le traitement audio direct via JavaScript. +- {{domxref("BaseAudioContext.createStereoPanner()")}} + - : Crée un {{domxref("StereoPannerNode")}}, qui peut être utilisé pour appliquer un panoramique stéréo à une source audio. +- {{domxref("BaseAudioContext.createAnalyser()")}} + - : Crée un {{domxref("AnalyserNode")}}, qui peut être utilisé pour exposer les données de temps et de fréquence audio et par exemple pour créer des visualisations de données. +- {{domxref("BaseAudioContext.createBiquadFilter()")}} + - : Crée un {{domxref("BiquadFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres courants: passe-haut, passe-bas, passe-bande, etc. +- {{domxref("BaseAudioContext.createChannelMerger()")}} + - : Crée un {{domxref("ChannelMergerNode")}}, qui est utilisé pour combiner les canaux de plusieurs flux audio en un seul flux audio. +- {{domxref("BaseAudioContext.createChannelSplitter()")}} + - : Crée un {{domxref("ChannelSplitterNode")}}, qui est utilisé pour accéder aux canaux individuels d'un flux audio et les traiter séparément. +- {{domxref("BaseAudioContext.createConvolver()")}} + - : Crée un {{domxref("ConvolverNode")}}, qui peut être utilisé pour appliquer des effets de convolution à votre graphique audio, par exemple un effet de réverbération. +- {{domxref("BaseAudioContext.createDelay()")}} + - : Crée un {{domxref("DelayNode")}}, qui est utilisé pour retarder le signal audio entrant d'une certaine quantité. Ce nœud est également utile pour créer des boucles de rétroaction dans un graphique d'API Web Audio. +- {{domxref("BaseAudioContext.createDynamicsCompressor()")}} + - : Crée un {{domxref("DynamicsCompressorNode")}}, qui peut être utilisé pour appliquer une compression acoustique à un signal audio. +- {{domxref("BaseAudioContext.createGain()")}} + - : Crée un {{domxref("GainNode")}}, qui peut être utilisé pour contrôler le volume global du graphique audio. +- {{domxref("BaseAudioContext.createIIRFilter()")}} + - : Crée un {{domxref("IIRFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres communs différents. +- {{domxref("BaseAudioContext.createOscillator()")}} + - : Crée un {{domxref("OscillatorNode")}}, une source représentant une forme d'one périodique. Cela génère essentiellement un ton. +- {{domxref("BaseAudioContext.createPanner()")}} + - : Crée un {{domxref("PannerNode")}}, qui est utilisé pour spatialiser un flux audio entrant dans l'espace 3D. +- {{domxref("BaseAudioContext.createPeriodicWave()")}} + - : Crée un {{domxref("PeriodicWave")}}, utilisé pour définir une forme d'one périodique qui peut être utilisée pour déterminer la sortie d'un {{ domxref("OscillatorNode") }}. +- {{domxref("BaseAudioContext.createWaveShaper()")}} + - : Crée un {{domxref("WaveShaperNode")}}, qui est utilisé pour implémenter des effets de distorsion non linéaires. +- {{domxref("BaseAudioContext.decodeAudioData()")}} + - : Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut `response` d'un {{domxref("XMLHttpRequest")}} après avoir défini le `responseType` sur `arraybuffer`. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio. +- {{domxref("BaseAudioContext.resume()")}} + - : Reprend la progression du temps dans un contexte audio précédemment suspendu / mis en pause. + +## Exemples + +Déclaration de context audio de base: + +```js +var audioCtx = new AudioContext(); +``` + +Variante de nagivateur croisé: + +```js +var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); var oscillatorNode = audioCtx.createOscillator(); var gainNode = audioCtx.createGain(); var finish = audioCtx.destination; -// etc.</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#BaseAudioContext', 'BaseAudioContext')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.BaseAudioContext")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></li> - <li>{{domxref("AudioContext")}}</li> - <li>{{domxref("OfflineAudioContext")}}</li> -</ul> +// etc. +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#BaseAudioContext', 'BaseAudioContext')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.BaseAudioContext")}} + +## Voir aussi + +- [Utilisation de l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API) +- {{domxref("AudioContext")}} +- {{domxref("OfflineAudioContext")}} diff --git a/files/fr/web/api/battery_status_api/index.md b/files/fr/web/api/battery_status_api/index.md index ee8ceeb9b6..b7b75dd63d 100644 --- a/files/fr/web/api/battery_status_api/index.md +++ b/files/fr/web/api/battery_status_api/index.md @@ -8,26 +8,25 @@ tags: - Obsolete translation_of: Web/API/Battery_Status_API --- -<p>{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}</p> +{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}} -<p>L'<strong>API <em>Battery Status</em></strong>, souvent mentionnée sous le nom <strong>Battery API</strong>, fournit des informations sur le niveau de charge du système et permet d'envoyer des événements pour prévenir d'un changement du niveau de charge de la batterie. Cela peut être utilisé pour ajuster la consommation d'une application et la réduire pour réduire l'utilisation de la batterie lorsque son niveau de charge est bas ou encore de sauvegarder les données quand la batterie est bientôt vide.</p> +L'**API _Battery Status_**, souvent mentionnée sous le nom **Battery API**, fournit des informations sur le niveau de charge du système et permet d'envoyer des événements pour prévenir d'un changement du niveau de charge de la batterie. Cela peut être utilisé pour ajuster la consommation d'une application et la réduire pour réduire l'utilisation de la batterie lorsque son niveau de charge est bas ou encore de sauvegarder les données quand la batterie est bientôt vide. -<p>L'API Battery Status API étend l'interface {{domxref("window.navigator")}} avec la propriété {{domxref("window.navigator.battery")}}, méthode qui renvoie une promesse, résolue par l'objet {{domxref("BatteryManager")}}. Cet objet permet d'ajouter des nouveaux événements pour superviser l'état de la batterie.</p> +L'API Battery Status API étend l'interface {{domxref("window.navigator")}} avec la propriété {{domxref("window.navigator.battery")}}, méthode qui renvoie une promesse, résolue par l'objet {{domxref("BatteryManager")}}. Cet objet permet d'ajouter des nouveaux événements pour superviser l'état de la batterie. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans cet exemple, on cherche à surveiller les changements, à la fois du statut de la charge (est-ce que l'équipement est branché et se recharge ou est ce que l'équipement est alimenté par sa batterie) et des changements du niveau de charge dans le temps.</p> +Dans cet exemple, on cherche à surveiller les changements, à la fois du statut de la charge (est-ce que l'équipement est branché et se recharge ou est ce que l'équipement est alimenté par sa batterie) et des changements du niveau de charge dans le temps. -<p>Cela se fait en surveillant les événements : </p> +Cela se fait en surveillant les événements : -<ul> - <li>{{event("chargingchange")}}: changement de l'êtat de charge</li> - <li>{{event("levelchange")}}: changement du niveau de batterie</li> - <li>{{event("chargingtimechange")}}: évolution de l'estimation du temps de recharge</li> - <li>{{event("dischargingtimechange")}}: évolution de l'estimation d'autonomie sur batterie</li> -</ul> +- {{event("chargingchange")}}: changement de l'êtat de charge +- {{event("levelchange")}}: changement du niveau de batterie +- {{event("chargingtimechange")}}: évolution de l'estimation du temps de recharge +- {{event("dischargingtimechange")}}: évolution de l'estimation d'autonomie sur batterie -<pre class="brush: js;">navigator.getBattery().then(function(battery) { +```js +navigator.getBattery().then(function(battery) { function updateAllBatteryInfo(){ updateChargeInfo(); updateLevelInfo(); @@ -69,36 +68,21 @@ translation_of: Web/API/Battery_Status_API } }); -</pre> - -<p>Voir aussi <a href="http://www.w3.org/TR/battery-status/#examples">l'exemple de la spécification</a>.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Battery API")}}</td> - <td>{{Spec2("Battery API")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.BatteryManager")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information">Récupérer les informations relatives à la batterie - article et démonstration</a></li> - <li><a href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Billet de blog sur Hacks - Utiliser l'API Battery (en anglais)</a></li> -</ul> +``` + +Voir aussi [l'exemple de la spécification](http://www.w3.org/TR/battery-status/#examples). + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.BatteryManager")}} + +## Voir aussi + +- [Récupérer les informations relatives à la batterie - article et démonstration](/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information) +- [Billet de blog sur Hacks - Utiliser l'API Battery (en anglais)](http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/) diff --git a/files/fr/web/api/batterymanager/charging/index.md b/files/fr/web/api/batterymanager/charging/index.md index 7eaad0d9f8..e1521666a4 100644 --- a/files/fr/web/api/batterymanager/charging/index.md +++ b/files/fr/web/api/batterymanager/charging/index.md @@ -3,61 +3,48 @@ title: BatteryManager.charging slug: Web/API/BatteryManager/charging translation_of: Web/API/BatteryManager/charging --- -<div>{{obsolete_header}}</div> +{{obsolete_header}}{{APIRef("Battery API")}} -<div>{{APIRef("Battery API")}}</div> +Une valeur booléenne indiquant si la batterie de l'équipement est en train d'être chargée. -<p>Une valeur booléenne indiquant si la batterie de l'équipement est en train d'être chargée.</p> +## Syntax -<h2 id="Syntax">Syntax</h2> + var charging = battery.charging -<pre class="syntaxbox">var <em>charging</em> = battery.charging</pre> +`charging` indique si `battery`, qui est un objet du type {{domxref("BatteryManager")}}, est en charge; si la batterie est en charge, la variable a la valeur `true`. Sinon, dans le cas de la décharge, la variable a la valeurvaux `false`. -<p><code>charging</code> indique si <code><em>battery</em></code>, qui est un objet du type {{domxref("BatteryManager")}}, est en charge; si la batterie est en charge, la variable a la valeur <code>true</code>. Sinon, dans le cas de la décharge, la variable a la valeurvaux <code>false</code>.</p> +## Exemple -<h2 id="Example">Exemple</h2> +### Code HTML -<h3 id="Code_HTML">Code HTML</h3> +```html +<div id="charging">(êtat de charge inconnu)</div> +``` -<pre class="brush: html"><div id="charging">(&ecirc;tat de charge inconnu)</div></pre> +### Code JavaScript -<h3 id="Code_JavaScript">Code JavaScript</h3> - -<pre class="brush: js">navigator.getBattery().then(function(battery) { +```js +navigator.getBattery().then(function(battery) { var charging = battery.charging; document.querySelector('#charging').textContent = charging ; -});</pre> - -<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Battery API")}}</td> - <td>{{Spec2("Battery API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.BatteryManager.charging")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("BatteryManager")}}</li> - <li>{{domxref("Navigator.getBattery")}}</li> -</ul> +}); +``` + +{{ EmbedLiveSample('Example', '100%', 30) }} + +## Spécifications + +| Specification | Status | Comment | +| ------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.BatteryManager.charging")}} + +## Voir aussi + +- {{domxref("BatteryManager")}} +- {{domxref("Navigator.getBattery")}} diff --git a/files/fr/web/api/batterymanager/chargingtime/index.md b/files/fr/web/api/batterymanager/chargingtime/index.md index 7456fdb8fd..d469bded62 100644 --- a/files/fr/web/api/batterymanager/chargingtime/index.md +++ b/files/fr/web/api/batterymanager/chargingtime/index.md @@ -3,67 +3,52 @@ title: BatteryManager.chargingTime slug: Web/API/BatteryManager/chargingTime translation_of: Web/API/BatteryManager/chargingTime --- -<div>{{obsolete_header}}</div> +{{obsolete_header}} -<p>{{APIRef("Battery API")}}</p> +{{APIRef("Battery API")}} -<p>Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit rechargée.</p> +Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit rechargée. -<div class="note"> -<p><strong>Note :</strong> Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.</p> -</div> +> **Note :** Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>time</em> = battery.chargingTime</pre> + var time = battery.chargingTime -<p><code>time</code> est le temps restant en secondes jusqu'à que <code><em>battery</em></code>, qui est un objet de type {{domxref("BatteryManager")}}, soit rechargée, ou vaut 0 si la batterie est déjà rechargée. Si la batterie est en décharge, la variable vaut <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.</p> +`time` est le temps restant en secondes jusqu'à que `battery`, qui est un objet de type {{domxref("BatteryManager")}}, soit rechargée, ou vaut 0 si la batterie est déjà rechargée. Si la batterie est en décharge, la variable vaut [`Infinity`](/en-US/docs/JavaScript/Reference/Global_Objects/Infinity). -<h2 id="Example">Exemple</h2> +## Exemple -<h3 id="Code_HTML">Code HTML</h3> +### Code HTML -<pre class="brush: html"><div id="chargingTime">(temps de charge inconnu)</div> -</pre> +```html +<div id="chargingTime">(temps de charge inconnu)</div> +``` -<h3 id="Code_JavaScript">Code JavaScript</h3> +### Code JavaScript -<pre class="brush: js">navigator.getBattery().then(function(battery) { +```js +navigator.getBattery().then(function(battery) { var time = battery.chargingTime; document.querySelector('#chargingTime').textContent = battery.chargingTime; }); -</pre> - -<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Battery API")}}</td> - <td>{{Spec2("Battery API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.BatteryManager.chargingTime")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("BatteryManager")}}</li> - <li>{{domxref("Navigator.getBattery")}}</li> -</ul> +``` + +{{ EmbedLiveSample('Example', '100%', 30) }} + +## Spécifications + +| Specification | Status | Comment | +| ------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.BatteryManager.chargingTime")}} + +## Voir aussi + +- {{domxref("BatteryManager")}} +- {{domxref("Navigator.getBattery")}} diff --git a/files/fr/web/api/batterymanager/dischargingtime/index.md b/files/fr/web/api/batterymanager/dischargingtime/index.md index 8ad8ea8602..4cfac1fdde 100644 --- a/files/fr/web/api/batterymanager/dischargingtime/index.md +++ b/files/fr/web/api/batterymanager/dischargingtime/index.md @@ -3,67 +3,50 @@ title: BatteryManager.dischargingTime slug: Web/API/BatteryManager/dischargingTime translation_of: Web/API/BatteryManager/dischargingTime --- -<div>{{obsolete_header}}</div> +{{obsolete_header}}{{APIRef("Battery API")}} -<div>{{APIRef("Battery API")}}</div> +Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit déchargée. -<p>Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit déchargée.</p> +> **Note :** Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs. -<div class="note"> -<p><strong>Note :</strong> Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.</p> -</div> +## Syntax -<h2 id="Syntax">Syntax</h2> + var time = battery.dischargingTime -<pre class="syntaxbox">var <em>time</em> = battery.dischargingTime</pre> +`time` est le temps restant en secondes jusqu'à que `battery`, qui est un objet de type {{domxref("BatteryManager")}}, soit complètement déchargée. La variable vaut [`Infinity`](/en-US/docs/JavaScript/Reference/Global_Objects/Infinity) si la batterie est en train d'être chargée ou si le système ne parvient pas à calculer un temps restant. -<p><code>time</code> est le temps restant en secondes jusqu'à que <code><em>battery</em></code>, qui est un objet de type {{domxref("BatteryManager")}}, soit complètement déchargée. La variable vaut <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> si la batterie est en train d'être chargée ou si le système ne parvient pas à calculer un temps restant.</p> +## Exemple -<h2 id="Example">Exemple</h2> +### Code HTML -<h3 id="Code_HTML">Code HTML</h3> +```html +<div id="dischargingTime">(temps de décharge inconnu)</div> +``` -<pre class="brush: html"><div id="dischargingTime">(temps de d&eacute;charge inconnu)</div> -</pre> +### Code JavaScript -<h3 id="Code_JavaScript">Code JavaScript</h3> - -<pre class="brush: js;">navigator.getBattery().then(function(battery) { +```js +navigator.getBattery().then(function(battery) { var time = battery.dischargingTime; document.querySelector('#dischargingTime').textContent = battery.dischargingTime; }); -</pre> - -<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Battery API")}}</td> - <td>{{Spec2("Battery API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.BatteryManager.dischargingTime")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("BatteryManager")}}</li> - <li>{{domxref("Navigator.getBattery")}}</li> -</ul> +``` + +{{ EmbedLiveSample('Example', '100%', 30) }} + +## Spécifications + +| Specification | Status | Comment | +| ------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.BatteryManager.dischargingTime")}} + +## Voir aussi + +- {{domxref("BatteryManager")}} +- {{domxref("Navigator.getBattery")}} diff --git a/files/fr/web/api/batterymanager/index.md b/files/fr/web/api/batterymanager/index.md index 644c04acab..eec64cfc48 100644 --- a/files/fr/web/api/batterymanager/index.md +++ b/files/fr/web/api/batterymanager/index.md @@ -8,72 +8,53 @@ tags: - niveau translation_of: Web/API/BatteryManager --- -<p>{{ApiRef()}}</p> - -<h2 id="Sommaire">Sommaire</h2> - -<p>L'interface <code>BatteryManager </code>fournit des moyens pour obtenir des informations sur le niveau de charge de la batterie du système.</p> - -<p>La propriété {{domxref ("window.navigator.battery", "navigator.battery")}} retourne une instance de l'interface <code>BatteryManager </code>que vous pouvez utiliser pour interagir avec l'API d'état de la batterie.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}</dt> - <dd>Un Boolean indiquant si oui ou non la batterie est actuellement en cours de charge.</dd> - <dt>{{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}</dt> - <dd>Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement chargée, ou 0 si la batterie est complètement chargée.</dd> - <dt>{{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}</dt> - <dd>Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement déchargée et le système suspendu.</dd> - <dt>{{domxref("BatteryManager.level")}} {{ReadOnlyInline}}</dt> - <dd>Un nombre qui représente le niveau de charge de la batterie du système adapté à une valeur comprise entre 0.0 et 1.0.</dd> -</dl> - -<h3 id="Gestionnaires_d'Evenements">Gestionnaires d'Evenements</h3> - -<dl> - <dt>{{domxref("BatteryManager.onchargingchange")}}</dt> - <dd>Un gestionnaire pour le changement de la présence ou non du chargeur.</dd> - <dt>{{domxref("BatteryManager.onchargingtimechange")}}</dt> - <dd>Un gestionnaire pour la mise à jour du temps de charge</dd> - <dt>{{domxref("BatteryManager.ondischargingtimechange")}}</dt> - <dd>Un gestionnaire pour la mise à jour du temps de décharge</dd> - <dt>{{domxref("BatteryManager.onlevelchange")}}</dt> - <dd>Un gestionnaire pour la mise à jour pour les changement du niveau de batterie</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p>Hérite de {{domxref("EventTarget")}}:</p> - -<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Battery API')}}</td> - <td>{{Spec2('Battery API')}}</td> - <td>Spécification initale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.BatteryManager")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{ domxref("navigator.getBattery","navigator.getBattery") }}</li> - <li>La <a href="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a></li> -</ul> +{{ApiRef()}} + +## Sommaire + +L'interface `BatteryManager `fournit des moyens pour obtenir des informations sur le niveau de charge de la batterie du système. + +La propriété {{domxref ("window.navigator.battery", "navigator.battery")}} retourne une instance de l'interface `BatteryManager `que vous pouvez utiliser pour interagir avec l'API d'état de la batterie. + +## Propriétés + +- {{domxref("BatteryManager.charging")}} {{ReadOnlyInline}} + - : Un Boolean indiquant si oui ou non la batterie est actuellement en cours de charge. +- {{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}} + - : Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement chargée, ou 0 si la batterie est complètement chargée. +- {{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}} + - : Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement déchargée et le système suspendu. +- {{domxref("BatteryManager.level")}} {{ReadOnlyInline}} + - : Un nombre qui représente le niveau de charge de la batterie du système adapté à une valeur comprise entre 0.0 et 1.0. + +### Gestionnaires d'Evenements + +- {{domxref("BatteryManager.onchargingchange")}} + - : Un gestionnaire pour le changement de la présence ou non du chargeur. +- {{domxref("BatteryManager.onchargingtimechange")}} + - : Un gestionnaire pour la mise à jour du temps de charge +- {{domxref("BatteryManager.ondischargingtimechange")}} + - : Un gestionnaire pour la mise à jour du temps de décharge +- {{domxref("BatteryManager.onlevelchange")}} + - : Un gestionnaire pour la mise à jour pour les changement du niveau de batterie + +## Méthodes + +Hérite de {{domxref("EventTarget")}}: + +{{page("/en-US/docs/Web/API/EventTarget","Methods")}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------ | -------------------------------- | ---------------------- | +| {{SpecName('Battery API')}} | {{Spec2('Battery API')}} | Spécification initale. | + +## Compatibilité des navigateurs + +{{Compat("api.BatteryManager")}} + +## Voir aussi + +- {{ domxref("navigator.getBattery","navigator.getBattery") }} +- La [Battery Status API](/en-US/docs/WebAPI/Battery_Status) diff --git a/files/fr/web/api/batterymanager/level/index.md b/files/fr/web/api/batterymanager/level/index.md index 30fb39da87..dbaa9d3eca 100644 --- a/files/fr/web/api/batterymanager/level/index.md +++ b/files/fr/web/api/batterymanager/level/index.md @@ -3,65 +3,50 @@ title: BatteryManager.level slug: Web/API/BatteryManager/level translation_of: Web/API/BatteryManager/level --- -<div>{{obsolete_header}}</div> +{{obsolete_header}}{{APIRef("Battery API")}} -<div>{{APIRef("Battery API")}}</div> +Indique le niveau de charge de la batterie en tant que valeur comprise entre `0.0` (déchargée) et `1.0` (rechargée). -<p>Indique le niveau de charge de la batterie en tant que valeur comprise entre <code>0.0</code> (déchargée) et <code>1.0</code> (rechargée).</p> +## Syntaxe -<h2 id="Syntaxe">Syntaxe</h2> + var level = battery.level -<pre class="syntaxbox">var level = battery.level</pre> +`level` est un nombre représentant le niveau de charge de la batterie en tant que valeur comprise entre `0.0` et `1.0`. Une veleur de `0.0` signifie que `battery`, qui est un objet de type {{domxref("BatteryManager")}}, est vide, et que le système est sur le point d'être désactivé. Une valeur de `1.0` signifie que la batterie est pleine. -<p><code>level</code> est un nombre représentant le niveau de charge de la batterie en tant que valeur comprise entre <code>0.0</code> et <code>1.0</code>. Une veleur de <code>0.0</code> signifie que <code><em>battery</em></code>, qui est un objet de type {{domxref("BatteryManager")}}, est vide, et que le système est sur le point d'être désactivé. Une valeur de <code>1.0</code> signifie que la batterie est pleine.</p> +La valeur `1.0` est aussi retournée si le système n'est pas capable de déterminer son niveau de charge ou si le système n'est pas alimenté par une batterie. -<p>La valeur <code>1.0</code> est aussi retournée si le système n'est pas capable de déterminer son niveau de charge ou si le système n'est pas alimenté par une batterie.</p> +## Exemple -<h2 id="Example">Exemple</h2> +### Code HTML -<h3 id="Code_HTML">Code HTML</h3> +```html +<div id="level">(niveau de batterie inconnu)</div> +``` -<pre class="brush: html"><div id="level">(niveau de batterie inconnu)</div> -</pre> +### Code JavaScript -<h3 id="Code_JavaScript">Code JavaScript</h3> - -<pre class="brush: js;">navigator.getBattery().then(function(battery) { +```js +navigator.getBattery().then(function(battery) { var level = battery.level; document.querySelector('#level').textContent = level; }); -</pre> - -<p>{{ EmbedLiveSample('Example', '100%', 30, '', 'Web/API/BatteryManager/level') }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Battery API")}}</td> - <td>{{Spec2("Battery API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.BatteryManager.level")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("BatteryManager")}}</li> - <li>{{domxref("Navigator.getBattery")}}</li> -</ul> +``` + +{{ EmbedLiveSample('Example', '100%', 30, '', 'Web/API/BatteryManager/level') }} + +## Spécifications + +| Specification | Status | Comment | +| ------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.BatteryManager.level")}} + +## Voir aussi + +- {{domxref("BatteryManager")}} +- {{domxref("Navigator.getBattery")}} diff --git a/files/fr/web/api/beforeunloadevent/index.md b/files/fr/web/api/beforeunloadevent/index.md index 4a74d1689d..36cdf6e011 100644 --- a/files/fr/web/api/beforeunloadevent/index.md +++ b/files/fr/web/api/beforeunloadevent/index.md @@ -6,88 +6,75 @@ tags: - Reference translation_of: Web/API/BeforeUnloadEvent --- -<p>{{APIRef}}</p> +{{APIRef}} -<p>L'évènement <strong><code>beforeunload</code></strong> est déclenché quand la fenêtre, le document et ses ressources sont sur le point d'être déchargées.</p> +L'évènement **`beforeunload`** est déclenché quand la fenêtre, le document et ses ressources sont sur le point d'être déchargées. -<p>Si une chaine non vide est assignée à la propriété <code>returnValue</code> de l'évènement, une boite de confirmation apparait pour demander à l'utilisateur de valider le changement d'adresse (voir les exemples ci-dessous). Si aucune valeur n'est fournise, l'évènement est traité silencieusement. Certaines implantations ne demandent confirmation que si le cadre ou tout cadre embarqué reçoit une action utilisateur. Voir {{anch("Browser compatibility")}} pour plus d'informations.</p> +Si une chaine non vide est assignée à la propriété `returnValue` de l'évènement, une boite de confirmation apparait pour demander à l'utilisateur de valider le changement d'adresse (voir les exemples ci-dessous). Si aucune valeur n'est fournise, l'évènement est traité silencieusement. Certaines implantations ne demandent confirmation que si le cadre ou tout cadre embarqué reçoit une action utilisateur. Voir {{anch("Browser compatibility")}} pour plus d'informations. -<p>{{InheritanceDiagram(600, 120)}}</p> +{{InheritanceDiagram(600, 120)}} <table class="properties"> - <tbody> - <tr> - <td><strong>Bouillonne</strong></td> - <td>No</td> - </tr> - <tr> - <td><strong>Annulable</strong></td> - <td>Yes</td> - </tr> - <tr> - <td><strong>Cibles</strong></td> - <td>defaultView</td> - </tr> - <tr> - <td><strong>Interface</strong></td> - <td>{{domxref("Event")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>Bouillonne</strong></td> + <td>No</td> + </tr> + <tr> + <td><strong>Annulable</strong></td> + <td>Yes</td> + </tr> + <tr> + <td><strong>Cibles</strong></td> + <td>defaultView</td> + </tr> + <tr> + <td><strong>Interface</strong></td> + <td>{{domxref("Event")}}</td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush:js;">window.addEventListener("beforeunload", function(event) { +```js +window.addEventListener("beforeunload", function(event) { event.returnValue = "\o/"; }); // est équivalent à window.addEventListener("beforeunload", function(event) { event.preventDefault(); -});</pre> +}); +``` -<p>Les navigateurs basés sur WebKit ne suivent pas la spécification concernant la demande de confirmation. Un exemple similaire fonctionnant sur presque tous les navigateurs serait plutôt comme :</p> +Les navigateurs basés sur WebKit ne suivent pas la spécification concernant la demande de confirmation. Un exemple similaire fonctionnant sur presque tous les navigateurs serait plutôt comme : -<pre class="brush: js">window.addEventListener("beforeunload", function (e) { +```js +window.addEventListener("beforeunload", function (e) { var confirmationMessage = "\o/"; (e || window.event).returnValue = confirmationMessage; // Gecko + IE return confirmationMessage; /* Safari, Chrome, and other * WebKit-derived browsers */ -});</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "browsing-the-web.html#the-beforeunloadevent-interface", "BeforeUnloadEvent")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +}); +``` -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Spécifications -<div> +| Spécification | État | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("HTML WHATWG", "browsing-the-web.html#the-beforeunloadevent-interface", "BeforeUnloadEvent")}} | {{Spec2("HTML WHATWG")}} | Définition initiale | +## Compatibilité des navigateurs -<p>{{Compat("api.BeforeUnloadEvent")}}</p> -</div> +{{Compat("api.BeforeUnloadEvent")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{Event("DOMContentLoaded")}}</li> - <li>{{Event("readystatechange")}}</li> - <li>{{Event("load")}}</li> - <li>{{Event("beforeunload")}}</li> - <li>{{Event("unload")}}</li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li> -</ul> +- {{Event("DOMContentLoaded")}} +- {{Event("readystatechange")}} +- {{Event("load")}} +- {{Event("beforeunload")}} +- {{Event("unload")}} +- [Unloading Documents — Prompt to unload a document](http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document) diff --git a/files/fr/web/api/biquadfilternode/frequency/index.md b/files/fr/web/api/biquadfilternode/frequency/index.md index 508cf54cf8..550a287720 100644 --- a/files/fr/web/api/biquadfilternode/frequency/index.md +++ b/files/fr/web/api/biquadfilternode/frequency/index.md @@ -3,33 +3,32 @@ title: BiquadFilterNode.frequency slug: Web/API/BiquadFilterNode/frequency translation_of: Web/API/BiquadFilterNode/frequency --- -<p>{{ APIRef("Web Audio API") }}</p> +{{ APIRef("Web Audio API") }} -<div> -<p>La propriété <code>frequency</code> de l'interface {{ domxref("BiquadFilterNode") }} est un {{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a> : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz).</p> +La propriété `frequency` de l'interface {{ domxref("BiquadFilterNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz). -<p>Sa valeur par défaut est de <code>350</code> avec une portée nominale de <code>10</code> à la <a href="http://en.wikipedia.org/wiki/Nyquist_frequency">fréquence de Nyquist</a>, qui est la moitié de la fréquence d'échantillonnage.</p> -</div> +Sa valeur par défaut est de `350` avec une portée nominale de `10` à la [fréquence de Nyquist](http://en.wikipedia.org/wiki/Nyquist_frequency), qui est la moitié de la fréquence d'échantillonnage. -<h2 id="Syntax">Syntax</h2> +## Syntax -<pre class="brush: js">var contexteAudio = new AudioContext(); +```js +var contexteAudio = new AudioContext(); var filtreBiquad = contexteAudio.createBiquadFilter(); -filtreBiquad.frequency.value = 3000;</pre> +filtreBiquad.frequency.value = 3000; +``` -<div class="note"> -<p><strong>Note :</strong> Bien que le <code>AudioParam</code> renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.</p> -</div> +> **Note :** Bien que le `AudioParam` renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas. -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un {{domxref("AudioParam")}}.</p> +Un {{domxref("AudioParam")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple suivant montre l'utilisation basique d'un AudioContext pour créer un filtre Biquad. Pour un exemple complet, consultez notre démo <a href="http://mdn.github.io/voice-change-o-matic/">voice-change-o-matic</a> (et son <a href="https://github.com/mdn/voice-change-o-matic">code source</a>).</p> +L'exemple suivant montre l'utilisation basique d'un AudioContext pour créer un filtre Biquad. Pour un exemple complet, consultez notre démo [voice-change-o-matic](http://mdn.github.io/voice-change-o-matic/) (et son [code source](https://github.com/mdn/voice-change-o-matic)). -<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +```js +var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // mise en place des différents noeuds audio que nous utiliserons par la suite var analyseur = contexteAudio.createAnalyser(); @@ -53,31 +52,18 @@ noeudGain.connect(contexteAudio.destination); filtreBiquad.type = "lowshelf"; filtreBiquad.frequency.value = 1000; filtreBiquad.gain.value = 25; -</pre> - -<h2 id="Spécification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<div>{{Compat("api.BiquadFilterNode.frequency")}}</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +``` + +## Spécification + +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- | +| {{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité navigateurs + +{{Compat("api.BiquadFilterNode.frequency")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/biquadfilternode/index.md b/files/fr/web/api/biquadfilternode/index.md index f5215ba3a6..33a45b9a1f 100644 --- a/files/fr/web/api/biquadfilternode/index.md +++ b/files/fr/web/api/biquadfilternode/index.md @@ -8,166 +8,219 @@ tags: - Web Audio API translation_of: Web/API/BiquadFilterNode --- -<p>{{APIRef("Web Audio API")}}</p> +{{APIRef("Web Audio API")}} -<p>L'interface <code><strong>BiquadFilterNode</strong></code> représente un simple filtre de bas niveau, créé avec la méthode {{ domxref("AudioContext.createBiquadFilter()") }}. Il s'agit d'un {{domxref("AudioNode")}} qui peut représenter différents types de filtres, dispositifs de réglage de tonalité ou égaliseurs graphiques. Un <code>BiquadFilterNode</code> a toujours exactement une entrée et une sortie.</p> +L'interface **`BiquadFilterNode`** représente un simple filtre de bas niveau, créé avec la méthode {{ domxref("AudioContext.createBiquadFilter()") }}. Il s'agit d'un {{domxref("AudioNode")}} qui peut représenter différents types de filtres, dispositifs de réglage de tonalité ou égaliseurs graphiques. Un `BiquadFilterNode` a toujours exactement une entrée et une sortie. <table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn>Nombre d'entrées</dfn></th> - <td><code>1</code></td> - </tr> - <tr> - <th scope="row"><dfn>Nombre de sorties</dfn></th> - <td><code>1</code></td> - </tr> - <tr> - <th scope="row"><dfn>Mode de comptage des canaux</dfn></th> - <td><code>"max"</code></td> - </tr> - <tr> - <th scope="row"><dfn>Nombre de canaux</dfn></th> - <td><code>2</code> (pas utilisés dans le mode de comptage par défaut)</td> - </tr> - <tr> - <th scope="row"><dfn>Interprétation du canal</dfn></th> - <td><code>"speakers"</code></td> - </tr> - </tbody> -</table> - -<h2 id="Constructeur">Constructeur</h2> - -<dl> - <dt>{{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}}</dt> - <dd>Crée une nouvelle instance d'un objet <code>BiquadFilterNode</code>.</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p> - -<dl> - <dt>{{domxref("BiquadFilterNode.frequency")}}</dt> - <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage, exprimée en Hertz.</dd> - <dt>{{domxref("BiquadFilterNode.detune")}}</dt> - <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant le désaccordage de la fréquence exprimé en <a href="https://fr.wikipedia.org/wiki/Cent_et_savart">cents</a>.</dd> - <dt>{{domxref("BiquadFilterNode.Q")}}</dt> - <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant un <a href="http://en.wikipedia.org/wiki/Q_factor">facteur</a><a href="http://en.wikipedia.org/wiki/Q_factor"> Q</a>, ou facteur de qualité.</dd> - <dt>{{domxref("BiquadFilterNode.gain")}} {{readonlyInline}}</dt> - <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant le <a href="http://en.wikipedia.org/wiki/Gain">gain</a><a href="http://en.wikipedia.org/wiki/Gain"> </a>utilisé dans l'algorithme de filtrage.</dd> - <dt>{{domxref("BiquadFilterNode.type")}}</dt> - <dd><p>Une chaîne définissant le type d'algorithme de filtrage que le noeud implémente: La signification des paramètres diffère en fonction du type du filtre (sauf detune qui a la même signification dans tous les cas, et n'est donc pas listé ci-dessous)</p> - <table class="standard-table"> - <caption></caption> - <thead> - <tr> - <th scope="row"><code>type</code></th> - <th scope="col">Description</th> - <th scope="col"><code>frequency</code></th> - <th scope="col"><code>Q</code></th> - <th scope="col"><code>gain</code></th> - </tr> - </thead> <tbody> - <tr> - <th scope="row"><code>lowpass</code></th> - <td>Filtre standard passe-bas résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures au seuil sont inchangées; les fréquences supérieures sont atténuées.</td> - <td>La fréquence de coupure</td> - <td>Indique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut</td> - <td>Non utilisé</td> - </tr> - <tr> - <th scope="row"><code>highpass</code></th> - <td>Filtre standard passe-haut résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont atténuées, les fréquences supérieures sont inchangées.</td> - <td>La fréquence de coupure</td> - <td>Indique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut</td> - <td>Non utilisé</td> - </tr> - <tr> - <th scope="row"><code>bandpass</code></th> - <td>Filtre standard passe-bande de second ordre. Les fréquences en dehors de la plage donnée de fréquences sont atténués, et les fréquences à l'intérieur sont inchangées.</td> - <td>Le centre de la gamme de fréquences.</td> - <td>Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus la bande de fréquences est grande.</td> - <td>Non utilisé</td> - </tr> - <tr> - <th scope="row"><code>lowshelf</code></th> - <td>Filtre standard de dégradé de basses fréquences de second ordre. Les fréquences inférieures à la fréquence obtiennent une impulsion ou une atténuation; Les fréquences supérieurs sont inchangées.</td> - <td>La limite supérieure des fréquences obtenant une impulsion ou une atténuation</td> - <td>Non utilisé</td> - <td>L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.</td> - </tr> - <tr> - <th scope="row"><code>highshelf</code></th> - <td>Filtre standard de dégradé de hautes fréquences de second ordre. Les fréquences supérieures à la fréquence obtiennent une impulsion, ou une atténuation; Les fréquences inférieurs restent inchangées</td> - <td>La limite inférieure des fréquences obtenant une impulsion ou une atténuation</td> - <td>Non utilisé</td> - <td>L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.</td> - </tr> - <tr> - <th scope="row"><code>peaking</code></th> - <td>Les fréquences à l'intérieur de la gamme obtiennent une impulsion ou une atténuation; les fréquences en dehors de celle-ci sont inchangées.</td> - <td>Le milieu de la gamme de fréquences obtiennent une impulsion, ou un attenuation</td> - <td>Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences.</td> - <td>L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.</td> - </tr> - <tr> - <th scope="row"><code>notch</code></th> - <td>Filtre coupe standard, appelé aussi coupe-bande. C'est l'inverse d'un filtre passe-bande: les fréquences en dehors de la gamme de fréquences donnée sont inchangées; les fréquences à l'intérieur de celle-ci sont atténuées.</td> - <td>Le centre de la gamme de fréquences.</td> - <td>Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences.</td> - <td>Non utilisé</td> - </tr> - <tr> - <th scope="row"><code>allpass</code></th> - <td>Filtre standard passe-tout du second ordre. Laisse toutes les fréquences inchangées, mais modifie le rapport de phase entre les différentes fréquences.</td> - <td>La fréquence du retard de groupe maximal, qui est la fréquence à laquelle le centre de la transition de phase se produit.</td> - <td>Contrôle finement la transition à la fréquence moyenne. Plus ce paramètre est grand, plus la transition est fine et large.</td> - <td>Non utilisé</td> - </tr> + <tr> + <th scope="row"><dfn>Nombre d'entrées</dfn></th> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row"><dfn>Nombre de sorties</dfn></th> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row"><dfn>Mode de comptage des canaux</dfn></th> + <td><code>"max"</code></td> + </tr> + <tr> + <th scope="row"><dfn>Nombre de canaux</dfn></th> + <td><code>2</code> (pas utilisés dans le mode de comptage par défaut)</td> + </tr> + <tr> + <th scope="row"><dfn>Interprétation du canal</dfn></th> + <td><code>"speakers"</code></td> + </tr> </tbody> - </table> - </dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p> - -<dl> - <dt>{{domxref("BiquadFilterNode.getFrequencyResponse()")}}</dt> - <dd>A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences <em>frequencyHz</em> passé en paramètre.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<p>{{page("/fr/docs/Web/API/AudioContext.createBiquadFilter","Example")}}</p> - -<h2 id="Spécification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#BiquadFilterNode-section', 'BiquadFilterNode')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td></td> - </tr> - </tbody> </table> -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<p>{{Compat("api.BiquadFilterNode")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> -</ul> +## Constructeur + +- {{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}} + - : Crée une nouvelle instance d'un objet `BiquadFilterNode`. + +## Propriétés + +_Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. + +- {{domxref("BiquadFilterNode.frequency")}} + - : Est un {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage, exprimée en Hertz. +- {{domxref("BiquadFilterNode.detune")}} + - : Est un {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant le désaccordage de la fréquence exprimé en [cents](https://fr.wikipedia.org/wiki/Cent_et_savart). +- {{domxref("BiquadFilterNode.Q")}} + - : Est un {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant un [facteur](http://en.wikipedia.org/wiki/Q_factor)[ Q](http://en.wikipedia.org/wiki/Q_factor), ou facteur de qualité. +- {{domxref("BiquadFilterNode.gain")}} {{readonlyInline}} + - : Est un {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant le [gain](http://en.wikipedia.org/wiki/Gain)[ ](http://en.wikipedia.org/wiki/Gain)utilisé dans l'algorithme de filtrage. +- {{domxref("BiquadFilterNode.type")}} + + - : Une chaîne définissant le type d'algorithme de filtrage que le noeud implémente: La signification des paramètres diffère en fonction du type du filtre (sauf detune qui a la même signification dans tous les cas, et n'est donc pas listé ci-dessous) + + <table class="standard-table"> + <caption></caption> + <thead> + <tr> + <th scope="row"><code>type</code></th> + <th scope="col">Description</th> + <th scope="col"><code>frequency</code></th> + <th scope="col"><code>Q</code></th> + <th scope="col"><code>gain</code></th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"><code>lowpass</code></th> + <td> + Filtre standard passe-bas résonnant de second ordre avec atténuation de + 12dB/octave. Les fréquences inférieures au seuil sont inchangées; les + fréquences supérieures sont atténuées. + </td> + <td>La fréquence de coupure</td> + <td> + Indique comment la fréquence a culminé autour de la coupure. Plus la + valeur est élevée, plus le point culminant est haut + </td> + <td>Non utilisé</td> + </tr> + <tr> + <th scope="row"><code>highpass</code></th> + <td> + Filtre standard passe-haut résonnant de second ordre avec atténuation de + 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont + atténuées, les fréquences supérieures sont inchangées. + </td> + <td>La fréquence de coupure</td> + <td> + Indique comment la fréquence a culminé autour de la coupure. Plus la + valeur est élevée, plus le point culminant est haut + </td> + <td>Non utilisé</td> + </tr> + <tr> + <th scope="row"><code>bandpass</code></th> + <td> + Filtre standard passe-bande de second ordre. Les fréquences en dehors de + la plage donnée de fréquences sont atténués, et les fréquences à + l'intérieur sont inchangées. + </td> + <td>Le centre de la gamme de fréquences.</td> + <td> + Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus + la bande de fréquences est grande. + </td> + <td>Non utilisé</td> + </tr> + <tr> + <th scope="row"><code>lowshelf</code></th> + <td> + Filtre standard de dégradé de basses fréquences de second ordre. Les + fréquences inférieures à la fréquence obtiennent une impulsion ou une + atténuation; Les fréquences supérieurs sont inchangées. + </td> + <td> + La limite supérieure des fréquences obtenant une impulsion ou une + atténuation + </td> + <td>Non utilisé</td> + <td> + L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une + atténuation. + </td> + </tr> + <tr> + <th scope="row"><code>highshelf</code></th> + <td> + Filtre standard de dégradé de hautes fréquences de second ordre. Les + fréquences supérieures à la fréquence obtiennent une impulsion, ou une + atténuation; Les fréquences inférieurs restent inchangées + </td> + <td> + La limite inférieure des fréquences obtenant une impulsion ou une + atténuation + </td> + <td>Non utilisé</td> + <td> + L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une + atténuation. + </td> + </tr> + <tr> + <th scope="row"><code>peaking</code></th> + <td> + Les fréquences à l'intérieur de la gamme obtiennent une impulsion ou une + atténuation; les fréquences en dehors de celle-ci sont inchangées. + </td> + <td> + Le milieu de la gamme de fréquences obtiennent une impulsion, ou un + attenuation + </td> + <td> + Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus + grande est la bande de fréquences. + </td> + <td> + L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une + atténuation. + </td> + </tr> + <tr> + <th scope="row"><code>notch</code></th> + <td> + Filtre coupe standard, appelé aussi coupe-bande. C'est l'inverse d'un + filtre passe-bande: les fréquences en dehors de la gamme de fréquences + donnée sont inchangées; les fréquences à l'intérieur de celle-ci sont + atténuées. + </td> + <td>Le centre de la gamme de fréquences.</td> + <td> + Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus + grande est la bande de fréquences. + </td> + <td>Non utilisé</td> + </tr> + <tr> + <th scope="row"><code>allpass</code></th> + <td> + Filtre standard passe-tout du second ordre. Laisse toutes les fréquences + inchangées, mais modifie le rapport de phase entre les différentes + fréquences. + </td> + <td> + La fréquence du retard de groupe maximal, qui est la fréquence à + laquelle le centre de la transition de phase se produit. + </td> + <td> + Contrôle finement la transition à la fréquence moyenne. Plus ce + paramètre est grand, plus la transition est fine et large. + </td> + <td>Non utilisé</td> + </tr> + </tbody> + </table> + +## Méthodes + +_Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. + +- {{domxref("BiquadFilterNode.getFrequencyResponse()")}} + - : A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences _frequencyHz_ passé en paramètre. + +## Exemples + +{{page("/fr/docs/Web/API/AudioContext.createBiquadFilter","Example")}} + +## Spécification + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#BiquadFilterNode-section', 'BiquadFilterNode')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité navigateurs + +{{Compat("api.BiquadFilterNode")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/blob/blob/index.md b/files/fr/web/api/blob/blob/index.md index eb08cd3667..94d84cdac1 100644 --- a/files/fr/web/api/blob/blob/index.md +++ b/files/fr/web/api/blob/blob/index.md @@ -10,68 +10,51 @@ tags: - Reference translation_of: Web/API/Blob/Blob --- -<div>{{APIRef("File API")}}</div> +{{APIRef("File API")}} -<p>Le constructeur <code><strong>Blob()</strong></code> retourne un nouvel objet {{domxref("Blob")}}. Le contenu d'un blob consiste en une concaténation de valeurs données dans le tableau passé en paramètre.</p> +Le constructeur **`Blob()`** retourne un nouvel objet {{domxref("Blob")}}. Le contenu d'un blob consiste en une concaténation de valeurs données dans le tableau passé en paramètre. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var aBlob = new Blob(<em> array</em>) -var aBlob = new Blob( <em>array</em>, <em>options</em> ); -</pre> + var aBlob = new Blob( array) + var aBlob = new Blob( array, options ); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>array</code></dt> - <dd>Un tableau ({{jsxref("Array")}}) d'objets de type {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou un mélange de tels objets qui seront insérés dans le {{domxref("Blob")}}. Les chaînes <code>DOMString</code> seront encodées en UTF-8.</dd> - <dt><code>options</code> {{optional_inline}}</dt> - <dd>Un paramètre optionnel qui est un dictionnaire <code>BlobPropertyBag</code> et qui peut être utilisé pour définir les deux attributs suivants : - <ul> - <li><code>type</code> : cet attribut représente le type MIME du contenu du tableau qui sera inséré dans le blob. La valeur par défaut pour cette propriété est la chaîne vide <code>""</code>.</li> - <li><code>endings</code> : cet attribut spécifie la façon dont les chaînes qui contiennent des sauts de lignes (<code>\n</code>) doivent être retranscrites. Il peut prendre l'une de ces valeurs : - <ul> - <li><code>"native"</code> indiquera que les caractères de fin doivent être adaptés pour correspondre à ceux utilisés par le système d'exploitation</li> - <li><code>"transparent"</code> indiquera que les fin de lignes sont stockées telles quelles dans le blob (aucune modification).</li> - </ul> - La valeur par défaut pour cet attribut est <code>"transparent"</code>. {{non-standard_inline}}</li> - </ul> - </dd> -</dl> +- `array` + - : Un tableau ({{jsxref("Array")}}) d'objets de type {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou un mélange de tels objets qui seront insérés dans le {{domxref("Blob")}}. Les chaînes `DOMString` seront encodées en UTF-8. +- `options` {{optional_inline}} -<h2 id="Exemples">Exemples</h2> + - : Un paramètre optionnel qui est un dictionnaire `BlobPropertyBag` et qui peut être utilisé pour définir les deux attributs suivants : -<pre class="brush: js">// Un tableau qui contient une seule DOMString -var aFileParts = ['<a id="a"><b id="b">Coucou :) !</b></a>']; + - `type` : cet attribut représente le type MIME du contenu du tableau qui sera inséré dans le blob. La valeur par défaut pour cette propriété est la chaîne vide `""`. + - `endings` : cet attribut spécifie la façon dont les chaînes qui contiennent des sauts de lignes (`\n`) doivent être retranscrites. Il peut prendre l'une de ces valeurs : -// Le blob -var oMyBlob = new Blob(aFileParts, {type : 'text/html'});</pre> + - `"native"` indiquera que les caractères de fin doivent être adaptés pour correspondre à ceux utilisés par le système d'exploitation + - `"transparent"` indiquera que les fin de lignes sont stockées telles quelles dans le blob (aucune modification). + + La valeur par défaut pour cet attribut est `"transparent"`. {{non-standard_inline}} -<h2 id="Spécifications">Spécifications</h2> +## Exemples -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('File API', '#constructorBlob', 'Blob()')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +```js +// Un tableau qui contient une seule DOMString +var aFileParts = ['<a id="a"><b id="b">Coucou :) !</b></a>']; + +// Le blob +var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); +``` -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Spécifications +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ---------------------------- | -------------------- | +| {{SpecName('File API', '#constructorBlob', 'Blob()')}} | {{Spec2('File API')}} | Définition initiale. | +## Compatibilité des navigateurs -<p>{{Compat("api.Blob.Blob")}}</p> +{{Compat("api.Blob.Blob")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>Le déprécié {{domxref("BlobBuilder")}} qui a été remplacé par ce constructeur.</li> -</ul> +- Le déprécié {{domxref("BlobBuilder")}} qui a été remplacé par ce constructeur. diff --git a/files/fr/web/api/blob/index.md b/files/fr/web/api/blob/index.md index 6cf6467846..3e79c90f0f 100644 --- a/files/fr/web/api/blob/index.md +++ b/files/fr/web/api/blob/index.md @@ -7,61 +7,52 @@ tags: - WebAPI translation_of: Web/API/Blob --- -<div>{{APIRef("File API")}}</div> +{{APIRef("File API")}} -<p>Un objet <strong><code>Blob</code></strong> représente un objet, semblable à un fichier, qui est immuable et qui contient des données brutes. Les <em>blobs</em> (pour <em><strong>B</strong>inary <strong>L</strong>arge <strong>Ob</strong>jects</em>) représentent des données qui ne sont pas dans un format JavaScript natif. L'interface {{domxref("File")}} est basée sur l'interface <code>Blob</code> et hérite des fonctionnalités de cette dernière tout en ajoutant des fonctionnalités pour gérer les fichiers sur le système de l'utilisateur.</p> +Un objet **`Blob`** représente un objet, semblable à un fichier, qui est immuable et qui contient des données brutes. Les _blobs_ (pour **\*B**inary **L**arge **Ob**jects\*) représentent des données qui ne sont pas dans un format JavaScript natif. L'interface {{domxref("File")}} est basée sur l'interface `Blob` et hérite des fonctionnalités de cette dernière tout en ajoutant des fonctionnalités pour gérer les fichiers sur le système de l'utilisateur. -<p>Pour construire un <code>Blob</code> à partir d'objets qui ne sont pas des blobs ou à partir d'autres données, on pourra utiliser le constructeur {{domxref("Blob.Blob", "Blob()")}}. Pour créer un blob qui contient un sous-ensemble d'un autre blob, on pourra employer la méthode {{domxref("Blob.slice()", "slice()")}}. Pour obtenir un <code>Blob</code> à partir d'un fichier du système de l'utilisateur, consulter la documentation {{domxref("File")}}.</p> +Pour construire un `Blob` à partir d'objets qui ne sont pas des blobs ou à partir d'autres données, on pourra utiliser le constructeur {{domxref("Blob.Blob", "Blob()")}}. Pour créer un blob qui contient un sous-ensemble d'un autre blob, on pourra employer la méthode {{domxref("Blob.slice()", "slice()")}}. Pour obtenir un `Blob` à partir d'un fichier du système de l'utilisateur, consulter la documentation {{domxref("File")}}. -<p>Les API qui acceptent des objets <code>Blob</code> sont également listées sur la documentation de {{domxref("File")}}.</p> +Les API qui acceptent des objets `Blob` sont également listées sur la documentation de {{domxref("File")}}. -<div class="note"> -<p><strong>Note :</strong> La méthode <code>slice()</code> utilisait auparavant un deuxième argument qui indiquait le nombre d'octets à copier dans le nouveau blob. Si on utilisait un couple de valeur <code>début + longueur</code> qui dépassait la taille du blob source, le blob qui était renvoyé contenait les données à partir de l'indice de début et jusuq'à la fin du blob.</p> -</div> +> **Note :** La méthode `slice()` utilisait auparavant un deuxième argument qui indiquait le nombre d'octets à copier dans le nouveau blob. Si on utilisait un couple de valeur `début + longueur` qui dépassait la taille du blob source, le blob qui était renvoyé contenait les données à partir de l'indice de début et jusuq'à la fin du blob. -<div class="note"> - <p><strong>Note :</strong> La méthode <code>slice()</code> doit être utilisée avec certains préfixes sur certaines versions de navigateurs : <code>blob.mozSlice()</code> pour Firefox 12 et antérieur, <code>blob.webkitSlice()</code> dans Safari. Un ancienne version de <code>slice()</code> sans préfixes avait une sémantique différente et est désormais obsolète. La prise en charge de <code>blob.mozSlice()</code> a été abandonnée avec Firefox 30.</p> -</div> +> **Note :** La méthode `slice()` doit être utilisée avec certains préfixes sur certaines versions de navigateurs : `blob.mozSlice()` pour Firefox 12 et antérieur, `blob.webkitSlice()` dans Safari. Un ancienne version de `slice()` sans préfixes avait une sémantique différente et est désormais obsolète. La prise en charge de `blob.mozSlice()` a été abandonnée avec Firefox 30. -<h2 id="Constructeur">Constructeur</h2> +## Constructeur -<dl> - <dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt> - <dd>Ce constructeur renvoie un nouvel objet <code>Blob</code> qui contient la concaténation des valeurs du tableau passé en paramètre.</dd> -</dl> +- {{domxref("Blob.Blob", "Blob(blobParts[, options])")}} + - : Ce constructeur renvoie un nouvel objet `Blob` qui contient la concaténation des valeurs du tableau passé en paramètre. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>Un booléen qui indique si la méthode {{domxref("Blob.close()")}} a été appelée sur le blob. Les blobs qui ont été fermés ne peuvent pas être lus.</dd> - <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt> - <dd>La taille des données contenues dans l'objet <code>Blob</code>, exprimée en octets.</dd> - <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt> - <dd>Une chaîne de caractères qui indique le type MIME des données contenues dans le <code>Blob</code>. Si le type est inconnu, la chaîne de caractères est vide.</dd> -</dl> +- {{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}} + - : Un booléen qui indique si la méthode {{domxref("Blob.close()")}} a été appelée sur le blob. Les blobs qui ont été fermés ne peuvent pas être lus. +- {{domxref("Blob.size")}} {{readonlyinline}} + - : La taille des données contenues dans l'objet `Blob`, exprimée en octets. +- {{domxref("Blob.type")}} {{readonlyinline}} + - : Une chaîne de caractères qui indique le type MIME des données contenues dans le `Blob`. Si le type est inconnu, la chaîne de caractères est vide. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<dl> - <dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt> - <dd>Cette méthode clotûre le blob et libère éventuellement les ressources sous-jacentes.</dd> - <dt>{{domxref("Blob.slice()", "Blob.slice([début[, fin[, contentType]]])")}}</dt> - <dd>Cette méthode renvoie un nouvel objet <code>Blob</code> qui contient les données dans le fragment du <code>Blob</code> source entre <code>début</code> et <code>fin</code>.</dd> -</dl> +- {{domxref("Blob.close()")}} {{experimental_inline}} + - : Cette méthode clotûre le blob et libère éventuellement les ressources sous-jacentes. +- {{domxref("Blob.slice()", "Blob.slice([début[, fin[, contentType]]])")}} + - : Cette méthode renvoie un nouvel objet `Blob` qui contient les données dans le fragment du `Blob` source entre `début` et `fin`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_du_constructeur_Blob">Utilisation du constructeur <code>Blob</code></h3> +### Utilisation du constructeur `Blob` -<p>Le constructeur {{domxref("Blob.Blob", "Blob()")}} permet de créer des blobs à partir d'autres objets. Par exemple, on peut construire un blob à partir d'une chaîne de caractères :</p> +Le constructeur {{domxref("Blob.Blob", "Blob()")}} permet de créer des blobs à partir d'autres objets. Par exemple, on peut construire un blob à partir d'une chaîne de caractères : -<pre>var debug = {coucou: "monde"}; -var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</pre> + var debug = {coucou: "monde"}; + var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'}); -<h3 id="Créer_une_URL_de_données_vers_un_tableau_typé">Créer une URL de données vers un tableau typé</h3> +### Créer une URL de données vers un tableau typé -<pre class="brush: js">var typedArray = GetTheTypedArraySomehow(); +```js +var typedArray = GetTheTypedArraySomehow(); // On ajoute un type MIME pertinent var blob = new Blob([typedArray], {type: 'application/octet-binary'}); @@ -73,47 +64,36 @@ var url = URL.createObjectURL(blob); // désormais on peut utiliser l'URL dans tout // contexte qui utilise des URL (img.src par // exemple) -</pre> +``` -<h3 id="Extraire_des_données_à_partir_d'un_blob">Extraire des données à partir d'un blob</h3> +### Extraire des données à partir d'un blob -<p>La seule façon de lire le contenu d'un blob est d'utiliser un objet {{domxref("FileReader")}}. Dans le code qui suit, on lit le contenu d'un blob sous la forme d'un tableau typé.</p> +La seule façon de lire le contenu d'un blob est d'utiliser un objet {{domxref("FileReader")}}. Dans le code qui suit, on lit le contenu d'un blob sous la forme d'un tableau typé. -<pre class="brush: js">var reader = new FileReader(); +```js +var reader = new FileReader(); reader.addEventListener("loadend", function() { // reader.result contient le contenu du // blob sous la forme d'un tableau typé }); -reader.readAsArrayBuffer(blob);</pre> - -<p>En utilisant d'autres méthodes de {{domxref("FileReader")}}, on peut lire le contenu du blob si c'est une chaîne ou une URL de données.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('File API','#blob','Blob')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Blob")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("BlobBuilder")}}</li> - <li>{{domxref("File")}}</li> - <li>{{domxref("URL.createObjectURL")}}</li> - <li><a href="/fr/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> -</ul> +reader.readAsArrayBuffer(blob); +``` + +En utilisant d'autres méthodes de {{domxref("FileReader")}}, on peut lire le contenu du blob si c'est une chaîne ou une URL de données. + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('File API','#blob','Blob')}} | {{Spec2('File API')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Blob")}} + +## Voir aussi + +- {{domxref("BlobBuilder")}} +- {{domxref("File")}} +- {{domxref("URL.createObjectURL")}} +- [Components.utils.importGlobalProperties](/fr/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties) diff --git a/files/fr/web/api/blob/size/index.md b/files/fr/web/api/blob/size/index.md index b82751abd0..495747778f 100644 --- a/files/fr/web/api/blob/size/index.md +++ b/files/fr/web/api/blob/size/index.md @@ -9,32 +9,28 @@ tags: translation_of: Web/API/File/fileSize original_slug: Web/API/File/fileSize --- -<p>{{APIRef("File API") }}{{non-standard_header}}</p> +{{APIRef("File API") }}{{non-standard_header}} -<p>{{obsolete_header(7.0)}}</p> +{{obsolete_header(7.0)}} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Renvoie la taille du fichier en octets.</p> +Renvoie la taille du fichier en octets. -<div class="note"> - <p><strong>Note :</strong> Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place.</p> -</div> +> **Note :** Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre>var size = <em>instanceOfFile</em>.fileSize</pre> + var size = instanceOfFile.fileSize -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>Un nombre.</p> +Un nombre. -<h2 id="Spécification">Spécification</h2> +## Spécification -<p>Ne fait partie d'aucune spécification.</p> +Ne fait partie d'aucune spécification. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Blob.size")}}</li> -</ul> +- {{domxref("Blob.size")}} diff --git a/files/fr/web/api/blob/type/index.md b/files/fr/web/api/blob/type/index.md index 8823dd1bb9..166428cb4a 100644 --- a/files/fr/web/api/blob/type/index.md +++ b/files/fr/web/api/blob/type/index.md @@ -8,23 +8,24 @@ tags: - Propriété translation_of: Web/API/Blob/type --- -<div>{{APIRef("File API")}}</div> +{{APIRef("File API")}} -<p>La propriété <strong><code>type</code></strong> de l'objet <a href="fr/docs/Web/API/Blob"><code>Blob</code></a> fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé.</p> +La propriété **`type`** de l'objet [`Blob`](fr/docs/Web/API/Blob) fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var mimetype = <var>instanceOfFile</var>.type</pre> + var mimetype = instanceOfFile.type -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>Une chaîne de caractères (par exemple : "image/png").</p> +Une chaîne de caractères (par exemple : "image/png"). -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush:js">var i, fileInput, files, allowedFileTypes; +```js +var i, fileInput, files, allowedFileTypes; -// fileInput est un HTMLInputElement: <input type="file" multiple id="myfileinput"> +// fileInput est un HTMLInputElement: <input type="file" multiple id="myfileinput"> fileInput = document.getElementById("myfileinput"); // files est un objet FileList (similaire à NodeList) @@ -33,43 +34,24 @@ files = fileInput.files; // notre application accepte seulement les images de type *.png, *.jpeg et *.gif allowedFileTypes = ["image/png", "image/jpeg", "image/gif"]; -for (i = 0; i < files.length; i++) { +for (i = 0; i < files.length; i++) { // Vérifie si file.type est un type autorisé. - if (allowedFileTypes.indexOf(<strong>files[i].type</strong>) > -1) { + if (allowedFileTypes.indexOf(files[i].type) > -1) { // le type du fichier (file) correspond à l'un des types autorisés. Faites quelque chose ici. } }); -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('File API', '#dfn-type', 'type')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------ | ---------------------------- | -------------------- | +| {{SpecName('File API', '#dfn-type', 'type')}} | {{Spec2('File API')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div> -<div> +{{Compat("api.Blob.type")}} +## Voir aussi -<p>{{Compat("api.Blob.type")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> -</div> - -<ul> - <li>{{domxref("Blob")}}</li> -</ul> +- {{domxref("Blob")}} diff --git a/files/fr/web/api/blobbuilder/index.md b/files/fr/web/api/blobbuilder/index.md index 7098c3d185..bad885b603 100644 --- a/files/fr/web/api/blobbuilder/index.md +++ b/files/fr/web/api/blobbuilder/index.md @@ -8,119 +8,131 @@ tags: - Obsolete translation_of: Web/API/BlobBuilder --- -<p>{{APIRef("File API")}}{{ obsolete_header}}</p> +{{APIRef("File API")}}{{ obsolete_header}} -<p>L'interface <code>BlobBuilder</code> fournit une manière simple de construire des objets {{domxref("Blob")}}. Il suffit de créer un <code>BlobBuilder</code> et de lui ajouter des données en appellant la méthode {{manch("append")}}. Une fois finalisé, l'appel à la méthode {{manch("getBlob")}} permet de récupérer un {{domxref("Blob")}} contenant les données envoyées au constructeur dudit Blob.</p> +L'interface `BlobBuilder` fournit une manière simple de construire des objets {{domxref("Blob")}}. Il suffit de créer un `BlobBuilder` et de lui ajouter des données en appellant la méthode {{manch("append")}}. Une fois finalisé, l'appel à la méthode {{manch("getBlob")}} permet de récupérer un {{domxref("Blob")}} contenant les données envoyées au constructeur dudit Blob. -<div class="note"> - <p><strong>Note:</strong> L'interface <code>BlobBuilder</code> est désormais déconseillé (deprecated) au profit du nouveau constructeur {{domxref('Blob')}}.</p> -</div> +> **Note :** L'interface `BlobBuilder` est désormais déconseillé (deprecated) au profit du nouveau constructeur {{domxref('Blob')}}. -<h2 id="Aperçu_des_méthodes">Aperçu des méthodes</h2> +## Aperçu des méthodes <table class="standard-table"> - <tbody> - <tr> - <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in ArrayBuffer data);</code></td> - </tr> - <tr> - <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in Blob data);</code></td> - </tr> - <tr> - <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in String data, [optional] in String endings);</code></td> - </tr> - <tr> - <td><code>Blob <a href="/en-US/docs/Web/API/BlobBuilder#getBlob()">getBlob</a>([optional] in DOMString contentType);</code></td> - </tr> - <tr> - <td><code>File <a href="/en-US/docs/Web/API/BlobBuilder#getFile()">getFile</a>(in DOMString name, [optional] in DOMString contentType);</code></td> - </tr> - </tbody> + <tbody> + <tr> + <td> + <code + >void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in + ArrayBuffer data);</code + > + </td> + </tr> + <tr> + <td> + <code + >void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in + Blob data);</code + > + </td> + </tr> + <tr> + <td> + <code + >void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in + String data, [optional] in String endings);</code + > + </td> + </tr> + <tr> + <td> + <code + >Blob + <a href="/en-US/docs/Web/API/BlobBuilder#getBlob()">getBlob</a + >([optional] in DOMString contentType);</code + > + </td> + </tr> + <tr> + <td> + <code + >File + <a href="/en-US/docs/Web/API/BlobBuilder#getFile()">getFile</a>(in + DOMString name, [optional] in DOMString contentType);</code + > + </td> + </tr> + </tbody> </table> -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<h3 id="append()">append()</h3> +### append() -<p>Ajoute le contenu de l'objet JavaScript spécifié au {{domxref("Blob")}} en construction. Si la valeur spécifiée n'est pas un {{domxref("Blob")}}, un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a>, ou une <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a>, la valeur est forcée (coerced) à string avant d'être ajoutée au blob.</p> +Ajoute le contenu de l'objet JavaScript spécifié au {{domxref("Blob")}} en construction. Si la valeur spécifiée n'est pas un {{domxref("Blob")}}, un [`ArrayBuffer`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer), ou une [`String`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), la valeur est forcée (coerced) à string avant d'être ajoutée au blob. -<pre class="syntaxbox">void append( - in ArrayBuffer data -); + void append( + in ArrayBuffer data + ); -void append( - in Blob data -); + void append( + in Blob data + ); -void append( - in String data, - [optional] in String endings -); -</pre> + void append( + in String data, + [optional] in String endings + ); -<h4 id="Paramètres">Paramètres</h4> +#### Paramètres -<dl> - <dt><code>data</code></dt> - <dd>Les données à ajouter au {{domxref("Blob")}} en construction.</dd> - <dt><code>endings</code></dt> - <dd>Spécifie comment les chaînes (strings) contenant des <code>\n</code> doivent être rendues. Cela peut être <code>"transparent"</code> (endings inchangés) ou <code>"native"</code> (les endings sont changés pour respecter la convention du système de fichier de l'OS de l'hôte). Par défault, la valeur est <code>"transparent"</code>.</dd> -</dl> +- `data` + - : Les données à ajouter au {{domxref("Blob")}} en construction. +- `endings` + - : Spécifie comment les chaînes (strings) contenant des `\n` doivent être rendues. Cela peut être `"transparent"` (endings inchangés) ou `"native"` (les endings sont changés pour respecter la convention du système de fichier de l'OS de l'hôte). Par défault, la valeur est `"transparent"`. -<h3 id="getBlob()">getBlob()</h3> +### getBlob() -<p>Retourne l'objet {{domxref("Blob")}} qui a été construit en utilisant les données passées en argument des différents appels à {{manch("append")}}.</p> +Retourne l'objet {{domxref("Blob")}} qui a été construit en utilisant les données passées en argument des différents appels à {{manch("append")}}. -<pre class="syntaxbox">Blob getBlob( - in DOMString contentType {{optional_inline}} -); -</pre> + Blob getBlob( + in DOMString contentType {{optional_inline}} + ); -<h4 id="Paramètres_2">Paramètres</h4> +#### Paramètres -<dl> - <dt>contentType {{optional_inline}}</dt> - <dd>Le type MIME des données retournées par le {{domxref("Blob")}}. Ce sera la valeur de la propriété 'type' de l'objet <code>Blob</code>.</dd> -</dl> +- contentType {{optional_inline}} + - : Le type MIME des données retournées par le {{domxref("Blob")}}. Ce sera la valeur de la propriété 'type' de l'objet `Blob`. -<h4 id="Valeur_de_retour">Valeur de retour</h4> +#### Valeur de retour -<p>Un objet {{domxref("Blob")}} contenant toutes les données passées en argument de chaque appel à {{manch("append")}} depuis la création du <code>BlobBuilder</code>. Cela remet aussi à zéro (reset) le <code>BlobBuilder</code> de tel sorte que le prochain appel à {{manch("append")}} démarrera la création d'un nouveau blob vierge.</p> +Un objet {{domxref("Blob")}} contenant toutes les données passées en argument de chaque appel à {{manch("append")}} depuis la création du `BlobBuilder`. Cela remet aussi à zéro (reset) le `BlobBuilder` de tel sorte que le prochain appel à {{manch("append")}} démarrera la création d'un nouveau blob vierge. -<h3 id="getFile()_non-standard_inline">getFile() {{non-standard_inline}}</h3> +### getFile() {{non-standard_inline}} -<p>Retourne un objet {{domxref("File")}}.</p> +Retourne un objet {{domxref("File")}}. -<pre class="syntaxbox">File getFile( - in DOMString name, - [optional] in DOMString contentType -); -</pre> + File getFile( + in DOMString name, + [optional] in DOMString contentType + ); -<h4 id="Paramètres_3">Paramètres</h4> +#### Paramètres -<dl> - <dt>name</dt> - <dd>Le nom du fichier.</dd> - <dt>contentType {{optional_inline}}</dt> - <dd>Le type MIME des données retournées par le {{domxref("File")}}. Ce sera la valeur de la propriété 'type' de l'objet <code>File</code>.</dd> -</dl> +- name + - : Le nom du fichier. +- contentType {{optional_inline}} + - : Le type MIME des données retournées par le {{domxref("File")}}. Ce sera la valeur de la propriété 'type' de l'objet `File`. -<h4 id="Valeur_deretour">Valeur deretour</h4> +#### Valeur deretour -<p>Un objet {{domxref("File")}}.</p> +Un objet {{domxref("File")}}. -<h2 id="Browser_compatibility">Browser compatibility</h2> +## Browser compatibility +{{Compat("api.BlobBuilder")}} +## Voir aussi -<p>{{Compat("api.BlobBuilder")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{spec("http://dev.w3.org/2009/dap/file-system/file-writer.html#idl-def-BlobBuilder", "File API Specification: BlobBuilder", "ED")}}</li> - <li>{{domxref("Blob")}}</li> - <li>{{domxref("File")}}</li> -</ul> +- {{spec("http://dev.w3.org/2009/dap/file-system/file-writer.html#idl-def-BlobBuilder", "File API Specification: BlobBuilder", "ED")}} +- {{domxref("Blob")}} +- {{domxref("File")}} diff --git a/files/fr/web/api/blobevent/blobevent/index.md b/files/fr/web/api/blobevent/blobevent/index.md index 742af43a44..c976b80341 100644 --- a/files/fr/web/api/blobevent/blobevent/index.md +++ b/files/fr/web/api/blobevent/blobevent/index.md @@ -9,53 +9,33 @@ tags: - Evènement translation_of: Web/API/BlobEvent/BlobEvent --- -<p>{{APIRef("Media Capture and Streams")}}{{seeCompatTable}}</p> +{{APIRef("Media Capture and Streams")}}{{seeCompatTable}} -<p>Le constructeur <code><strong>BlobEvent()</strong></code> renvoie un nouvel objet {{domxref("BlobEvent")}} créé avec un {{domxref("Blob")}} associé.</p> +Le constructeur **`BlobEvent()`** renvoie un nouvel objet {{domxref("BlobEvent")}} créé avec un {{domxref("Blob")}} associé. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>blobEvent</em> = new BlobEvent({data: <em>aSpecificBlob</em>}[, timecode]); -</pre> + blobEvent = new BlobEvent({data: aSpecificBlob}[, timecode]); -<h3 id="Arguments">Arguments</h3> +### Arguments -<p><em>Le constructeur <code>BlobEvent()</code></em><em> hérite des arguments de {{domxref("Event.Event", "Event()")}}.</em></p> +_Le constructeur `BlobEvent()`_ _hérite des arguments de {{domxref("Event.Event", "Event()")}}._ -<dl> - <dt><code>data</code></dt> - <dd>est un {{domxref("Blob")}} associé à l'évènement.</dd> - <dt><code>timecode</code> {{optional_inline}}</dt> - <dd>un {{domxref("DOMHighResTimeStamp")}} à utiliser pour initialiser l'événement blob.</dd> -</dl> +- `data` + - : est un {{domxref("Blob")}} associé à l'évènement. +- `timecode` {{optional_inline}} + - : un {{domxref("DOMHighResTimeStamp")}} à utiliser pour initialiser l'événement blob. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}}</td> - <td>{{Spec2('MediaStream Recording')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}} | {{Spec2('MediaStream Recording')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.BlobEvent.BlobEvent")}} +## Voir aussi -<p>{{Compat("api.BlobEvent.BlobEvent")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface {{domxref("BlobEvent")}} à laquelle il appartient.</li> -</ul> - -<p> </p> +- L'interface {{domxref("BlobEvent")}} à laquelle il appartient. diff --git a/files/fr/web/api/blobevent/data/index.md b/files/fr/web/api/blobevent/data/index.md index ea9939f3bd..b360895880 100644 --- a/files/fr/web/api/blobevent/data/index.md +++ b/files/fr/web/api/blobevent/data/index.md @@ -10,41 +10,26 @@ tags: - données translation_of: Web/API/BlobEvent/data --- -<p>{{ apiref("Media Capture and Streams") }}</p> +{{ apiref("Media Capture and Streams") }} -<p>{{ SeeCompatTable() }}</p> +{{ SeeCompatTable() }} -<p>La propriété en lecture seule <code><strong>BlobEvent.data</strong></code> représente un {{domxref("Blob")}} associé à l'évènement.</p> +La propriété en lecture seule **`BlobEvent.data`** représente un {{domxref("Blob")}} associé à l'évènement. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>associatedBlob</em> = <em>BlobEvent</em>.data</pre> + associatedBlob = BlobEvent.data -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('MediaStream Recording', '#widl-BlobEvent-data', 'BlobEvent.data')}}</td> - <td>{{Spec2('MediaStream Recording')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('MediaStream Recording', '#widl-BlobEvent-data', 'BlobEvent.data')}} | {{Spec2('MediaStream Recording')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.BlobEvent.data")}} +## Voir aussi -<p>{{Compat("api.BlobEvent.data")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface {{domxref("BlobEvent")}} à laquelle elle appartient.</li> -</ul> +- L'interface {{domxref("BlobEvent")}} à laquelle elle appartient. diff --git a/files/fr/web/api/blobevent/index.md b/files/fr/web/api/blobevent/index.md index c0b1079569..415a251788 100644 --- a/files/fr/web/api/blobevent/index.md +++ b/files/fr/web/api/blobevent/index.md @@ -14,57 +14,40 @@ tags: - events translation_of: Web/API/BlobEvent --- -<div>{{APIRef ("Media Capture and Streams")}}</div> +{{APIRef ("Media Capture and Streams")}} -<p>L'interface <code>BlobEvent</code> représente les événements associés à un {{domxref ("Blob")}}. Ces blobs sont généralement, mais pas nécessairement, associés au contenu multimédia.</p> +L'interface `BlobEvent` représente les événements associés à un {{domxref ("Blob")}}. Ces blobs sont généralement, mais pas nécessairement, associés au contenu multimédia. -<h2 id="Constructeur">Constructeur</h2> +## Constructeur -<dl> - <dt>{{domxref("BlobEvent.BlobEvent", "BlobEvent()")}}</dt> - <dd>Crée un événement <code>BlobEvent</code> avec les paramètres donnés.</dd> -</dl> +- {{domxref("BlobEvent.BlobEvent", "BlobEvent()")}} + - : Crée un événement `BlobEvent` avec les paramètres donnés. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>Hérite des propriétés de son parent, {{domxref("Event")}}</em>.</p> +_Hérite des propriétés de son parent, {{domxref("Event")}}_. -<dl> - <dt>{{domxref("BlobEvent.data")}} {{readonlyInline}}</dt> - <dd>Un objet {{domxref("Blob")}} qui représente les données associées à l'évènement. L'évènement a été déclenché sur le {{domxref("EventTarget")}} en raison de quelque chose survenu spécifiquement sur ce {{domxref("Blob")}}.</dd> - <dt>{{domxref("BlobEvent.timecode")}} {{readonlyinline}}</dt> - <dd>{{domxref("DOMHighResTimeStamp")}} indique la différence entre l'horodatage du premier bloc de données et l'horadatage du premier bloc <code>BlobEvent</code> produit par cet enregistreur. On notera que le <em>timecode</em> du premier <code>BlobEvent</code> produit , n'a pas besoin d'être nul.</dd> -</dl> +- {{domxref("BlobEvent.data")}} {{readonlyInline}} + - : Un objet {{domxref("Blob")}} qui représente les données associées à l'évènement. L'évènement a été déclenché sur le {{domxref("EventTarget")}} en raison de quelque chose survenu spécifiquement sur ce {{domxref("Blob")}}. +- {{domxref("BlobEvent.timecode")}} {{readonlyinline}} + - : {{domxref("DOMHighResTimeStamp")}} indique la différence entre l'horodatage du premier bloc de données et l'horadatage du premier bloc `BlobEvent` produit par cet enregistreur. On notera que le _timecode_ du premier `BlobEvent` produit , n'a pas besoin d'être nul. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p><em>Pas de méthode spécifique ; hérite des méthodes de son parent<em> {{domxref("Event")}}.</em></em></p> +_Pas de méthode spécifique ; hérite des méthodes de son parent _{{domxref("Event")}}.\*\* -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}}</td> - <td>{{Spec2('MediaStream Recording')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------- | +| {{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}} | {{Spec2('MediaStream Recording')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.BlobEvent")}}</p> +{{Compat("api.BlobEvent")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface de base {{domxref("Event")}} .</li> - <li><a href="/fr/docs/Web/API/MediaStream_Recording_API">L'API MediaStream Recording </a>: envoie des objets <code>BlobEvent</code> chaque fois qu'un fragment de media est prêt.</li> - <li><a href="/fr/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">Utiliser l'API MediaStream Recording</a></li> -</ul> +- L'interface de base {{domxref("Event")}} . +- [L'API MediaStream Recording ](/fr/docs/Web/API/MediaStream_Recording_API): envoie des objets `BlobEvent` chaque fois qu'un fragment de media est prêt. +- [Utiliser l'API MediaStream Recording](/fr/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API) diff --git a/files/fr/web/api/btoa/index.md b/files/fr/web/api/btoa/index.md index 3d4bad306e..4a808ec8e8 100644 --- a/files/fr/web/api/btoa/index.md +++ b/files/fr/web/api/btoa/index.md @@ -14,110 +14,77 @@ tags: translation_of: Web/API/WindowOrWorkerGlobalScope/btoa original_slug: Web/API/WindowOrWorkerGlobalScope/btoa --- -<div>{{APIRef("HTML DOM")}}</div> +{{APIRef("HTML DOM")}} -<p>La méthode <code>WindowOrWorkerGlobalScope.btoa()</code> crée une chaîne ASCII codée en base 64 à partir d'un objet {{jsxref ("String")}} dans lequel chaque caractère de la chaîne est traité comme un octet de données binaires.</p> +La méthode `WindowOrWorkerGlobalScope.btoa()` crée une chaîne ASCII codée en base 64 à partir d'un objet {{jsxref ("String")}} dans lequel chaque caractère de la chaîne est traité comme un octet de données binaires. -<div class="note"> -<p><strong>Note :</strong> étant donné que cette fonction traite chaque caractère comme un octet de données binaires, quel que soit le nombre d'octets composant le caractère, une exception <code>InvalidCharacterError</code> est déclenchée si le {{Glossary("code point")}} d'un caractère quelconque est en dehors de la plage 0x00 à 0xFF. Voir {{anch("Chaînes Unicode")}} pour un exemple montrant comment encoder des chaînes avec des caractères en dehors de la plage 0x00 à 0xFF.</p> -</div> +> **Note :** étant donné que cette fonction traite chaque caractère comme un octet de données binaires, quel que soit le nombre d'octets composant le caractère, une exception `InvalidCharacterError` est déclenchée si le {{Glossary("code point")}} d'un caractère quelconque est en dehors de la plage 0x00 à 0xFF. Voir {{anch("Chaînes Unicode")}} pour un exemple montrant comment encoder des chaînes avec des caractères en dehors de la plage 0x00 à 0xFF. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre>var donneesEncodees = scope.btoa(<em>chaineAEncoder</em>); -</pre> + var donneesEncodees = scope.btoa(chaineAEncoder); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>chaineAEncoder</code></dt> - <dd>Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII.</dd> -</dl> +- `chaineAEncoder` + - : Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Une chaîne contenant la représentation Base64 de la <code>chaineAEncoder</code>.</p> +Une chaîne contenant la représentation Base64 de la `chaineAEncoder`. -<h3 id="Exceptions">Exceptions</h3> +### Exceptions -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="eval">var donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne<em> -</em>var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne -</pre> + var donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne + var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne -<h2 id="Notes">Notes</h2> +## Notes -<p>Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31.</p> +Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31. -<p><code>btoa()</code> est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants.</p> +`btoa()` est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants. -<h2 id="Chaînes_Unicode">Chaînes Unicode</h2> +## Chaînes Unicode -<p>Dans la plupart des navigateurs, l'appel de <code>btoa()</code> sur une chaîne Unicode engendrera une exception <code>InvalidCharacterError</code>.</p> +Dans la plupart des navigateurs, l'appel de `btoa()` sur une chaîne Unicode engendrera une exception `InvalidCharacterError`. -<p>Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a> :</p> +Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par [Johan Sundström](http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html) : -<pre><code>// Chaîne ucs-2 en ascii encodé en base64 -function uena(chn) { - return window.btoa(unescape(encodeURIComponent(chn))); -} -// Ascii encodé en base64 en chaîne ucs-2 -function aenu(chn) { - return decodeURIComponent(escape(window.atob(chn))); -} -// Usage : -uena('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU= -aenu('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode" + // Chaîne ucs-2 en ascii encodé en base64 + function uena(chn) { + return window.btoa(unescape(encodeURIComponent(chn))); + } + // Ascii encodé en base64 en chaîne ucs-2 + function aenu(chn) { + return decodeURIComponent(escape(window.atob(chn))); + } + // Usage : + uena('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU= + aenu('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode" -uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE= -aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"</code></pre> + uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE= + aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!" -<p>Une solution meilleure, plus fiable et moins coûteuse consiste à <a href="/fr/docs/D%C3%A9coder_encoder_en_base64">utiliser des tableaux typés pour faire la conversion</a>.</p> +Une solution meilleure, plus fiable et moins coûteuse consiste à [utiliser des tableaux typés pour faire la conversion](/fr/docs/D%C3%A9coder_encoder_en_base64). -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Méthode déplacée dans le mixin <code>WindowOrWorkerGlobalScope</code> dans la spéc la plus récente.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>WindowBase64</code> (les propriétés se trouvaient sur la cible avant cela).</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | +| {{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}. | +| {{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}} | {{Spec2('HTML5.1')}} | Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement. | +| {{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p> +{{Compat("api.WindowOrWorkerGlobalScope.btoa")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> - <li><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Les URL de <code>données</code></a></li> - <li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li> - <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> -</ul> +- [Base64 encoding and decoding](/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding) +- [Les URL de `données`](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) +- {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} +- [Components.utils.importGlobalProperties](/en-US/docs/Components.utils.importGlobalProperties) diff --git a/files/fr/web/api/cache/add/index.md b/files/fr/web/api/cache/add/index.md index 83fd3085ba..bb85f96fbb 100644 --- a/files/fr/web/api/cache/add/index.md +++ b/files/fr/web/api/cache/add/index.md @@ -13,100 +13,93 @@ tags: - ServiceWorker translation_of: Web/API/Cache/add --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La méthode <strong><code>add()</code></strong> de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode <code>add()</code> est équivalent au code suivant :</p> +La méthode **`add()`** de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode `add()` est équivalent au code suivant : -<pre class="brush: js">fetch(url).then(function(response) { +```js +fetch(url).then(function(response) { if (!response.ok) { throw new TypeError('bad response status'); } return cache.put(url, response); -})</pre> +}) +``` -<p>Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement.</p> +Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement. -<div class="note"> -<p><strong>Note :</strong> <code>add()</code> écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.</p> -</div> +> **Note :** `add()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">cache.add(request).then(function() { +```js +cache.add(request).then(function() { //request a été ajoutée au cache }); -</pre> +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>request</dt> - <dd>La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL.</dd> -</dl> +- request + - : La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL. -<h3 id="Retour">Retour</h3> +### Retour -<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.</p> +Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. -<h3 id="Exceptions">Exceptions</h3> +### Exceptions <table class="standard-table"> - <thead> - <tr> - <th scope="col"><strong>Exception</strong></th> - <th scope="col"><strong>Arrive quand</strong></th> - </tr> - </thead> - <tbody> - <tr> - <td><code>TypeError</code></td> - <td> - <p>Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.</p> - - <p>Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.)</p> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col"><strong>Exception</strong></th> + <th scope="col"><strong>Arrive quand</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>TypeError</code></td> + <td> + <p> + Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>. + </p> + <p> + Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui + a échoué.) Cela peut arriver si la requête échoue, mais également si + la requête est une <em>cross-origin no-cors</em> (auquel cas le statut + retourné est systématiquement 0.) + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources.</p> +Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources. -<pre class="brush: js">this.addEventListener('install', function(event) { +```js +this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.add('/sw-test/index.html'); }) ); }); -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-cache-add', 'Cache: add')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cache-add', 'Cache: add')}} | {{Spec2('Service Workers')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Cache.add")}}</p> +{{Compat("api.Cache.add")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li>{{domxref("Cache")}}</li> - <li>{{domxref("WorkerGlobalScope.caches")}}</li> -</ul> +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/addall/index.md b/files/fr/web/api/cache/addall/index.md index 98f5111d78..5e78e53925 100644 --- a/files/fr/web/api/cache/addall/index.md +++ b/files/fr/web/api/cache/addall/index.md @@ -13,58 +13,62 @@ tags: - addAll translation_of: Web/API/Cache/addAll --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La méthode <strong><code>addAll()</code></strong> de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. </p> +La méthode **`addAll()`** de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. -<div class="note"> -<p><strong>Note :</strong> <code>addAll()</code> écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à une requête, mais échouera si l'opération <code>put() </code>ainsi créée devrait engendrer l'éffacement d'une entrée cache créée par la même méthode <code>addAll()</code>.</p> -</div> +> **Note :** `addAll()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à une requête, mais échouera si l'opération `put() `ainsi créée devrait engendrer l'éffacement d'une entrée cache créée par la même méthode `addAll()`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">cache.addAll(requests[]).then(function() { +```js +cache.addAll(requests[]).then(function() { //requests have been added to the cache }); -</pre> +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>requests</dt> - <dd>Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache.</dd> -</dl> +- requests + - : Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache. -<h3 id="Retour">Retour</h3> +### Retour -<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.</p> +Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. -<h3 id="Exceptions">Exceptions</h3> +### Exceptions <table class="standard-table"> - <thead> - <tr> - <th scope="col"><strong>Exception</strong></th> - <th scope="col"><strong>Arrive quand</strong></th> - </tr> - </thead> - <tbody> - <tr> - <td><code>TypeError</code></td> - <td> - <p>Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.</p> - - <p>Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.)</p> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col"><strong>Exception</strong></th> + <th scope="col"><strong>Arrive quand</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>TypeError</code></td> + <td> + <p> + Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>. + </p> + <p> + Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui + a échoué.) Cela peut arriver si la requête échoue, mais également si + la requête est une <em>cross-origin no-cors</em> (auquel cas le statut + retourné est systématiquement 0.) + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Exemples"><strong>Exemples</strong></h2> +## **Exemples** -<p>Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser <code>addAll()</code> pour y ajouter une série de ressources.</p> +Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser `addAll()` pour y ajouter une série de ressources. -<pre class="brush: js">this.addEventListener('install', function(event) { +```js +this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ @@ -82,33 +86,20 @@ translation_of: Web/API/Cache/addAll }) ); }); -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-cache-addall', 'Cache: addAll')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cache-addall', 'Cache: addAll')}} | {{Spec2('Service Workers')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Cache.addAll")}}</p> +{{Compat("api.Cache.addAll")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li>{{domxref("Cache")}}</li> - <li>{{domxref("WorkerGlobalScope.caches")}}</li> -</ul> +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/delete/index.md b/files/fr/web/api/cache/delete/index.md index 5100ece8c8..1409dbfa4b 100644 --- a/files/fr/web/api/cache/delete/index.md +++ b/files/fr/web/api/cache/delete/index.md @@ -12,70 +12,57 @@ tags: - delete translation_of: Web/API/Cache/delete --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La méthode <strong><code>delete()</code></strong> de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à <code>true</code>. Dans le cas contraire, la promesse est résolue à <code>false</code>.</p> +La méthode **`delete()`** de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à `true`. Dans le cas contraire, la promesse est résolue à `false`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">cache.delete(request,{options}).then(function(true) { +```js +cache.delete(request,{options}).then(function(true) { //your cache entry has been deleted }); -</pre> +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>request</dt> - <dd>La {{domxref("Request", "Requête")}} à supprimer.</dd> - <dt>options {{optional_inline}}</dt> - <dd>Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de <code>delete</code>. Les options disponibles sont : - <ul> - <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li> - <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées.) Est à <code>false</code> par défaut.</li> - <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li> - <li><code>cacheName</code>: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par <code>Cache.delete()</code>.</li> - </ul> - </dd> -</dl> +- request + - : La {{domxref("Request", "Requête")}} à supprimer. +- options {{optional_inline}} -<h3 id="Retour">Retour</h3> + - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de `delete`. Les options disponibles sont : -<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue à <code>true</code> si l'entrée de cache est supprimée, ou à <code>false</code> dans le cas contraire.</p> + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.delete()`. -<h2 id="Exemples">Exemples</h2> +### Retour -<pre class="brush: js">caches.open('v1').then(function(cache) { +Une {{jsxref("Promise", "Promesse")}} qui est résolue à `true` si l'entrée de cache est supprimée, ou à `false` dans le cas contraire. + +## Exemples + +```js +caches.open('v1').then(function(cache) { cache.delete('/images/image.png').then(function(response) { someUIUpdateFunction(); }); -})</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-cache-delete', 'Cache: delete')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2> - -<p>{{Compat("api.Cache.delete")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li>{{domxref("Cache")}}</li> - <li>{{domxref("WorkerGlobalScope.caches")}}</li> -</ul> +}) +``` + +## Spécifications + +| Spécification | Statut | Commentaires | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cache-delete', 'Cache: delete')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilités des navigateurs + +{{Compat("api.Cache.delete")}} + +## Voir aussi + +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/index.md b/files/fr/web/api/cache/index.md index 384689d3fa..b53c794c91 100644 --- a/files/fr/web/api/cache/index.md +++ b/files/fr/web/api/cache/index.md @@ -13,60 +13,51 @@ tags: - hors ligne translation_of: Web/API/Cache --- -<p>{{APIRef("Service Workers API")}} {{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}} {{SeeCompatTable}} -<p>L'interface <code>Cache</code> fournit un mécanisme de stockage pour les paires d'objets <code><a href="http://fetch.spec.whatwg.org/#request">Request</a></code>/<code><a href="http://fetch.spec.whatwg.org/#response">Response</a></code> qui sont mises en cache, par exemple dans le cadre du cycle de vie {{domxref("ServiceWorker")}}. Il est à noter que l'interface <code>Cache</code> est exposée à des portées fenêtrées ainsi qu'à des service workers. Vous n'êtes pas obligé de l'utiliser avec des services workers, même si elle est définie dans la spécification relative aux services workers.</p> +L'interface `Cache` fournit un mécanisme de stockage pour les paires d'objets [`Request`](http://fetch.spec.whatwg.org/#request)/[`Response`](http://fetch.spec.whatwg.org/#response) qui sont mises en cache, par exemple dans le cadre du cycle de vie {{domxref("ServiceWorker")}}. Il est à noter que l'interface `Cache` est exposée à des portées fenêtrées ainsi qu'à des service workers. Vous n'êtes pas obligé de l'utiliser avec des services workers, même si elle est définie dans la spécification relative aux services workers. -<p>Une origine peut avoir plusieurs objets nommés <code>Cache</code>. Vous êtes responsable de l'implémentation de la manière dont votre script (par exemple dans un {{domxref("ServiceWorker")}}) gère les mises à jour du cache. Les éléments d'un cache ne sont pas mis à jour, sauf demande explicite ; ils n'expirent pas, sauf s'ils sont supprimés. Utilisez {{domxref("CacheStorage.open", "CacheStorage.open()")}} pour ouvrir un objet <code>Cache</code> spécifique et appelez ensuite l'une des méthodes <code>Cache</code> pour maintenir le <code>Cache</code>.</p> +Une origine peut avoir plusieurs objets nommés `Cache`. Vous êtes responsable de l'implémentation de la manière dont votre script (par exemple dans un {{domxref("ServiceWorker")}}) gère les mises à jour du cache. Les éléments d'un cache ne sont pas mis à jour, sauf demande explicite ; ils n'expirent pas, sauf s'ils sont supprimés. Utilisez {{domxref("CacheStorage.open", "CacheStorage.open()")}} pour ouvrir un objet `Cache` spécifique et appelez ensuite l'une des méthodes `Cache` pour maintenir le `Cache`. -<p>Vous êtes également responsable de la purge périodique des entrées du cache. Chaque navigateur a une limite stricte sur la quantité de mémoire cache qu'une origine donnée peut utiliser. Les estimations de l'utilisation du quota de cache sont disponibles via le lien {{domxref("StorageEstimate")}} API. Le navigateur fait de son mieux pour gérer l'espace disque, mais il peut supprimer le stockage en cache d'une origine. Le navigateur supprime généralement toutes les données d'une origine ou aucune des données d'une origine. Veillez à nommer les caches et à n'utiliser les caches qu'à partir de la version du script sur laquelle ils peuvent fonctionner en toute sécurité. Pour plus d'informations, voir <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers#Supprimer_les_anciens_caches">Suppression des anciens caches</a>.</p> +Vous êtes également responsable de la purge périodique des entrées du cache. Chaque navigateur a une limite stricte sur la quantité de mémoire cache qu'une origine donnée peut utiliser. Les estimations de l'utilisation du quota de cache sont disponibles via le lien {{domxref("StorageEstimate")}} API. Le navigateur fait de son mieux pour gérer l'espace disque, mais il peut supprimer le stockage en cache d'une origine. Le navigateur supprime généralement toutes les données d'une origine ou aucune des données d'une origine. Veillez à nommer les caches et à n'utiliser les caches qu'à partir de la version du script sur laquelle ils peuvent fonctionner en toute sécurité. Pour plus d'informations, voir [Suppression des anciens caches](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers#Supprimer_les_anciens_caches). -<div class="note"> -<p><strong>Note :</strong> Les implémentations initiales du cache (dans Blink et Gecko) résolvent les engagements {{domxref("Cache.add()")}}, {{domxref("Cache.addAll()")}}, et {{domxref("Cache.put()")}} lorsque le corps de la réponse est entièrement écrit sur le stockage. Des versions plus récentes de la spécification précisent que le navigateur peut résoudre la promesse dès que l'entrée est enregistrée dans la base de données, même si le corps de réponse est encore en cours d'écriture.</p> -</div> +> **Note :** Les implémentations initiales du cache (dans Blink et Gecko) résolvent les engagements {{domxref("Cache.add()")}}, {{domxref("Cache.addAll()")}}, et {{domxref("Cache.put()")}} lorsque le corps de la réponse est entièrement écrit sur le stockage. Des versions plus récentes de la spécification précisent que le navigateur peut résoudre la promesse dès que l'entrée est enregistrée dans la base de données, même si le corps de réponse est encore en cours d'écriture. -<div class="note"> -<p><strong>Note :</strong> L'algorithme des correspondances de clés est dépendant de la valeur de l'<a href="https://www.fastly.com/blog/best-practices-using-vary-header">en-tête VARY</a>. Ainsi, pour faire correspondre une nouvelle clé, il faut examiner à la fois la clé et la valeur des entrées dans le Cache.</p> -</div> +> **Note :** L'algorithme des correspondances de clés est dépendant de la valeur de l'[en-tête VARY](https://www.fastly.com/blog/best-practices-using-vary-header). Ainsi, pour faire correspondre une nouvelle clé, il faut examiner à la fois la clé et la valeur des entrées dans le Cache. -<div class="blockIndicator note"> -<p><strong>Note :</strong> L'API de mise en cache n'honore pas les en-têtes de mise en cache HTTP.</p> -</div> +> **Note :** L'API de mise en cache n'honore pas les en-têtes de mise en cache HTTP. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<dl> - <dt>{{domxref("Cache.match", "Cache.match(request, options)")}} {{experimental_inline}}</dt> - <dd>Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en une réponse associée à la première requête correspondante dans l'objet {{domxref("Cache")}}.</dd> - <dt>{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} {{experimental_inline}}</dt> - <dd>Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet {{domxref("Cache")}}.</dd> - <dt>{{domxref("Cache.add", "Cache.add(request)")}} {{experimental_inline}}</dt> - <dd>Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats au cache.</dd> - <dt>{{domxref("Cache.addAll", "Cache.addAll(requests)")}} {{experimental_inline}}</dt> - <dd>Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné.</dd> - <dt>{{domxref("Cache.put", "Cache.put(request, response)")}} {{experimental_inline}}</dt> - <dd>Prend à la fois une requête et sa réponse et l'ajoute au cache donné.</dd> - <dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}} {{experimental_inline}}</dt> - <dd>Trouve l'entrée {{domxref("Cache")}} dont la clé est la requête, et le cas échéant, supprime l'entrée {{domxref("Cache")}} et retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout à <code>true</code>. Si aucune entrée {{domxref("Cache")}} n'est trouvée, elle retourne <code>false</code>.</dd> - <dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}} {{experimental_inline}}</dt> - <dd>Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau clés {{domxref("Cache")}}.</dd> -</dl> +- {{domxref("Cache.match", "Cache.match(request, options)")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en une réponse associée à la première requête correspondante dans l'objet {{domxref("Cache")}}. +- {{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet {{domxref("Cache")}}. +- {{domxref("Cache.add", "Cache.add(request)")}} {{experimental_inline}} + - : Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats au cache. +- {{domxref("Cache.addAll", "Cache.addAll(requests)")}} {{experimental_inline}} + - : Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné. +- {{domxref("Cache.put", "Cache.put(request, response)")}} {{experimental_inline}} + - : Prend à la fois une requête et sa réponse et l'ajoute au cache donné. +- {{domxref("Cache.delete", "Cache.delete(request, options)")}} {{experimental_inline}} + - : Trouve l'entrée {{domxref("Cache")}} dont la clé est la requête, et le cas échéant, supprime l'entrée {{domxref("Cache")}} et retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout à `true`. Si aucune entrée {{domxref("Cache")}} n'est trouvée, elle retourne `false`. +- {{domxref("Cache.keys", "Cache.keys(request, options)")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau clés {{domxref("Cache")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Cet extrait de code provient de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">l'exemple de mise en cache sélective</a>. (voir <a href="https://googlechrome.github.io/samples/service-worker/selective-caching/">selective caching live</a>) Le code utilise {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} pour ouvrir tous les objets {{domxref("Cache")}} avec un en-tête Content-Type qui débute par <code>font/</code>.</p> +Cet extrait de code provient de [l'exemple de mise en cache sélective](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js). (voir [selective caching live](https://googlechrome.github.io/samples/service-worker/selective-caching/)) Le code utilise {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} pour ouvrir tous les objets {{domxref("Cache")}} avec un en-tête Content-Type qui débute par `font/`. -<p>Le code utilise alors {{domxref("Cache.match", "Cache.match(request, options)")}} pour voir s'il y a déjà une fonte correspondante dans le cache, et le cas échéant, la retourne. S'il n'y a pas de correspondance, le code récupère la fonte à partir du réseau et utilise {{domxref("Cache.put","Cache.put(request, response)")}} pour mettre en cache la ressource récupérée.</p> +Le code utilise alors {{domxref("Cache.match", "Cache.match(request, options)")}} pour voir s'il y a déjà une fonte correspondante dans le cache, et le cas échéant, la retourne. S'il n'y a pas de correspondance, le code récupère la fonte à partir du réseau et utilise {{domxref("Cache.put","Cache.put(request, response)")}} pour mettre en cache la ressource récupérée. -<p>Le code gère les exceptions déclenchées par l'opération de {{domxref("Globalfetch.fetch","fetch()")}}. A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié.</p> +Le code gère les exceptions déclenchées par l'opération de {{domxref("Globalfetch.fetch","fetch()")}}. A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié. -<p>Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans <code>CURRENT_CACHES</code>.</p> +Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans `CURRENT_CACHES`. -<div class="note"> - <p><strong>Note:</strong> In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service-worker.js</a> script is performing.</p> -</div> +> **Note :** In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the [service-worker.js](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js) script is performing. -<pre class="brush: js">var CACHE_VERSION = 1; +```js +var CACHE_VERSION = 1; // Shorthand identifier mapped to specific versioned cache. var CURRENT_CACHES = { @@ -116,39 +107,27 @@ self.addEventListener('fetch', function(event) { }); }) ); -});</pre> - -<h3 id="Storing_cookies_in_Caches">Storing cookies in Caches</h3> - -<p>L'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> exige que les en-têtes {{httpheader("Set-Cookie")}} soient supprimés avant de renvoyer un objet {{domxref("Response")}} à partir de {{domxref("WindowOrWorkerGlobalScope", "fetch()")}}. Ainsi, une réponse stockée dans un cache ne contiendra pas d'en-têtes.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Cache")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li><a href="https://github.com/mdn/sw-test">Code d'exemple basique de Service workers</a></li> - <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Le ServiceWorker est prêt ?</a></li> - <li>{{jsxref("Promise" , "Promesse" )}}</li> - <li><a href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers">Utilisation des Web Workers</a></li> -</ul> +}); +``` + +### Storing cookies in Caches + +L'[API Fetch](/fr/docs/Web/API/Fetch_API) exige que les en-têtes {{httpheader("Set-Cookie")}} soient supprimés avant de renvoyer un objet {{domxref("Response")}} à partir de {{domxref("WindowOrWorkerGlobalScope", "fetch()")}}. Ainsi, une réponse stockée dans un cache ne contiendra pas d'en-têtes. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#cache', 'Cache')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Cache")}} + +## Voir aussi + +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Code d'exemple basique de Service workers](https://github.com/mdn/sw-test) +- [Le ServiceWorker est prêt ?](https://jakearchibald.github.io/isserviceworkerready/) +- {{jsxref("Promise" , "Promesse" )}} +- [Utilisation des Web Workers](/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers) diff --git a/files/fr/web/api/cache/keys/index.md b/files/fr/web/api/cache/keys/index.md index faabe1581d..617e1aa4e7 100644 --- a/files/fr/web/api/cache/keys/index.md +++ b/files/fr/web/api/cache/keys/index.md @@ -12,78 +12,63 @@ tags: - keys translation_of: Web/API/Cache/keys --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La méthode <strong><code>keys()</code></strong> de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.</p> +La méthode **`keys()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. -<p>Les requêtes sont retournées dans le même ordre que l'ordre d'insertion.</p> +Les requêtes sont retournées dans le même ordre que l'ordre d'insertion. -<div class="note"> -<p><strong>Note :</strong> Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header <code>VARY</code>.</p> -</div> +> **Note :** Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header `VARY`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">cache.keys(request,{options}).then(function(response) { +```js +cache.keys(request,{options}).then(function(response) { // fait quelque chose avec votre tableau de réponses }); -</pre> +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>request {{optional_inline}}</dt> - <dd>La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée.</dd> - <dt>options {{optional_inline}}</dt> - <dd><p>Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération <code>keys</code>. Les options disponibles sont :</p> - <ul> - <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li> - <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées). Est à <code>false</code> par défaut.</li> - <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li> - <li><code>cacheName</code>: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par <code>Cache.keys()</code>.</li> - </ul> - </dd> -</dl> +- request {{optional_inline}} + - : La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée. +- options {{optional_inline}} -<h3 id="Retour">Retour</h3> + - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération `keys`. Les options disponibles sont : -<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.</p> + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées). Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.keys()`. -<h2 id="Exemples">Exemples</h2> +### Retour -<pre class="brush: js">caches.open('v1').then(function(cache) { +Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. + +## Exemples + +```js +caches.open('v1').then(function(cache) { cache.keys().then(function(keys) { keys.forEach(function(request, index, array) { cache.delete(request); }); }); -})</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-cache-keys', 'Cache: keys')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2> - -<p>{{Compat("api.Cache.keys")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li>{{domxref("Cache")}}</li> - <li>{{domxref("WorkerGlobalScope.caches")}}</li> -</ul> +}) +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cache-keys', 'Cache: keys')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilités des navigateurs + +{{Compat("api.Cache.keys")}} + +## Voir aussi + +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/match/index.md b/files/fr/web/api/cache/match/index.md index 7867ba79a6..592ec9f804 100644 --- a/files/fr/web/api/cache/match/index.md +++ b/files/fr/web/api/cache/match/index.md @@ -13,51 +13,48 @@ tags: - match translation_of: Web/API/Cache/match --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La méthode <strong><code>match()</code></strong> de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}.</p> +La méthode **`match()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">cache.match(request,{options}).then(function(response) { +```js +cache.match(request,{options}).then(function(response) { // faire quelque chose avec la réponse }); -</pre> +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>request</dt> - <dd>La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}.</dd> - <dt>options {{optional_inline}}</dt> - <dd>Un objet qui définit des options pour l'opération de <code>match</code>. Les options disponibles sont les suivantes : - <ul> - <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li> - <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées.) Est à <code>false</code> par défaut.</li> - <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li> - </ul> - </dd> -</dl> +- request + - : La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}. +- options {{optional_inline}} -<h3 id="Retour">Retour</h3> + - : Un objet qui définit des options pour l'opération de `match`. Les options disponibles sont les suivantes : -<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée.</p> + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. -<div class="note"> -<p><strong>Note :</strong> <code>Cache.match()</code> est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en <code>response[0]</code> (la première réponse qui matche) plutôt que <code>response[]</code> (un tableau de toutes les réponses qui matchent).</p> -</div> +### Retour -<h2 id="Exemples">Exemples</h2> +Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée. -<p>Cet exemple est extrait de l'exemple <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js">Page hors ligne custom</a> (<a href="https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html">demo</a>).</p> +> **Note :** `Cache.match()` est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). -<p>L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause <code>catch()</code> est déclenchée quand l'appel à <code>fetch()</code> lève une exception. A l'intérieur de la clause <code>catch()</code>, <code>match()</code> est utilisée to pour retourner la réponse appropriée.</p> +## Exemples -<p>Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition <code>if()</code> est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler <code>event.respondWith()</code>. Si aucun gestionnaire fetch ne décide d'appeler <code>event.respondWith()</code>, la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si <code>fetch()</code> retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause <code>catch()</code> ne sera PAS appelée. </p> +Cet exemple est extrait de l'exemple [Page hors ligne custom](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js) ([demo](https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html)). -<pre class="brush: js">self.addEventListener('fetch', function(event) { +L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause `catch()` est déclenchée quand l'appel à `fetch()` lève une exception. A l'intérieur de la clause `catch()`, `match()` est utilisée to pour retourner la réponse appropriée. + +Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition `if()` est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler `event.respondWith()`. Si aucun gestionnaire fetch ne décide d'appeler `event.respondWith()`, la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si `fetch()` retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause `catch()` ne sera PAS appelée. + +```js +self.addEventListener('fetch', function(event) { // We only want to call event.respondWith() if this is a GET request for an HTML document. - if (event.request.method === 'GET' && + if (event.request.method === 'GET' && event.request.headers.get('accept').indexOf('text/html') !== -1) { console.log('Handling fetch event for', event.request.url); event.respondWith( @@ -69,33 +66,21 @@ translation_of: Web/API/Cache/match }) ); } -});</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-cache-match', 'Cache match')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2> - -<p>{{Compat("api.Cache.match")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li>{{domxref("Cache")}}</li> - <li>{{domxref("WorkerGlobalScope.caches")}}</li> -</ul> +}); +``` + +## Spécifications + +| Specification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cache-match', 'Cache match')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilités des navigateurs + +{{Compat("api.Cache.match")}} + +## Voir aussi + +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/matchall/index.md b/files/fr/web/api/cache/matchall/index.md index 86d1dad2bf..94f271b928 100644 --- a/files/fr/web/api/cache/matchall/index.md +++ b/files/fr/web/api/cache/matchall/index.md @@ -13,75 +13,60 @@ tags: - matchAll translation_of: Web/API/Cache/matchAll --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La méthode <strong><code>matchAll()</code></strong> de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.</p> +La méthode **`matchAll()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">cache.matchAll(request,{options}).then(function(response) { +```js +cache.matchAll(request,{options}).then(function(response) { // faire quelque chose avec le tableau des réponses }); -</pre> +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>request</dt> - <dd>La {{domxref("Request", "Requête")}} à trouver dans le {{domxref("Cache")}}.</dd> - <dt>options {{optional_inline}}</dt> - <dd><p>Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes :</p> - <ul> - <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li> - <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées.) Est à <code>false</code> par défaut.</li> - <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li> - </ul> - </dd> -</dl> +- request + - : La {{domxref("Request", "Requête")}} à trouver dans le {{domxref("Cache")}}. +- options {{optional_inline}} -<h3 id="Retour">Retour</h3> + - : Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes : -<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.</p> + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. -<div class="note"> -<p><strong>Note :</strong> {{domxref("Cache.match()")}} est quasiment identique à <a href="/fr/docs/Web/API/Cache/matchAll"><code>Cache.matchAll()</code></a>, si ce n'est qu'elle est résolue en <code>response[0]</code> (la première réponse qui matche) plutôt que <code>response[]</code> (un tableau de toutes les réponses qui matchent).</p> -</div> +### Retour -<h2 id="Exemples">Exemples</h2> +Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. -<pre class="brush: js">caches.open('v1').then(function(cache) { +> **Note :** {{domxref("Cache.match()")}} est quasiment identique à [`Cache.matchAll()`](/fr/docs/Web/API/Cache/matchAll), si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). + +## Exemples + +```js +caches.open('v1').then(function(cache) { cache.matchAll('/images/').then(function(response) { response.forEach(function(element, index, array) { cache.delete(element); }); }); -})</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-cache-matchall', 'Cache: matchAll')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2> - -<p>{{Compat("api.Cache.matchAll")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li>{{domxref("Cache")}}</li> - <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li> -</ul> +}) +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cache-matchall', 'Cache: matchAll')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilités des navigateurs + +{{Compat("api.Cache.matchAll")}} + +## Voir aussi + +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/put/index.md b/files/fr/web/api/cache/put/index.md index b8a7f9f5cd..d99f8d8bb7 100644 --- a/files/fr/web/api/cache/put/index.md +++ b/files/fr/web/api/cache/put/index.md @@ -13,66 +13,58 @@ tags: - put translation_of: Web/API/Cache/put --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La méthode <strong><code>put()</code></strong> de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours.</p> +La méthode **`put()`** de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours. -<p>Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations :</p> +Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations : -<pre class="brush: js">fetch(url).then(function(response) { +```js +fetch(url).then(function(response) { if (!response.ok) { throw new TypeError('Bad response status'); } return cache.put(url, response); -})</pre> +}) +``` -<div class="note"> -<p><strong>Note :</strong> <code>put()</code> écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.</p> -</div> +> **Note :** `put()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. -<div class="note"> -<p><strong>Note :</strong> Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage. Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver.</p> -</div> +> **Note :** Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage. Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver. -<div class="note"> -<p><strong>Note :</strong> Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS.</p> -</div> +> **Note :** Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">cache.put(request, response).then(function() { +```js +cache.put(request, response).then(function() { // la paire requête/réponse a été ajoutée au cache }); -</pre> +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>request</dt> - <dd>La {{domxref("Request", "Requête")}} à ajouter au cache.</dd> - <dt>response</dt> - <dd>La {{domxref("Response", "Réponse")}} à associer à la requête.</dd> -</dl> +- request + - : La {{domxref("Request", "Requête")}} à ajouter au cache. +- response + - : La {{domxref("Response", "Réponse")}} à associer à la requête. -<h3 id="Retour">Retour</h3> +### Retour -<p>Une {{jsxref("Promise", "Promesse")}} est retournée avec void.</p> +Une {{jsxref("Promise", "Promesse")}} est retournée avec void. -<div class="note"> -<p><strong>Note :</strong> La promesse sera rompue avec un <code>TypeError</code> si le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.</p> -</div> +> **Note :** La promesse sera rompue avec un `TypeError` si le schéma d'URL n'est pas `http` ou `https`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Cet extrait de code est tiré du MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (lancez <a href="https://mdn.github.io/sw-test/">sw-test dans votre navigateur</a>). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante :</p> +Cet extrait de code est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (lancez [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante : -<ol> - <li>Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse.</li> - <li>Sinon, ouvrir le cache <code>v1</code> avec <code>open()</code>, insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec <code>return response.clone()</code> — nécessaire car <code>put()</code> détruit le corps de la réponse.</li> - <li>En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours.</li> -</ol> +1. Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse. +2. Sinon, ouvrir le cache `v1` avec `open()`, insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec `return response.clone()` — nécessaire car `put()` détruit le corps de la réponse. +3. En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours. -<pre class="brush: js">var response; +```js +var response; var cachedResponse = caches.match(event.request).catch(function() { return fetch(event.request); }).then(function(r) { @@ -83,33 +75,21 @@ var cachedResponse = caches.match(event.request).catch(function() { return response.clone(); }).catch(function() { return caches.match('/sw-test/gallery/myLittleVader.jpg'); -});</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Cache.put")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li>{{domxref("Cache")}}</li> - <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li> -</ul> +}); +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Cache.put")}} + +## Voir aussi + +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/caches/index.md b/files/fr/web/api/caches/index.md index b5b57df7ee..abfb9936b2 100644 --- a/files/fr/web/api/caches/index.md +++ b/files/fr/web/api/caches/index.md @@ -4,24 +4,24 @@ slug: Web/API/caches translation_of: Web/API/WindowOrWorkerGlobalScope/caches original_slug: Web/API/WindowOrWorkerGlobalScope/caches --- -<p>{{APIRef()}}{{SeeCompatTable}}</p> +{{APIRef()}}{{SeeCompatTable}} -<p>La propriété en lecture seule <code><strong>caches</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes.</p> +La propriété en lecture seule **`caches`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // ou simplement caches -</pre> + var myCacheStorage = self.caches; // ou simplement caches -<h3 id="Value">Value</h3> +### Value -<p>Un objet de type {{domxref("CacheStorage")}}.</p> +Un objet de type {{domxref("CacheStorage")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple suivant montre comment mettre en cache un contexte de <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> pour stocker des ressources et les utiliser hors-ligne.</p> +L'exemple suivant montre comment mettre en cache un contexte de [service worker](/en-US/docs/Web/API/Service_Worker_API) pour stocker des ressources et les utiliser hors-ligne. -<pre class="brush: js">this.addEventListener('install', function(event) { +```js +this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ @@ -38,43 +38,45 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/caches ]); }) ); -});</pre> +}); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications <table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td> - <p>Défini dans un <code>WindowOrWorkerGlobalScope</code> partiel dans la nouvelle spec.</p> - </td> - </tr> - <tr> - <td>{{SpecName('Service Workers')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td> + {{SpecName('Service Workers', '#self-caches', 'caches')}} + </td> + <td>{{Spec2('Service Workers')}}</td> + <td> + <p> + Défini dans un <code>WindowOrWorkerGlobalScope</code> partiel dans la + nouvelle spec. + </p> + </td> + </tr> + <tr> + <td>{{SpecName('Service Workers')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.WindowOrWorkerGlobalScope.caches")}} +## Voir aussi -<p>{{Compat("api.WindowOrWorkerGlobalScope.caches")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li> - <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li> - <li>{{domxref("CacheStorage")}}</li> - <li>{{domxref("Cache")}}</li> -</ul> +- [Service Workers](/en-US/docs/Web/API/ServiceWorker_API) +- [Web Workers](/en-US/docs/Web/API/Web_Workers_API) +- {{domxref("CacheStorage")}} +- {{domxref("Cache")}} diff --git a/files/fr/web/api/cachestorage/delete/index.md b/files/fr/web/api/cachestorage/delete/index.md index 6d088f5d7f..38318b5921 100644 --- a/files/fr/web/api/cachestorage/delete/index.md +++ b/files/fr/web/api/cachestorage/delete/index.md @@ -11,35 +11,33 @@ tags: - delete translation_of: Web/API/CacheStorage/delete --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La fonction <code><strong>delete</strong></code><strong><code>()</code></strong> de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un <code>cacheName</code>, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code>. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne <code>false</code>.</p> +La fonction **`delete`\*\***`()`\*\* de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un `cacheName`, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne `false`. -<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p> +Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">caches.delete(<em>cacheName</em>).then(function(true) { - // le cache est maintenant supprimé -}); -</pre> + caches.delete(cacheName).then(function(true) { + // le cache est maintenant supprimé + }); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>cacheName</dt> - <dd>Le nom du cache que vous souhaitez supprimer.</dd> -</dl> +- cacheName + - : Le nom du cache que vous souhaitez supprimer. -<h3 id="Retour">Retour</h3> +### Retour -<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si l'objet {{domxref("Cache")}} est trouvé et supprimé, <code>false</code> sinon.</p> +Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si l'objet {{domxref("Cache")}} est trouvé et supprimé, `false` sinon. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec <code>delete().</code></p> +Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` -<pre class="brush: js">this.addEventListener('activate', function(event) { +```js +this.addEventListener('activate', function(event) { var cacheWhitelist = ['v2']; event.waitUntil( @@ -51,35 +49,21 @@ translation_of: Web/API/CacheStorage/delete })); }) ); -});</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#cache-storage-delete', 'CacheStorage: delete')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +}); +``` -<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2> +## Spécifications +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#cache-storage-delete', 'CacheStorage: delete')}} | {{Spec2('Service Workers')}} | Définition initiale. | +## Compatibilités des navigateurs -<p>{{Compat("api.CacheStorage.delete")}}</p> +{{Compat("api.CacheStorage.delete")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li>{{domxref("Cache")}}</li> - <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li> -</ul> +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/has/index.md b/files/fr/web/api/cachestorage/has/index.md index 5b1b6a6ae0..ae799a0f03 100644 --- a/files/fr/web/api/cachestorage/has/index.md +++ b/files/fr/web/api/cachestorage/has/index.md @@ -12,69 +12,53 @@ tags: - has translation_of: Web/API/CacheStorage/has --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La méthode <strong><code>has()</code></strong> de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si un objet {{domxref("Cache")}} est égal au <code>cacheName</code>.</p> +La méthode **`has()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si un objet {{domxref("Cache")}} est égal au `cacheName`. -<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p> +Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">caches.has(<em>cacheName</em>).then(function(true) { - // le cache existe! -}); -</pre> + caches.has(cacheName).then(function(true) { + // le cache existe! + }); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>cacheName</dt> - <dd>Un {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}.</dd> -</dl> +- cacheName + - : Un {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}. -<h3 id="Retour">Retour</h3> +### Retour -<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si le cache existe.</p> +Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si le cache existe. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse <code>has()</code> est rejetée) alors nous exécutons une sorte d'initialisation du cache.</p> +L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse `has()` est rejetée) alors nous exécutons une sorte d'initialisation du cache. -<pre class="brush: js">caches.has('v1').then(function() { +```js +caches.has('v1').then(function() { caches.open('v1').then(function(cache) { return cache.addAll(myAssets); }); }).catch(function() { someCacheSetupfunction(); -});;</pre> +});; +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#cache-storage-has', 'CacheStorage: has')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#cache-storage-has', 'CacheStorage: has')}} | {{Spec2('Service Workers')}} | Définition initiale. | -<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2> +## Compatibilités des navigateurs +{{Compat("api.CacheStorage.has")}} +## Voir aussi -<p>{{Compat("api.CacheStorage.has")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li>{{domxref("Cache")}}</li> - <li>{{domxref("WorkerGlobalScope.caches")}}</li> -</ul> +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/index.md b/files/fr/web/api/cachestorage/index.md index 276393aa31..f91758952d 100644 --- a/files/fr/web/api/cachestorage/index.md +++ b/files/fr/web/api/cachestorage/index.md @@ -11,64 +11,55 @@ tags: - ServiceWorker translation_of: Web/API/CacheStorage --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>L'interface <code>CacheStorage</code> représente le stockage des objets {{domxref("Cache")}}.</p> +L'interface `CacheStorage` représente le stockage des objets {{domxref("Cache")}}. -<p>L'interface :</p> +L'interface : -<ul> - <li>Fournit un répertoire principal de tous les caches nommés qui peut être accessible par un {{domxref("ServiceWorker")}} ou un autre type de travailleur ou portée de {{domxref("window")}} (vous n'êtes pas limité à l'utiliser uniquement avec des Service Workers, même si la spécification {{SpecName("Service Workers")}} le définit). - <div class="note"> - <p><strong>Note :</strong> <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1026063">Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS</a>. {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré.</p></div> - </li> - <li>Maintient une correspondance entre les noms des chaînes de caractères et les objets {{domxref("Cache")}} correspondants.</li> -</ul> +- Fournit un répertoire principal de tous les caches nommés qui peut être accessible par un {{domxref("ServiceWorker")}} ou un autre type de travailleur ou portée de {{domxref("window")}} (vous n'êtes pas limité à l'utiliser uniquement avec des Service Workers, même si la spécification {{SpecName("Service Workers")}} le définit). -<p>Utilisez {{domxref("CacheStorage.open()")}} pour obtenir une instance {{domxref("Cache")}}.</p> + > **Note :** [Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS](https://bugs.chromium.org/p/chromium/issues/detail?id=1026063). {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré. -<p>Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Request", "Requête")}} donnée est une clé dans l'un des objets {{domxref("Cache")}} que l'objet <code>CacheStorage</code> surveille.</p> +- Maintient une correspondance entre les noms des chaînes de caractères et les objets {{domxref("Cache")}} correspondants. -<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p> +Utilisez {{domxref("CacheStorage.open()")}} pour obtenir une instance {{domxref("Cache")}}. -<div class="note"> - <p><strong>Note :</strong> CacheStorage échouera systématiquement avec une <code>SecurityError</code> sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear.</p> -</div> +Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Request", "Requête")}} donnée est une clé dans l'un des objets {{domxref("Cache")}} que l'objet `CacheStorage` surveille. -<div class="note"> - <p><strong>Note :</strong> {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}.</p> -</div> +Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -<h2 id="Méthodes">Méthodes</h2> +> **Note :** CacheStorage échouera systématiquement avec une `SecurityError` sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear. -<dl> - <dt>{{domxref("CacheStorage.match()")}} {{experimental_inline}}</dt> - <dd>Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}.</dd> - <dt>{{domxref("CacheStorage.has()")}} {{experimental_inline}}</dt> - <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en <code>true</code> si un objet {{domxref("Cache")}} qui correspond au <code>cacheName</code> existe.</dd> - <dt>{{domxref("CacheStorage.open()")}} {{experimental_inline}}</dt> - <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au <code>cacheName</code> (si il n'existe pas, un nouveau cache est créé).</dd> - <dt>{{domxref("CacheStorage.delete()")}} {{experimental_inline}}</dt> - <dd>Trouve l'objet {{domxref("Cache")}} correspondant au <code>cacheName</code>, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à <code>true</code>. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à <code>false</code>.</dd> - <dt>{{domxref("CacheStorage.keys()")}} {{experimental_inline}}</dt> - <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}.</dd> -</dl> +> **Note :** {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}. -<h2 id="Exemples">Exemples</h2> +## Méthodes -<p>Cet extrait de code est tiré de l'<a href="https://github.com/mdn/sw-test/">exemple MDN sw-test</a> (lancer <a href="https://mdn.github.io/sw-test/">sw-test dans votre navigateur</a>). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets.</p> +- {{domxref("CacheStorage.match()")}} {{experimental_inline}} + - : Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}. +- {{domxref("CacheStorage.has()")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en `true` si un objet {{domxref("Cache")}} qui correspond au `cacheName` existe. +- {{domxref("CacheStorage.open()")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au `cacheName` (si il n'existe pas, un nouveau cache est créé). +- {{domxref("CacheStorage.delete()")}} {{experimental_inline}} + - : Trouve l'objet {{domxref("Cache")}} correspondant au `cacheName`, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à `false`. +- {{domxref("CacheStorage.keys()")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}. -<p>Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit :</p> +## Exemples -<ol> - <li>Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça.</li> - <li>Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (<code>cache.put(event.request, response.clone())</code>.)</li> - <li>En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut.</li> -</ol> +Cet extrait de code est tiré de l'[exemple MDN sw-test](https://github.com/mdn/sw-test/) (lancer [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets. -<p>Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}.</p> +Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit : -<pre class="brush: js">this.addEventListener('install', function(event) { +1. Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça. +2. Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (`cache.put(event.request, response.clone())`.) +3. En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut. + +Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}. + +```js +this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ @@ -109,11 +100,13 @@ self.addEventListener('fetch', function(event) { }); } })); -});</pre> +}); +``` -<p>Cet extrait montre comment l'API peut être utilisée en dehors du contexte d'un Service Worker, et utilise l'opérateur "await" pour un code beaucoup plus lisible.</p> +Cet extrait montre comment l'API peut être utilisée en dehors du contexte d'un Service Worker, et utilise l'opérateur "await" pour un code beaucoup plus lisible. -<pre class="brush: js">// Essayer d'obtenir des données du cache, mais se rabattre sur la récupération en direct. +```js +// Essayer d'obtenir des données du cache, mais se rabattre sur la récupération en direct. async function getData() { const cacheVersion = 1; const cacheName = `myapp-${ cacheVersion }`; @@ -167,35 +160,21 @@ try { console.log( { data } ); } catch ( error ) { console.error( { error } ); -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +} +``` -<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2> +## Spécifications +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}} | {{Spec2('Service Workers')}} | Définition initiale. | +## Compatibilités des navigateurs -<p>{{Compat("api.CacheStorage")}}</p> +{{Compat("api.CacheStorage")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li> - <li>{{domxref("Cache")}}</li> - <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li> -</ul> +- [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/keys/index.md b/files/fr/web/api/cachestorage/keys/index.md index ed61c3716c..3f08fd71b7 100644 --- a/files/fr/web/api/cachestorage/keys/index.md +++ b/files/fr/web/api/cachestorage/keys/index.md @@ -12,32 +12,32 @@ tags: - keys translation_of: Web/API/CacheStorage/keys --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La méthode <code><strong>keys</strong></code><strong><code>()</code></strong> de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}.</p> +La méthode **`keys`\*\***`()`\*\* de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}. -<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p> +Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">caches.keys().then(function(<em>keyList</em>) { - // faire quelque-chose avec votre keylist -}); -</pre> + caches.keys().then(function(keyList) { + // faire quelque-chose avec votre keylist + }); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<p>Aucun.</p> +Aucun. -<h3 id="Retour">Retour</h3> +### Retour -<p>Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}.</p> +Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec <code>delete().</code></p> +Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` -<pre class="brush: js">this.addEventListener('activate', function(event) { +```js +this.addEventListener('activate', function(event) { var cacheWhitelist = ['v2']; event.waitUntil( @@ -49,35 +49,21 @@ translation_of: Web/API/CacheStorage/keys }); }) ); -});</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-cachestorage-keys', 'CacheStorage: keys')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +}); +``` -<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2> +## Spécifications +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cachestorage-keys', 'CacheStorage: keys')}} | {{Spec2('Service Workers')}} | Définition initiale. | +## Compatibilités des navigateurs -<p>{{Compat("api.CacheStorage.keys")}}</p> +{{Compat("api.CacheStorage.keys")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li>{{domxref("Cache")}}</li> - <li>{{domxref("WorkerGlobalScope.caches")}}</li> -</ul> +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/match/index.md b/files/fr/web/api/cachestorage/match/index.md index 704f299794..c548c86759 100644 --- a/files/fr/web/api/cachestorage/match/index.md +++ b/files/fr/web/api/cachestorage/match/index.md @@ -12,56 +12,49 @@ tags: - match translation_of: Web/API/CacheStorage/match --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La fonction <strong><code>match()</code></strong> de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante.</p> +La fonction **`match()`** de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante. -<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p> +Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -<p>Les objets <code>Cache</code> sont cherchés par ordre de création.</p> +Les objets `Cache` sont cherchés par ordre de création. -<div class="note"> - <p><strong>Note :</strong> {{domxref("CacheStorage.match()", "caches.match()")}} est une méthode de commodité. Une fonctionnalité équivalente consiste à appeler {{domxref("cache.match()")}} sur chaque cache (dans l'ordre renvoyé par {{domxref("CacheStorage.keys()", "caches.keys()")}}) jusqu'à ce qu'une {{domxref("Response", "Réponse")}} soit renvoyée.</p> -</div> +> **Note :** {{domxref("CacheStorage.match()", "caches.match()")}} est une méthode de commodité. Une fonctionnalité équivalente consiste à appeler {{domxref("cache.match()")}} sur chaque cache (dans l'ordre renvoyé par {{domxref("CacheStorage.keys()", "caches.keys()")}}) jusqu'à ce qu'une {{domxref("Response", "Réponse")}} soit renvoyée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">caches.match(<em>request</em>,{<em>options</em>}).then(function(<em>response</em>) { - // faire quelque-chose avec la requête et la réponse -}); -</pre> + caches.match(request,{options}).then(function(response) { + // faire quelque-chose avec la requête et la réponse + }); + +### Paramètres + +- request + - : La {{domxref("Request", "Requête")}} recherchée. +- options {{optional_inline}} -<h3 id="Paramètres">Paramètres</h3> + - : Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération `match`. Les options disponible sont: -<dl> - <dt>request</dt> - <dd>La {{domxref("Request", "Requête")}} recherchée.</dd> - <dt>options {{optional_inline}}</dt> - <dd>Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération <code>match</code>. Les options disponible sont: - <ul> - <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à <code>true</code>, la partie <code>?value=bar</code> de <code>http://foo.com/?value=bar</code> sera ignoré lors d'un rapporchement. La valeur par défaut est <code>false</code>.</li> - <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand défini à <code>true</code>, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} <code>http</code> (normalement, seulement <code>GET</code> et <code>HEAD</code> sont authorisés) La valeur par défaut est <code>false</code>.</li> - <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand défini à <code>true</code>, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header <code>VARY</code>. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header <code>VARY</code>. La valeur par défaut est <code>false</code>.</li> - <li><code>cacheName</code>: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.</li> - </ul> - </dd> -</dl> + - `ignoreSearch`: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à `true`, la partie `?value=bar` de `http://foo.com/?value=bar` sera ignoré lors d'un rapporchement. La valeur par défaut est `false`. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand défini à `true`, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} `http` (normalement, seulement `GET` et `HEAD` sont authorisés) La valeur par défaut est `false`. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand défini à `true`, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header `VARY`. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header `VARY`. La valeur par défaut est `false`. + - `cacheName`: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante.</p> +Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Cet exemple est tiré du MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (voir <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit:</p> +Cet exemple est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (voir [sw-test running live](https://mdn.github.io/sw-test/)). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit: -<ol> - <li>Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir.</li> - <li>Si non, ouvrire le cache <code>v1</code> avec <code>open()</code>, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant <code>return response.clone()</code> — obligatoire car <code>put()</code> détruit le corps de la réponse.</li> - <li>Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours.</li> -</ol> +1. Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir. +2. Si non, ouvrire le cache `v1` avec `open()`, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant `return response.clone()` — obligatoire car `put()` détruit le corps de la réponse. +3. Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours. -<pre class="brush: js">self.addEventListener('fetch', function(event) { +```js +self.addEventListener('fetch', function(event) { event.respondWith(caches.match(event.request).then(function(response) { // caches.match() always resolves // but in case of success response will have value @@ -83,35 +76,21 @@ translation_of: Web/API/CacheStorage/match }); } })); -});</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-cachestorage-match', 'CacheStorage: match')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +}); +``` -<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2> +## Spécifications +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cachestorage-match', 'CacheStorage: match')}} | {{Spec2('Service Workers')}} | Définition initiale. | +## Compatibilités des navigateurs -<p>{{Compat("api.CacheStorage.match")}}</p> +{{Compat("api.CacheStorage.match")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li>{{domxref("Cache")}}</li> - <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li> -</ul> +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/open/index.md b/files/fr/web/api/cachestorage/open/index.md index 87d45d11b3..009c6e1e94 100644 --- a/files/fr/web/api/cachestorage/open/index.md +++ b/files/fr/web/api/cachestorage/open/index.md @@ -12,39 +12,35 @@ tags: - open translation_of: Web/API/CacheStorage/open --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La fonction <strong><code>open()</code></strong>de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un <code>cacheName</code>.</p> +La fonction **`open()`**de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un `cacheName`. -<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p> +Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -<div class="note"> -<p><strong>Note :</strong> Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec <code>cacheName</code> et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}.</p> -</div> +> **Note :** Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec `cacheName` et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">caches.open(<em>cacheName</em>).then(function(<em>cache</em>) { - // faire quelque-chose avec le cache -}); -</pre> + caches.open(cacheName).then(function(cache) { + // faire quelque-chose avec le cache + }); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>cacheName</dt> - <dd>Le nom du cache que vous voulez ouvrir.</dd> -</dl> +- cacheName + - : Le nom du cache que vous voulez ouvrir. -<h3 id="Retour">Retour</h3> +### Retour -<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé.</p> +Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Cet exemple est tiré de l'<a href="https://github.com/mdn/sw-test/">exemple MDN sw-test</a> (voir <a href="https://mdn.github.io/sw-test/">sw-test en direct</a>). Ici, nous attendons qu'un {{domxref("InstallEvent")}} se déclenche, puis nous lançons {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} pour gérer le processus d'installation de l'application. Cela consiste à appeler <code>CacheStorage.open()</code> pour créer un nouveau cache, puis à utiliser {{domxref("Cache.addAll()")}} pour y ajouter une série d'éléments.</p> +Cet exemple est tiré de l'[exemple MDN sw-test](https://github.com/mdn/sw-test/) (voir [sw-test en direct](https://mdn.github.io/sw-test/)). Ici, nous attendons qu'un {{domxref("InstallEvent")}} se déclenche, puis nous lançons {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} pour gérer le processus d'installation de l'application. Cela consiste à appeler `CacheStorage.open()` pour créer un nouveau cache, puis à utiliser {{domxref("Cache.addAll()")}} pour y ajouter une série d'éléments. -<pre class="brush: js">self.addEventListener('install', function(event) { +```js +self.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ @@ -59,35 +55,21 @@ translation_of: Web/API/CacheStorage/open '/sw-test/gallery/snowTroopers.jpg' ]); }) - );</pre> + ); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-cachestorage-open', 'CacheStorage: open')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cachestorage-open', 'CacheStorage: open')}} | {{Spec2('Service Workers')}} | Définition initiale. | -<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2> +## Compatibilités des navigateurs +{{Compat("api.CacheStorage.open")}} +## Voir aussi -<p>{{Compat("api.CacheStorage.open")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li>{{domxref("Cache")}}</li> - <li>{{domxref("WorkerGlobalScope.caches")}}</li> -</ul> +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md index b3520fecbd..acd6af42aa 100644 --- a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md +++ b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md @@ -10,44 +10,42 @@ tags: translation_of: Web/API/Canvas_API/A_basic_ray-caster original_slug: Un_raycaster_basique_avec_canvas --- -<p>{{CanvasSidebar}}</p> +{{CanvasSidebar}} -<p>Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D à l'aide de la projection de rayons.</p> +Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D à l'aide de la projection de rayons. -<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p> +{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}} -<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Ouvrir une nouvelle fenêtre</a></strong></p> +**[Ouvrir une nouvelle fenêtre](http://mdn.github.io/canvas-raycaster/)** -<h2 id="Pourquoi.C2.A0.3F">Pourquoi ?</h2> +## Pourquoi ? -<p>Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément <code><canvas></code> dont j'avais <a href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">entendu parler (en)</a>, non seulement allait être supporté par Firefox, mais était<em> </em><strong>déjà</strong> supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience.</p> +Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément `<canvas>` dont j'avais [entendu parler (en)](http://www.whatwg.org/specs/web-apps/current-work/#dynamic), non seulement allait être supporté par Firefox, mais était\* **\*déjà** supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience. -<p>La <a href="/fr/docs/Web/HTML/Canvas">présentation</a> et le <a href="/fr/docs/Tutoriel_canvas">tutoriel </a><a href="/fr/docs/Tutoriel_canvas"> </a>canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript.</p> +La [présentation](/fr/docs/Web/HTML/Canvas) et le [tutoriel ](/fr/docs/Tutoriel_canvas)[](/fr/docs/Tutoriel_canvas)canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript. -<h2 id="Comment.C2.A0.3F">Comment ?</h2> +## Comment ? -<p>L'idée de base est d'employer {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va <a href="/fr/docs/Tutoriel_canvas/Animations_basiques">y conduire</a>, et je voulais voir si je pouvais y arriver.</p> +L'idée de base est d'employer {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va [y conduire](/fr/docs/Tutoriel_canvas/Animations_basiques), et je voulais voir si je pouvais y arriver. -<p>Donc, à chaque mise à jour, le projeteur de rayons vérifie si vous avez pressé une touche récemment, pour s'éviter des calculs si vous êtes immobile. S'il y a eu un mouvement, le canvas est effacé, le ciel et le sol sont dessinés, la position et l'orientation de la caméra corrigées et les rayons projetés. Lorsque les rayons rencontrent un mur, ils créent une bandelette verticale de canvas de la couleur du mur qu'ils ont touché, mélangée à une nuance plus sombre de cette couleur en fonction de la distance au mur. La hauteur de la bandelette est modulée par la distance entre le mur et la caméra, et la bandelette est dessinée centrée sur la ligne d'horizon.</p> +Donc, à chaque mise à jour, le projeteur de rayons vérifie si vous avez pressé une touche récemment, pour s'éviter des calculs si vous êtes immobile. S'il y a eu un mouvement, le canvas est effacé, le ciel et le sol sont dessinés, la position et l'orientation de la caméra corrigées et les rayons projetés. Lorsque les rayons rencontrent un mur, ils créent une bandelette verticale de canvas de la couleur du mur qu'ils ont touché, mélangée à une nuance plus sombre de cette couleur en fonction de la distance au mur. La hauteur de la bandelette est modulée par la distance entre le mur et la caméra, et la bandelette est dessinée centrée sur la ligne d'horizon. -<p>Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe<em> Tricks of the Game Programming Gurus</em> (<small>ISBN: 0672305070</small>), et d'un <a href="http://www.shinelife.co.uk/java-maze/">Projeteur de rayons Java</a> que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien.</p> +Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe _Tricks of the Game Programming Gurus_ (ISBN: 0672305070), et d'un [Projeteur de rayons Java](http://www.shinelife.co.uk/java-maze/) que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien. -<h2 id="R.C3.A9sultats">Résultats</h2> +## Résultats -<p>Le canvas dans Safari 2.0.1 a étonnement bien marché. Avec le facteur de bloc-itude poussé pour rendre des bandelettes de 8 pixels de largeur, j'arrive à faire tourner une fenêtre en 320 x 240 à 24 images/seconde sur mon Apple mini. Firefox 1.5 Beta 1 est encore plus rapide, j'obtiens 24 images/seconde sur la fenêtre de 320 x 240 avec des bandelettes de 4 pixels. Pas vraiment un nouveau membre de la famille "ID software", mais plutôt décent si l'on considère qu'il s'agit d'un environnement entièrement interprété, et que je n'ai eu à m'inquiéter ni de l'allocation mémoire, ni des modes vidéos, ni de coder les routines centrales en assembleur, ni de quoi que soit d'autre. Le code cherche à être très efficace, consultant un tableau de valeurs précalculées, mais je ne suis pas un dieu de l'optimisation, donc les choses pourraient probablement être écrites plus rapidement.</p> +Le canvas dans Safari 2.0.1 a étonnement bien marché. Avec le facteur de bloc-itude poussé pour rendre des bandelettes de 8 pixels de largeur, j'arrive à faire tourner une fenêtre en 320 x 240 à 24 images/seconde sur mon Apple mini. Firefox 1.5 Beta 1 est encore plus rapide, j'obtiens 24 images/seconde sur la fenêtre de 320 x 240 avec des bandelettes de 4 pixels. Pas vraiment un nouveau membre de la famille "ID software", mais plutôt décent si l'on considère qu'il s'agit d'un environnement entièrement interprété, et que je n'ai eu à m'inquiéter ni de l'allocation mémoire, ni des modes vidéos, ni de coder les routines centrales en assembleur, ni de quoi que soit d'autre. Le code cherche à être très efficace, consultant un tableau de valeurs précalculées, mais je ne suis pas un dieu de l'optimisation, donc les choses pourraient probablement être écrites plus rapidement. -<p>De plus, il laisse beaucoup à désirer en tant que tentative d'une espèce de moteur de jeu— il n'y a pas de textures sur les murs, pas de sprites, pas de portes, même pas de téléporteurs pour passer à un autre niveau. Je suis cependant presque certain que toutes ces choses peuvent être intégrées pourvu qu'on en prenne le temps. L' API de canvas supporte la copie d'images par pixel, donc les textures semblent possibles. Je laisse ça pour un autre article, probablement d'une autre personne. =)</p> +De plus, il laisse beaucoup à désirer en tant que tentative d'une espèce de moteur de jeu— il n'y a pas de textures sur les murs, pas de sprites, pas de portes, même pas de téléporteurs pour passer à un autre niveau. Je suis cependant presque certain que toutes ces choses peuvent être intégrées pourvu qu'on en prenne le temps. L' API de canvas supporte la copie d'images par pixel, donc les textures semblent possibles. Je laisse ça pour un autre article, probablement d'une autre personne. =) -<h2 id="Le_RayCaster">Le projeteur de rayons <em>(ray-caster)</em></h2> +## Le projeteur de rayons _(ray-caster)_ -<p>De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un <a href="https://mdn.github.io/canvas-raycaster/">coup d'oeil</a>, et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas).</p> +De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un [coup d'oeil](https://mdn.github.io/canvas-raycaster/), et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas). -<p>Vous y voici donc, lancez Safari 1.3+, Firefox 1.5+ ou un autre navigateur supportant l'élément <code><canvas></code> et amusez-vous!<br> - <br> - <small><a href="fr/Un_raycaster_basique_avec_canvas/input.js">input.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/Level.js">Level.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/Player.js">Player.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/RayCaster.html">RayCaster.html</a> | <a href="fr/Un_raycaster_basique_avec_canvas/RayCaster.js">RayCaster.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/trace.css">trace.css</a> | <a href="fr/Un_raycaster_basique_avec_canvas/trace.js">trace.js</a> </small></p> +Vous y voici donc, lancez Safari 1.3+, Firefox 1.5+ ou un autre navigateur supportant l'élément `<canvas>` et amusez-vous! -<h3 id="Voir_.C3.A9galement">Voir aussi</h3> +[input.js](fr/Un_raycaster_basique_avec_canvas/input.js) | [Level.js](fr/Un_raycaster_basique_avec_canvas/Level.js) | [Player.js](fr/Un_raycaster_basique_avec_canvas/Player.js) | [RayCaster.html](fr/Un_raycaster_basique_avec_canvas/RayCaster.html) | [RayCaster.js](fr/Un_raycaster_basique_avec_canvas/RayCaster.js) | [trace.css](fr/Un_raycaster_basique_avec_canvas/trace.css) | [trace.js](fr/Un_raycaster_basique_avec_canvas/trace.js) -<ul> - <li><a href="/fr/docs/Tutoriel_canvas">Canvas tutorial</a></li> -</ul> +### Voir aussi + +- [Canvas tutorial](/fr/docs/Tutoriel_canvas) diff --git a/files/fr/web/api/canvas_api/index.md b/files/fr/web/api/canvas_api/index.md index 9c3ea0f0ef..3b26e6ff1f 100644 --- a/files/fr/web/api/canvas_api/index.md +++ b/files/fr/web/api/canvas_api/index.md @@ -7,47 +7,51 @@ tags: - Reference translation_of: Web/API/Canvas_API --- -<div>{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}}</div> +{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}} -<p>Ajouté en <a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a>, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts <a href="/fr/docs/JavaScript">JavaScript</a>. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.</p> +Ajouté en [HTML5](/fr/docs/Web/Guide/HTML/HTML5), l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts [JavaScript](/fr/docs/JavaScript). Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel. -<p>Les applications Mozilla ont commencé à supporter <canvas> à partir de Gecko 1.8 (c'est-à-dire <a href="/fr/docs/Firefox_1.5_pour_les_développeurs">Firefox 1.5</a>). L'élément a été introduit à l'origine par Apple pour le <a href="http://www.apple.com/macosx/features/dashboard/">Dashboard d'OS X</a> et pour Safari. Internet Explorer supporte <canvas> depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de <canvas> en incluant un script depuis le projet <a href="http://excanvas.sourceforge.net/">Explorer Canvas </a>de Google.</p> +Les applications Mozilla ont commencé à supporter \<canvas> à partir de Gecko 1.8 (c'est-à-dire [Firefox 1.5](/fr/docs/Firefox_1.5_pour_les_développeurs)). L'élément a été introduit à l'origine par Apple pour le [Dashboard d'OS X](http://www.apple.com/macosx/features/dashboard/) et pour Safari. Internet Explorer supporte \<canvas> depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de \<canvas> en incluant un script depuis le projet [Explorer Canvas ](http://excanvas.sourceforge.net/)de Google. -<p>L'élément <canvas> est aussi utilisé par <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> pour afficher des graphismes 3D avec accélération matérielle sur des pages web.</p> +L'élément \<canvas> est aussi utilisé par [WebGL](/fr/docs/Web/API/WebGL_API) pour afficher des graphismes 3D avec accélération matérielle sur des pages web. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Voilà un simple extrait de code qui utilise la méthode {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p> +Voilà un simple extrait de code qui utilise la méthode {{domxref("CanvasRenderingContext2D.fillRect()")}}. -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 100, 100); -</pre> +``` -<p>Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:</p> +Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.fillStyle = 'green'; -ctx.fillRect(10, 10, 100, 100);</textarea> -</pre> +ctx.fillRect(10, 10, 100, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext("2d"); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -70,95 +74,72 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> - -<h2 id="Références">Références</h2> - -<ul> - <li>{{domxref("HTMLCanvasElement")}}</li> - <li>{{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasImageSource")}}</li> - <li>{{domxref("CanvasPattern")}}</li> - <li>{{domxref("ImageBitmap")}}</li> - <li>{{domxref("ImageData")}}</li> - <li>{{domxref("RenderingContext")}}</li> - <li>{{domxref("TextMetrics")}}</li> - <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li> - <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li> -</ul> - -<p>Les interfaces liées au <code>WebGLRenderingContext</code> sont référencées sous <a href="/en-US/docs/Web/WebGL">WebGL</a>.</p> - -<p>{{domxref("CanvasCaptureMediaStream")}} est lié.</p> - -<h2 id="Guides_et_tutoriels">Guides et tutoriels</h2> - -<dl> - <dt><a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a></dt> - <dd>Un tutoriel complet qui couvre à la fois l'usage élémentaire de <code><canvas></code> mais aussi ses fonctionnalités avancées.</dd> - <dt><a href="/fr/docs/Extraits_de_code/Canvas">Extraits de code : Canvas</a></dt> - <dd>Quelques extraits de code orientés vers les développeurs d'extension qui utilisent <code><canvas></code>.</dd> - <dt><a href="/fr/docs/Un_raycaster_basique_avec_canvas">Demo: Un raycaster basique avec canvas</a></dt> - <dd>Une demonstration d'animation utilisant le ray-tracing dans un élément canvas.</dd> - <dt><a href="/fr/docs/Web/HTML/Canvas/Dessiner_des_objets_DOM_dans_un_element_canvas">Dessiner des objets DOM dans un élément canvas</a></dt> - <dd>Comment dessiner un contenu DOM, tel que des éléments HTML, dans un canvas.</dd> - <dt><a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipulation vidéo avec la balise canvas</a></dt> - <dd>Combiner {{HTMLElement("video")}} et {{HTMLElement("canvas")}} pour manipuler des données video en temps réel.</dd> -</dl> - -<h2 id="Ressources">Ressources</h2> - -<h3 id="Général">Général</h3> - -<ul> - <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a> (en)</li> - <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a> (en)</li> -</ul> - -<h3 id="Bibliothèques">Bibliothèques</h3> - -<ul> - <li><a href="http://fabricjs.com">Fabric.js</a> est une bibliothèque open-source qui peut analyser du code SVG.</li> - <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau.</li> - <li><a href="http://paperjs.org/">Paper.js</a> est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5.</li> - <li><a href="http://origamijs.com/docs/">Origami.js</a> est une bibliothèque légère open-source pour canvas.</li> - <li><a href="http://libcanvas.github.com/">libCanvas</a> est un framework canvas puissant et léger.</li> - <li><a href="http://processingjs.org">Processing.js</a> est un portage du langage de visuaisation Processing.</li> - <li><a href="https://playcanvas.com/">PlayCanvas</a> est un moteur de jeu open-source.</li> - <li><a href="http://www.pixijs.com/">Pixi.js</a> est un moteur de jeu open-source.</li> - <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> est une bibliothèque permettant de réaliser des diagrammes et des graphiques.</li> - <li><a href="https://github.com/jeremyckahn/rekapi">Rekapi</a> est une API d'animation par key-framing pour Canvas.</li> - <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux.</li> - <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> crée des visualisation de données interactives en 2D avec canvas pour le Web.</li> - <li><a href="http://www.createjs.com/easeljs">EaselJS</a> est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art</li> - <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas</li> - <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas</li> -</ul> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 360) }} + +## Références + +- {{domxref("HTMLCanvasElement")}} +- {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasGradient")}} +- {{domxref("CanvasImageSource")}} +- {{domxref("CanvasPattern")}} +- {{domxref("ImageBitmap")}} +- {{domxref("ImageData")}} +- {{domxref("RenderingContext")}} +- {{domxref("TextMetrics")}} +- {{domxref("OffscreenCanvas")}}{{experimental_inline}} +- {{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}} + +Les interfaces liées au `WebGLRenderingContext` sont référencées sous [WebGL](/en-US/docs/Web/WebGL). + +{{domxref("CanvasCaptureMediaStream")}} est lié. + +## Guides et tutoriels + +- [Tutoriel canvas](/fr/docs/Tutoriel_canvas) + - : Un tutoriel complet qui couvre à la fois l'usage élémentaire de `<canvas>` mais aussi ses fonctionnalités avancées. +- [Extraits de code : Canvas](/fr/docs/Extraits_de_code/Canvas) + - : Quelques extraits de code orientés vers les développeurs d'extension qui utilisent `<canvas>`. +- [Demo: Un raycaster basique avec canvas](/fr/docs/Un_raycaster_basique_avec_canvas) + - : Une demonstration d'animation utilisant le ray-tracing dans un élément canvas. +- [Dessiner des objets DOM dans un élément canvas](/fr/docs/Web/HTML/Canvas/Dessiner_des_objets_DOM_dans_un_element_canvas) + - : Comment dessiner un contenu DOM, tel que des éléments HTML, dans un canvas. +- [Manipulation vidéo avec la balise canvas](/fr/docs/HTML/Manipulating_video_using_canvas) + - : Combiner {{HTMLElement("video")}} et {{HTMLElement("canvas")}} pour manipuler des données video en temps réel. + +## Ressources + +### Général + +- [HTML5 Canvas Deep Dive](http://joshondesign.com/p/books/canvasdeepdive/title.html) (en) +- [Canvas Handbook](http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html) (en) + +### Bibliothèques + +- [Fabric.js](http://fabricjs.com) est une bibliothèque open-source qui peut analyser du code SVG. +- [Kinetic.js](https://github.com/ericdrowell/KineticJS) est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau. +- [Paper.js](http://paperjs.org/) est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5. +- [Origami.js](http://origamijs.com/docs/) est une bibliothèque légère open-source pour canvas. +- [libCanvas](http://libcanvas.github.com/) est un framework canvas puissant et léger. +- [Processing.js](http://processingjs.org) est un portage du langage de visuaisation Processing. +- [PlayCanvas](https://playcanvas.com/) est un moteur de jeu open-source. +- [Pixi.js](http://www.pixijs.com/) est un moteur de jeu open-source. +- [PlotKit](http://www.liquidx.net/plotkit/) est une bibliothèque permettant de réaliser des diagrammes et des graphiques. +- [Rekapi](https://github.com/jeremyckahn/rekapi) est une API d'animation par key-framing pour Canvas. +- [PhiloGL](http://senchalabs.github.com/philogl/) est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux. +- [JavaScript InfoVis Toolkit](http://thejit.org/) crée des visualisation de données interactives en 2D avec canvas pour le Web. +- [EaselJS](http://www.createjs.com/easeljs) est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art +- [Scrawl-canvas](http://scrawl.rikweb.org.uk/) est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas +- [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/) est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas + +## Spécifications + +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}} | {{Spec2('HTML WHATWG')}} | | + +## Voir aussi + +- [WebGL](/en-US/docs/Web/WebGL) diff --git a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md index 80e8707ba3..1d307ad69e 100644 --- a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md +++ b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md @@ -7,20 +7,21 @@ tags: translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas original_slug: HTML/Manipulating_video_using_canvas --- -<p>{{CanvasSidebar}}</p> +{{CanvasSidebar}} -<p>En combinant les possibilités de l'élément <a href="/En/HTML/Element/Video"><code>video</code></a> avec celles de l'élément <a href="/en/HTML/Canvas"><code>canvas</code></a>, vous pouvez manipuler les données vidéos en temps réel, et y incorporer une variété d'effets visuels. Ce tutoriel explique comment réaliser un travail d'incrustation "chroma-keying" (<em>fond vert</em>) en utilisant JavaScript.</p> +En combinant les possibilités de l'élément [`video`](/En/HTML/Element/Video) avec celles de l'élément [`canvas`](/en/HTML/Canvas), vous pouvez manipuler les données vidéos en temps réel, et y incorporer une variété d'effets visuels. Ce tutoriel explique comment réaliser un travail d'incrustation "chroma-keying" (_fond vert_) en utilisant JavaScript. -<p><a href="/samples/video/chroma-key/index.xhtml">Voir l'exemple</a>.</p> +[Voir l'exemple](/samples/video/chroma-key/index.xhtml). -<h2 id="Le_contenu_du_document">Le contenu du document</h2> +## Le contenu du document -<p>Le document XHTML utilisé pour rendre ce contenu est montré ci-dessous :</p> +Le document XHTML utilisé pour rendre ce contenu est montré ci-dessous : -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <style> +```html +<!DOCTYPE html> +<html> + <head> + <style> body { background: black; color:#CCCCCC; @@ -36,38 +37,38 @@ original_slug: HTML/Manipulating_video_using_canvas margin: 10px; background:#3B3B3B; } - </style> - <script type="text/javascript" src="main.js"></script> - </head> + </style> + <script type="text/javascript" src="main.js"></script> + </head> - <body onload="processor.doLoad()"> - <div> - <video id="video" src="video.ogv" controls="true"/> - </div> - <div> - <canvas id="c1" width="160" height="96"></canvas> - <canvas id="c2" width="160" height="96"></canvas> - </div> - </body> -</html></pre> + <body onload="processor.doLoad()"> + <div> + <video id="video" src="video.ogv" controls="true"/> + </div> + <div> + <canvas id="c1" width="160" height="96"></canvas> + <canvas id="c2" width="160" height="96"></canvas> + </div> + </body> +</html> +``` -<p>Les éléments clés à retenir sont :</p> +Les éléments clés à retenir sont : -<ol> - <li>Ce document dispose de deux balises <a href="/fr/docs/Web/HTML/Element/canvas"><code>canvas</code></a>, avec les IDs <code>c1 </code>et <code>c2 :</code> l'élément <code>c1</code> est utilisé pour afficher l'image courante de la vidéo originale, pendant que <code>c2</code> est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; <code>c2</code> est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert.</li> - <li>Le code JavaScript est importé dans le script nommé <code>main.js</code> ; Ce script utilise les fonctionnalités propres à la version 1.8, aussi cette version est précisée, à la ligne 22, quand le script est importé.</li> - <li>Quand le document se charge, la méthode <code>processor.doLoad()</code>, dans le script <code>main.js</code>, est exécutée.</li> -</ol> +1. Ce document dispose de deux balises [`canvas`](/fr/docs/Web/HTML/Element/canvas), avec les IDs `c1 `et `c2 :` l'élément `c1` est utilisé pour afficher l'image courante de la vidéo originale, pendant que `c2` est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; `c2` est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert. +2. Le code JavaScript est importé dans le script nommé `main.js` ; Ce script utilise les fonctionnalités propres à la version 1.8, aussi cette version est précisée, à la ligne 22, quand le script est importé. +3. Quand le document se charge, la méthode `processor.doLoad()`, dans le script `main.js`, est exécutée. -<h2 id="Le_code_JavaScript">Le code JavaScript</h2> +## Le code JavaScript -<p>Le code JavaScript <code>main.js</code> est composé de trois méthodes.</p> +Le code JavaScript `main.js` est composé de trois méthodes. -<h3 id="Initialisation_du_lecteur_avec_effet_d'incrustation_(chroma-key)">Initialisation du lecteur avec effet d'incrustation (<em>chroma-key</em>)</h3> +### Initialisation du lecteur avec effet d'incrustation (_chroma-key_) -<p>La métode <code>doLoad()</code> est appelée quand le document XHTML se charge. Cette méthode sert à initialiser chaque variable nécessaire au code traitant l'incrustation (<em>chroma-key</em>), ainsi qu'à associer un écouteur d'évènement qui détectera le moment où l'utilisateur lancera la vidéo.</p> +La métode `doLoad()` est appelée quand le document XHTML se charge. Cette méthode sert à initialiser chaque variable nécessaire au code traitant l'incrustation (_chroma-key_), ainsi qu'à associer un écouteur d'évènement qui détectera le moment où l'utilisateur lancera la vidéo. -<pre class="brush: js">var processor; +```js +var processor; processor.doLoad = function doLoad() { this.video = document.getElementById('video'); @@ -81,17 +82,19 @@ original_slug: HTML/Manipulating_video_using_canvas self.height = self.video.videoHeight / 2; self.timerCallback(); }, false); - },</pre> + }, +``` -<p>Le code récupère les références aux élément XHTML qui nous intéressent, à savoir l'élément <code>video</code> et les deux éléments <code>canvas</code>. Il définit également les contextes graphique de chacun des éléments <code>canvas</code>. Ce sera utile pour la suite, lorsque nous créerons l'effet d'incrustation.</p> +Le code récupère les références aux élément XHTML qui nous intéressent, à savoir l'élément `video` et les deux éléments `canvas`. Il définit également les contextes graphique de chacun des éléments `canvas`. Ce sera utile pour la suite, lorsque nous créerons l'effet d'incrustation. -<p>Ensuite, l'écouteur d'évènement <code>addEventListener()</code> est appelé sur l'élément <code>video</code> pour détecter le moment où l'utilisateur va cliquer sur le bouton de lecture. Dès lors, le code récupère la hauteur et la largeur de la vidéo, que l'on divise par deux (nécessaire pour plus tard effectuer l'effet d'incrustation), puis on appelle la méthode <code>timerCallback()</code> pour surveiller l'avancement de la vidéo et appliquer l'effet visuel.</p> +Ensuite, l'écouteur d'évènement `addEventListener()` est appelé sur l'élément `video` pour détecter le moment où l'utilisateur va cliquer sur le bouton de lecture. Dès lors, le code récupère la hauteur et la largeur de la vidéo, que l'on divise par deux (nécessaire pour plus tard effectuer l'effet d'incrustation), puis on appelle la méthode `timerCallback()` pour surveiller l'avancement de la vidéo et appliquer l'effet visuel. -<h3 id="Le_rappel_du_minuteur">Le rappel du minuteur</h3> +### Le rappel du minuteur -<p>Le rappel du minuteur est initialisé lorsque la vidéo commence à jouer (lorsque l'événement "play" se produit), puis est chargé d'établir le rappel périodique afin de lancer l'effet d'ajustement pour chaque "frame".</p> +Le rappel du minuteur est initialisé lorsque la vidéo commence à jouer (lorsque l'événement "play" se produit), puis est chargé d'établir le rappel périodique afin de lancer l'effet d'ajustement pour chaque "frame". -<pre class="brush: js">processor.timerCallback = function timerCallback() { +```js +processor.timerCallback = function timerCallback() { if (this.video.paused || this.video.ended) { return; } @@ -100,60 +103,61 @@ original_slug: HTML/Manipulating_video_using_canvas setTimeout(function() { self.timerCallback(); }, 0); - },</pre> + }, +``` -<p>La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer. Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire.</p> +La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer. Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire. -<p>Ensuite, il appelle la méthode <code>computeFrame()</code>, qui effectue l'effet "chroma-keying" sur l'image vidéo en cours.</p> +Ensuite, il appelle la méthode `computeFrame()`, qui effectue l'effet "chroma-keying" sur l'image vidéo en cours. -<p>La dernière chose que fait le rappel est d'appeler <code>setTimeout()</code> pour programmer un nouvel appel. En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo.</p> +La dernière chose que fait le rappel est d'appeler `setTimeout()` pour programmer un nouvel appel. En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo. -<h3 id="Manipulation_des_données_des_images_vidéo">Manipulation des données des images vidéo</h3> +### Manipulation des données des images vidéo -<p>La méthode <code>computeFrame()</code> , présentée ci-dessous, est en charge de récupérer les données de chaque image et d'y appliquer l'effet d'incrustation.</p> +La méthode `computeFrame()` , présentée ci-dessous, est en charge de récupérer les données de chaque image et d'y appliquer l'effet d'incrustation. -<pre class="brush: js">processor.computeFrame = function computeFrame() { +```js +processor.computeFrame = function computeFrame() { this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); let frame = this.ctx1.getImageData(0, 0, this.width, this.height); let l = frame.data.length / 4; - for (let i = 0; i < l; i++) { + for (let i = 0; i < l; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; - if (g > 100 && r > 100 && b < 43) + if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0; } this.ctx2.putImageData(frame, 0, 0); return; - }</pre> + } +``` -<p>²</p> +² -<p>Quand la routine est appelée, l'élément vidéo affiche les données de la plus récente image de la vidéo, ce qui ressemble à :</p> +Quand la routine est appelée, l'élément vidéo affiche les données de la plus récente image de la vidéo, ce qui ressemble à : -<p><img src="video.png"></p> + -<p>À la seconde ligne, cette image est copiée dans le contexte graphique <code>ctx1</code> du premier élément <code>canvas</code>, en spécifiant ses hauteur et largeur, définies plus tôt (soit, réduites de moitié). Notez que c'est très simplement que vous passez les données de l'élément vidéo à afficher dans le contexte graphique avec la méthode <code>drawImage()</code>. Voici ce que cela donne :</p> +À la seconde ligne, cette image est copiée dans le contexte graphique `ctx1` du premier élément `canvas`, en spécifiant ses hauteur et largeur, définies plus tôt (soit, réduites de moitié). Notez que c'est très simplement que vous passez les données de l'élément vidéo à afficher dans le contexte graphique avec la méthode `drawImage()`. Voici ce que cela donne : -<p><img src="sourcectx.png"></p> + -<p>La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode <code>getImageData() </code>sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre.</p> +La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode `getImageData() `sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre. -<p>La boucle <code>for</code>, qui commence à la ligne 6, parcourt les pixels du cadre en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de <code>foo.png</code>.</p> +La boucle `for`, qui commence à la ligne 6, parcourt les pixels du cadre en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de `foo.png`. -<p>Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent. En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique.</p> +Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent. En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique. -<p>L'image résultante ressemble à ceci :</p> +L'image résultante ressemble à ceci : -<p><img src="output.png"></p> + -<p>Cela se fait de façon répétée au fur et à mesure que la vidéo est lue, de sorte que, image après image, la vidéo est traitée et affichée avec l'effet de chrominance.</p> +Cela se fait de façon répétée au fur et à mesure que la vidéo est lue, de sorte que, image après image, la vidéo est traitée et affichée avec l'effet de chrominance. -<p><a href="/samples/video/chroma-key/index.xhtml">Voyez cet exemple réel</a>.</p> +[Voyez cet exemple réel](/samples/video/chroma-key/index.xhtml). -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Using audio and video</a></li> -</ul> +- [Using audio and video](/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) 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 d21ac69028..7581b9eb2e 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 @@ -4,20 +4,22 @@ slug: Web/API/Canvas_API/Tutorial/Advanced_animations translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations original_slug: Web/API/Canvas_API/Tutoriel_canvas/Advanced_animations --- -<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}</div> +{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}} -<p>Dans le dernier chapitre, nous avons réalisé des <a href="/fr/docs/Tutoriel_canvas/Animations_basiques">animations basiques</a> et avons appris comment faire en sorte que les éléments se déplacent. Dans cette partie, nous allons regarder de prêt le mouvement lui-même et ajouter un peu de physique afin de réaliser nos animations avancées.</p> +Dans le dernier chapitre, nous avons réalisé des [animations basiques](/fr/docs/Tutoriel_canvas/Animations_basiques) et avons appris comment faire en sorte que les éléments se déplacent. Dans cette partie, nous allons regarder de prêt le mouvement lui-même et ajouter un peu de physique afin de réaliser nos animations avancées. -<h2 id="Dessinons_une_balle">Dessinons une balle</h2> +## Dessinons une balle -<p>Nous allons utiliser une balle pour étudier les animations. Ainsi, Commençons par dessiner notre balle au sein du canevas.</p> +Nous allons utiliser une balle pour étudier les animations. Ainsi, Commençons par dessiner notre balle au sein du canevas. -<pre class="brush: html"><canvas id="canvas" width="600" height="300"></canvas> -</pre> +```html +<canvas id="canvas" width="600" height="300"></canvas> +``` -<p>Comme d'habitude, nous avons tout d'abord besoin de dessiner le contexte. Pour dessiner la balle, nous allons créer un objet <code>ball</code> contenant des propriétés et une méthode <code>draw()</code> afin de la placer sur le canevas.</p> +Comme d'habitude, nous avons tout d'abord besoin de dessiner le contexte. Pour dessiner la balle, nous allons créer un objet `ball` contenant des propriétés et une méthode `draw()` afin de la placer sur le canevas. -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var ball = { @@ -34,15 +36,17 @@ var ball = { } }; -ball.draw();</pre> +ball.draw(); +``` -<p>Il n'y a rien de spécial ici, la balle est pour le moment un simple cercle qui est dessiné à l'aide de la méthode {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.</p> +Il n'y a rien de spécial ici, la balle est pour le moment un simple cercle qui est dessiné à l'aide de la méthode {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}. -<h2 id="Ajout_de_la_vitesse">Ajout de la vitesse</h2> +## Ajout de la vitesse -<p>Maintenant que nous avons une balle, nous sommes prêts à ajouter une animation simple comme nous avons pu le voir dans le <a href="/fr/docs/Tutoriel_canvas/Animations_basiques">dernier chapitre</a> de ce tutoriel. Une fois encore, {{domxref("window.requestAnimationFrame()")}} nous aide à contrôler l'animation. Il est possible de déplacer la balle en ajoutant un vecteur de vitesse à la position. Pour chaque "frame", nous avons aussi {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} <em>(nettoyé)</em> les canvas pour supprimer les anciens cercles des "frames" précédents.</p> +Maintenant que nous avons une balle, nous sommes prêts à ajouter une animation simple comme nous avons pu le voir dans le [dernier chapitre](/fr/docs/Tutoriel_canvas/Animations_basiques) de ce tutoriel. Une fois encore, {{domxref("window.requestAnimationFrame()")}} nous aide à contrôler l'animation. Il est possible de déplacer la balle en ajoutant un vecteur de vitesse à la position. Pour chaque "frame", nous avons aussi {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} _(nettoyé)_ les canvas pour supprimer les anciens cercles des "frames" précédents. -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var raf; @@ -79,26 +83,31 @@ canvas.addEventListener("mouseout",function(e){ }); ball.draw(); -</pre> +``` -<h2 id="Limites">Limites</h2> +## Limites -<p>Si aucun test de collision n'est effectué, notre balle sort hors du canevas rapidement. Nous avons ici besoin de vérifier si les positions <code>x</code> et <code>y</code> de la balle sont hors des dimensions du canevas et si c'est le cas, d'inverser la direction des vecteurs de vitesse. Pour faire cela, nous ajoutons les vérifications suivantes à la méthode <code>draw</code> :</p> +Si aucun test de collision n'est effectué, notre balle sort hors du canevas rapidement. Nous avons ici besoin de vérifier si les positions `x` et `y` de la balle sont hors des dimensions du canevas et si c'est le cas, d'inverser la direction des vecteurs de vitesse. Pour faire cela, nous ajoutons les vérifications suivantes à la méthode `draw` : -<pre class="brush: js">if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { +```js +if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } -if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { +if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; -}</pre> +} +``` -<h3 id="Première_demo">Première demo</h3> +### Première demo -<p>Voyons voir ce que cela donne. Déplacez votre souris dans le canevas pour commencer l'animation :</p> +Voyons voir ce que cela donne. Déplacez votre souris dans le canevas pour commencer l'animation : -<pre class="brush: html hidden"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> +```html hidden +<canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var raf; @@ -124,12 +133,12 @@ function draw() { ball.x += ball.vx; ball.y += ball.vy; - if (ball.y + ball.vy > canvas.height || - ball.y + ball.vy < 0) { + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { ball.vy = -ball.vy; } - if (ball.x + ball.vx > canvas.width || - ball.x + ball.vx < 0) { + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { ball.vx = -ball.vx; } @@ -144,24 +153,30 @@ canvas.addEventListener("mouseout",function(e){ window.cancelAnimationFrame(raf); }); -ball.draw();</pre> +ball.draw(); +``` -<p>{{EmbedLiveSample("Première_demo", "610", "310")}}</p> +{{EmbedLiveSample("Première_demo", "610", "310")}} -<h2 id="Accélération">Accélération</h2> +## Accélération -<p>Afin d'obtenir un mouvement plus réel, vous pouvez jouer sur la vitesse, par exemple :</p> +Afin d'obtenir un mouvement plus réel, vous pouvez jouer sur la vitesse, par exemple : -<pre class="brush: js">ball.vy *= .99; -ball.vy += .25;</pre> +```js +ball.vy *= .99; +ball.vy += .25; +``` -<p>Ceci ralentit la vitesse verticale à chaque rendu d'image de sorte que la balle va rebondir de moins en moins haut.</p> +Ceci ralentit la vitesse verticale à chaque rendu d'image de sorte que la balle va rebondir de moins en moins haut. -<h3 id="deuxième_démo">Deuxième démo</h3> +### Deuxième démo -<pre class="brush: html hidden"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> +```html hidden +<canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var raf; @@ -189,12 +204,12 @@ function draw() { ball.vy *= .99; ball.vy += .25; - if (ball.y + ball.vy > canvas.height || - ball.y + ball.vy < 0) { + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { ball.vy = -ball.vy; } - if (ball.x + ball.vx > canvas.width || - ball.x + ball.vx < 0) { + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { ball.vx = -ball.vx; } @@ -209,22 +224,28 @@ canvas.addEventListener("mouseout",function(e){ window.cancelAnimationFrame(raf); }); -ball.draw();</pre> +ball.draw(); +``` -<p>{{EmbedLiveSample("deuxième_démo", "610", "310")}}</p> +{{EmbedLiveSample("deuxième_démo", "610", "310")}} -<h2 id="Effet_de_traînée">Effet de traînée</h2> +## Effet de traînée -<p>Jusqu'à maintenant, nous avons utilisé la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} pour effacer les images précédentes. En la remplaçant par la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} et en utilisant un remplissage semi-transparent, on obtient un effet de traînée.</p> +Jusqu'à maintenant, nous avons utilisé la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} pour effacer les images précédentes. En la remplaçant par la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} et en utilisant un remplissage semi-transparent, on obtient un effet de traînée. -<pre class="brush: js">ctx.fillStyle = 'rgba(255,255,255,0.3)'; -ctx.fillRect(0,0,canvas.width,canvas.height);</pre> +```js +ctx.fillStyle = 'rgba(255,255,255,0.3)'; +ctx.fillRect(0,0,canvas.width,canvas.height); +``` -<h3 id="troisième_demo">Troisième démo</h3> +### Troisième démo -<pre class="brush: html hidden"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> +```html hidden +<canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var raf; @@ -253,12 +274,12 @@ function draw() { ball.vy *= .99; ball.vy += .25; - if (ball.y + ball.vy > canvas.height || - ball.y + ball.vy < 0) { + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { ball.vy = -ball.vy; } - if (ball.x + ball.vx > canvas.width || - ball.x + ball.vx < 0) { + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { ball.vx = -ball.vx; } @@ -273,17 +294,21 @@ canvas.addEventListener("mouseout",function(e){ window.cancelAnimationFrame(raf); }); -ball.draw();</pre> +ball.draw(); +``` -<p>{{EmbedLiveSample("troisième_démo", "610", "310")}}</p> +{{EmbedLiveSample("troisième_démo", "610", "310")}} -<h2 id="Ajout_dun_contrôle_de_souris">Ajout d'un contrôle de souris</h2> +## Ajout d'un contrôle de souris -<p>Afin d'obtenir quelques contrôles sur la balle, nous pouvons faire suivre notre souris en utilisant l'événement <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code>, par exemple. L'événement <code><a href="/en-US/docs/Web/Events/click">click</a></code> relâche la balle et la laisse rebondir à nouveau.</p> +Afin d'obtenir quelques contrôles sur la balle, nous pouvons faire suivre notre souris en utilisant l'événement [`mousemove`](/en-US/docs/Web/Reference/Events/mousemove), par exemple. L'événement [`click`](/en-US/docs/Web/Events/click) relâche la balle et la laisse rebondir à nouveau. -<pre class="brush: html hidden"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> +```html hidden +<canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas> +``` -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var raf; var running = false; @@ -315,10 +340,10 @@ function draw() { ball.x += ball.vx; ball.y += ball.vy; - if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { + if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } - if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { + if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } @@ -347,21 +372,19 @@ canvas.addEventListener("mouseout",function(e){ }); ball.draw(); -</pre> +``` -<p>Déplacez la balle en utilisant votre souris et relâchez-la avec un click.</p> +Déplacez la balle en utilisant votre souris et relâchez-la avec un click. -<p>{{EmbedLiveSample("Ajout_d'un_contrôle_de_souris", "610", "310")}}</p> +{{EmbedLiveSample("Ajout_d'un_contrôle_de_souris", "610", "310")}} -<h2 id="Casse-briques">Casse-briques</h2> +## Casse-briques -<p>Ce petit chapitre explique seulement quelques techniques pour créer des animations avancées. Il en existe bien davantage ! Que diriez-vous d'ajouter une raquette, des briques et de transformer cette démo en une partie de casse-briques ? Consultez notre zone de développement de jeux pour plus d'articles liés <a href="/fr/docs/Jeux">aux jeux</a>.</p> +Ce petit chapitre explique seulement quelques techniques pour créer des animations avancées. Il en existe bien davantage ! Que diriez-vous d'ajouter une raquette, des briques et de transformer cette démo en une partie de casse-briques ? Consultez notre zone de développement de jeux pour plus d'articles liés [aux jeux](/fr/docs/Jeux). -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("window.requestAnimationFrame()")}}</li> - <li><a href="/fr/docs/Games/Techniques/Efficient_animation_for_web_games">Animation efficace pour les jeux vidéo</a></li> -</ul> +- {{domxref("window.requestAnimationFrame()")}} +- [Animation efficace pour les jeux vidéo](/fr/docs/Games/Techniques/Efficient_animation_for_web_games) -<p>{{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}</p> +{{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}} 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 12d7d76e45..9449c304d0 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 @@ -10,68 +10,72 @@ tags: 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 --- -<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}</div> +{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}} -<p>Dans le chapitre sur <a href="/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques">les formes géométriques</a>, nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins.</p> +Dans le chapitre sur [les formes géométriques](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques), nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins. -<h2 id="Colors">Les couleurs</h2> +## Les couleurs -<p>Jusqu'à présent, nous avons seulement vu des méthodes sur le contexte de dessin. Si nous voulons appliquer des couleurs à une forme, il y a deux propriétés importantes que nous pouvons utiliser : <code>fillStyle</code> et <code>strokeStyle</code> .</p> +Jusqu'à présent, nous avons seulement vu des méthodes sur le contexte de dessin. Si nous voulons appliquer des couleurs à une forme, il y a deux propriétés importantes que nous pouvons utiliser : `fillStyle` et `strokeStyle` . -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt> - <dd>Définit le style utilisé lors du remplissage de formes.</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt> - <dd>Définit le style pour les contours des formes.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}} + - : Définit le style utilisé lors du remplissage de formes. +- {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}} + - : Définit le style pour les contours des formes. -<p><code>color</code> est une chaîne représentant un CSS {{cssxref("<color>")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur <code>#000000</code> de CSS <code>color</code>).</p> +`color` est une chaîne représentant un CSS {{cssxref("<color>")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur `#000000` de CSS `color`). -<div class="note"> -<p><strong>Note :</strong> Lorsque vous définissez <code>strokeStyle</code> et <code>fillStyle</code>, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter <code>fillStyle</code> ou <code>strokeStyle</code>.</p> -</div> +> **Note :** Lorsque vous définissez `strokeStyle` et `fillStyle`, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter `fillStyle` ou `strokeStyle`. -<p>Les chaînes pour être valides, doivent être conforme à la spécification CSS {{cssxref("<color>")}}. Chacun des exemples suivants décrit la même couleur.</p> +Les chaînes pour être valides, doivent être conforme à la spécification CSS {{cssxref("<color>")}}. Chacun des exemples suivants décrit la même couleur. -<pre class="brush: js">// Les valeurs possibles de fillStyle pour "orange" +```js +// Les valeurs possibles de fillStyle pour "orange" ctx.fillStyle = 'orange'; ctx.fillStyle = '#FFA500'; ctx.fillStyle = 'rgb(255, 165, 0)'; -ctx.fillStyle = 'rgba(255, 165, 0, 1)';</pre> +ctx.fillStyle = 'rgba(255, 165, 0, 1)'; +``` -<h3 id="A_fillStyle_example">Un exemple <code>fillStyle</code></h3> +### Un exemple `fillStyle` -<p>Dans cet exemple, nous utilisons une nouvelle fois deux boucles <code>for</code> pour dessiner une grille de rectangles, chacun dans une couleur différente. L'image résultante devrait ressembler à la capture d'écran. Il n'y a rien de spectaculaire ici. Nous utilisons les deux variables <code>i</code> et <code>j</code> pour générer une couleur RVB unique pour chaque carré, et seulement modifier les valeurs rouges et vertes. Le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sortes de palettes. En augmentant les étapes, vous pouvez obtenir quelque chose qui ressemble à des palettes de couleurs que Photoshop utilise.</p> +Dans cet exemple, nous utilisons une nouvelle fois deux boucles `for` pour dessiner une grille de rectangles, chacun dans une couleur différente. L'image résultante devrait ressembler à la capture d'écran. Il n'y a rien de spectaculaire ici. Nous utilisons les deux variables `i` et `j` pour générer une couleur RVB unique pour chaque carré, et seulement modifier les valeurs rouges et vertes. Le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sortes de palettes. En augmentant les étapes, vous pouvez obtenir quelque chose qui ressemble à des palettes de couleurs que Photoshop utilise. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); - for (var i = 0; i < 6; i++) { - for (var j = 0; j < 6; j++) { + for (var i = 0; i < 6; i++) { + for (var j = 0; j < 6; j++) { ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ',0)'; ctx.fillRect(j * 25, i * 25, 25, 25); } } -}</pre> - -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +} +``` -<pre class="brush: js hidden">draw();</pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` +```js hidden +draw(); +``` -<p>Le résultat ressemble à ceci:</p> +Le résultat ressemble à ceci: -<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "canvas_fillstyle.png")}}</p> +{{EmbedLiveSample("A_fillStyle_example", 160, 160, "canvas_fillstyle.png")}} -<h3 id="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3> +### Un exemple `strokeStyle` -<p>Cet exemple est similaire à celui ci-dessus, mais utilise <code>strokeStyle</code> pour changer les couleurs des contours des formes. Nous utilisons la méthode <code>arc()</code> pour dessiner des cercles au lieu de carrés.</p> +Cet exemple est similaire à celui ci-dessus, mais utilise `strokeStyle` pour changer les couleurs des contours des formes. Nous utilisons la méthode `arc()` pour dessiner des cercles au lieu de carrés. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); - for (var i = 0; i < 6; i++) { - for (var j = 0; j < 6; j++) { + for (var i = 0; i < 6; i++) { + for (var j = 0; j < 6; j++) { ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' + Math.floor(255 - 42.5 * j) + ')'; ctx.beginPath(); @@ -79,44 +83,47 @@ ctx.fillStyle = 'rgba(255, 165, 0, 1)';</pre> ctx.stroke(); } } - }</pre> - - -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> + } +``` -<pre class="brush: js hidden">draw();</pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` +```js hidden +draw(); +``` -<p>Le résultat ressemble à ceci :</p> +Le résultat ressemble à ceci : -<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}</p> +{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}} -<h2 id="Transparency">Transparence</h2> +## Transparence -<p>En plus de dessiner des formes opaques sur la toile, nous pouvons également dessiner des formes semi-transparentes (ou translucides). Cela se fait soit par le réglage de <code>globalAlpha</code> ou en attribuant une couleur semi-transparente à <code>strokeStyle</code> et/ou <code>fillStyle</code>.</p> +En plus de dessiner des formes opaques sur la toile, nous pouvons également dessiner des formes semi-transparentes (ou translucides). Cela se fait soit par le réglage de `globalAlpha` ou en attribuant une couleur semi-transparente à `strokeStyle` et/ou `fillStyle`. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt> - <dd>Applique la valeur de transparence spécifiée à toutes les formes futures tracées sur le Canvas. La valeur doit être comprise entre 0.0 (complètement transparent) à 1.0 (complètement opaque). Cette valeur est de 1,0 (complètement opaque) par défaut.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}} + - : Applique la valeur de transparence spécifiée à toutes les formes futures tracées sur le Canvas. La valeur doit être comprise entre 0.0 (complètement transparent) à 1.0 (complètement opaque). Cette valeur est de 1,0 (complètement opaque) par défaut. -<p>La propriété<code> globalAlpha</code> peut être utile si vous voulez dessiner un grand nombre de formes sur la toile avec la même transparence, mais sinon, il est généralement plus utile de définir la transparence sur les formes individuelles lors de la définition de leurs couleurs.</p> +La propriété` globalAlpha` peut être utile si vous voulez dessiner un grand nombre de formes sur la toile avec la même transparence, mais sinon, il est généralement plus utile de définir la transparence sur les formes individuelles lors de la définition de leurs couleurs. -<p>Parce que <code>strokeStyle</code> et <code>fillStyle</code> acceptent les valeurs de couleur rvba CSS, nous pouvons utiliser la notation suivante pour attribuer une couleur transparente.</p> +Parce que `strokeStyle` et `fillStyle` acceptent les valeurs de couleur rvba CSS, nous pouvons utiliser la notation suivante pour attribuer une couleur transparente. -<pre class="brush: js">//Affecter des couleurs transparentes pour dessiner et remplir le style +```js +//Affecter des couleurs transparentes pour dessiner et remplir le style ctx.strokeStyle = "rgba(255, 0, 0, .5)"; ctx.fillStyle = "rgba(255, 0, 0, .5)"; -</pre> +``` -<p>La fonction <code>rgba()</code> <em>(rvba)</em> est similaire à la fonction <code>rgb()</code> <em>(rvb)</em> mais il a un paramètre supplémentaire. Le dernier paramètre définit la valeur de la transparence de cette couleur particulière. La plage valide est entre 0,0 (totalement transparent) et 1,0 (totalement opaque).</p> +La fonction `rgba()` _(rvba)_ est similaire à la fonction `rgb()` _(rvb)_ mais il a un paramètre supplémentaire. Le dernier paramètre définit la valeur de la transparence de cette couleur particulière. La plage valide est entre 0,0 (totalement transparent) et 1,0 (totalement opaque). -<h3 id="A_globalAlpha_example">Un exemple <code>globalAlpha</code></h3> +### Un exemple `globalAlpha` -<p>Dans cet exemple, nous allons dessiner un fond de quatre carrés de couleurs différentes. En plus de ceux-ci, nous allons dessiner un ensemble de cercles semi-transparents. <code>globalAlpha</code> est réglé à <code>0.2</code> et sera utilisé pour toutes les formes. Chaque étape de boucle <code>for</code> dessine un ensemble de cercles avec un rayon croissant. Le résultat final est un gradient radial. En superposant toujours plus de cercles, les uns au-dessus des autres, nous réduisons efficacement la transparence des cercles qui ont déjà été établis. En augmentant le pas et le nombre de cercles, l'arrière-plan devrait complètement disparaître du centre de l'image.</p> +Dans cet exemple, nous allons dessiner un fond de quatre carrés de couleurs différentes. En plus de ceux-ci, nous allons dessiner un ensemble de cercles semi-transparents. `globalAlpha` est réglé à `0.2` et sera utilisé pour toutes les formes. Chaque étape de boucle `for` dessine un ensemble de cercles avec un rayon croissant. Le résultat final est un gradient radial. En superposant toujours plus de cercles, les uns au-dessus des autres, nous réduisons efficacement la transparence des cercles qui ont déjà été établis. En augmentant le pas et le nombre de cercles, l'arrière-plan devrait complètement disparaître du centre de l'image. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // draw background ctx.fillStyle = '#FD0'; @@ -133,25 +140,30 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)"; ctx.globalAlpha = 0.2; // Dessine des cercles semi-transparents - for (i = 0; i < 7; i++) { + for (i = 0; i < 7; i++) { ctx.beginPath(); ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true); ctx.fill(); } -}</pre> - +} +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> +```js hidden +draw(); +``` -<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}</p> +{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}} -<h3 id="An_example_using_rgba">Un exemple en utilisant <code>rgba()</code></h3> +### Un exemple en utilisant `rgba()` -<p>Dans ce deuxième exemple, nous faisons quelque chose de similaire, mais au lieu de dessiner des cercles, nous dessinons de petits rectangles à l'opacité croissante. L'utilisation de <code>rgba()</code> nous donne un peu plus de contrôle et de flexibilité.</p> +Dans ce deuxième exemple, nous faisons quelque chose de similaire, mais au lieu de dessiner des cercles, nous dessinons de petits rectangles à l'opacité croissante. L'utilisation de `rgba()` nous donne un peu plus de contrôle et de flexibilité. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Dessine le fond @@ -165,104 +177,110 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)"; ctx.fillRect(0, 112.5, 150, 37.5); // Dessine des rectangles semi-transparents - for (var i = 0; i < 10; i++) { + for (var i = 0; i < 10; i++) { ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')'; - for (var j = 0; j < 4; j++) { + for (var j = 0; j < 4; j++) { ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5); } } -}</pre> +} +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> +```js hidden +draw(); +``` -<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}}</p> +{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}} -<h2 id="Line_styles">Le style des lignes</h2> +## Le style des lignes -<p>Il y a plusieurs propriétés qui nous permettent de modifier le style des lignes.</p> +Il y a plusieurs propriétés qui nous permettent de modifier le style des lignes. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt> - <dd>Définit la largeur des lignes qui serons tracées.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt> - <dd>Définit l'apparence des extrémités des lignes.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt> - <dd>Définit l'apparence des «coins» où les lignes se rencontrent.</dd> - <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt> - <dd>Établit une limite lorsque deux lignes se rejoignent en un angle aigu, pour permettre de contrôler l'épaisseur de la jonction.</dd> - <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt> - <dd>Retourne le tableau du modele courant de ligne contenant un nombre pair de nombres positifs.</dd> - <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt> - <dd>Définit le modele de ligne.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt> - <dd>Indique où commencer un modele sur une ligne.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}} + - : Définit la largeur des lignes qui serons tracées. +- {{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}} + - : Définit l'apparence des extrémités des lignes. +- {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}} + - : Définit l'apparence des «coins» où les lignes se rencontrent. +- {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}} + - : Établit une limite lorsque deux lignes se rejoignent en un angle aigu, pour permettre de contrôler l'épaisseur de la jonction. +- {{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}} + - : Retourne le tableau du modele courant de ligne contenant un nombre pair de nombres positifs. +- {{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}} + - : Définit le modele de ligne. +- {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}} + - : Indique où commencer un modele sur une ligne. -<p>Vous aurez une meilleure compréhension de ce qu'ils font en regardant les exemples ci-dessous.</p> +Vous aurez une meilleure compréhension de ce qu'ils font en regardant les exemples ci-dessous. -<h3 id="A_lineWidth_example">Un exemple <code>lineWidth</code></h3> +### Un exemple `lineWidth` -<p>Cette propriété définit l'épaisseur de la ligne actuelle. Les valeurs doivent être des nombres positifs. Par défaut, cette valeur est définie à 1,0.</p> +Cette propriété définit l'épaisseur de la ligne actuelle. Les valeurs doivent être des nombres positifs. Par défaut, cette valeur est définie à 1,0. -<p>La largeur de ligne est l'épaisseur centrée sur le tracé. En d'autres termes, la zone qui est dessinée s'étend de part et d'autre du tracé. Parce que les coordonnées ne font pas référence directement aux pixels, une attention particulière doit être prise pour obtenir des lignes horizontales et verticales nettes.</p> +La largeur de ligne est l'épaisseur centrée sur le tracé. En d'autres termes, la zone qui est dessinée s'étend de part et d'autre du tracé. Parce que les coordonnées ne font pas référence directement aux pixels, une attention particulière doit être prise pour obtenir des lignes horizontales et verticales nettes. -<p>Dans l'exemple ci-dessous, 10 lignes droites sont dessinées avec des largeurs croissantes. La ligne à l'extrême gauche a 1,0 unités de large. Cependant, celle ci et toutes les lignes d'épaisseur impair ne semblent pas nettes, en raison du positionnement du tracé.</p> +Dans l'exemple ci-dessous, 10 lignes droites sont dessinées avec des largeurs croissantes. La ligne à l'extrême gauche a 1,0 unités de large. Cependant, celle ci et toutes les lignes d'épaisseur impair ne semblent pas nettes, en raison du positionnement du tracé. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); - for (var i = 0; i < 10; i++) { + for (var i = 0; i < 10; i++) { ctx.lineWidth = 1 + i; ctx.beginPath(); ctx.moveTo(5 + i * 14, 5); ctx.lineTo(5 + i * 14, 140); ctx.stroke(); } -}</pre> - -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +} +``` -<pre class="brush: js hidden">draw();</pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "canvas_linewidth.png")}}</p> +```js hidden +draw(); +``` -<p>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.</p> +{{EmbedLiveSample("A_lineWidth_example", "180", "180", "canvas_linewidth.png")}} -<p><img alt="" src="canvas-grid.png"></p> +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. -<p>Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de <code>1.0</code>, vous vous retrouvez dans la situation de la deuxième grille. La surface réelle à remplir (bleu foncé) se prolonge seulement à moitié sur les pixels de part et d'autre du chemin. Une approximation de ceci doit être rendue, ce qui signifie que ces pixels sont partiellement ombrés, et le résultat est que toute la zone (le bleu clair et bleu foncé) est remplie avec une couleur moitié moins sombre que la couleur du tracé attendu. C'est ce qui arrive avec la largeur de <code>1.0</code> dans l'exemple précédent.</p> + -<p>Pour résoudre ce problème, vous devez être très précis dans la création de votre tracé. Sachant qu'une largeur de <code>1.0</code> s'étendra d'une demi-unité de chaque côté du tracé, créer le tracé de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de <code>1.0</code> et au remplissage d'un seul pixel de ligne verticale.</p> +Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de `1.0`, vous vous retrouvez dans la situation de la deuxième grille. La surface réelle à remplir (bleu foncé) se prolonge seulement à moitié sur les pixels de part et d'autre du chemin. Une approximation de ceci doit être rendue, ce qui signifie que ces pixels sont partiellement ombrés, et le résultat est que toute la zone (le bleu clair et bleu foncé) est remplie avec une couleur moitié moins sombre que la couleur du tracé attendu. C'est ce qui arrive avec la largeur de `1.0` dans l'exemple précédent. -<div class="note"> -<p><strong>Note:</strong> Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style <code>lineCap</code>, dont la valeur par défaut est <code>butt</code>. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style <code>lineCap</code> à <code>square</code>, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier).</p> +Pour résoudre ce problème, vous devez être très précis dans la création de votre tracé. Sachant qu'une largeur de `1.0` s'étendra d'une demi-unité de chaque côté du tracé, créer le tracé de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de `1.0` et au remplissage d'un seul pixel de ligne verticale. -<p>Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec <code>closePath ()</code>, il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style <code>lineJoin</code>, dont la valeur par défaut est <code>miter</code>, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires.</p> -</div> +> **Note :** Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style `lineCap`, dont la valeur par défaut est `butt`. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style `lineCap` à `square`, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier). +> +> Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec `closePath ()`, il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style `lineJoin`, dont la valeur par défaut est `miter`, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires. -<p>Pour les lignes de largeur paire, chaque moitié finit par être un nombre entier de pixels, vous voulez donc un chemin entre les pixels (c'est-à-dire (3,1) à (3,5)), au lieu de descendre au milieu des pixels .</p> +Pour les lignes de largeur paire, chaque moitié finit par être un nombre entier de pixels, vous voulez donc un chemin entre les pixels (c'est-à-dire (3,1) à (3,5)), au lieu de descendre au milieu des pixels . -<p>Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2.</p> +Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2. -<h3 id="A_lineCap_example">Un exemple de <code>lineCap</code></h3> +### Un exemple de `lineCap` -<p>La propriété <code>lineCap</code> détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : <code>butt</code>, <code>round</code> et <code>square</code>. Par défaut, la propriété est définie à <code>butt</code>.</p> +La propriété `lineCap` détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : `butt`, `round` et `square`. Par défaut, la propriété est définie à `butt`. -<dl> - <dt><code>butt </code><em>(bout)</em></dt> - <dd>L'extrémité des lignes est en angle droit.</dd> - <dt><code>round </code><em>(rond)</em></dt> - <dd>Les extrémités sont arrondies.</dd> - <dt><code>square </code><em>(carré)</em></dt> - <dd>Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne.</dd> -</dl> +- `butt `_(bout)_ + - : L'extrémité des lignes est en angle droit. +- `round `_(rond)_ + - : Les extrémités sont arrondies. +- `square `_(carré)_ + - : Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne. -<p>Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété <code>lineCap</code>. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus.</p> +Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété `lineCap`. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus. -<p>La ligne de gauche utilise l'option par défaut <code>butt</code>. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option <code>round</code>. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option <code>square</code>. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne.</p> +La ligne de gauche utilise l'option par défaut `butt`. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option `round`. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var lineCap = ['butt', 'round', 'square']; @@ -277,7 +295,7 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)"; // Dessiner des lignes ctx.strokeStyle = 'black'; - for (var i = 0; i < lineCap.length; i++) { + for (var i = 0; i < lineCap.length; i++) { ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; ctx.beginPath(); @@ -285,36 +303,40 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)"; ctx.lineTo(25 + i * 50, 140); ctx.stroke(); } -}</pre> +} +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> +```js hidden +draw(); +``` -<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}}</p> +{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}} -<h3 id="A_lineJoin_example">Un exemple de <code>lineJoin</code></h3> +### Un exemple de `lineJoin` -<p>La propriété <code>lineJoin</code> détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés).</p> +La propriété `lineJoin` détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés). -<p>Il existe trois valeurs possibles pour cette propriété : <code>round</code>, <code>bevel</code> et <code>miter</code>. Par défaut, cette propriété est définie à <code>miter</code>. Notez que le paramètre <code>lineJoin</code> n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas.</p> +Il existe trois valeurs possibles pour cette propriété : `round`, `bevel` et `miter`. Par défaut, cette propriété est définie à `miter`. Notez que le paramètre `lineJoin` n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas. -<dl> - <dt><code>round </code><em>(rond)</em></dt> - <dd>Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait.</dd> - <dt><code>bevel </code><em>(biseau)</em></dt> - <dd>Ajoute un triangle à l'extrémité commune des segments connectés.</dd> - <dt><code>miter </code><em>(onglet)</em></dt> - <dd>Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous.</dd> -</dl> +- `round `_(rond)_ + - : Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait. +- `bevel `_(biseau)_ + - : Ajoute un triangle à l'extrémité commune des segments connectés. +- `miter `_(onglet)_ + - : Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous. -<p>L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété<code> lineJoin</code> ; la sortie est montrée ci-dessus.</p> +L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété` lineJoin` ; la sortie est montrée ci-dessus. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var lineJoin = ['round', 'bevel', 'miter']; ctx.lineWidth = 10; - for (var i = 0; i < lineJoin.length; i++) { + for (var i = 0; i < lineJoin.length; i++) { ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(-5, 5 + i * 40); @@ -324,36 +346,39 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)"; ctx.lineTo(155, 5 + i * 40); ctx.stroke(); } -}</pre> +} +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> -</div> +```js hidden +draw(); +``` -<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "canvas_linejoin.png")}}</p> +{{EmbedLiveSample("A_lineJoin_example", "180", "180", "canvas_linejoin.png")}} -<h3 id="A_demo_of_the_miterLimit_property">Une démonstration de la propriété <code>miterLimit</code></h3> +### Une démonstration de la propriété `miterLimit` -<p>Comme vous l'avez vu dans l'exemple précédent, lorsque vous joignez deux lignes avec l'option d'onglet, les bords extérieurs des deux lignes d'assemblage sont étendus jusqu'au point où ils se rencontrent. Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne. Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement.</p> +Comme vous l'avez vu dans l'exemple précédent, lorsque vous joignez deux lignes avec l'option d'onglet, les bords extérieurs des deux lignes d'assemblage sont étendus jusqu'au point où ils se rencontrent. Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne. Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement. -<p>La propriété <code>miterLimit</code> détermine dans quelle mesure le point de connexion externe peut être placé à partir du point de connexion interne. Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place. Notez que la longueur ajoutée maximale est le produit de la largeur de ligne mesurée dans le système de coordonnées actuel, par la valeur de cette propriété <code>miterLimit</code> (dont la valeur par défaut est 10.0 dans le HTML {{HTMLElement("canvas")}}). <code> </code><code>miterLimit</code> peut être défini indépendamment de l'échelle d'affichage actuelle ou de toutes les transformations affinées de chemins : il n'influence que la forme des bords de lignes effectivement rendues.</p> +La propriété `miterLimit` détermine dans quelle mesure le point de connexion externe peut être placé à partir du point de connexion interne. Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place. Notez que la longueur ajoutée maximale est le produit de la largeur de ligne mesurée dans le système de coordonnées actuel, par la valeur de cette propriété `miterLimit` (dont la valeur par défaut est 10.0 dans le HTML {{HTMLElement("canvas")}}). ```miterLimit` peut être défini indépendamment de l'échelle d'affichage actuelle ou de toutes les transformations affinées de chemins : il n'influence que la forme des bords de lignes effectivement rendues. -<p>Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié de la largeur de la ligne. Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne. Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau :</p> +Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié de la largeur de la ligne. Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne. Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau : -<ul> - <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li> - <li>La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.</li> - <li>Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits.</li> - <li>Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.</li> - <li>Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.</li> -</ul> +- `miterLimit` = **max** `miterLength` / `lineWidth` = 1 / **sin** ( **min** _θ_ / 2 ) +- La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés. +- Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits. +- Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets. +- Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet. -<p>Voici une petite démo dans laquelle vous pouvez définir dynamiquement <code>miterLimit</code> et voir comment cela affecte les formes sur le canevas. Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag.</p> +Voici une petite démo dans laquelle vous pouvez définir dynamiquement `miterLimit` et voir comment cela affecte les formes sur le canevas. Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag. -<p>Si vous spécifiez une valeur <code>miterLimit</code> inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ; avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ; avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante).</p> +Si vous spécifiez une valeur `miterLimit` inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ; avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ; avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante). -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Éffacer canvas @@ -378,41 +403,49 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)"; // Dessiner des lignes ctx.beginPath(); ctx.moveTo(0, 100); - for (i = 0; i < 24 ; i++) { + for (i = 0; i < 24 ; i++) { var dy = i % 2 == 0 ? 25 : -25; ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy); } ctx.stroke(); return false; -}</pre> - -<pre class="brush: html hidden"><table> - <tr> - <td><canvas id="canvas" width="150" height="150"></canvas></td> - <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br> - <form onsubmit="return draw();"> - <label>Miter limit</label> - <input type="text" size="3" id="miterLimit"/> - <input type="submit" value="Redraw"/> - </form> - </td> - </tr> -</table></pre> - -<pre class="brush: js hidden">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; -draw();</pre> - -<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "canvas_miterlimit.png")}}</p> - -<h3 id="Using_line_dashes">Utilisation de lignes pointillées</h3> - -<p><code>setLineDash</code> et <code>lineDashOffset</code> précisent le modèle de lignes. <code>setLineDash</code> accepte une liste de nombres qui spécifie les distances pour dessiner alternativement une ligne et un espace et <code>lineDashOffset</code> définit un décalage pour commencer le motif.</p> - -<p>Dans cet exemple, nous créons un effet de fourmis en marche. C'est une technique d'animation souvent employée dans les sélections d'outils des programmes graphiques. Cet effet permet à l'utilisateur de distinguer la frontière de l'image de fond de la sélection en animant la frontière. Dans une partie de ce tutoriel, vous pouvez apprendre comment faire cela et d'autres animations de base <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animation basiques.</a><a href="/fr/docs/Tutoriel_canvas/Animations_basiques">.</a></p> - -<pre class="brush: html hidden"><canvas id="canvas" width="110" height="110"></canvas></pre> - -<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); +} +``` + +```html hidden +<table> + <tr> + <td><canvas id="canvas" width="150" height="150"></canvas></td> + <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br> + <form onsubmit="return draw();"> + <label>Miter limit</label> + <input type="text" size="3" id="miterLimit"/> + <input type="submit" value="Redraw"/> + </form> + </td> + </tr> +</table> +``` + +```js hidden +document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; +draw(); +``` + +{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "canvas_miterlimit.png")}} + +### Utilisation de lignes pointillées + +`setLineDash` et `lineDashOffset` précisent le modèle de lignes. `setLineDash` accepte une liste de nombres qui spécifie les distances pour dessiner alternativement une ligne et un espace et `lineDashOffset` définit un décalage pour commencer le motif. + +Dans cet exemple, nous créons un effet de fourmis en marche. C'est une technique d'animation souvent employée dans les sélections d'outils des programmes graphiques. Cet effet permet à l'utilisateur de distinguer la frontière de l'image de fond de la sélection en animant la frontière. Dans une partie de ce tutoriel, vous pouvez apprendre comment faire cela et d'autres animations de base [animation basiques.](/fr/docs/Web/API/Canvas_API/Tutorial/Basic_animations)[.](/fr/docs/Tutoriel_canvas/Animations_basiques) + +```html hidden +<canvas id="canvas" width="110" height="110"></canvas> +``` + +```js +var ctx = document.getElementById('canvas').getContext('2d'); var offset = 0; function draw() { @@ -424,51 +457,53 @@ function draw() { function march() { offset++; - if (offset > 16) { + if (offset > 16) { offset = 0; } draw(); setTimeout(march, 20); } -march();</pre> +march(); +``` -<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}}</p> +{{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}} -<h2 id="Gradients">Dégradés</h2> +## Dégradés -<p>Comme n'importe quel programme de dessin normal, nous pouvons remplir et découper des formes à l'aide de dégradés linéaires et radiaux. Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes. Nous pouvons ensuite affecter cet objet aux propriétés <code>fillStyle</code> ou <code>strokeStyle</code>.</p> +Comme n'importe quel programme de dessin normal, nous pouvons remplir et découper des formes à l'aide de dégradés linéaires et radiaux. Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes. Nous pouvons ensuite affecter cet objet aux propriétés `fillStyle` ou `strokeStyle`. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt> - <dd>Crée un objet dégradé linéaire avec un point de départ (<code>x1</code>, <code>y1</code>) et un point final (<code>x2</code>, <code>y2</code>).</dd> - <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt> - <dd>Crée un dégradé radial. Les paramètres représentent deux cercles, l'un avec son centre à (<code>x1</code>, <code>y1</code>) et un rayon <code>r1</code>, l'autre avec son centre à (<code>x2</code>, <code>y2</code>) avec un rayon <code>r2</code>.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}} + - : Crée un objet dégradé linéaire avec un point de départ (`x1`, `y1`) et un point final (`x2`, `y2`). +- {{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}} + - : Crée un dégradé radial. Les paramètres représentent deux cercles, l'un avec son centre à (`x1`, `y1`) et un rayon `r1`, l'autre avec son centre à (`x2`, `y2`) avec un rayon `r2`. -<p>Par exemple:</p> +Par exemple: -<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); -var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);</pre> +```js +var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); +``` -<p>Une fois que nous avons créé un objet <code>CanvasGradient</code>, nous pouvons lui assigner des couleurs en utilisant la méthode <code>addColorStop ()</code>.</p> +Une fois que nous avons créé un objet `CanvasGradient`, nous pouvons lui assigner des couleurs en utilisant la méthode `addColorStop ()`. -<dl> - <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt> - <dd>Crée un nouvel arrêt de couleur sur l'objet <code>gradient</code> <em>(dégradé)</em>. La position est un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé ; et l'argument <code>color</code> doit être une chaîne représentant une CSS {{cssxref ("<color>")}}, indiquant la couleur que le dégradé devrait atteindre.</dd> -</dl> +- {{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}} + - : Crée un nouvel arrêt de couleur sur l'objet `gradient` _(dégradé)_. La position est un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé ; et l'argument `color` doit être une chaîne représentant une CSS {{cssxref ("<color>")}}, indiquant la couleur que le dégradé devrait atteindre. -<p>Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez. Ci-dessous figure un dégradé linéaire très simple du blanc au noir.</p> +Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez. Ci-dessous figure un dégradé linéaire très simple du blanc au noir. -<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +```js +var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); lineargradient.addColorStop(0, 'white'); -lineargradient.addColorStop(1, 'black');</pre> +lineargradient.addColorStop(1, 'black'); +``` -<h3 id="A_createLinearGradient_example">Un exemple de <code>createLinearGradient</code></h3> +### Un exemple de `createLinearGradient` -<p>Dans cet exemple, nous allons créer deux dégradés différents. Comme vous pouvez le voir ici, les propriétés <code>strokeStyle</code> et <code>fillStyle</code> peuvent accepter un objet <code>canvasGradient</code> comme entrée valide.</p> +Dans cet exemple, nous allons créer deux dégradés différents. Comme vous pouvez le voir ici, les propriétés `strokeStyle` et `fillStyle` peuvent accepter un objet `canvasGradient` comme entrée valide. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Créer un dégradé @@ -490,24 +525,29 @@ lineargradient.addColorStop(1, 'black');</pre> ctx.fillRect(10, 10, 130, 130); ctx.strokeRect(50, 50, 50, 50); -}</pre> +} +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> -</div> +```js hidden +draw(); +``` -<p>Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position. Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert. Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative. Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème.</p> +Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position. Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert. Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative. Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème. -<p>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.</p> +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. -<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}}</p> +{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}} -<h3 id="A_createRadialGradient_example">Un exemple de <code>createRadialGradient</code></h3> +### Un exemple de `createRadialGradient` -<p>Dans cet exemple, nous définirons quatre dégradés radiaux différents. Parce que nous avons le contrôle sur les points de départ et de fermeture du dégradé, nous pouvons obtenir des effets plus complexes que nous aurions normalement dans les dégradés radiaux "classiques" (c'est-à-dire un dégradé avec un seul point central où le dégradé se développe vers l'extérieur dans une forme circulaire).</p> +Dans cet exemple, nous définirons quatre dégradés radiaux différents. Parce que nous avons le contrôle sur les points de départ et de fermeture du dégradé, nous pouvons obtenir des effets plus complexes que nous aurions normalement dans les dégradés radiaux "classiques" (c'est-à-dire un dégradé avec un seul point central où le dégradé se développe vers l'extérieur dans une forme circulaire). -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Créer un dégradé @@ -540,55 +580,57 @@ lineargradient.addColorStop(1, 'black');</pre> ctx.fillRect(0, 0, 150, 150); ctx.fillStyle = radgrad; ctx.fillRect(0, 0, 150, 150); -}</pre> +} +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> +```js hidden +draw(); +``` -<p>Dans ce cas, nous avons légèrement décalé le point de départ du point final pour obtenir un effet 3D sphérique. Il est préférable d'éviter de laisser les cercles intérieurs et extérieurs se chevaucher car cela entraîne des effets étranges, difficiles à prédire.</p> +Dans ce cas, nous avons légèrement décalé le point de départ du point final pour obtenir un effet 3D sphérique. Il est préférable d'éviter de laisser les cercles intérieurs et extérieurs se chevaucher car cela entraîne des effets étranges, difficiles à prédire. -<p>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é <code># 019F62 = rgba (1,159,98,1)</code>.</p> +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)`. -<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}}</p> +{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}} -<h2 id="Patterns">Modèles</h2> +## Modèles -<p>Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode <code>createPattern ()</code>.</p> +Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode `createPattern ()`. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt> - <dd>Crée et renvoie un nouvel objet de canvas. <code>image</code> est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, <code>type</code> est une chaîne indiquant comment utiliser l'image.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}} + - : Crée et renvoie un nouvel objet de canvas. `image` est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, `type` est une chaîne indiquant comment utiliser l'image. -<p>Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes :</p> +Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes : -<dl> - <dt><code>repeat</code></dt> - <dd>Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal.</dd> - <dt><code>repeat-x</code></dt> - <dd>Tapisse la zone en répètant l'image horizontalement mais pas verticalement.</dd> - <dt><code>repeat-y</code></dt> - <dd>Tapisse la zone en répètant l'image verticalement mais pas horizontalement.</dd> - <dt><code>no-repeat</code></dt> - <dd>Ne tapisse pas la zone avec l'image, elle est utilisée une seule fois.</dd> -</dl> +- `repeat` + - : Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal. +- `repeat-x` + - : Tapisse la zone en répètant l'image horizontalement mais pas verticalement. +- `repeat-y` + - : Tapisse la zone en répètant l'image verticalement mais pas horizontalement. +- `no-repeat` + - : Ne tapisse pas la zone avec l'image, elle est utilisée une seule fois. -<p>Nous utilisons cette méthode pour créer un objet {{domxref ("CanvasPattern")}} qui est très similaire aux méthodes de dégradé que nous avons vu ci-dessus. Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle. Par exemple :</p> +Nous utilisons cette méthode pour créer un objet {{domxref ("CanvasPattern")}} qui est très similaire aux méthodes de dégradé que nous avons vu ci-dessus. Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle. Par exemple : -<pre class="brush: js">var img = new Image(); +```js +var img = new Image(); img.src = 'someimage.png'; -var ptrn = ctx.createPattern(img, 'repeat');</pre> +var ptrn = ctx.createPattern(img, 'repeat'); +``` -<div class="note"> -<p><strong>Note:</strong> Comme avec la méthode <code>drawImage ()</code>, vous devez vous assurer que l'image que vous utilisez est chargée avant d'appeler cette méthode, ou le motif pourrait être mal dessiné.</p> -</div> +> **Note :** Comme avec la méthode `drawImage ()`, vous devez vous assurer que l'image que vous utilisez est chargée avant d'appeler cette méthode, ou le motif pourrait être mal dessiné. -<h3 id="A_createPattern_example">Un exemple de <code>createPattern</code></h3> +### Un exemple de `createPattern` -<p>Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété <code>fillStyle</code>. La seule chose à noter, est l'utilisation du gestionnaire <code>onload</code> de l'image. Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif.</p> +Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété `fillStyle`. La seule chose à noter, est l'utilisation du gestionnaire `onload` de l'image. Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // créer un nouvel objet image à utiliser comme modèle @@ -602,46 +644,48 @@ var ptrn = ctx.createPattern(img, 'repeat');</pre> ctx.fillRect(0, 0, 150, 150); } -}</pre> +} +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> +```js hidden +draw(); +``` -<p>Le résultat ressemble à ceci :</p> +Le résultat ressemble à ceci : -<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}}</p> +{{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}} -<h2 id="Ombres">Ombres</h2> +## Ombres -<p>L'utilisation des ombres ne comporte que quatre propriétés :</p> +L'utilisation des ombres ne comporte que quatre propriétés : -<dl> - <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt> - <dd>Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.</dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt> - <dd>Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.</dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt> - <dd>Indique la taille de l'effet de floutage ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.</dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt> - <dd>Une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement noir transparent.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}} + - : Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0. +- {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}} + - : Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0. +- {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}} + - : Indique la taille de l'effet de floutage ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0. +- {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}} + - : Une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement noir transparent. -<p>Les propriétés <code>shadowOffsetX</code> et <code>shadowOffsetY</code> indiquent sur quelle distance l'ombre doit s'étendre à partir de l'objet dans les directions X et Y; ces valeurs ne sont pas affectées par la matrice de transformation actuelle. Utilisez des valeurs négatives pour faire en sorte que l'ombre s'étende vers le haut ou vers la gauche et des valeurs positives pour que l'ombre s'étende vers le bas ou vers la droite. La valeur par défaut est 0 pour les 2 propriétés.</p> +Les propriétés `shadowOffsetX` et `shadowOffsetY` indiquent sur quelle distance l'ombre doit s'étendre à partir de l'objet dans les directions X et Y; ces valeurs ne sont pas affectées par la matrice de transformation actuelle. Utilisez des valeurs négatives pour faire en sorte que l'ombre s'étende vers le haut ou vers la gauche et des valeurs positives pour que l'ombre s'étende vers le bas ou vers la droite. La valeur par défaut est 0 pour les 2 propriétés. -<p>La propriété <code>shadowBlur</code> indique la taille de l'effet de flou ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.</p> +La propriété `shadowBlur` indique la taille de l'effet de flou ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0. -<p>La propriété <code>shadowColor</code> est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement en noir transparent.</p> +La propriété `shadowColor` est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement en noir transparent. -<div class="note"> -<p><strong>Note :</strong> Les ombres ne sont dessinées que pour les <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Compositing">opérations de composition</a> <code>source-over</code>.</p> -</div> +> **Note :** Les ombres ne sont dessinées que pour les [opérations de composition](/fr/docs/Web/API/Canvas_API/Tutorial/Compositing) `source-over`. -<h3 id="A_shadowed_text_example">Un exemple de texte ombré</h3> +### Un exemple de texte ombré -<p>Cet exemple dessine une chaîne de texte avec un effet d'ombrage.</p> +Cet exemple dessine une chaîne de texte avec un effet d'ombrage. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.shadowOffsetX = 2; @@ -652,42 +696,50 @@ var ptrn = ctx.createPattern(img, 'repeat');</pre> ctx.font = '20px Times New Roman'; ctx.fillStyle = 'Black'; ctx.fillText('Sample String', 5, 30); -}</pre> +} +``` + +```html hidden +<canvas id="canvas" width="150" height="80"></canvas> +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="80"></canvas></pre> +```js hidden +draw(); +``` -<pre class="brush: js hidden">draw();</pre> +{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "shadowed-string.png")}} -<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "shadowed-string.png")}}</p> +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). -<p>Nous allons regarder la propriété de la <code>font</code> <em>(police de caratères)</em> et la méthode <code>fillText</code> dans le chapitre suivant sur le <a href="/fr/docs/Dessin_de_texte_avec_canvas">dessin de texte</a>.</p> +## Règles de remplissage Canvas -<h2 id="Canvas_fill_rules">Règles de remplissage Canvas</h2> +Lors de l'utilisation de `fill` (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise un autre ou est imbriqué. -<p>Lors de l'utilisation de <code>fill</code> (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise un autre ou est imbriqué.<br> - <br> - Deux valeurs sont possibles :</p> +Deux valeurs sont possibles : -<ul> - <li><code><strong>"nonzero</strong></code>": la <a href="http://en.wikipedia.org/wiki/Nonzero-rule">règle non-zero</a>, qui est la règle par défaut.</li> - <li><code><strong>"evenodd"</strong></code>: La <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">règle even-odd</a>.</li> -</ul> +- **`"nonzero`**": la [règle non-zero](http://en.wikipedia.org/wiki/Nonzero-rule), qui est la règle par défaut. +- **`"evenodd"`**: La [règle even-odd](http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule). -<p>Dans cet exemple, nous utilisons la règle <code>evenodd</code> .</p> +Dans cet exemple, nous utilisons la règle `evenodd` . -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.beginPath(); ctx.arc(50, 50, 30, 0, Math.PI * 2, true); ctx.arc(50, 50, 15, 0, Math.PI * 2, true); ctx.fill('evenodd'); -}</pre> +} +``` -<pre class="brush: html hidden"><canvas id="canvas" width="100" height="100"></canvas></pre> +```html hidden +<canvas id="canvas" width="100" height="100"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> -</div> +```js hidden +draw(); +``` -<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "fill-rule.png")}}</p> +{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "fill-rule.png")}} -<p>{{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}</p> +{{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}} diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md index e37d15eba9..fecfd63ca6 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md @@ -11,61 +11,56 @@ tags: translation_of: Web/API/Canvas_API/Tutorial/Basic_animations original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques --- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}</div> +{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}} -<p>Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques.</p> +Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques. -<p>La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage.</p> +La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage. -<h2 id="Basic_animation_steps">Les étapes d'une animation basique</h2> +## Les étapes d'une animation basique -<p>Voici les étapes à suivre à chaque image dessinée (frame) :</p> +Voici les étapes à suivre à chaque image dessinée (frame) : -<ol> - <li><strong>Effacer le canevas</strong><br> - À moins que les formes que vous voulez dessiner remplissent complètement le canevas (par exemple une image en arrière-plan), vous devrez effacer toutes les formes qui ont été dessinées précédemment. La manière la plus simple de le faire est d'utiliser la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.</li> - <li><strong>Enregistrer l'état du canevas</strong><br> - Si vous changez des configurations qui affectent l'état du canevas (comme le style, les transformations, etc.), et vous voulez vous assurer que c'est l'état original qui est utilisé chaque fois que le canevas est redessiné, alors vous devez enregistrer l'état original.</li> - <li><strong>Dessiner les formes animées</strong><br> - Vous effectuez toutes les opérations pour afficher l'image.</li> - <li><strong>Restaurer l'état du canevas</strong><br> - Si l'état du canevas a été sauvegardé, vous restaurez cet état avant le prochain rendu.</li> -</ol> +1. **Effacer le canevas** + À moins que les formes que vous voulez dessiner remplissent complètement le canevas (par exemple une image en arrière-plan), vous devrez effacer toutes les formes qui ont été dessinées précédemment. La manière la plus simple de le faire est d'utiliser la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}. +2. **Enregistrer l'état du canevas** + Si vous changez des configurations qui affectent l'état du canevas (comme le style, les transformations, etc.), et vous voulez vous assurer que c'est l'état original qui est utilisé chaque fois que le canevas est redessiné, alors vous devez enregistrer l'état original. +3. **Dessiner les formes animées** + Vous effectuez toutes les opérations pour afficher l'image. +4. **Restaurer l'état du canevas** + Si l'état du canevas a été sauvegardé, vous restaurez cet état avant le prochain rendu. -<h2 id="Controlling_an_animation">Contrôle d'une animation</h2> +## Contrôle d'une animation -<p>Les formes sont dessinées en utilisant soit les méthodes du canevas directement soit en appelant des fonctions personnalisées. Dans des conditions normales, on ne voit le résultat des opérations sur le canevas que quand le script a terminé son exécution. Cela signifie qu'il n'est pas possible de créer une animation avec une boucle <code>for</code>.</p> +Les formes sont dessinées en utilisant soit les méthodes du canevas directement soit en appelant des fonctions personnalisées. Dans des conditions normales, on ne voit le résultat des opérations sur le canevas que quand le script a terminé son exécution. Cela signifie qu'il n'est pas possible de créer une animation avec une boucle `for`. -<p>Il nous faut donc un moyen d'exécuter nos fonctions de dessin sur une période de temps. Il existe à ce jour trois manières de le faire.</p> +Il nous faut donc un moyen d'exécuter nos fonctions de dessin sur une période de temps. Il existe à ce jour trois manières de le faire. -<h3 id="Mises_à_jour_planifiées">Mises à jour planifiées</h3> +### Mises à jour planifiées -<p>Les fonctions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, et {{domxref("window.requestAnimationFrame()")}} peuvent être utilisées :</p> +Les fonctions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, et {{domxref("window.requestAnimationFrame()")}} peuvent être utilisées : -<dl> - <dt>{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}</dt> - <dd>Lance la fonction définie par <code>function</code> chaque <code>delay</code> <em>(délai)</em> millisecondes.</dd> - <dt>{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}</dt> - <dd>Exécute la fonction définie par <code>function</code> dans <code>delay</code> millisecondes.</dd> - <dt>{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}</dt> - <dd>Dit au navigateur qu'on veut afficher une animation et lui demande d'appeler la fonction <code>callback</code> pour mettre à jour cette animation avant de dessiner la prochaine image.</dd> -</dl> +- {{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}} + - : Lance la fonction définie par `function` chaque `delay` _(délai)_ millisecondes. +- {{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}} + - : Exécute la fonction définie par `function` dans `delay` millisecondes. +- {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}} + - : Dit au navigateur qu'on veut afficher une animation et lui demande d'appeler la fonction `callback` pour mettre à jour cette animation avant de dessiner la prochaine image. -<p>Si vous n'avez pas besoin d'interaction utilisateur, vous pouvez utiliser la fonction <code>setInterval()</code>, elle va exécuter périodiquement votre code.</p> +Si vous n'avez pas besoin d'interaction utilisateur, vous pouvez utiliser la fonction `setInterval()`, elle va exécuter périodiquement votre code. -<p>Si vous voulez faire un jeu, et utiliser les événements du clavier et de la souris pour contrôler l'animation, vous pouvez utiliser <code>setTimeout()</code>. En utilisant des {{domxref("EventListener")}}, on peut récupèrer chaque interaction et d'exécuter nos fonctions d'animation.</p> +Si vous voulez faire un jeu, et utiliser les événements du clavier et de la souris pour contrôler l'animation, vous pouvez utiliser `setTimeout()`. En utilisant des {{domxref("EventListener")}}, on peut récupèrer chaque interaction et d'exécuter nos fonctions d'animation. -<p>Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible.</p> +Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible. -<div class="note"> -<p><strong>Note :</strong> Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article <a href="/fr/docs/Jeux/Anatomie">L'anatomie d'un jeu vidéo</a> dans notre section <a href="/fr/docs/Jeux">Développement de jeux vidéo</a>.</p> -</div> +> **Note :** Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article [L'anatomie d'un jeu vidéo](/fr/docs/Jeux/Anatomie) dans notre section [Développement de jeux vidéo](/fr/docs/Jeux). -<h2 id="Un_système_terrestre_animé">Un système terrestre animé</h2> +## Un système terrestre animé -<p>Cette exemple anime un petit modèle de notre système terrestre.</p> +Cette exemple anime un petit modèle de notre système terrestre. -<pre class="brush: js">var sun = new Image(); +```js +var sun = new Image(); var moon = new Image(); var earth = new Image(); function init(){ @@ -112,17 +107,20 @@ function draw() { } init(); -</pre> +``` -<pre class="brush: html hidden"><canvas id="canvas" width="300" height="300"></canvas></pre> +```html hidden +<canvas id="canvas" width="300" height="300"></canvas> +``` -<p>{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "canvas_animation1.png")}}</p> +{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "canvas_animation1.png")}} -<h2 id="Une_horloge_animée">Une horloge animée</h2> +## Une horloge animée -<p>Cette exemple dessine une horloge animée qui affiche l'heure actuelle.</p> +Cette exemple dessine une horloge animée qui affiche l'heure actuelle. -<pre class="brush: js">function clock(){ +```js +function clock(){ var now = new Date(); var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); @@ -137,7 +135,7 @@ init(); // Marquage des heures ctx.save(); - for (var i=0;i<12;i++){ + for (var i=0;i<12;i++){ ctx.beginPath(); ctx.rotate(Math.PI/6); ctx.moveTo(100,0); @@ -149,7 +147,7 @@ init(); // Marquage des minutes ctx.save(); ctx.lineWidth = 5; - for (i=0;i<60;i++){ + for (i=0;i<60;i++){ if (i%5!=0) { ctx.beginPath(); ctx.moveTo(117,0); @@ -163,7 +161,7 @@ init(); var sec = now.getSeconds(); var min = now.getMinutes(); var hr = now.getHours(); - hr = hr>=12 ? hr-12 : hr; + hr = hr>=12 ? hr-12 : hr; ctx.fillStyle = "black"; @@ -219,17 +217,21 @@ init(); window.requestAnimationFrame(clock); } -window.requestAnimationFrame(clock);</pre> +window.requestAnimationFrame(clock); +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<p>{{EmbedLiveSample("Une_horloge_animée", "180", "180", "canvas_animation2.png")}}</p> +{{EmbedLiveSample("Une_horloge_animée", "180", "180", "canvas_animation2.png")}} -<h2 id="Un_panorama_défilant_en_boucle">Un panorama défilant en boucle</h2> +## Un panorama défilant en boucle -<p>Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une <a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">image du parc Yosemite National</a> récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas.</p> +Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une [image du parc Yosemite National](http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg) récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas. -<pre class="brush: js">var img = new Image(); +```js +var img = new Image(); // Variables utilisateur - les personnaliser pour changer l'image qui défile, ses // directions, et la vitesse. @@ -255,17 +257,17 @@ img.onload = function() { imgW = img.width * scale; imgH = img.height * scale; - if (imgW > CanvasXSize) { + if (imgW > CanvasXSize) { // image plus grande que le canvas x = CanvasXSize - imgW; } - if (imgW > CanvasXSize) { + if (imgW > CanvasXSize) { // largeur de l'image plus grande que le canvas clearX = imgW; } else { clearX = CanvasXSize; } - if (imgH > CanvasYSize) { + if (imgH > CanvasYSize) { // hauteur de l'image plus grande que le canvas clearY = imgH; } else { @@ -282,30 +284,30 @@ img.onload = function() { function draw() { ctx.clearRect(0, 0, clearX, clearY); // clear the canvas - // si image est <= taille du canvas - if (imgW <= CanvasXSize) { + // si image est <= taille du canvas + if (imgW <= CanvasXSize) { // réinitialise, repart du début - if (x > CanvasXSize) { + if (x > CanvasXSize) { x = -imgW + x; } // dessine image1 supplémentaire - if (x > 0) { + if (x > 0) { ctx.drawImage(img, -imgW + x, y, imgW, imgH); } // dessine image2 supplémentaire - if (x - imgW > 0) { + if (x - imgW > 0) { ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH); } } - // image est > taille du canvas + // image est > taille du canvas else { // réinitialise, repeart du début - if (x > (CanvasXSize)) { + if (x > (CanvasXSize)) { x = CanvasXSize - imgW; } // dessine image supplémentaire - if (x > (CanvasXSize-imgW)) { + if (x > (CanvasXSize-imgW)) { ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); } } @@ -314,21 +316,21 @@ function draw() { // quantité à déplacer x += dx; } -</pre> +``` -<p>En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables <code>CanvasXZSize</code> et <code>CanvasYSize</code> dans le code JavaScript.</p> +En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables `CanvasXZSize` et `CanvasYSize` dans le code JavaScript. -<pre class="brush: html"><canvas id="canvas" width="800" height="200"></canvas></pre> +```html +<canvas id="canvas" width="800" height="200"></canvas> +``` -<p>{{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}}</p> +{{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}} -<h2 id="Other_examples">Autres exemples</h2> +## Autres exemples -<dl> - <dt><a href="/fr/docs/Un_raycaster_basique_avec_canvas">Un raycaster basique avec canvas</a></dt> - <dd>Un bon exemple d'animation contrôlée par le clavier.</dd> - <dt><a href="/fr/docs/Tutoriel_canvas/Advanced_animations">Animations avancées</a></dt> - <dd>Nous nous attarderons sur quelques techniques d'animation et de gestion de physique avancées dans le prochain châpitre.</dd> -</dl> +- [Un raycaster basique avec canvas](/fr/docs/Un_raycaster_basique_avec_canvas) + - : Un bon exemple d'animation contrôlée par le clavier. +- [Animations avancées](/fr/docs/Tutoriel_canvas/Advanced_animations) + - : Nous nous attarderons sur quelques techniques d'animation et de gestion de physique avancées dans le prochain châpitre. -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}</p> +{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}} diff --git a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md index 0faa7a82ec..ca47946655 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md +++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md @@ -10,117 +10,122 @@ tags: translation_of: Web/API/Canvas_API/Tutorial/Basic_usage original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base --- -<p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}</p> +{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}} -<h2 id="Lélément_<canvas>">L'élément <code><canvas></code></h2> +## L'élément `<canvas>` -<p>Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même.</p> +Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même. -<pre class="brush: html"><canvas id="tutoriel" width="150" height="150"></canvas> -</pre> +```html +<canvas id="tutoriel" width="150" height="150"></canvas> +``` -<p>Ceci ressemble beaucoup à l'élément <img>. La seule différence est qu'il n'y a pas les attributs <code>src</code> et <code>alt</code>. L'élément <code><canvas></code> a seulement deux attributs : {{htmlattrxref ("width", "canvas")}} et {{htmlattrxref ("height", "canvas")}} (« largeur » et « hauteur »). Ces deux attributs sont optionnels et peuvent aussi être fixés à travers le <a href="/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko">DOM</a>. Quand les attributs <strong>width</strong> et <strong>height</strong> ne sont pas spécifiés, le canvas sera initialement large de <strong>300 pixels</strong> et haut de <strong>150 pixels</strong>. Les dimensions du canvas peuvent être modifiés par du <a href="/fr/docs/Web/CSS">CSS</a>, mais l'image sera dessinée selon les valeurs <strong>width</strong> et <strong>height</strong> du canvas et ensuite étirée pour afficher dans l'espace donné par le CSS.</p> +Ceci ressemble beaucoup à l'élément \<img>. La seule différence est qu'il n'y a pas les attributs `src` et `alt`. L'élément `<canvas>` a seulement deux attributs : {{htmlattrxref ("width", "canvas")}} et {{htmlattrxref ("height", "canvas")}} (« largeur » et « hauteur »). Ces deux attributs sont optionnels et peuvent aussi être fixés à travers le [DOM](/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko). Quand les attributs **width** et **height** ne sont pas spécifiés, le canvas sera initialement large de **300 pixels** et haut de **150 pixels**. Les dimensions du canvas peuvent être modifiés par du [CSS](/fr/docs/Web/CSS), mais l'image sera dessinée selon les valeurs **width** et **height** du canvas et ensuite étirée pour afficher dans l'espace donné par le CSS. -<div class="note"> -<p><strong>Note :</strong> Si l'image semble déformée, essayez de spécifier de manière explicite vos attributs <code>width</code> et <code>height</code> dans l'élément <code><canvas></code>, et de ne pas utiliser de CSS.</p> -</div> +> **Note :** Si l'image semble déformée, essayez de spécifier de manière explicite vos attributs `width` et `height` dans l'élément `<canvas>`, et de ne pas utiliser de CSS. -<p>L'attribut <code>id</code> n'est pas spécifique à l'élément <code><canvas></code>. C'est en fait un des attributs HTML de base qui peut être utilisé par presque tous les éléments HTML. C'est toujours mieux d'assigner une <code>id</code> car ça facilite beaucoup l'identification du <code>canvas</code> dans le code <code>javascript</code>.</p> +L'attribut `id` n'est pas spécifique à l'élément `<canvas>`. C'est en fait un des attributs HTML de base qui peut être utilisé par presque tous les éléments HTML. C'est toujours mieux d'assigner une `id` car ça facilite beaucoup l'identification du `canvas` dans le code `javascript`. -<p>L'élément <code><canvas></code> peut être stylisé comme n'importe quelle image normale (marges, contours, arrière-plan, etc). Si aucun style n'est donné, le canvas sera par défaut complètement transparent. Il faut noter que peu importe quels styles sont utilisés, le style n'affectera pas l'acte de dessiner sur le canvas. Nous verrons en détail la stylisation des canvas plus tard dans ce tutoriel.</p> +L'élément `<canvas>` peut être stylisé comme n'importe quelle image normale (marges, contours, arrière-plan, etc). Si aucun style n'est donné, le canvas sera par défaut complètement transparent. Il faut noter que peu importe quels styles sont utilisés, le style n'affectera pas l'acte de dessiner sur le canvas. Nous verrons en détail la stylisation des canvas plus tard dans ce tutoriel. -<h3 id="Contenu_de_repli">Contenu de repli</h3> +### Contenu de repli -<p>Puisque certains plus anciens navigateurs ne supportent pas l'élément {{HTMLElement("canvas")}} (les plus communs étant les versions d'Internet Explorer avant la version 9), il est mieux d'avoir du contenu de repli pour afficher.</p> +Puisque certains plus anciens navigateurs ne supportent pas l'élément {{HTMLElement("canvas")}} (les plus communs étant les versions d'Internet Explorer avant la version 9), il est mieux d'avoir du contenu de repli pour afficher. -<p>Heureusement, c'est très facile : il faut tout simplement mettre le contenu dans l'élément <code><canvas></code> lui-même. Les navigateurs qui ne supportent pas <code><canvas></code> vont afficher ce contenu de repli, et ceux qui supportent <code><canvas></code> vont l'ignorer et dessiner le canvas.</p> +Heureusement, c'est très facile : il faut tout simplement mettre le contenu dans l'élément `<canvas>` lui-même. Les navigateurs qui ne supportent pas `<canvas>` vont afficher ce contenu de repli, et ceux qui supportent `<canvas>` vont l'ignorer et dessiner le canvas. -<p>Le contenu de repli pourrait, par exemple, donner une description texte du canvas, ou afficher une image fixe comme aperçu de ce que le canvas dessinerait de façon dynamique.</p> +Le contenu de repli pourrait, par exemple, donner une description texte du canvas, ou afficher une image fixe comme aperçu de ce que le canvas dessinerait de façon dynamique. -<pre class="brush: html "><canvas id="stockGraph" width="150" height="150"> +```html +<canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 + 0.15 -</canvas> +</canvas> -<canvas id="clock" width="150" height="150"> - <img src="images/clock.png" width="150" height="150" alt=""/> -</canvas></pre> +<canvas id="clock" width="150" height="150"> + <img src="images/clock.png" width="150" height="150" alt=""/> +</canvas> +``` -<h2 id="La_nécessité_de_la_balise_<canvas>">La nécessité de la balise <code></canvas></code></h2> +## La nécessité de la balise `</canvas>` -<p>Au contraire de l'élément {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} <strong>requiert</strong> la balise fermante (<code></canvas></code>).</p> +Au contraire de l'élément {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} **requiert** la balise fermante (`</canvas>`). -<div class="note"> -<p><strong>Note :</strong> Bien que quelques unes des premières versions du navigateur Safari ne requièrent pas la balise fermante, la spécification HTML indique qu'elle est nécessaire, alors il est mieux de l'inclure pour avoir le plus de compatibilité possible. Ces anciennes versions de Safari (avant la version 2.0) affichent le contenu de repli en plus que le canvas lui-même, sauf si vous utilisez des trucs CSS pour le masquer. Heureusement, il y a très peu d'utilisateurs de ces vieilles versions de Safari de nos jours.</p> -</div> +> **Note :** Bien que quelques unes des premières versions du navigateur Safari ne requièrent pas la balise fermante, la spécification HTML indique qu'elle est nécessaire, alors il est mieux de l'inclure pour avoir le plus de compatibilité possible. Ces anciennes versions de Safari (avant la version 2.0) affichent le contenu de repli en plus que le canvas lui-même, sauf si vous utilisez des trucs CSS pour le masquer. Heureusement, il y a très peu d'utilisateurs de ces vieilles versions de Safari de nos jours. -<p>Si vous n'avez pas besoin de contenu de repli, un simple <code><canvas id="foo" ...></canvas></code> est totalement compatible avec tous les navigateurs qui ont pris en charge la fonctionnalité canvas.</p> +Si vous n'avez pas besoin de contenu de repli, un simple `<canvas id="foo" ...></canvas>` est totalement compatible avec tous les navigateurs qui ont pris en charge la fonctionnalité canvas. -<h2 id="Le_contexte_de_rendu">Le contexte de rendu</h2> +## Le contexte de rendu -<p>L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs <strong>contextes de rendu</strong>, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte <a href="/fr/docs/Web/WebGL">WebGL</a>, qui utilise un contexte 3D ("experimental-webgl") inspiré de <a href="http://www.khronos.org/opengles/">OpenGL ES</a>.</p> +L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs **contextes de rendu**, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte [WebGL](/fr/docs/Web/WebGL), qui utilise un contexte 3D ("experimental-webgl") inspiré de [OpenGL ES](http://www.khronos.org/opengles/). -<p>Initialement, le canvas est vide. Pour afficher quelque chose, un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une <a href="/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes">méthode</a> nommée <code>getContext()</code>, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. <code>getContext()</code> a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d".</p> +Initialement, le canvas est vide. Pour afficher quelque chose, un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une [méthode](/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes) nommée `getContext()`, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. `getContext()` a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d". -<pre class="brush: js">var canvas = document.getElementById('tutorial'); -var ctx = canvas.getContext('2d');</pre> +```js +var canvas = document.getElementById('tutorial'); +var ctx = canvas.getContext('2d'); +``` -<p>La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant {{domxref("document.getElementById()")}}. Lorsque nous avons l'élément canvas, nous pouvons accéder au contexte de rendu en utilisant sa méthode <code>getContext()</code>.</p> +La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant {{domxref("document.getElementById()")}}. Lorsque nous avons l'élément canvas, nous pouvons accéder au contexte de rendu en utilisant sa méthode `getContext()`. -<h2 id="Vérification_de_la_prise_en_charge">Vérification de la prise en charge</h2> +## Vérification de la prise en charge -<p>Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode <code>getContext()</code>. Notre extrait de code ci-dessus se transforme donc en ceci :</p> +Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode `getContext()`. Notre extrait de code ci-dessus se transforme donc en ceci : -<pre class="brush: js">var canvas = document.getElementById('tutorial'); +```js +var canvas = document.getElementById('tutorial'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // code de dessin dans le canvas } else { // code pour le cas où canvas ne serait pas supporté -}</pre> +} +``` +## Un modèle basique -<h2 id="Un_modèle_basique">Un modèle basique</h2> +Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples. -<p>Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples.</p> - -<pre class="brush: html "><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"/> - <title>Canvas tutorial</title> - <script type="text/javascript"> +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Canvas tutorial</title> + <script type="text/javascript"> function draw() { var canvas = document.getElementById('tutorial'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); } } - </script> - <style type="text/css"> + </script> + <style type="text/css"> canvas { border: 1px solid black; } - </style> - </head> - <body onload="draw();"> - <canvas id="tutorial" width="150" height="150"></canvas> - </body> -</html></pre> + </style> + </head> + <body onload="draw();"> + <canvas id="tutorial" width="150" height="150"></canvas> + </body> +</html> +``` -<p>Ce script contient une fonction <code>draw()</code>, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier.</p> +Ce script contient une fonction `draw()`, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier. -<p>Voici à quoi le modèle ressemble :</p> +Voici à quoi le modèle ressemble : -<p>{{EmbedLiveSample("Un_modèle_basique", 160, 160)}}</p> +{{EmbedLiveSample("Un_modèle_basique", 160, 160)}} -<h2 id="Un_exemple_simple">Un exemple simple</h2> +## Un exemple simple -<p>Pour commencer, observons un exemple simple qui dessine deux rectangles qui s'intersectent, un d'entre eux ayant de la transparence alpha. Nous verrons plus en détail comment ça marche dans les exemples suivants.</p> +Pour commencer, observons un exemple simple qui dessine deux rectangles qui s'intersectent, un d'entre eux ayant de la transparence alpha. Nous verrons plus en détail comment ça marche dans les exemples suivants. -<pre class="brush: html "><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"/> - <script type="application/javascript"> +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { @@ -133,15 +138,16 @@ if (canvas.getContext) { ctx.fillRect(30, 30, 50, 50); } } - </script> - </head> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> -</html></pre> + </script> + </head> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +``` -<p>Cet exemple ressemble a ceci :</p> +Cet exemple ressemble a ceci : -<p>{{EmbedLiveSample("Un_exemple_simple", 160, 160, "canvas_ex1.png")}}</p> +{{EmbedLiveSample("Un_exemple_simple", 160, 160, "canvas_ex1.png")}} -<p>{{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}</p> +{{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}} diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md index f2992ea69d..e3343ba8a3 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md +++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md @@ -11,17 +11,18 @@ tags: translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition/Example --- -<div>{{CanvasSidebar}}</div> +{{CanvasSidebar}} -<p>Cet exemple illustre un certain nombre d'<a href="/fr/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation">opérations de composition</a>. Le résultat donne ceci:</p> +Cet exemple illustre un certain nombre d'[opérations de composition](/fr/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation). Le résultat donne ceci: -<p>{{EmbedLiveSample("Exemple_de_composition", "100%", 7250)}}</p> +{{EmbedLiveSample("Exemple_de_composition", "100%", 7250)}} -<h2 id="Exemple_de_composition">Exemple de composition</h2> +## Exemple de composition -<p>Ce code configure les valeurs globales utilisées par le reste du programme.</p> +Ce code configure les valeurs globales utilisées par le reste du programme. -<pre class="brush: js">var canvas1 = document.createElement("canvas"); +```js +var canvas1 = document.createElement("canvas"); var canvas2 = document.createElement("canvas"); var gco = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', @@ -59,13 +60,14 @@ var gcoText = [ ].reverse(); var width = 320; var height = 340; -</pre> +``` -<h3 id="Programme_principal">Programme principal</h3> +### Programme principal -<p>Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:</p> +Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple: -<pre class="brush: js">window.onload = function() { +```js +window.onload = function() { // lum en sRGB var lum = { r: 0.33, @@ -82,11 +84,12 @@ var height = 340; runComposite(); return; }; -</pre> +``` -<p>Et dans le code suivant, <code>runComposite()</code> gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour faire les parties difficiles.</p> +Et dans le code suivant, `runComposite()` gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour faire les parties difficiles. -<pre class="brush: js">function createCanvas() { +```js +function createCanvas() { var canvas = document.createElement("canvas"); canvas.style.background = "url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; @@ -156,13 +159,14 @@ function runComposite() { dl.appendChild(dd); } }; -</pre> +``` -<h3 id="Fonctions_utilitaires">Fonctions utilitaires</h3> +### Fonctions utilitaires -<p>Notre programme repose sur un certain nombbre de fonctions utilitaires:</p> +Notre programme repose sur un certain nombbre de fonctions utilitaires: -<pre class="brush: js">var lightMix = function() { +```js +var lightMix = function() { var ctx = canvas2.getContext("2d"); ctx.save(); ctx.globalCompositeOperation = "lighter"; @@ -184,9 +188,10 @@ function runComposite() { ctx.fillRect(0,0,30,30) ctx.fill(); }; -</pre> +``` -<pre class="brush: js">var colorSphere = function(element) { +```js +var colorSphere = function(element) { var ctx = canvas1.getContext("2d"); var width = 360; var halfWidth = width / 2; @@ -194,7 +199,7 @@ function runComposite() { var offset = 0; // scrollbar offset var oleft = -20; var otop = -20; - for (var n = 0; n <= 359; n ++) { + for (var n = 0; n <= 359; n ++) { var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth); var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); gradient.addColorStop(0, "rgba(0,0,0,0)"); @@ -216,9 +221,10 @@ function runComposite() { ctx.fill(); return ctx.canvas; }; -</pre> +``` -<pre class="brush: js">// HSV (1978) = H: Hue / S: Saturation / V: Value +```js +// HSV (1978) = H: Hue / S: Saturation / V: Value Color = {}; Color.HSV_RGB = function (o) { var H = o.H / 360, @@ -229,7 +235,7 @@ Color.HSV_RGB = function (o) { if (S == 0) { R = G = B = Math.round(V * 255); } else { - if (H >= 1) H = 0; + if (H >= 1) H = 0; H = 6 * H; D = H - Math.floor(H); A = Math.round(255 * V * (1 - S)); @@ -293,4 +299,5 @@ var createInterlace = function (size, color1, color2) { return pattern; }; -var op_8x8 = createInterlace(8, "#FFF", "#eee");</pre> +var op_8x8 = createInterlace(8, "#FFF", "#eee"); +``` 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 0ce19656af..3e0bf39741 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/index.md +++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.md @@ -8,47 +8,44 @@ tags: translation_of: Web/API/Canvas_API/Tutorial/Compositing original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition --- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div> +{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}} -<p>Dans tous nos <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations">exemples précédents</a>, 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é <code>globalCompositeOperation</code>. En complément, la propriété <code>clip</code> nous permet de cacher les parties des formes que nous ne désirons pas.</p> +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. -<h2 id="globalCompositeOperation"><code>globalCompositeOperation</code></h2> +## `globalCompositeOperation` -<p>Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) et davantage.</p> +Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) et davantage. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}</dt> - <dd>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.</dd> -</dl> +- {{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. -<p>Reportez-vous aux <a href="/fr/docs/Tutoriel_canvas/Composition/Example">exemples de compositon</a> pour le code des exemples suivants.</p> +Reportez-vous aux [exemples de compositon](/fr/docs/Tutoriel_canvas/Composition/Example) pour le code des exemples suivants. -<p>{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}}</p> +{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}} -<h2 id="Clipping_paths">Détourage</h2> +## Détourage -<p>Un détourage (<em>clipping path</em> en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas.</p> +Un détourage (_clipping path_ en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas. -<img alt="" src="canvas_clipping_path.png"> + -<p>Si nous comparons le détourage à la propriété <code>globalCompositeOperation</code> vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec <code>source-in</code> et <code>source-atop</code>. 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.</p> +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. -<p>Dans le chapitre "<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">dessiner des formes avec le canevas</a>", nous n'avions mentionné que les méthodes <code>stroke()</code> et <code>fill()</code>, mais il y en a une troisième: <code>clip()</code> — elle permet de faire des détourages.</p> +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. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.clip", "clip()")}}</dt> - <dd>Transforme le chemin en cours de création en détourage effectif.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.clip", "clip()")}} + - : Transforme le chemin en cours de création en détourage effectif. -<p>Il faut utiliser <code>clip()</code> plutot que <code>closePath()</code> pour fermer un chemin et enfaire un détourage.</p> +Il faut utiliser `clip()` plutot que `closePath()` pour fermer un chemin et enfaire un détourage. -<p>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.</p> +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. -<h3 id="A_clip_example">Un exemple de <code>clip</code></h3> +### Un exemple de `clip` -<p>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...).</p> +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...). -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0, 0, 150, 150); ctx.translate(75, 75); @@ -67,7 +64,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition ctx.fillRect(-75, -75, 150, 150); // draw stars - for (var j = 1; j < 50; j++) { + for (var j = 1; j < 50; j++) { ctx.save(); ctx.fillStyle = '#fff'; ctx.translate(75 - Math.floor(Math.random() * 150), @@ -82,7 +79,7 @@ function drawStar(ctx, r) { ctx.save(); ctx.beginPath(); ctx.moveTo(r, 0); - for (var i = 0; i < 9; i++) { + for (var i = 0; i < 9; i++) { ctx.rotate(Math.PI / 5); if (i % 2 === 0) { ctx.lineTo((r / 0.525731) * 0.200811, 0); @@ -94,16 +91,20 @@ function drawStar(ctx, r) { ctx.fill(); ctx.restore(); } -</pre> +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> +```js hidden +draw(); +``` -<p>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 à <code>clip()</code>. 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.</p> +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. -<p>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 <code>drawStar()</code>. Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage.</p> +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. -<p>{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}}</p> +{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}} -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</p> +{{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_shapes/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md index b265fb649a..99f0eb42d4 100644 --- a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md +++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md @@ -12,45 +12,45 @@ tags: translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques --- -<p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}</p> +{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}} -<p>Maintenant que nous avons défini notre <a href="/fr/docs/Tutoriel_canvas/Utilisation_de_base">environnement de canevas</a>, nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.</p> +Maintenant que nous avons défini notre [environnement de canevas](/fr/docs/Tutoriel_canvas/Utilisation_de_base), nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait. -<h2 id="La_grille">La grille</h2> +## La grille -<p>Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou <strong>système de coordonnées</strong>. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin <em>supérieur gauche</em> de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à <code>x</code> pixels à partir de la gauche et à <code>y</code> pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.</p> +Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou **système de coordonnées**. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin *supérieur gauche* de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à `x` pixels à partir de la gauche et à `y` pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut. -<img alt="" src="canvas_default_grid.png"> + -<h2 id="Dessin_de_rectangles">Dessin de rectangles</h2> +## Dessin de rectangles -<p>Au contraire de <a href="/fr/docs/Web/SVG">SVG</a>, le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.</p> +Au contraire de [SVG](/fr/docs/Web/SVG), le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes. -<p>Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas :</p> +Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas : -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, largeur, hauteur)")}}</dt> - <dd>Dessine un rectangle rempli.</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, largeur, hauteur)")}}</dt> - <dd>Dessine un contour rectangulaire</dd> - <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, largeur, hauteur)")}}</dt> - <dd>Efface la zone rectangulaire spécifiée, la rendant complètement transparente.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, largeur, hauteur)")}} + - : Dessine un rectangle rempli. +- {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, largeur, hauteur)")}} + - : Dessine un contour rectangulaire +- {{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, largeur, hauteur)")}} + - : Efface la zone rectangulaire spécifiée, la rendant complètement transparente. -<p>Chacune de ces trois fonctions a les mêmes paramètres. <code>x</code> et <code>y</code> indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. <code>largeur</code> et <code>hauteur</code> indiquent la taille du rectangle.</p> +Chacune de ces trois fonctions a les mêmes paramètres. `x` et `y` indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. `largeur` et `hauteur` indiquent la taille du rectangle. -<p>Ci-dessous la fonction <code>draw()</code> de la page précédente, mais utilisant maintenant ces trois fonctions.</p> +Ci-dessous la fonction `draw()` de la page précédente, mais utilisant maintenant ces trois fonctions. -<h3 id="Exemple_de_forme_rectangulaire">Exemple de forme rectangulaire</h3> +### Exemple de forme rectangulaire -<pre class="brush: html hidden"><html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> -</html> -</pre> +```html hidden +<html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +``` -<pre class="brush: js">function draw() { +```js +function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); @@ -59,70 +59,65 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques ctx.clearRect(45, 45, 60, 60); ctx.strokeRect(50, 50, 50, 50); } -}</pre> +} +``` -<p>Le résultat de cet exemple est montré ci-dessous.</p> +Le résultat de cet exemple est montré ci-dessous. -<p>{{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "canvas_rect.png")}}</p> +{{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "canvas_rect.png")}} -<p>La fonction <code>fillRect()</code> dessine un grand carré noir de 100 pixels de côté. La fonction <code>clearRect()</code> efface ensuite un carré de 60x60 pixels, et finalement, la fonction <code>strokeRect()</code> est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé.</p> +La fonction `fillRect()` dessine un grand carré noir de 100 pixels de côté. La fonction `clearRect()` efface ensuite un carré de 60x60 pixels, et finalement, la fonction `strokeRect()` est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé. -<p>Dans les pages qui suivent, nous verrons deux méthodes alternatives pour <code>clearRect()</code>, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues.</p> +Dans les pages qui suivent, nous verrons deux méthodes alternatives pour `clearRect()`, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues. -<p>A la différence des fonctions de trajet que nous allons voir dans la prochaine section, les trois fonctions de rectangles dessinent immédiatement sur le canvas.</p> +A la différence des fonctions de trajet que nous allons voir dans la prochaine section, les trois fonctions de rectangles dessinent immédiatement sur le canvas. -<h2 id="Dessin_de_trajets">Dessin de trajets</h2> +## Dessin de trajets -<p>Les seules autres formes primitives sont les <em>trajets</em>. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires :</p> +Les seules autres formes primitives sont les _trajets_. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires : -<ol> - <li>Tout d'abord, vous devez créer le trajet.</li> - <li>Ensuite vous devez utiliser des <a href="/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths">instructions de dessin</a> pour dessiner sur le trajet.</li> - <li>Finalement, vous devez fermer le trajet.</li> - <li>Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître.</li> -</ol> +1. Tout d'abord, vous devez créer le trajet. +2. Ensuite vous devez utiliser des [instructions de dessin](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) pour dessiner sur le trajet. +3. Finalement, vous devez fermer le trajet. +4. Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître. -<p>Voici les functions utilisées pour réaliser ces étapes :</p> +Voici les functions utilisées pour réaliser ces étapes : -<dl> - <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt> - <dd>Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire.</dd> - <dt><a href="/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths">Méthodes de trajet</a></dt> - <dd>Méthodes pour définir différents trajets pour les objets.</dd> - <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt> - <dd>Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte.</dd> - <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt> - <dd>Dessine la forme en traçant son contour.</dd> - <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt> - <dd>Dessine une forme pleine en remplissant la zone de contenu du trajet.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} + - : Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire. +- [Méthodes de trajet](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) + - : Méthodes pour définir différents trajets pour les objets. +- {{domxref("CanvasRenderingContext2D.closePath", "closePath()")}} + - : Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte. +- {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} + - : Dessine la forme en traçant son contour. +- {{domxref("CanvasRenderingContext2D.fill", "fill()")}} + - : Dessine une forme pleine en remplissant la zone de contenu du trajet. -<p>La première étape pour créer un trajet est d'appeler <code>beginPath()</code>. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes.</p> +La première étape pour créer un trajet est d'appeler `beginPath()`. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes. -<div class="note"> - <p><strong>Note :</strong> Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé <code>beginPath()</code>, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un <code>moveTo()</code>, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.</p> -</div> +> **Note :** Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé `beginPath()`, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un `moveTo()`, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet. -<p>La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt.</p> +La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt. -<p>La troisième méthode, optionnelle, est l'appel à <code>closePath()</code>. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien.</p> +La troisième méthode, optionnelle, est l'appel à `closePath()`. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien. -<div class="note"> - <p><strong>Note :</strong> Quand vous appelez <code>fill()</code>, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler <code>closePath()</code>. Ce n'est <strong>pas</strong> le cas quand vous appelez <code>stroke()</code>.</p> -</div> +> **Note :** Quand vous appelez `fill()`, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler `closePath()`. Ce n'est **pas** le cas quand vous appelez `stroke()`. -<h3 id="Dessin_dun_triangle">Dessin d'un triangle</h3> +### Dessin d'un triangle -<p>Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit :</p> +Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit : -<pre class="brush: html hidden"><html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> -</html> -</pre> +```html hidden +<html> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> +</html> +``` -<pre class="brush: js">function dessiner() { +```js +function dessiner() { var canevas = document.getElementById('canevas'); if (canevas.getContext) { var ctx = canevas.getContext('2d'); @@ -134,33 +129,33 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques ctx.fill(); } } -</pre> +``` -<p>Le résultat ressemble à :</p> +Le résultat ressemble à : -<p>{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "triangle.png")}}</p> +{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "triangle.png")}} -<h3 id="Déplacement_du_stylo">Déplacement du stylo</h3> +### Déplacement du stylo -<p>Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction <code>moveTo()</code>. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre.</p> +Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction `moveTo()`. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt> - <dd>Déplace le stylo aux coordonnées <code>x</code> et <code>y</code>.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}} + - : Déplace le stylo aux coordonnées `x` et `y`. -<p>Lorsque le canevas est initialisé ou que <code>beginPath()</code> est appelé, vous souhaiterez typiquement utiliser <code>moveTo()</code> pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser <code>moveTo()</code> pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous.</p> +Lorsque le canevas est initialisé ou que `beginPath()` est appelé, vous souhaiterez typiquement utiliser `moveTo()` pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser `moveTo()` pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous. -<p>Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction <code>draw()</code> que nous avons vue plus tôt.</p> +Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction `draw()` que nous avons vue plus tôt. -<pre class="brush: html hidden"><html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> -</html> -</pre> +```html hidden +<html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +``` -<pre class="brush: js">function draw() { +```js +function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); @@ -176,39 +171,37 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques ctx.stroke(); } } -</pre> +``` -<p>Le résultat ressemble à ce qui suit :</p> +Le résultat ressemble à ce qui suit : -<p>{{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "canvas_smiley.png")}}</p> +{{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "canvas_smiley.png")}} -<p>Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent <code>moveTo()</code>.</p> +Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent `moveTo()`. -<div class="note"> -<p><strong>Note :</strong> Pour en savoir plus sur la fonction <code>arc()</code>, voir la section {{anch("Arcs")}} ci-dessous.</p> -</div> +> **Note :** Pour en savoir plus sur la fonction `arc()`, voir la section {{anch("Arcs")}} ci-dessous. -<h3 id="Les_lignes">Les lignes</h3> +### Les lignes -<p>Pour dessiner des lignes droites, utilisez la méthode <code>lineTo()</code>.</p> +Pour dessiner des lignes droites, utilisez la méthode `lineTo()`. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt> - <dd>Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par <code>x</code> et <code>y</code>.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}} + - : Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par `x` et `y`. -<p>Cette méthode prend deux arguments, <code>x</code> et <code>y</code>, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode <code>moveTo()</code>.</p> +Cette méthode prend deux arguments, `x` et `y`, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode `moveTo()`. -<p>L'exemple ci-dessous dessine deux triangles, un rempli et un filaire.</p> +L'exemple ci-dessous dessine deux triangles, un rempli et un filaire. -<pre class="brush: html hidden"><html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> -</html> -</pre> +```html hidden +<html> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> +</html> +``` -<pre class="brush: js">function dessiner() { +```js +function dessiner() { var canevas = document.getElementById('canevas'); if (canevas.getContext) { var ctx = canevas.getContext('2d'); @@ -229,57 +222,53 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques ctx.stroke(); } } -</pre> +``` -<p>Il commence par appeler <code>beginPath()</code> pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode <code>moveTo()</code> pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle.</p> +Il commence par appeler `beginPath()` pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode `moveTo()` pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle. -<p>{{EmbedLiveSample("Les_lignes", 160, 160, "canvas_lineto.png")}}</p> +{{EmbedLiveSample("Les_lignes", 160, 160, "canvas_lineto.png")}} -<p>Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le <code>closePath()</code> pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet.</p> +Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le `closePath()` pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet. -<h3 id="Les_arcs">Les arcs</h3> +### Les arcs -<p>Pour dessiner des arcs ou des cercles, on utilise les méthodes <code>arc() ou arcTo()</code>.</p> +Pour dessiner des arcs ou des cercles, on utilise les méthodes `arc() ou arcTo()`. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, rayon, angleInitial, angleFinal, antihoraire)")}}</dt> - <dd>Dessine un arc de cercle qui est centré à la position <em>(x, y),</em> de rayon <em>r</em>, commençant à <em>angleInitial</em> et finissant à <em>angleFinal</em> en allant dans le sens indiqué par <em>antihoraire</em> (par défaut, horaire).</dd> - <dt><strong>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, rayon)")}}</strong></dt> - <dd>Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.arc", "arc(x, y, rayon, angleInitial, angleFinal, antihoraire)")}} + - : Dessine un arc de cercle qui est centré à la position _(x, y),_ de rayon _r_, commençant à _angleInitial_ et finissant à *angleFinal* en allant dans le sens indiqué par _antihoraire_ (par défaut, horaire). +- **{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, rayon)")}}** + - : Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite. -<p>Regardons plus en détail la méthode <code>arc</code>, qui prend six paramètres : <code>x</code> et <code>y</code> sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. <code>rayon</code> se passe d'explication. Les paramètres <code>angleInitial et</code> <code>angleFinal</code> définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre <code>antihoraire</code> est une valeur booléenne qui, lorsque <code>true</code>, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire.</p> +Regardons plus en détail la méthode `arc`, qui prend six paramètres : `x` et `y` sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. `rayon` se passe d'explication. Les paramètres `angleInitial et` `angleFinal` définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre `antihoraire` est une valeur booléenne qui, lorsque `true`, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire. -<div class="note"> -<p><strong>Note :</strong> Les angles dans la fonction <code>arc</code> sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : <code>radians = (Math.PI/180)*degres</code>.</p> -</div> +> **Note :** Les angles dans la fonction `arc` sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : `radians = (Math.PI/180)*degres`. -<p>L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents.</p> +L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents. -<p>Les deux <a href="/fr-FR/docs/Web/JavaScript/Reference/Statements/for">boucles <code>for</code></a> bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant <code>beginPath()</code>. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.</p> +Les deux [boucles `for`](/fr-FR/docs/Web/JavaScript/Reference/Statements/for) bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant `beginPath()`. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire. -<p>Les coordonnées <code>x</code> et <code>y</code> devraient être claires. <code>rayon</code> et <code>angleInitial</code> sont fixés. L'<code>angleFinal</code> commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne.</p> +Les coordonnées `x` et `y` devraient être claires. `rayon` et `angleInitial` sont fixés. L'`angleFinal` commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne. -<p>L'instruction pour le paramètre <code>antihoraire</code> a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction <code>if</code> fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure.</p> +L'instruction pour le paramètre `antihoraire` a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction `if` fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure. -<div class="note"> -<p><strong>Note :</strong> Cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.</p> -</div> +> **Note :** Cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels. -<pre class="brush: html hidden"><html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="200"></canvas> - </body> -</html> -</pre> +```html hidden +<html> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="200"></canvas> + </body> +</html> +``` -<pre class="brush: js">function dessiner() { +```js +function dessiner() { var canevas = document.getElementById('canevas'); if (canevas.getContext) { var ctx = canevas.getContext('2d'); - for(var i = 0; i < 4; i++) { - for(var j = 0; j < 3; j++) { + for(var i = 0; i < 4; i++) { + for(var j = 0; j < 3; j++) { ctx.beginPath(); var x = 25 + j * 50; // Coordonnée x var y = 25 + i * 50; // Coordonnée y @@ -290,7 +279,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques ctx.arc(x, y, rayon, angleInitial, angleFinal, antihoraire); - if (i>1) { + if (i>1) { ctx.fill(); } else { ctx.stroke(); @@ -299,43 +288,43 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques } } } -</pre> +``` -<p>{{EmbedLiveSample("Les_arcs", 160, 210, "canvas_arc.png")}}</p> +{{EmbedLiveSample("Les_arcs", 160, 210, "canvas_arc.png")}} -<h3 id="Les_courbes_quadratiques_et_de_Bézier">Les courbes quadratiques et de Bézier</h3> +### Les courbes quadratiques et de Bézier -<p>Le type suivant de trajets disponible est la <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">courbe de Bézier</a>, disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes.</p> +Le type suivant de trajets disponible est la [courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier), disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt> - <dd>Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par <code>x</code> et <code>y</code>, en utilisant le point de contrôle spécifié par <code>cp1x</code> et <code>cp1y</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt> - <dd>Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par <code>x</code> et <code>y</code>, en utilisant les points de contrôle (<code>cp1x</code>, <code>cp1y</code>) et (<code>cp2x</code>, <code>cp2y</code>).</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}} + - : Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par `x` et `y`, en utilisant le point de contrôle spécifié par `cp1x` et `cp1y`. +- {{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}} + - : Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par `x` et `y`, en utilisant les points de contrôle (`cp1x`, `cp1y`) et (`cp2x`, `cp2y`). -<p>La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un <strong>point de contrôle</strong> (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.</p> +La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un **point de contrôle** (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle. -<p><img alt="" src="canvas_curves.png"></p> + -<p>Les paramètres <code>x</code> et <code>y</code> de ces deux méthodes sont les coordonnées du point d'arrivée. <code>cp1x</code> et <code>cp1y</code> sont les coordonnées du premier point de contrôle, et <code>cp2x</code> et <code>cp2y</code> sont les coordonnées du second point de contrôle.</p> +Les paramètres `x` et `y` de ces deux méthodes sont les coordonnées du point d'arrivée. `cp1x` et `cp1y` sont les coordonnées du premier point de contrôle, et `cp2x` et `cp2y` sont les coordonnées du second point de contrôle. -<p>Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme <em>Adobe Illustrator</em>, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées.</p> +Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme _Adobe Illustrator_, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées. -<p>Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète.</p> +Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète. -<h4 id="Courbes_de_Bézier_quadratiques">Courbes de Bézier quadratiques</h4> +#### Courbes de Bézier quadratiques -<p>Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bulle de dialogue.</p> +Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bulle de dialogue. -<pre class="brush: html hidden"><html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> -</html> -</pre> +```html hidden +<html> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> +</html> +``` -<pre class="brush: js">function dessiner() { +```js +function dessiner() { var canevas = document.getElementById('canevas'); if (canevas.getContext) { var ctx = canevas.getContext('2d'); @@ -352,22 +341,24 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques ctx.stroke(); } } -</pre> +``` -<p>{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "canvas_quadratic.png")}}</p> +{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "canvas_quadratic.png")}} -<h4 id="Les_courbes_de_Bézier_cubiques">Les courbes de Bézier cubiques</h4> +#### Les courbes de Bézier cubiques -<p>Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques.</p> +Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques. -<pre class="brush: html hidden"><html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> -</html> -</pre> +```html hidden +<html> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> +</html> +``` -<pre class="brush: js">function dessiner() { +```js +function dessiner() { var canevas = document.getElementById('canevas'); if (canevas.getContext) { var ctx = canevas.getContext('2d'); @@ -384,33 +375,33 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques ctx.fill(); } } -</pre> +``` -<p>{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "canvas_bezier.png")}}</p> +{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "canvas_bezier.png")}} -<h3 id="Rectangles">Rectangles</h3> +### Rectangles -<p>En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode <code>rect()</code>, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert.</p> +En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode `rect()`, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, largeur, hauteur)")}}</dt> - <dd>Dessine un rectangle dont l'angle supérieur gauche est spécifié par (<code>x</code>, <code>y</code>), avec les <code>largeur</code> et <code>hauteur</code> spécifiées.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.rect", "rect(x, y, largeur, hauteur)")}} + - : Dessine un rectangle dont l'angle supérieur gauche est spécifié par (`x`, `y`), avec les `largeur` et `hauteur` spécifiées. -<p>Quand cette méthode est exécutée, la méthode <code>moveTo()</code> est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut.</p> +Quand cette méthode est exécutée, la méthode `moveTo()` est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut. -<h3 id="Combiner_les_possibilités">Combiner les possibilités</h3> +### Combiner les possibilités -<p>Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre.</p> +Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre. -<pre class="brush: html hidden"><html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> -</html> -</pre> +```html hidden +<html> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> +</html> +``` -<pre class="brush: js">function dessiner() { +```js +function dessiner() { var canevas = document.getElementById('canevas'); if (canevas.getContext) { var ctx = canevas.getContext('2d'); @@ -427,15 +418,15 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques ctx.lineTo(31, 37); ctx.fill(); - for(var i = 0; i< 8; i++) { + for(var i = 0; i< 8; i++) { ctx.fillRect(51 + i * 16, 35, 4, 4); } - for(i = 0; i < 6; i++) { + for(i = 0; i < 6; i++) { ctx.fillRect(115, 51 + i * 16, 4, 4); } - for(i = 0; i < 8; i++) { + for(i = 0; i < 8; i++) { ctx.fillRect(51 + i * 16, 99, 4, 4); } @@ -493,52 +484,51 @@ function rectArrondi(ctx, x, y, largeur, hauteur, rayon) { ctx.quadraticCurveTo(x, y, x, y + rayon); ctx.stroke(); } +``` -</pre> +L'image résultante ressemble à ce qui suit : -<p>L'image résultante ressemble à ce qui suit :</p> +{{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}} -<p>{{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}}</p> +Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété `fillStyle` sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi`())`. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité. -<p>Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété <code>fillStyle</code> sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi<code>())</code>. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité.</p> +Nous reviendrons sur `fillStyle` plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite. -<p>Nous reviendrons sur <code>fillStyle</code> plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite.</p> +## Objets Path2D -<h2 id="Objets_Path2D">Objets Path2D</h2> +Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet {{domxref("Path2D")}}, disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instrucions de dessin. Vous pourrez alors rejouer vos trajets rapidement. +Voyons comment nous pouvons construire un objet `Path2D `: -<p>Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet {{domxref("Path2D")}}, disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instrucions de dessin. Vous pourrez alors rejouer vos trajets rapidement.<br> - Voyons comment nous pouvons construire un objet <code>Path2D </code>:</p> +- {{domxref("Path2D.Path2D", "Path2D()")}} + - : Le constructor **`Path2D()`** retourne un objet `Path2D` nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de [trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths). -<dl> - <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt> - <dd>Le constructor <code><strong>Path2D()</strong></code> retourne un objet <code>Path2D</code> nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de <a href="/fr-FR/docs/Web/SVG/Tutorial/Paths">trajet SVG</a>.</dd> -</dl> +<!----> -<pre class="notranslate"><code>new Path2D(); // objet trajet vide -new Path2D(trajet); // copie depuis un autre objet Path2D -new Path2D(d); // trajet depuis des données de trajet SVG</code></pre> + new Path2D(); // objet trajet vide + new Path2D(trajet); // copie depuis un autre objet Path2D + new Path2D(d); // trajet depuis des données de trajet SVG -<p>Toutes les <a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">méthodes de trajet</a> telles que <code>moveTo</code>, <code>rect</code>, <code>arc</code> ou <code>quadraticCurveTo</code>, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets <code>Path2D</code>.</p> +Toutes les [méthodes de trajet](/en-US/docs/Web/API/CanvasRenderingContext2D#Paths) telles que `moveTo`, `rect`, `arc` ou `quadraticCurveTo`, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets `Path2D`. -<p>L'API <code>Path2D</code> ajoute aussi une manière de combiner des trajets en utilisant la méthode <code>addPath</code>. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple.</p> +L'API `Path2D` ajoute aussi une manière de combiner des trajets en utilisant la méthode `addPath`. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple. -<dl> - <dt>{{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}}</dt> - <dd>Ajoute un trajet, au trajet en cours, avec une matrice de transformation.</dd> -</dl> +- {{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}} + - : Ajoute un trajet, au trajet en cours, avec une matrice de transformation. -<h3 id="Exemple_de_Path2D">Exemple de Path2D</h3> +### Exemple de Path2D -<p>Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets <code>Path2D</code>, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API <code>Path2D</code>, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet <code>Path2D</code> à utiliser au lieu du trajet en cours. Ici, <code>stroke</code> et <code>fill</code> sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple.</p> +Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets `Path2D`, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API `Path2D`, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet `Path2D` à utiliser au lieu du trajet en cours. Ici, `stroke` et `fill` sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple. -<pre class="brush: html hidden"><html> - <body onload="dessiner();"> - <canvas id="canvas" width="130" height="100"></canvas> - </body> -</html> -</pre> +```html hidden +<html> + <body onload="dessiner();"> + <canvas id="canvas" width="130" height="100"></canvas> + </body> +</html> +``` -<pre class="brush: js">function dessiner() { +```js +function dessiner() { var canevas = document.getElementById('canvas'); if (canevas.getContext){ var ctx = canevas.getContext('2d'); @@ -553,16 +543,17 @@ new Path2D(d); // trajet depuis des données de trajet SVG</code></pre> ctx.stroke(rectangle); ctx.fill(cercle); } -}</pre> +} +``` -<p>{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "path2d.png")}}</p> +{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "path2d.png")}} -<h3 id="Utilisation_de_trajets_SVG">Utilisation de trajets SVG</h3> +### Utilisation de trajets SVG -<p>Une autre fonctionnalité puissante de la nouvelle API <code>Path2D</code> de canevas est l'utilisation de <a href="/fr-FR/docs/Web/SVG/Tutorial/Paths">données de trajet SVG</a> pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.</p> +Une autre fonctionnalité puissante de la nouvelle API `Path2D` de canevas est l'utilisation de [données de trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths) pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas. -<p>Le trajet se déplacera au point (<code>M10 10</code>) et se déplacera alors de 80 points horizontalement vers la droite (<code>h 80</code>), ensuite de 80 points vers le bas (<code>v 80</code>), puis de 80 points vers la gauche (<code>h -80</code>), et reviendra alors au départ (<code>z</code>). Vous pouvez voir cet exemple sur la page du <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths">constructeur P<code>ath2D</code></a>.</p> +Le trajet se déplacera au point (`M10 10`) et se déplacera alors de 80 points horizontalement vers la droite (`h 80`), ensuite de 80 points vers le bas (`v 80`), puis de 80 points vers la gauche (`h -80`), et reviendra alors au départ (`z`). Vous pouvez voir cet exemple sur la page du [constructeur P`ath2D`](/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths). -<pre class="notranslate"><code>var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</code></pre> + var p = new Path2D("M10 10 h 80 v 80 h -80 Z"); -<p>{{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}</p> +{{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}} 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 4a1dfdcfa8..8cb24960db 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 @@ -9,73 +9,81 @@ tags: translation_of: Web/API/Canvas_API/Tutorial/Drawing_text original_slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas --- -<p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}</p> +{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}} -<p>Après avoir vu comment <a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">appliquer les styles et les couleurs</a> dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas.</p> +Après avoir vu comment [appliquer les styles et les couleurs](/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs) dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas. -<h2 id="Dessin_de_texte">Dessin de texte</h2> +## Dessin de texte -<p> Le contexte de rendu du canevas fournit deux méthodes pour le rendu du texte :</p> +Le contexte de rendu du canevas fournit deux méthodes pour le rendu du texte : -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt> - <dd>Remplit un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt> - <dd>Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}} + - : Remplit un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner. +- {{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}} + - : Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner. -<h3 id="A_fillText_example">Un exemple fillText</h3> +### Un exemple fillText -<p>Le texte est rempli en utilisant le <code>fillStyle</code> actuel.</p> +Le texte est rempli en utilisant le `fillStyle` actuel. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = '48px serif'; ctx.fillText('Hello world', 10, 50); -}</pre> +} +``` -<pre class="brush: html hidden"><canvas id="canvas" width="300" height="100"></canvas></pre> +```html hidden +<canvas id="canvas" width="300" height="100"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> +```js hidden +draw(); +``` -<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p> +{{EmbedLiveSample("A_fillText_example", 310, 110)}} -<h3 id="A_strokeText_example">Un exemple de strokeText</h3> +### Un exemple de strokeText -<p>Le texte est rempli en utilisant le <code>strokeStyle</code> courant.</p> +Le texte est rempli en utilisant le `strokeStyle` courant. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = '48px serif'; ctx.strokeText('Hello world', 10, 50); -}</pre> +} +``` -<pre class="brush: html hidden"><canvas id="canvas" width="300" height="100"></canvas></pre> +```html hidden +<canvas id="canvas" width="300" height="100"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> +```js hidden +draw(); +``` -<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p> +{{EmbedLiveSample("A_strokeText_example", 310, 110)}} -<h2 id="M.C3.A9thodes">Style de texte</h2> +## Style de texte -<p>Dans les exemples ci-dessus, nous utilisons déjà la propriété de police pour rendre le texte un peu plus grand que la taille par défaut. Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :</p> +Dans les exemples ci-dessus, nous utilisons déjà la propriété de police pour rendre le texte un peu plus grand que la taille par défaut. Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas : -<dl> - <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt> - <dd>Le style de texte actuel utilisé lors du dessin du texte. Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}. La police par défaut est 10px sans-serif.</dd> - <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt> - <dd>Paramètre d'alignement du texte. Valeurs possibles : <code>start</code> <em>(</em><em>début)</em>, <code>end</code> <em>(</em><em>fin)</em>, <code>left</code> <em>(</em><em>gauche)</em>, <code>right</code> <em>(</em><em>droite)</em> ou <code>center</code> <em>(</em><em>centre)</em>. La valeur par défaut est <code>start</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt> - <dd>Paramètre d'alignement de base. Valeurs possibles : <code>top</code> <em>(</em><em>haut)</em>, <code>hanging</code> <em>(</em><em>suspendu)</em>, <code>middle</code> <em>(</em><em>moyen)</em>, <code>alphabetic</code> <em>(</em><em>alphabétique)</em>, <code>ideographic</code> <em>(</em><em>idéographique)</em>, <code>bottom</code> <em>(</em><em>en bas)</em>. La valeur par défaut est <code>alphabetic</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt> - <dd>Directionnalité. Valeurs possibles: <code>ltr</code> <em>(de gauche à droite)</em>, <code>rtl</code> <em>(de droite à gauche)</em>, <code>inherit</code> <em>(hérité)</em>. La valeur par défaut est <code>inherit</code>.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.font", "font = value")}} + - : Le style de texte actuel utilisé lors du dessin du texte. Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}. La police par défaut est 10px sans-serif. +- {{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}} + - : Paramètre d'alignement du texte. Valeurs possibles : `start` _(\*\*début)_, `end` _(\*\*fin)_, `left` _(\*\*gauche)_, `right` _(\*\*droite)_ ou `center` _(\*\*centre)_. La valeur par défaut est `start`. +- {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}} + - : Paramètre d'alignement de base. Valeurs possibles : `top` _(\*\*haut)_, `hanging` _(\*\*suspendu)_, `middle` _(\*\*moyen)_, `alphabetic` _(\*\*alphabétique)_, `ideographic` _(\*\*idéographique)_, `bottom` _(\*\*en bas)_. La valeur par défaut est `alphabetic`. +- {{domxref("CanvasRenderingContext2D.direction", "direction = value")}} + - : Directionnalité. Valeurs possibles: `ltr` _(de gauche à droite)_, `rtl` _(de droite à gauche)_, `inherit` _(hérité)_. La valeur par défaut est `inherit`. -<p>Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.</p> +Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS. -<p>Le diagramme suivant du <a href="http://www.whatwg.org/">WHATWG</a> illustre les différentes lignes de base prises en charge par la propriété <code>textBaseline.</code></p> +Le diagramme suivant du [WHATWG](http://www.whatwg.org/) illustre les différentes lignes de base prises en charge par la propriété `textBaseline.` -<p><img alt="The top of the em square is + -<h3 id="Un_exemple_de_textBaseline">Un exemple de textBaseline</h3> +### Un exemple de textBaseline -<p>Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :</p> +Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas : -<pre class="brush: js">ctx.font = '48px serif'; +```js +ctx.font = '48px serif'; ctx.textBaseline = 'hanging'; -ctx.strokeText('Hello world', 0, 100);</pre> - -<h4 id="Playable_code">Playable code</h4> - -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +ctx.strokeText('Hello world', 0, 100); +``` + +#### Playable code + +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.font = "48px serif"; ctx.textBaseline = "hanging"; -ctx.strokeText("Hello world", 0, 100);</textarea></pre> +ctx.strokeText("Hello world", 0, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -128,29 +141,30 @@ edit.addEventListener('click', function() { }) textarea.addEventListener('input', drawCanvas); -window.addEventListener('load', drawCanvas);</pre> +window.addEventListener('load', drawCanvas); +``` -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +{{ EmbedLiveSample('Playable_code', 700, 360) }} -<h2 id="Mesures_de_texte_avancées">Mesures de texte avancées</h2> +## Mesures de texte avancées -<p>Dans le cas où vous avez besoin d'obtenir plus de détails sur le texte, la méthode suivante vous permet de le mesurer.</p> +Dans le cas où vous avez besoin d'obtenir plus de détails sur le texte, la méthode suivante vous permet de le mesurer. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt> - <dd>Retourne un objet {{domxref("TextMetrics")}} contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.measureText", "measureText()")}} + - : Retourne un objet {{domxref("TextMetrics")}} contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel. -<p>L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.</p> +L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var text = ctx.measureText('foo'); // objet TextMetrics text.width; // 16; -}</pre> +} +``` -<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2> +## Notes spécifiques à Gecko -<p>Dans Gecko (le moteur de rendu de Firefox, Firefox OS et d'autres applications basées sur Mozilla), certaines API préfixées ont été implémentées dans des versions antérieures pour dessiner du texte sur un canevas. Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti.</p> +Dans Gecko (le moteur de rendu de Firefox, Firefox OS et d'autres applications basées sur Mozilla), certaines API préfixées ont été implémentées dans des versions antérieures pour dessiner du texte sur un canevas. Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti. -<p>{{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}</p> +{{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}} diff --git a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md index 4370d57dec..f6f3ba108f 100644 --- a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md +++ b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md @@ -4,51 +4,53 @@ slug: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility original_slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility --- -<div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div> +{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }} -<p>L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles.</p> +L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles. -<h2 id="Moyen_de_repli">Moyen de repli</h2> +## Moyen de repli -<p>Le contenu à l'intérieur d'un tag <code><canvas> ... </canvas></code> peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur <a href="http://www.html5accessibility.com/tests/canvas.html">html5accessibility.com</a> demontre comment cela peut être fait.</p> +Le contenu à l'intérieur d'un tag `<canvas> ... </canvas>` peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur [html5accessibility.com](http://www.html5accessibility.com/tests/canvas.html) demontre comment cela peut être fait. -<pre class="brush: html"><canvas> - <h2>Shapes</h2> - <p>A rectangle with a black border. +```html +<canvas> + <h2>Shapes</h2> + <p>A rectangle with a black border. In the background is a pink circle. - Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>. + Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>. Partially overlaying the circle is a green - <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a> - and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>, - both of which are semi-opaque, so the full circle can be seen underneath.</p> -</canvas> </pre> + <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a> + and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>, + both of which are semi-opaque, so the full circle can be seen underneath.</p> +</canvas> +``` -<p>Jetez un oeil à la <a href="https://www.youtube.com/watch?v=ABeIFlqYiMQ">video comment NVDA lit cet exemple par Steve Faulkner</a> (en anglais).</p> +Jetez un oeil à la [video comment NVDA lit cet exemple par Steve Faulkner](https://www.youtube.com/watch?v=ABeIFlqYiMQ) (en anglais). -<h2 id="Les_règles_ARIA">Les règles ARIA</h2> +## Les règles ARIA -<p>Accessible Rich Internet Applications <strong>(<a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a>)</strong> (≈ <a href="https://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications">Les applications Internet Accessibles Riches)</a> défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir <a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a> et <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">les techniques ARIA</a> pour plus d'informations.</p> +Accessible Rich Internet Applications **([ARIA](/en-US/docs/Web/Accessibility/ARIA))** (≈ [Les applications Internet Accessibles Riches)](https://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir [ARIA](/en-US/docs/Web/Accessibility/ARIA) et [les techniques ARIA](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) pour plus d'informations. -<pre class="brush: html"><canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas> -</pre> +```html +<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas> +``` -<h2 id="Zones_cibles_hit_Region">Zones cibles (hit Region)</h2> +## Zones cibles (hit Region) -<p>Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs).</p> +Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs). -<dl> - <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> - <dd>Ajoute une "hit region" au canvas..</dd> - <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> - <dd>Supprime la "hit region" avec l'<code>id</code> spécifiée venant du canvas.</dd> - <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> - <dd>Retire toutes les "hit regions" du cnavas.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}} + - : Ajoute une "hit region" au canvas.. +- {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}} + - : Supprime la "hit region" avec l'`id` spécifiée venant du canvas. +- {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}} + - : Retire toutes les "hit regions" du cnavas. -<p>Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple.</p> +Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple. -<pre class="brush: html"><canvas id="canvas"></canvas> -<script> +```html +<canvas id="canvas"></canvas> +<script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); @@ -62,37 +64,34 @@ canvas.addEventListener('mousemove', function(event) { alert('hit region: ' + event.region); } }); -</script></pre> +</script> +``` -<p>La méthode <code>addHitRegion()</code> accepte aussi une option de <code>control</code> pour envoyer des événement vers un élément (c'est un enfant des canvas):</p> +La méthode `addHitRegion()` accepte aussi une option de `control` pour envoyer des événement vers un élément (c'est un enfant des canvas): -<pre class="brush: js">ctx.addHitRegion({control: element});</pre> +```js +ctx.addHitRegion({control: element}); +``` -<p>Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi <a href="http://codepen.io/adobe/pen/BhcmK">codepen demo</a>.</p> +Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi [codepen demo](http://codepen.io/adobe/pen/BhcmK). -<h2 id="Focus_rings">Focus rings</h2> +## Focus rings -<p>Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété <code>drawFocusIfNeeded</code> peut être utilisée.</p> +Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété `drawFocusIfNeeded` peut être utilisée. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}</dt> - <dd>Si un élément donné est ciblé, cette méthode dessine un anneaud de mise ne valeur autoure du chemin courant.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}} + - : Si un élément donné est ciblé, cette méthode dessine un anneaud de mise ne valeur autoure du chemin courant. -<p>De plus, la méthode <code>scrollPathIntoView()</code> peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple.</p> +De plus, la méthode `scrollPathIntoView()` peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}</dt> - <dd>Affiche le chemin courant ou le chemin donné.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}} + - : Affiche le chemin courant ou le chemin donné. -<h2 id="See_also">See also</h2> +## See also -<ul> - <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li> - <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li> - <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li> - <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li> -</ul> +- [Canvas accessibility use cases](https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases) +- [Canvas element accessibility issues](https://www.w3.org/html/wg/wiki/AddedElementCanvas) +- [HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner](http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/) +- [Best practices for interactive canvas elements](https://html.spec.whatwg.org/multipage/scripting.html#best-practices) -<div>{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div> +{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }} diff --git a/files/fr/web/api/canvas_api/tutorial/index.md b/files/fr/web/api/canvas_api/tutorial/index.md index d10b22ec7a..1954bdc3df 100644 --- a/files/fr/web/api/canvas_api/tutorial/index.md +++ b/files/fr/web/api/canvas_api/tutorial/index.md @@ -10,42 +10,38 @@ tags: translation_of: Web/API/Canvas_API/Tutorial original_slug: Web/API/Canvas_API/Tutoriel_canvas --- -<div>{{CanvasSidebar}}</div> +{{CanvasSidebar}} -<p><strong><a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a></strong> est un nouvel élément <a href="/fr/docs/Web/HTML">HTML</a> qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement <a href="/fr/docs/Glossaire/JavaScript">JavaScript</a>). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire <a href="/fr/docs/Un_raycaster_basique_avec_canvas">pas si simples</a>). Les images à droite montrent quelques exemples d'implémentations utilisant <code><canvas></code> que nous verrons plus tard dans ce tutoriel.</p> +**[`<canvas>`](/fr/docs/Web/HTML/Element/canvas)** est un nouvel élément [HTML](/fr/docs/Web/HTML) qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement [JavaScript](/fr/docs/Glossaire/JavaScript)). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire [pas si simples](/fr/docs/Un_raycaster_basique_avec_canvas)). Les images à droite montrent quelques exemples d'implémentations utilisant `<canvas>` que nous verrons plus tard dans ce tutoriel. -<p>Ce tutoriel explique comment utiliser l'élément <code><canvas></code> pour dessiner des graphiques 2D, en commençant par les bases. Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu.</p> +Ce tutoriel explique comment utiliser l'élément `<canvas>` pour dessiner des graphiques 2D, en commençant par les bases. Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu. -<p>D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, <code><canvas></code> a depuis été implémenté dans les navigateurs. Aujourd'hui, tous les principaux navigateurs le prennent en charge.</p> +D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, `<canvas>` a depuis été implémenté dans les navigateurs. Aujourd'hui, tous les principaux navigateurs le prennent en charge. -<h2 id="Avant_de_commencer">Avant de commencer</h2> +## Avant de commencer -<p>L'utilisation de l'élément <code><canvas></code> n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de <a href="/fr/docs/Web/HTML">HTML</a> et <a href="/fr/docs/Glossaire/JavaScript">JavaScript</a>. L'élément <code><canvas></code> n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. La taille par défaut de canvas est 300 px × 150 px (largeur × hauteur). Mais les tailles personnalisées peuvent être définies à l'aide des propriétés <a href="/fr/docs/Web/HTML">HTML</a> <code>height</code> et <code>width</code>. Afin de dessiner des graphiques sur canvas , nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.</p> +L'utilisation de l'élément `<canvas>` n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de [HTML](/fr/docs/Web/HTML) et [JavaScript](/fr/docs/Glossaire/JavaScript). L'élément `<canvas>` n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. La taille par défaut de canvas est 300 px × 150 px (largeur × hauteur). Mais les tailles personnalisées peuvent être définies à l'aide des propriétés [HTML](/fr/docs/Web/HTML) `height` et `width`. Afin de dessiner des graphiques sur canvas , nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée. -<h2 id="Dans_ce_tutoriel">Dans ce tutoriel</h2> +## Dans ce tutoriel -<ul> - <li><a href="/fr/docs/Tutoriel_canvas/Utilisation_de_base">Utilisation de base</a></li> - <li><a href="/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques">Dessin de formes géométriques</a></li> - <li><a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a></li> - <li><a href="/fr/docs/Dessin_de_texte_avec_canvas">Dessin de texte</a></li> - <li><a href="/fr/docs/Tutoriel_canvas/Utilisation_d'images">Utilisation d'images</a></li> - <li><a href="/fr/docs/Tutoriel_canvas/Transformations">Transformations</a></li> - <li><a href="/fr/docs/Web/API/Canvas_API/Tutorial/Compositing">Compositions et découpage</a></li> - <li><a href="/fr/docs/Tutoriel_canvas/Animations_basiques">Animations basiques</a></li> - <li><a href="/fr/docs/Tutoriel_canvas/Advanced_animations">Animations avancées</a></li> - <li><a href="/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation des pixels</a></li> - <li><a href="/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Régions touchées et accessibilité</a></li> - <li><a href="/fr/docs/Tutoriel_canvas/Optimizing_canvas">Optimisation</a></li> - <li><a href="/fr/docs/Web/API/Canvas_API/Tutorial/Finale">Final</a></li> -</ul> +- [Utilisation de base](/fr/docs/Tutoriel_canvas/Utilisation_de_base) +- [Dessin de formes géométriques](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques) +- [Ajout de styles et de couleurs](/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs) +- [Dessin de texte](/fr/docs/Dessin_de_texte_avec_canvas) +- [Utilisation d'images](/fr/docs/Tutoriel_canvas/Utilisation_d'images) +- [Transformations](/fr/docs/Tutoriel_canvas/Transformations) +- [Compositions et découpage](/fr/docs/Web/API/Canvas_API/Tutorial/Compositing) +- [Animations basiques](/fr/docs/Tutoriel_canvas/Animations_basiques) +- [Animations avancées](/fr/docs/Tutoriel_canvas/Advanced_animations) +- [Manipulation des pixels](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas) +- [Régions touchées et accessibilité](/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility) +- [Optimisation](/fr/docs/Tutoriel_canvas/Optimizing_canvas) +- [Final](/fr/docs/Web/API/Canvas_API/Tutorial/Finale) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/HTML/Canvas">Page du sujet canvas</a></li> - <li><a href="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a> (en)</li> - <li><a href="/Special:Tags?tag=Exemples_d'utilisation_de_canvas&language=fr">Exemples d'utilisation de canvas</a> (en)</li> -</ul> +- [Page du sujet canvas](/fr/docs/Web/HTML/Canvas) +- [HTML5CanvasTutorials](http://www.html5canvastutorials.com/) (en) +- [Exemples d'utilisation de canvas](/Special:Tags?tag=Exemples_d'utilisation_de_canvas&language=fr) (en) -<p>{{ Next("Tutoriel_canvas/Utilisation_de_base") }}</p> +{{ Next("Tutoriel_canvas/Utilisation_de_base") }} diff --git a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md index 700966e07c..7b3b723efb 100644 --- a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md +++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md @@ -4,52 +4,55 @@ slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas original_slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas --- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div> +{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}} -<p>L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien.</p> +L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien. -<h2 id="Conseils_sur_les_performances">Conseils sur les performances</h2> +## Conseils sur les performances -<p>Ceci est une liste de conseils pour améliorer les performances</p> +Ceci est une liste de conseils pour améliorer les performances -<h3 id="Pré-rendre_les_primitifs_similaires_ou_répéter_les_objects_dans_un_canvas_hors-champ">Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ</h3> +### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ -<p>Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue.</p> +Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue. -<pre class="brush: js">myEntity.offscreenCanvas = document.createElement("canvas"); +```js +myEntity.offscreenCanvas = document.createElement("canvas"); myEntity.offscreenCanvas.width = myEntity.width; myEntity.offscreenCanvas.height = myEntity.height; myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d"); myEntity.render(myEntity.offscreenContext); -</pre> +``` -<h3 id="Abandonnez_les_coordonnées_décimales_et_utilisez_des_entiers_à_la_place">Abandonnez les coordonnées décimales et utilisez des entiers à la place</h3> +### Abandonnez les coordonnées décimales et utilisez des entiers à la place -<p>Un rendu de sous-pixel est opéré quand on dessine des objets sur un canvas sans valeur entière.</p> +Un rendu de sous-pixel est opéré quand on dessine des objets sur un canvas sans valeur entière. -<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5); -</pre> +```js +ctx.drawImage(myImage, 0.3, 0.5); +``` -<p>Cela pousse le navigateur à faire des calculs supplémentaires pour créer un effet d'anti-crénelage. Pour empêcher cela, il faut s'assurer d'arrondir les coordonnées utilisées pour {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p> +Cela pousse le navigateur à faire des calculs supplémentaires pour créer un effet d'anti-crénelage. Pour empêcher cela, il faut s'assurer d'arrondir les coordonnées utilisées pour {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. -<h3 id="Ne_pas_redimensionner_dimages_avec_drawImage">Ne pas redimensionner d'images avec <code>drawImage</code></h3> +### Ne pas redimensionner d'images avec `drawImage` -<p>Préférez mettre en cache plusieurs dimensions de votre image dans un canvas hors-champ au lieu de les redimensionner constamment avec {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p> +Préférez mettre en cache plusieurs dimensions de votre image dans un canvas hors-champ au lieu de les redimensionner constamment avec {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. -<h3 id="Utiliser_des_canvas_empilés_pour_les_scènes_complexes">Utiliser des canvas empilés pour les scènes complexes</h3> +### Utiliser des canvas empilés pour les scènes complexes -<p>Pour des scènes complexes, on peut souvent remarquer que quelques éléments changent souvent tandis que d'autres ne changent jamais. Une optimisation possible dans ce cas consiste à utiliser plusieurs calques sous forme de canvas empilés.</p> +Pour des scènes complexes, on peut souvent remarquer que quelques éléments changent souvent tandis que d'autres ne changent jamais. Une optimisation possible dans ce cas consiste à utiliser plusieurs calques sous forme de canvas empilés. -<p>Par exemple, on peut créer un calque UI, dessiné au-dessus de tous les autres uniquement lorsque l'utilisateur accède à un menu. En dessous, un calque <em>jeu</em> où les entités du jeu sont souvent mises à jour. Et, à l'arrière, un calque de fond rarement modifié.</p> +Par exemple, on peut créer un calque UI, dessiné au-dessus de tous les autres uniquement lorsque l'utilisateur accède à un menu. En dessous, un calque _jeu_ où les entités du jeu sont souvent mises à jour. Et, à l'arrière, un calque de fond rarement modifié. -<pre class="brush: html"><div id="stage"> - <canvas id="ui-layer" width="480" height="320"></canvas> - <canvas id="game-layer" width="480" height="320"></canvas> - <canvas id="background-layer" width="480" height="320"></canvas> -</div> +```html +<div id="stage"> + <canvas id="ui-layer" width="480" height="320"></canvas> + <canvas id="game-layer" width="480" height="320"></canvas> + <canvas id="background-layer" width="480" height="320"></canvas> +</div> -<style> +<style> #stage { width: 480px; height: 320px; @@ -60,18 +63,19 @@ myEntity.render(myEntity.offscreenContext); #ui-layer { z-index: 3 } #game-layer { z-index: 2 } #background-layer { z-index: 1 } -</style> -</pre> +</style> +``` -<h3 id="Du_CSS_pour_les_grandes_images_de_fond">Du CSS pour les grandes images de fond</h3> +### Du CSS pour les grandes images de fond -<p>Si comme pour la plupart des jeux, vous utilisez une image de fond statique, préférez utiliser un simple {{HTMLElement("div")}} en dessous du canvas avec les propriétés CSS {{cssxref("background")}} appropriées. Cela vous évitera de redessiner une grande image dans le canvas à chaque tick.</p> +Si comme pour la plupart des jeux, vous utilisez une image de fond statique, préférez utiliser un simple {{HTMLElement("div")}} en dessous du canvas avec les propriétés CSS {{cssxref("background")}} appropriées. Cela vous évitera de redessiner une grande image dans le canvas à chaque tick. -<h3 id="Redimensionner_les_canvas_avec_CSS_transform">Redimensionner les canvas avec CSS transform</h3> +### Redimensionner les canvas avec CSS transform -<p><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Les transformations CSS</a> sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px.</p> +[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px. -<pre class="brush: js">var scaleX = window.innerWidth / canvas.width; +```js +var scaleX = window.innerWidth / canvas.width; var scaleY = window.innerHeight / canvas.height; var scaleToFit = Math.min(scaleX, scaleY); @@ -79,33 +83,31 @@ var scaleToCover = Math.max(scaleX, scaleY); stage.style.transformOrigin = "0 0"; //scale from top left stage.style.transform = "scale(" + scaleToFit + ")"; -</pre> +``` -<h3 id="Utiliser_lattribut_moz-opaque_Gecko_only">Utiliser l'attribut <code>moz-opaque</code> (Gecko only)</h3> +### Utiliser l'attribut `moz-opaque` (Gecko only) -<p>Si le canvas n'a pas besoin de transparence, ajouter l'attribut <code>moz-opaque</code> dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu.</p> +Si le canvas n'a pas besoin de transparence, ajouter l'attribut `moz-opaque` dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu. -<pre class="brush: html"><canvas id="mycanvas" moz-opaque></canvas></pre> +```html +<canvas id="mycanvas" moz-opaque></canvas> +``` -<h3 id="Dautres_conseils">D'autres conseils</h3> +### D'autres conseils -<ul> - <li>Regrouper les appels canevas (par exemple, dessiner un chemin de plusieurs lignes plutôt que plusieurs lignes séparées).</li> - <li>Éviter de refaire un rendu si ce n'est pas nécessaire.</li> - <li>Rendre uniquement les différences, pas tout le canvas.</li> - <li>Éviter la propriété {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} quand c'est possible.</li> - <li>Empêcher <a href="/fr/docs/Dessin_de_texte_avec_canvas">le rendu de texte</a> quand c'est possible.</li> - <li>Essayer différents moyens d'effacer le canvas : ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. redimensionner le canevas).</li> - <li>Avec les animations, utiliser {{domxref("window.requestAnimationFrame()")}} plutôt que {{domxref("window.setInterval()")}}.</li> - <li>Faire attention aux bibliothèques physiques lourdes.</li> - <li>Tester les performances avec <a href="http://jsperf.com">JSPerf</a>.</li> -</ul> +- Regrouper les appels canevas (par exemple, dessiner un chemin de plusieurs lignes plutôt que plusieurs lignes séparées). +- Éviter de refaire un rendu si ce n'est pas nécessaire. +- Rendre uniquement les différences, pas tout le canvas. +- Éviter la propriété {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} quand c'est possible. +- Empêcher [le rendu de texte](/fr/docs/Dessin_de_texte_avec_canvas) quand c'est possible. +- Essayer différents moyens d'effacer le canvas : ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. redimensionner le canevas). +- Avec les animations, utiliser {{domxref("window.requestAnimationFrame()")}} plutôt que {{domxref("window.setInterval()")}}. +- Faire attention aux bibliothèques physiques lourdes. +- Tester les performances avec [JSPerf](http://jsperf.com). -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li> - <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li> -</ul> +- [Improving HTML5 Canvas Performance – HTML5 Rocks](http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref) +- [Optimizing your JavaScript game for Firefox OS – Mozilla Hacks](https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/) -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p> +{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}} 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 053a07aa30..45651bb30a 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 @@ -4,119 +4,129 @@ slug: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas original_slug: Web/API/Canvas_API/Tutoriel_canvas/Pixel_manipulation_with_canvas --- -<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</div> +{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}} -<p>Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels de notre canevas. Avec l'objet ImageData, vous pouvez directement lire et écrire dans le tableau de données de l'image, pour manipuler les pixels un par un. Nous verrons également comment le lissage (anticrénelage) de l'image peut être contrôlé et comment sauvegarder des images depuis votre canevas.</p> +Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels de notre canevas. Avec l'objet ImageData, vous pouvez directement lire et écrire dans le tableau de données de l'image, pour manipuler les pixels un par un. Nous verrons également comment le lissage (anticrénelage) de l'image peut être contrôlé et comment sauvegarder des images depuis votre canevas. -<h2 id="Lobjet_ImageData">L'objet <code>ImageData</code></h2> +## L'objet `ImageData` -<p>L'objet {{domxref("ImageData")}} représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants :</p> +L'objet {{domxref("ImageData")}} représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants : -<dl> - <dt><code>width</code></dt> - <dd>La largeur de l'image en pixels.</dd> - <dt><code>height</code></dt> - <dd>La hauteur de l'image en pixels.</dd> - <dt><code>data</code></dt> - <dd>Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et 255 (inclus).</dd> -</dl> +- `width` + - : La largeur de l'image en pixels. +- `height` + - : La hauteur de l'image en pixels. +- `data` + - : Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et 255 (inclus). -<p>La propriété <code>data</code> retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA"). Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau.</p> +La propriété `data` retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA"). Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau. -<p>Le {{jsxref("Uint8ClampedArray")}} contient <code>height</code><em>(hauteur)</em> × <code>width</code><em>(largeur)</em> × 4 octets, dont les valeurs d'indices vont de 0 à (<code>height</code>×<code>width</code>×4)-1.</p> +Le {{jsxref("Uint8ClampedArray")}} contient `height`_(hauteur)_ × `width`*(largeur)* × 4 octets, dont les valeurs d'indices vont de 0 à (`height`×`width`×4)-1. -<p>Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50 de l'image, vous pouvez faire ce qui suit :</p> +Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50 de l'image, vous pouvez faire ce qui suit : -<pre class="brush: js">composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];</pre> +```js +composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2]; +``` -<p>Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut <code>Uint8ClampedArray.length</code> :</p> +Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut `Uint8ClampedArray.length` : -<pre class="brush: js">var nbOctets = imageData.data.length; -</pre> +```js +var nbOctets = imageData.data.length; +``` -<h2 id="Création_dun_objet_ImageData">Création d'un objet <code>ImageData</code></h2> +## Création d'un objet `ImageData` -<p>Pour créer un nouvel objet <code>ImageData</code> vierge, vous pouvez utiliser la méthode {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Il existe deux versions de la méthode <code>createImageData() </code>:</p> +Pour créer un nouvel objet `ImageData` vierge, vous pouvez utiliser la méthode {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Il existe deux versions de la méthode `createImageData() `: -<pre class="brush: js">var monImageData = ctx.createImageData(largeur, hauteur);</pre> +```js +var monImageData = ctx.createImageData(largeur, hauteur); +``` -<p>Cela crée un nouvel objet <code>ImageData</code> avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents.</p> +Cela crée un nouvel objet `ImageData` avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents. -<p>Vous pouvez aussi créer un nouvel objet <code>ImageData</code> ayant les mêmes dimensions que celles de l'objet indiqué par <code>autreImageData</code>. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. <strong>Cela ne copie pas les données d'image !</strong></p> +Vous pouvez aussi créer un nouvel objet `ImageData` ayant les mêmes dimensions que celles de l'objet indiqué par `autreImageData`. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. **Cela ne copie pas les données d'image !** -<pre class="brush: js">var monImageData = ctx.createImageData(autreImageData);</pre> +```js +var monImageData = ctx.createImageData(autreImageData); +``` -<h2 id="Obtention_des_données_pixel_pour_un_contexte">Obtention des données pixel pour un contexte</h2> +## Obtention des données pixel pour un contexte -<p>Pour obtenir un objet <code>ImageData</code> contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode <code>getImageData()</code> :</p> +Pour obtenir un objet `ImageData` contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode `getImageData()` : -<pre class="brush: js">var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);</pre> +```js +var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur); +``` -<p>Cette méthode retourne un objet <code>ImageData</code> représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (<code>left</code>,<code>top</code>) <em><code> (gauche,haut)</code></em>, (<code>left+width</code>, <code>top</code>) <em>(gauche+largeur, haut)</em>, (<code>left</code>, <code>top+height</code>)<em> (gauche, haut+hauteur)</em> et (<code>left+width</code>, <code>top+height</code>) <em>(gauche+largeur, haut+hauteur)</em>. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas.</p> +Cette méthode retourne un objet `ImageData` représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (`left`,`top`) _`(gauche,haut)`_, (`left+width`, `top`) _(gauche+largeur, haut)_, (`left`, `top+height`) _(gauche, haut+hauteur)_ et (`left+width`, `top+height`) _(gauche+largeur, haut+hauteur)_. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas. -<div class="note"> -<p><strong>Note :</strong> Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet <code>ImageData</code> résultant.</p> -</div> +> **Note :** Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet `ImageData` résultant. -<p>Cette méthode est aussi présentée dans l'article <a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipulation vidéo utilisant canvas</a>.</p> +Cette méthode est aussi présentée dans l'article [Manipulation vidéo utilisant canvas](/fr/docs/HTML/Manipulating_video_using_canvas). -<h3 id="Une_pipette_à_couleur">Une pipette à couleur</h3> +### Une pipette à couleur -<p>Dans cet exemple, nous utilisons la méthode <a href="/fr/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData() </a>pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par <code>layerX</code> et <code>layerY</code>, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que <a href="/fr/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData()</a> nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le <code><div></code> pour afficher la couleur.</p> +Dans cet exemple, nous utilisons la méthode [getImageData() ](/fr/docs/Web/API/CanvasRenderingContext2D/getImageData)pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par `layerX` et `layerY`, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que [getImageData()](/fr/docs/Web/API/CanvasRenderingContext2D/getImageData) nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le `<div>` pour afficher la couleur. -<pre class="brush: html hidden"><canvas id="canvas" width="300" height="227" style="float:left"></canvas> -<div id="color" style="width:200px;height:50px;float:left"></div> -</pre> +```html hidden +<canvas id="canvas" width="300" height="227" style="float:left"></canvas> +<div id="color" style="width:200px;height:50px;float:left"></div> +``` -<pre class="notranslate"><code>var img = new Image(); -img.src = './assets/rhino.jpg'; -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -img.onload = function() { - ctx.drawImage(img, 0, 0); - img.style.display = 'none'; -}; -var color = document.getElementById('color'); -function pick(event) { - var x = event.layerX; - var y = event.layerY; - var pixel = ctx.getImageData(x, y, 1, 1); - var data = pixel.data; - var rgba = 'rgba(' + data[0] + ', ' + data[1] + - ', ' + data[2] + ', ' + (data[3] / 255) + ')'; - color.style.background = rgba; - color.textContent = rgba; -} -canvas.addEventListener('mousemove', pick);</code></pre> + var img = new Image(); + img.src = './assets/rhino.jpg'; + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + img.onload = function() { + ctx.drawImage(img, 0, 0); + img.style.display = 'none'; + }; + var color = document.getElementById('color'); + function pick(event) { + var x = event.layerX; + var y = event.layerY; + var pixel = ctx.getImageData(x, y, 1, 1); + var data = pixel.data; + var rgba = 'rgba(' + data[0] + ', ' + data[1] + + ', ' + data[2] + ', ' + (data[3] / 255) + ')'; + color.style.background = rgba; + color.textContent = rgba; + } + canvas.addEventListener('mousemove', pick); -<p>{{ EmbedLiveSample('A_color_picker', 610, 240) }}</p> +{{ EmbedLiveSample('A_color_picker', 610, 240) }} -<h2 id="Peinture_des_données_pixel_dans_un_contexte">Peinture des données pixel dans un contexte</h2> +## Peinture des données pixel dans un contexte -<p>Vous pouvez utiliser la méthode <a href="/fr/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData() </a>pour peindre les données pixel dans un contexte :</p> +Vous pouvez utiliser la méthode [putImageData() ](/fr/docs/Web/API/CanvasRenderingContext2D/putImageData)pour peindre les données pixel dans un contexte : -<pre class="brush: js">ctx.putImageData(monImageData, dx, dy); -</pre> +```js +ctx.putImageData(monImageData, dx, dy); +``` -<p>Les paramètres <code>dx</code> et <code>dy</code> indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes.</p> +Les paramètres `dx` et `dy` indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes. -<p>Par exemple, pour peindre l'image entière représentée par <code>monImageData</code> dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit :</p> +Par exemple, pour peindre l'image entière représentée par `monImageData` dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit : -<pre class="brush: js">ctx.putImageData(monImageData, 0, 0); -</pre> +```js +ctx.putImageData(monImageData, 0, 0); +``` -<h3 id="Niveaux_de_gris_et_inversion_de_couleurs">Niveaux de gris et inversion de couleurs</h3> +### Niveaux de gris et inversion de couleurs -<p>Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de <a href="/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a>. La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale <em>(niveaux de gris)</em> fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir <a href="https://fr.wikipedia.org/wiki/Niveau_de_gris">Niveaux de gris</a> sur Wikipedia pour plus d'informations.</p> +Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de [putImageData()](/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale _(niveaux de gris)_ fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir [Niveaux de gris](https://fr.wikipedia.org/wiki/Niveau_de_gris) sur Wikipedia pour plus d'informations. -<pre class="brush: html hidden"><canvas id="canevas" width="300" height="227"></canvas> -<div> - <input id="btnniveaudegris" value="Niveau de gris" type="button"> - <input id="btninversion" value="Inversion" type="button"> -</div> -</pre> +```html hidden +<canvas id="canevas" width="300" height="227"></canvas> +<div> + <input id="btnniveaudegris" value="Niveau de gris" type="button"> + <input id="btninversion" value="Inversion" type="button"> +</div> +``` -<pre class="brush: js">var img = new Image(); +```js +var img = new Image(); img.src = './assets/rhino.jpg'; img.onload = function() { dessiner(this); @@ -131,7 +141,7 @@ function dessiner(img) { var data = imageData.data; var inversion = function() { - for (var i = 0; i < data.length; i += 4) { + for (var i = 0; i < data.length; i += 4) { data[i] = 255 - data[i]; // rouge data[i + 1] = 255 - data[i + 1]; // vert data[i + 2] = 255 - data[i + 2]; // bleu @@ -140,7 +150,7 @@ function dessiner(img) { }; var niveaudegris = function() { - for (var i = 0; i < data.length; i += 4) { + for (var i = 0; i < data.length; i += 4) { var moy = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = moy; // rouge data[i + 1] = moy; // vert @@ -154,35 +164,39 @@ function dessiner(img) { var btnniveaudegris = document.getElementById('btnniveaudegris'); btnniveaudegris.addEventListener('click', niveaudegris); } -</pre> +``` -<p>{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}</p> +{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }} -<h2 id="Zoom_et_anticrénelage">Zoom et anticrénelage</h2> +## Zoom et anticrénelage -<p>A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons zoomer sur notre image et voir les détails.</p> +A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons zoomer sur notre image et voir les détails. -<p>Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous. Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons. Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200.</p> +Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous. Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons. Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200. -<pre class="brush: js">zoomctx.drawImage(canvas, +```js +zoomctx.drawImage(canvas, Math.abs(x - 5), Math.abs(y - 5), - 10, 10, 0, 0, 200, 200);</pre> + 10, 10, 0, 0, 200, 200); +``` -<p>Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs. Vous pouvez basculer la case à cocher pour voir l'effet de la propriété <code>imageSmoothingEnabled</code> (qui a besoin de préfixes pour différents navigateurs).</p> +Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs. Vous pouvez basculer la case à cocher pour voir l'effet de la propriété `imageSmoothingEnabled` (qui a besoin de préfixes pour différents navigateurs). -<h3 id="exemple_de_zoom">Exemple de zoom</h3> +### Exemple de zoom -<pre class="brush: html hidden"><canvas id="canvas" width="300" height="227"></canvas> -<canvas id="zoom" width="300" height="227"></canvas> -<div> -<label for="smoothbtn"> - <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> +```html hidden +<canvas id="canvas" width="300" height="227"></canvas> +<canvas id="zoom" width="300" height="227"></canvas> +<div> +<label for="smoothbtn"> + <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> Enable image smoothing -</label> -</div> -</pre> +</label> +</div> +``` -<pre class="brush: js hidden">var img = new Image(); +```js hidden +var img = new Image(); img.src = './assets/rhino.jpg'; img.onload = function() { draw(this); @@ -216,36 +230,31 @@ function draw(img) { }; canvas.addEventListener('mousemove', zoom); -}</pre> +} +``` -<p>{{ EmbedLiveSample('exemple_de_zoom', 620, 490) }}</p> +{{ EmbedLiveSample('exemple_de_zoom', 620, 490) }} -<h2 id="Sauvegarde_des_images">Sauvegarde des images</h2> +## Sauvegarde des images -<p>L' {{domxref ("HTMLCanvasElement")}} fournit une méthode <code>toDataURL ()</code>, utile lors de l'enregistrement d'images. Il retourne un <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">URI de données</a> contenant une représentation de l'image dans le format spécifié par le paramètre de <code>type</code> (par défaut en <a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a> ). L'image renvoyée est dans une résolution de 96 dpi.</p> +L' {{domxref ("HTMLCanvasElement")}} fournit une méthode `toDataURL ()`, utile lors de l'enregistrement d'images. Il retourne un [URI de données](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) contenant une représentation de l'image dans le format spécifié par le paramètre de `type` (par défaut en [PNG](https://en.wikipedia.org/wiki/Portable_Network_Graphics) ). L'image renvoyée est dans une résolution de 96 dpi. -<dl> - <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}</dt> - <dd>Par défaut. Crée un image PNG.</dd> - <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}</dt> - <dd>Crée une image JPG. En option, vous pouvez fournir une qualité comprise entre 0 et 1, 1 étant de la meilleure qualité et 0 presque non reconnaissable mais de petite taille.</dd> -</dl> +- {{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}} + - : Par défaut. Crée un image PNG. +- {{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}} + - : Crée une image JPG. En option, vous pouvez fournir une qualité comprise entre 0 et 1, 1 étant de la meilleure qualité et 0 presque non reconnaissable mais de petite taille. -<p>Une fois que vous avez généré un URI de données à partir de votre canevas, vous pouvez l'utiliser comme source de {{HTMLElement ("image")}} ou le mettre dans un lien hypertexte avec un attribut de téléchargement pour l'enregistrer sur le disque par exemple.</p> +Une fois que vous avez généré un URI de données à partir de votre canevas, vous pouvez l'utiliser comme source de {{HTMLElement ("image")}} ou le mettre dans un lien hypertexte avec un attribut de téléchargement pour l'enregistrer sur le disque par exemple. -<p>Vous pouvez également créer un {{domxref ("Blob")}} à partir du canevas.</p> +Vous pouvez également créer un {{domxref ("Blob")}} à partir du canevas. -<dl> - <dt>{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}</dt> - <dd>Crée un objet <code>Blob</code> représentant l'image contenue dans le canevas.</dd> -</dl> +- {{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}} + - : Crée un objet `Blob` représentant l'image contenue dans le canevas. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("ImageData")}}</li> - <li><a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipulating video using canvas</a></li> - <li><a href="https://codepo8.github.io/canvas-images-and-pixels/">Canevas, images et pixels – par Christian Heilmann (en)</a></li> -</ul> +- {{domxref("ImageData")}} +- [Manipulating video using canvas](/fr/docs/HTML/Manipulating_video_using_canvas) +- [Canevas, images et pixels – par Christian Heilmann (en)](https://codepo8.github.io/canvas-images-and-pixels/) -<p>{{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</p> +{{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}} diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.md b/files/fr/web/api/canvas_api/tutorial/transformations/index.md index eec783769b..eb0ae18226 100644 --- a/files/fr/web/api/canvas_api/tutorial/transformations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.md @@ -10,36 +10,33 @@ tags: translation_of: Web/API/Canvas_API/Tutorial/Transformations original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations --- -<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", " Web/API/Canvas_API/Tutorial/Compositing ")}}</div> +{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", " Web/API/Canvas_API/Tutorial/Compositing ")}} -<p>Précédemment dans ce tutoriel, nous avons étudié la <a href="/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques">grille du canevas</a> et le <strong>système de coordonnées</strong>. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.</p> +Précédemment dans ce tutoriel, nous avons étudié la [grille du canevas](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques) et le **système de coordonnées**. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle. -<h2 id="Sauvegarde_et_restauration_détat">Sauvegarde et restauration d'état</h2> +## Sauvegarde et restauration d'état -<p>Avant d'étudier les méthodes de transformations, examinons deux autres méthodes qui vont être indispensables à partir du moment où l'on commence à créer des dessins complexes.</p> +Avant d'étudier les méthodes de transformations, examinons deux autres méthodes qui vont être indispensables à partir du moment où l'on commence à créer des dessins complexes. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt> - <dd>Sauvegarde l'état du canevas dans sa globalité.</dd> - <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt> - <dd>Restore le plus récent état sauvegardé du canevas.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.save", "save()")}} + - : Sauvegarde l'état du canevas dans sa globalité. +- {{domxref("CanvasRenderingContext2D.restore", "restore()")}} + - : Restore le plus récent état sauvegardé du canevas. -<p>Les états du canevas sont stockés dans une pile. Chaque invocation de la méthode <code>save() </code>ajoute une copie de l'état courant du canevas en haut de la pile. L'état du dessin est constitué de :</p> +Les états du canevas sont stockés dans une pile. Chaque invocation de la méthode `save() `ajoute une copie de l'état courant du canevas en haut de la pile. L'état du dessin est constitué de : -<ul> - <li>les transformations qui ont été appliquées (exemples : déplacement, rotation, mise à l'échelle).</li> - <li>Les valeurs actuelles des attributs suivants : {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li> - <li>Le chemin de découpe (<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths">clipping path</a>) actuel, qu'on abordera plus loin.</li> -</ul> +- les transformations qui ont été appliquées (exemples : déplacement, rotation, mise à l'échelle). +- Les valeurs actuelles des attributs suivants : {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}. +- Le chemin de découpe ([clipping path](/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths)) actuel, qu'on abordera plus loin. -<p>La méthode <code>save()</code> peut être invoquée autant de fois que nécessaire. Chaque appel de <code>restore()</code> enlève le dernier état sauvegardé de la pile et tous les paramètres sauvegardés sont restaurés.</p> +La méthode `save()` peut être invoquée autant de fois que nécessaire. Chaque appel de `restore()` enlève le dernier état sauvegardé de la pile et tous les paramètres sauvegardés sont restaurés. -<h3 id="Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas">Un exemple de sauvegarde et de restauration de l état du canevas</h3> +### Un exemple de sauvegarde et de restauration de l état du canevas -<p>Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.</p> +Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0, 0, 150, 150); // Dessine un rectangle avec les réglages par défaut @@ -58,43 +55,47 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations ctx.restore(); // Restaure l'état d'origine ctx.fillRect(60, 60, 30, 30); // Dessine un rectangle avec les réglages restaurés -}</pre> +} +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> +```js hidden +draw(); +``` -<p>La première étape consiste à dessiner un grand rectangle avec les paramètres par défaut. Ensuite, nous sauvegardons cet état et modifions la couleur de remplissage. Nous dessinons ensuite le deuxième rectangle bleu et mettons l'état de côté. Encore une fois, nous modifions certains paramètres de dessin et dessinons le troisième rectangle blanc semi-transparent.</p> +La première étape consiste à dessiner un grand rectangle avec les paramètres par défaut. Ensuite, nous sauvegardons cet état et modifions la couleur de remplissage. Nous dessinons ensuite le deuxième rectangle bleu et mettons l'état de côté. Encore une fois, nous modifions certains paramètres de dessin et dessinons le troisième rectangle blanc semi-transparent. -<p>Jusqu'à présent, cela ressemble beaucoup à ce que nous avons fait dans les sections précédentes. Cependant, une fois que nous appelons la première instruction <code>restore()</code>, l'état de dessin supérieur est supprimé de la pile et les paramètres sont restaurés. Si nous n'avions pas sauvegardé l'état en utilisant <code>save ()</code>, nous devrions modifier manuellement la couleur de remplissage et la transparence afin de revenir à l'état précédent. Cela serait facile pour deux propriétés, mais si nous avons plus que cela, notre code deviendrait très long très rapidement.</p> +Jusqu'à présent, cela ressemble beaucoup à ce que nous avons fait dans les sections précédentes. Cependant, une fois que nous appelons la première instruction `restore()`, l'état de dessin supérieur est supprimé de la pile et les paramètres sont restaurés. Si nous n'avions pas sauvegardé l'état en utilisant `save ()`, nous devrions modifier manuellement la couleur de remplissage et la transparence afin de revenir à l'état précédent. Cela serait facile pour deux propriétés, mais si nous avons plus que cela, notre code deviendrait très long très rapidement. -<p>Lorsque la deuxième instruction <code>restore()</code> est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir.</p> +Lorsque la deuxième instruction `restore()` est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir. -<p>{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "canvas_savestate.png")}}</p> +{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "canvas_savestate.png")}} -<h2 id="Déplacement">Déplacement</h2> +## Déplacement -<p>La première des méthodes de transformation que nous examinerons est <code>translate ()</code>. Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.</p> +La première des méthodes de transformation que nous examinerons est `translate ()`. Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt> - <dd>Déplace la toile et son origine sur la grille. <code>x</code> indique la distance horizontale du déplacement, et <code>y</code> indique à quelle distance déplacer la grille verticalement.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}} + - : Déplace la toile et son origine sur la grille. `x` indique la distance horizontale du déplacement, et `y` indique à quelle distance déplacer la grille verticalement. -<img alt="" src="canvas_grid_translate.png"> + -<p>C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des transformations. Dans la plupart des cas, il est plus facile d'appeler la méthode <code>restore</code> que d'avoir à effectuer un déplacement inverse pour revenir à l'état d'origine. De même, si vous déplacez à l'intérieur d'une boucle et que vous ne sauvegardez pas et ne restaurez pas l'état du canevas, il se peut qu'une partie de votre dessin soit manquante, car elle a été dessinée en dehors du bord du canevas.</p> +C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des transformations. Dans la plupart des cas, il est plus facile d'appeler la méthode `restore` que d'avoir à effectuer un déplacement inverse pour revenir à l'état d'origine. De même, si vous déplacez à l'intérieur d'une boucle et que vous ne sauvegardez pas et ne restaurez pas l'état du canevas, il se peut qu'une partie de votre dessin soit manquante, car elle a été dessinée en dehors du bord du canevas. -<h3 id="Un_exemple_translate">Un exemple <code>translate</code></h3> +### Un exemple `translate` -<p>Cet exemple montre certains des avantages du déplacement de l'origine du canevas. Sans la méthode<code> translate ()</code>, tous les rectangles seraient dessinés à la même position (0,0). La méthode <code>translate ()</code> nous donne également la liberté de placer le rectangle n'importe où sur le canevas sans avoir à ajuster manuellement les coordonnées dans la fonction <code>fillRect ()</code>. Cela le rend un peu plus facile à comprendre et à utiliser.</p> +Cet exemple montre certains des avantages du déplacement de l'origine du canevas. Sans la méthode` translate ()`, tous les rectangles seraient dessinés à la même position (0,0). La méthode `translate ()` nous donne également la liberté de placer le rectangle n'importe où sur le canevas sans avoir à ajuster manuellement les coordonnées dans la fonction `fillRect ()`. Cela le rend un peu plus facile à comprendre et à utiliser. -<p>Dans la fonction <code>draw ()</code>, nous appelons la fonction <code>fillRect ()</code> neuf fois en utilisant deux boucles <code>for</code> . Dans chaque boucle, le canevas est déplacé, le rectangle est dessiné et le canevas est retourné à son état d'origine. Notez comment l'appel à <code>fillRect ()</code> utilise les mêmes coordonnées à chaque fois, en s'appuyant sur <code>translate ()</code> pour ajuster la position du dessin.</p> +Dans la fonction `draw ()`, nous appelons la fonction `fillRect ()` neuf fois en utilisant deux boucles `for` . Dans chaque boucle, le canevas est déplacé, le rectangle est dessiné et le canevas est retourné à son état d'origine. Notez comment l'appel à `fillRect ()` utilise les mêmes coordonnées à chaque fois, en s'appuyant sur `translate ()` pour ajuster la position du dessin. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); - for (var i = 0; i < 3; i++) { - for (var j = 0; j < 3; j++) { + for (var i = 0; i < 3; i++) { + for (var j = 0; j < 3; j++) { ctx.save(); ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)'; ctx.translate(10 + j * 50, 10 + i * 50); @@ -102,37 +103,38 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations ctx.restore(); } } -}</pre> +} +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> +```js hidden +draw(); +``` +{{EmbedLiveSample("Un_exemple_translate", "160", "160", "translate.png")}} -<p>{{EmbedLiveSample("Un_exemple_translate", "160", "160", "translate.png")}}</p> +## Rotation -<h2 id="Rotation">Rotation</h2> +La seconde méthode de transformation est `rotate()`. Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle. -<p>La seconde méthode de transformation est <code>rotate()</code>. Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.</p> +- {{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}} + - : Fait pivoter le canevas, dans le sens des aiguilles d'une montre autour de l'origine actuelle, par le nombre de radians de l'angle. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}</dt> - <dd>Fait pivoter le canevas, dans le sens des aiguilles d'une montre autour de l'origine actuelle, par le nombre de radians de l'angle.</dd> -</dl> + -<img alt="" src="canvas_grid_rotate.png"> +Le point central de rotation est toujours l'origine de la toile. Pour changer le point central, nous devrons déplacer le canevas en utilisant la méthode `translate ()`. -<p>Le point central de rotation est toujours l'origine de la toile. Pour changer le point central, nous devrons déplacer le canevas en utilisant la méthode <code>translate ()</code>.</p> +### Un exemple `rotate` -<h3 id="Un_exemple_rotate">Un exemple <code>rotate</code></h3> +Dans cet exemple, nous utiliserons la méthode `rotate ()` pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de `translate ()`. -<p>Dans cet exemple, nous utiliserons la méthode <code>rotate ()</code> pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de <code>translate ()</code>.</p> +> **Note :** Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : `radians = (Math.PI/180)*degrees`. -<div class="note"> -<p><strong>Note :</strong> Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : <code>radians = (Math.PI/180)*degrees</code>.</p> -</div> - -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // rectangles de gauche, rotation depuis l'origine du canevas @@ -160,34 +162,38 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations // dessine le rectangle gris ctx.fillStyle = '#4D4E53'; ctx.fillRect(150, 30, 100, 100); -}</pre> +} +``` -<p>Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle.</p> +Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle. -<pre class="brush: html hidden"><canvas id="canvas" width="300" height="200"></canvas></pre> +```html hidden +<canvas id="canvas" width="300" height="200"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> +```js hidden +draw(); +``` -<p>{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "rotate.png")}}</p> +{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "rotate.png")}} -<h2 id="Mise_à_léchelle">Mise à l'échelle</h2> +## Mise à l'échelle -<p>La méthode de transformation suivante est la mise à l'échelle. Nous l'utilisons pour augmenter ou diminuer les unités de notre grille de canevas. Cela peut être utilisé pour dessiner des formes ou des bitmaps réduits ou agrandis.</p> +La méthode de transformation suivante est la mise à l'échelle. Nous l'utilisons pour augmenter ou diminuer les unités de notre grille de canevas. Cela peut être utilisé pour dessiner des formes ou des bitmaps réduits ou agrandis. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}</dt> - <dd>Met à l'échelle les unités du canevas avec x horizontalement et y verticalement. Les deux paramètres sont des nombres réels. Les valeurs inférieures à 1,0 réduisent la taille de l'unité et les valeurs supérieures à 1,0 augmentent la taille de l'unité. Les valeurs 1.0 laissent les unités à la même taille.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}} + - : Met à l'échelle les unités du canevas avec x horizontalement et y verticalement. Les deux paramètres sont des nombres réels. Les valeurs inférieures à 1,0 réduisent la taille de l'unité et les valeurs supérieures à 1,0 augmentent la taille de l'unité. Les valeurs 1.0 laissent les unités à la même taille. -<p>En utilisant des nombres négatifs, vous pouvez faire une mise en miroir d'axe (par exemple en utilisant <code>translate (0, canvas.height), scale (1, -1)</code>, vous aurez le système de coordonnées cartésien bien connu, avec l'origine dans le coin inférieur gauche).</p> +En utilisant des nombres négatifs, vous pouvez faire une mise en miroir d'axe (par exemple en utilisant `translate (0, canvas.height), scale (1, -1)`, vous aurez le système de coordonnées cartésien bien connu, avec l'origine dans le coin inférieur gauche). -<p>Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendrait 0,5 pixels et ainsi les formes seraient dessinées à la moitié de la taille. De la même façon, si nous définissons le facteur d'échelle sur 2.0, la taille de l'unité augmentera et une unité deviendra deux pixels. Cela donne des formes dessinées deux fois plus grandes.</p> +Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendrait 0,5 pixels et ainsi les formes seraient dessinées à la moitié de la taille. De la même façon, si nous définissons le facteur d'échelle sur 2.0, la taille de l'unité augmentera et une unité deviendra deux pixels. Cela donne des formes dessinées deux fois plus grandes. -<h3 id="Un_exemple_scale">Un exemple <code>scale</code></h3> +### Un exemple `scale` -<p>Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle.</p> +Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle. -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // dessine un rectangle simple, mais le met à l'échelle. @@ -200,55 +206,61 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations ctx.scale(-1, 1); ctx.font = '48px serif'; ctx.fillText('MDN', -135, 120); -}</pre> +} +``` + +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` + +```js hidden +draw(); +``` + +{{EmbedLiveSample("Un_exemple_scale", "160", "160", "scale.png")}} -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +## Transformation -<pre class="brush: js hidden">draw();</pre> +Enfin, les méthodes de transformation suivantes appliquent des modifications directement à la matrice de transformation. -<p>{{EmbedLiveSample("Un_exemple_scale", "160", "160", "scale.png")}}</p> +- {{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}} -<h2 id="Transformation">Transformation</h2> + - : Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par : -<p>Enfin, les méthodes de transformation suivantes appliquent des modifications directement à la matrice de transformation.</p> + <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math> -<dl> - <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt> - <dd><p>Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par : </p><math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math> - <p>Si l'un des arguments est <code>infini</code>, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.</p></dd> -</dl> + Si l'un des arguments est `infini`, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception. -<p>Les paramètres de cette fonction sont :</p> +Les paramètres de cette fonction sont : -<dl> - <dt><code>a (m11)</code></dt> - <dd>Mise à l'échelle horizontale.</dd> - <dt><em><code>b (m12)</code></em></dt> - <dd>Inclinaison horizontale.</dd> - <dt><code>c (m21)</code></dt> - <dd>Inclinaison verticale.</dd> - <dt><code>d (m22)</code></dt> - <dd>Mise à l'échelle verticale.</dd> - <dt><code>e (dx)</code></dt> - <dd>Déplacement horizontal.</dd> - <dt><code>f (dy)</code></dt> - <dd>Déplacement vertical.</dd> - <dt>{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}</dt> - <dd>Réinitialise la transformation en cours dans la matrice d'identité, puis appelle la méthode <code>transform ()</code> avec les mêmes arguments. Cela défait la transformation en cours, puis définit la transformation spécifiée, le tout en une seule étape.</dd> - <dt>{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}</dt> - <dd>Réinitialise la transformation en cours à la matrice d'identité. C'est la même chose que d'appeler : <code>ctx.setTransform (1, 0, 0, 1, 0, 0)</code>;</dd> -</dl> +- `a (m11)` + - : Mise à l'échelle horizontale. +- _`b (m12)`_ + - : Inclinaison horizontale. +- `c (m21)` + - : Inclinaison verticale. +- `d (m22)` + - : Mise à l'échelle verticale. +- `e (dx)` + - : Déplacement horizontal. +- `f (dy)` + - : Déplacement vertical. +- {{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}} + - : Réinitialise la transformation en cours dans la matrice d'identité, puis appelle la méthode `transform ()` avec les mêmes arguments. Cela défait la transformation en cours, puis définit la transformation spécifiée, le tout en une seule étape. +- {{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}} + - : Réinitialise la transformation en cours à la matrice d'identité. C'est la même chose que d'appeler : `ctx.setTransform (1, 0, 0, 1, 0, 0)`; -<h3 id="Exemple_pour_transform_et_setTransform">Exemple pour <code>transform</code> et <code>setTransform</code></h3> +### Exemple pour `transform` et `setTransform` -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var sin = Math.sin(Math.PI / 6); var cos = Math.cos(Math.PI / 6); ctx.translate(100, 100); var c = 0; - for (var i = 0; i <= 12; i++) { + for (var i = 0; i <= 12; i++) { c = Math.floor(255 / 12 * i); ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')'; ctx.fillRect(0, 0, 100, 10); @@ -258,12 +270,17 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations ctx.setTransform(-1, 0, 0, 1, 100, 100); ctx.fillStyle = 'rgba(255, 128, 255, 0.5)'; ctx.fillRect(0, 50, 100, 100); -}</pre> +} +``` -<pre class="brush: html hidden"><canvas id="canvas" width="200" height="250"></canvas></pre> +```html hidden +<canvas id="canvas" width="200" height="250"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> +```js hidden +draw(); +``` -<p>{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "canvas_transform.png")}}</p> +{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "canvas_transform.png")}} -<p>{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}</p> +{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}} 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 cd72e968a9..358204912c 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 @@ -10,99 +10,93 @@ tags: translation_of: Web/API/Canvas_API/Tutorial/Using_images original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_d'images --- -<p>{{CanvasSidebar}}{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p> +{{CanvasSidebar}}{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}} -<p>Jusqu'à présent, nous avons créé nos propres <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">formes</a> et <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">styles appliqués</a>. L'une des fonctionnalités les plus intéressantes de <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des <i>sprites</i> dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source !</p> +Jusqu'à présent, nous avons créé nos propres [formes](/fr/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) et [styles appliqués](/fr/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors). L'une des fonctionnalités les plus intéressantes de [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des _sprites_ dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source ! -<p>L'importation d'images dans un canevas se déroule en deux étapes :</p> +L'importation d'images dans un canevas se déroule en deux étapes : -<ol> - <li>L'obtention d'une référence à un objet <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a> ou à un autre élément canvas en tant que source. Il est également possible d'utiliser des images en fournissant une URL.</li> - <li>Le dessin de l'image à l'aide de la fonction <code>drawImage()</code> .</li> -</ol> +1. L'obtention d'une référence à un objet [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement) ou à un autre élément canvas en tant que source. Il est également possible d'utiliser des images en fournissant une URL. +2. Le dessin de l'image à l'aide de la fonction `drawImage()` . -<p>Voyons comment faire.</p> +Voyons comment faire. -<h2 id="getting_images_to_draw">Obtenir des images à dessiner</h2> +## Obtenir des images à dessiner -<p>L'API Canvas peut utiliser l'un des types de données suivants comme source d'image :</p> +L'API Canvas peut utiliser l'un des types de données suivants comme source d'image : -<dl> - <dt><a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a></dt> - <dd>Il s'agit d'images créées à l'aide du constructeur <code>Image()</code>, ainsi que de tout élément HTML <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>.</dd> - <dt><a href="/fr/docs/Web/API/SVGImageElement"><code>SVGImageElement</code></a></dt> - <dd>Ce sont des images incorporées en utilisant l'élément SVG <a href="/fr/docs/Web/SVG/Element/image"><code><image></code></a>.</dd> - <dt><a href="/fr/docs/Web/API/HTMLVideoElement"><code>HTMLVideoElement</code></a></dt> - <dd>L'utilisation d'un élément HTML <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a> comme source d'image capture l'image actuelle de la vidéo et l'utilise comme une image.</dd> - <dt><a href="/fr/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a></dt> - <dd>Vous pouvez utiliser un autre élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> comme source d'image.</dd> -</dl> +- [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement) + - : Il s'agit d'images créées à l'aide du constructeur `Image()`, ainsi que de tout élément HTML [`<img>`](/fr/docs/Web/HTML/Element/Img). +- [`SVGImageElement`](/fr/docs/Web/API/SVGImageElement) + - : Ce sont des images incorporées en utilisant l'élément SVG [`<image>`](/fr/docs/Web/SVG/Element/image). +- [`HTMLVideoElement`](/fr/docs/Web/API/HTMLVideoElement) + - : L'utilisation d'un élément HTML [`<video>`](/fr/docs/Web/HTML/Element/video) comme source d'image capture l'image actuelle de la vidéo et l'utilise comme une image. +- [`HTMLCanvasElement`](/fr/docs/Web/API/HTMLCanvasElement) + - : Vous pouvez utiliser un autre élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) comme source d'image. -<p>Ces sources sont collectivement référencées par le type <a href="/fr/docs/Web/API/CanvasImageSource"><code>CanvasImageSource</code></a>.</p> +Ces sources sont collectivement référencées par le type [`CanvasImageSource`](/fr/docs/Web/API/CanvasImageSource). -<p>Il existe plusieurs façons d'obtenir des images pour une utilisation sur un canevas.</p> +Il existe plusieurs façons d'obtenir des images pour une utilisation sur un canevas. -<h3 id="using_images_from_the_same_page">Utilisation d'images présentes sur la même page</h3> +### Utilisation d'images présentes sur la même page -<p>Nous pouvons obtenir une référence aux images sur la même page que le canevas en utilisant l'un des éléments suivants :</p> +Nous pouvons obtenir une référence aux images sur la même page que le canevas en utilisant l'un des éléments suivants : -<ul> - <li>La collection <a href="/fr/docs/Web/API/Document/images"><code>document.images</code></a> ;</li> - <li>La méthode <a href="/fr/docs/Web/API/Document/getElementsByTagName"><code>document.getElementsByTagName()</code></a> ;</li> - <li>Si vous connaissez l'identifiant de l'image spécifique que vous souhaitez utiliser, vous pouvez utiliser <a href="/fr/docs/Web/API/Document/getElementById"><code>document.getElementById()</code></a> pour retrouver cette image.</li> -</ul> +- La collection [`document.images`](/fr/docs/Web/API/Document/images) ; +- La méthode [`document.getElementsByTagName()`](/fr/docs/Web/API/Document/getElementsByTagName) ; +- Si vous connaissez l'identifiant de l'image spécifique que vous souhaitez utiliser, vous pouvez utiliser [`document.getElementById()`](/fr/docs/Web/API/Document/getElementById) pour retrouver cette image. -<h3 id="using_images_from_other_domains">Utilisation d'images d'un autre domaine</h3> +### Utilisation d'images d'un autre domaine -<p>En utilisant l'attribut <a href="/fr/docs/Web/HTML/Element/Img#attr-crossorigin"><code>crossorigin</code></a> d'un élément <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> (reflété par la propriété <a href="/fr/docs/Web/API/HTMLImageElement/crossOrigin"><code>HTMLImageElement.crossOrigin</code></a>), vous pouvez demander la permission de charger une image d'un autre domaine pour l'utiliser dans votre appel à <code>drawImage()</code>. Si le domaine d'hébergement permet un accès interdomaine à l'image, l'image peut être utilisée dans votre canevas sans l'altérer; sinon utiliser l'image va <a href="/fr/docs/Web/HTML/CORS_enabled_image#what_is_a_.22tainted.22_canvas.3f">corrompre le canevas</a>.</p> +En utilisant l'attribut [`crossorigin`](/fr/docs/Web/HTML/Element/Img#attr-crossorigin) d'un élément [`<img>`](/fr/docs/Web/HTML/Element/Img) (reflété par la propriété [`HTMLImageElement.crossOrigin`](/fr/docs/Web/API/HTMLImageElement/crossOrigin)), vous pouvez demander la permission de charger une image d'un autre domaine pour l'utiliser dans votre appel à `drawImage()`. Si le domaine d'hébergement permet un accès interdomaine à l'image, l'image peut être utilisée dans votre canevas sans l'altérer; sinon utiliser l'image va [corrompre le canevas](/fr/docs/Web/HTML/CORS_enabled_image#what_is_a_.22tainted.22_canvas.3f). -<h3 id="using_other_canvas_elements">Utilisation d'autres éléments canvas</h3> +### Utilisation d'autres éléments canvas -<p>Comme pour les images normales, nous accédons aux autres éléments <code><canvas></code> en utilisant la méthode <a href="/fr/docs/Web/API/Document/getElementsByTagName"><code>document.getElementsByTagName()</code></a> ou <a href="/fr/docs/Web/API/Document/getElementById"><code>document.getElementById()</code></a>. Assurez-vous d'avoir dessiné quelque chose sur le canevas source avant de l'utiliser dans votre canevas cible.</p> +Comme pour les images normales, nous accédons aux autres éléments `<canvas>` en utilisant la méthode [`document.getElementsByTagName()`](/fr/docs/Web/API/Document/getElementsByTagName) ou [`document.getElementById()`](/fr/docs/Web/API/Document/getElementById). Assurez-vous d'avoir dessiné quelque chose sur le canevas source avant de l'utiliser dans votre canevas cible. -<p>Une des utilisations les plus pratiques de cette fonctionnalité serait d'utiliser un second élément canvas comme aperçu de taille réduite d'un canevas de grande taille.</p> +Une des utilisations les plus pratiques de cette fonctionnalité serait d'utiliser un second élément canvas comme aperçu de taille réduite d'un canevas de grande taille. -<h3 id="creating_an_image_from_scratch">Création d'une image à partir de rien</h3> +### Création d'une image à partir de rien -<p>Une autre option est de créer de nouveaux objets <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a> dans le script même. Pour ce faire, vous pouvez utiliser le constructeur <code>Image()</code>.</p> +Une autre option est de créer de nouveaux objets [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement) dans le script même. Pour ce faire, vous pouvez utiliser le constructeur `Image()`. -<pre class="brush: js"> +```js let img = new Image(); // Crée un nouvel élément Image img.src = 'myImage.png'; // Définit le chemin vers sa source -</pre> +``` -<p>Lorsque ce script est exécuté, l'image commence à être chargée.</p> +Lorsque ce script est exécuté, l'image commence à être chargée. -<p>Si vous essayez d'appeler <code>drawImage()</code> avant le chargement de l'image, il ne fera rien (ou, dans les anciens navigateurs, cela pourra même déclencher une exception). Utilisez donc l'événement <code>load</code> pour ne pas dessiner avant que l'image ne soit chargée :</p> +Si vous essayez d'appeler `drawImage()` avant le chargement de l'image, il ne fera rien (ou, dans les anciens navigateurs, cela pourra même déclencher une exception). Utilisez donc l'événement `load` pour ne pas dessiner avant que l'image ne soit chargée : -<pre class="brush: js"> +```js let img = new Image(); // Crée un nouvel élément img img.addEventListener('load', function() { // exécute les instructions drawImage ici }, false); img.src = 'myImage.png'; // définit le chemin de la source -</pre> +``` -<p>Si vous n'utilisez qu'une image externe, cela peut être une bonne approche, mais une fois que vous avez besoin de gérer plus d'une image, vous devrez recourir à quelque chose de plus astucieux. Nous ne verrons pas les stratégies de préchargement dans ce tutoriel, toutefois, gardez à l'esprit l'éventuelle nécessité de ces techniques.</p> +Si vous n'utilisez qu'une image externe, cela peut être une bonne approche, mais une fois que vous avez besoin de gérer plus d'une image, vous devrez recourir à quelque chose de plus astucieux. Nous ne verrons pas les stratégies de préchargement dans ce tutoriel, toutefois, gardez à l'esprit l'éventuelle nécessité de ces techniques. -<h3 id="embedding_an_image_via_data_url">Intégration d'une image via une URL de données</h3> +### Intégration d'une image via une URL de données -<p>Un autre moyen possible d'inclure des images consiste à utiliser les <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">URL de données (<code>data: url</code>)</a>. Les URL de données vous permettent de définir complètement une image en tant que chaîne de caractères codée en Base64 directement dans votre code.</p> +Un autre moyen possible d'inclure des images consiste à utiliser les [URL de données (`data: url`)](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs). Les URL de données vous permettent de définir complètement une image en tant que chaîne de caractères codée en Base64 directement dans votre code. -<pre class="brush: js"> +```js let img = new Image(); // Crée un nouvel élément img img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='; -</pre> +``` -<p>L'un des avantages des URL de données est que l'image résultante est disponible immédiatement, sans autre aller-retour au serveur. Cela permet également d'encapsuler dans un fichier tous vos <a href="/fr/docs/Web/CSS">CSS</a>, <a href="/fr/docs/Web/JavaScript">JavaScript</a>, <a href="/fr/docs/Web/HTML">HTML</a> et images, ce qui les rend plus portables vers d'autres endroits.</p> +L'un des avantages des URL de données est que l'image résultante est disponible immédiatement, sans autre aller-retour au serveur. Cela permet également d'encapsuler dans un fichier tous vos [CSS](/fr/docs/Web/CSS), [JavaScript](/fr/docs/Web/JavaScript), [HTML](/fr/docs/Web/HTML) et images, ce qui les rend plus portables vers d'autres endroits. -<p>Certains inconvénients de cette méthode sont que votre image n'est pas mise en cache, et que, pour les grandes images, l'URL encodée peut devenir assez longue.</p> +Certains inconvénients de cette méthode sont que votre image n'est pas mise en cache, et que, pour les grandes images, l'URL encodée peut devenir assez longue. -<h3 id="using_frames_from_a_video">Utilisation des images d'une vidéo</h3> +### Utilisation des images d'une vidéo -<p>Vous pouvez également utiliser les images d'une vidéo présentée par un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a> (même si la vidéo n'est pas visible). Par exemple, si vous avez un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a> avec l'identifiant <code>myvideo</code>, vous pouvez faire :</p> +Vous pouvez également utiliser les images d'une vidéo présentée par un élément [`<video>`](/fr/docs/Web/HTML/Element/video) (même si la vidéo n'est pas visible). Par exemple, si vous avez un élément [`<video>`](/fr/docs/Web/HTML/Element/video) avec l'identifiant `myvideo`, vous pouvez faire : -<pre class="brush: js"> +```js function getMyVideo() { let canvas = document.getElementById('canvas'); if (canvas.getContext) { @@ -111,36 +105,32 @@ function getMyVideo() { return document.getElementById('myvideo'); } } -</pre> +``` -<p>Cela renvoie l'objet <a href="/fr/docs/Web/API/HTMLVideoElement"><code>HTMLVideoElement</code></a> pour la vidéo, qui, comme décrit précédemment, est l'un des objets pouvant être utilisé comme <code>CanvasImageSource</code>.</p> +Cela renvoie l'objet [`HTMLVideoElement`](/fr/docs/Web/API/HTMLVideoElement) pour la vidéo, qui, comme décrit précédemment, est l'un des objets pouvant être utilisé comme `CanvasImageSource`. -<h2 id="drawImage">Dessin d'images</h2> +## Dessin d'images -<p>Une fois la référence à l'objet image source obtenue, on peut utiliser la méthode <code>drawImage()</code> pour l'afficher sur le canevas. Comme nous le verrons plus tard, la méthode <code>drawImage()</code> est surchargée et possède trois variantes différentes. Dans sa forme la plus basique, elle ressemble à ceci :</p> +Une fois la référence à l'objet image source obtenue, on peut utiliser la méthode `drawImage()` pour l'afficher sur le canevas. Comme nous le verrons plus tard, la méthode `drawImage()` est surchargée et possède trois variantes différentes. Dans sa forme la plus basique, elle ressemble à ceci : -<dl> - <dt><a href="/fr/docs/Web/API/CanvasRenderingContext2D/drawImage"><code>drawImage(image, x, y)</code></a></dt> - <dd>Dessine le <code>CanvasImageSource</code> spécifié par le paramètre <code>image</code> aux coordonnées (<code>x</code>, <code>y</code>).</dd> -</dl> +- [`drawImage(image, x, y)`](/fr/docs/Web/API/CanvasRenderingContext2D/drawImage) + - : Dessine le `CanvasImageSource` spécifié par le paramètre `image` aux coordonnées (`x`, `y`). -<div class="note"> -<p><strong>Note :</strong> Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine <code><svg></code>.</p> -</div> +> **Note :** Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine `<svg>`. -<h3 id="example_a_simple_line_graph">Exemple : un graphique linéaire simple</h3> +### Exemple : un graphique linéaire simple -<p>Dans l'exemple suivant, nous utiliserons une image externe comme fond pour un petit graphique linéaire. L'utilisation d'images de fond peut rendre vos scripts considérablement plus légers puisqu'il n'est alors pas nécessaire de dessiner des arrières-plans élaborés. Une seule image est utilisée ici, on utilise donc le gestionnaire d'évènement <code>load</code> de l'objet image pour lancer les instructions de dessin. La méthode <code>drawImage()</code> place l'image de fond aux coordonnées (0,0), soit le coin supérieur gauche du canevas.</p> +Dans l'exemple suivant, nous utiliserons une image externe comme fond pour un petit graphique linéaire. L'utilisation d'images de fond peut rendre vos scripts considérablement plus légers puisqu'il n'est alors pas nécessaire de dessiner des arrières-plans élaborés. Une seule image est utilisée ici, on utilise donc le gestionnaire d'évènement `load` de l'objet image pour lancer les instructions de dessin. La méthode `drawImage()` place l'image de fond aux coordonnées (0,0), soit le coin supérieur gauche du canevas. -<pre class="brush: html hidden"> -<html> - <body onload="draw();"> - <canvas id="canvas" width="180" height="150"></canvas> - </body> -</html> -</pre> +```html hidden +<html> + <body onload="draw();"> + <canvas id="canvas" width="180" height="150"></canvas> + </body> +</html> +``` -<pre class="brush: js"> +```js function draw() { console.log("tt"); let ctx = document.getElementById('canvas').getContext('2d'); @@ -156,88 +146,82 @@ function draw() { }; img.src = 'backdrop.png'; } -</pre> +``` -<p>Le graphique résultant ressemble à ceci :</p> +Le graphique résultant ressemble à ceci : -<p>{{EmbedLiveSample("example_a_simple_line_graph", 220, 160, "canvas_backdrop.png")}}</p> +{{EmbedLiveSample("example_a_simple_line_graph", 220, 160, "canvas_backdrop.png")}} -<h2 id="scaling">Mise à l'échelle</h2> +## Mise à l'échelle -<p>La seconde variante de la méthode <code>drawImage()</code> ajoute deux paramètres supplémentaires et permet de placer des images redimensionnées sur le canevas.</p> +La seconde variante de la méthode `drawImage()` ajoute deux paramètres supplémentaires et permet de placer des images redimensionnées sur le canevas. -<dl> - <dt><a href="/fr/docs/Web/API/CanvasRenderingContext2D/drawImage"><code>drawImage(image, x, y, width, height)</code></a></dt> - <dd>Cette variante ajoute les paramètres <code>width</code> et <code>height</code> qui indiquent la taille à laquelle mettre à l'échelle l'image lorsqu'elle est dessinée sur le canevas.</dd> -</dl> +- [`drawImage(image, x, y, width, height)`](/fr/docs/Web/API/CanvasRenderingContext2D/drawImage) + - : Cette variante ajoute les paramètres `width` et `height` qui indiquent la taille à laquelle mettre à l'échelle l'image lorsqu'elle est dessinée sur le canevas. -<h3 id="example_tiling_an_image">Exemple : mosaïque à partir d'une image</h3> +### Exemple : mosaïque à partir d'une image -<p>Dans cet exemple, nous utiliserons une image comme fond d'écran en la répétant plusieurs fois sur le canevas. Cette opération est réalisée simplement en faisant une boucle qui place l'image redimensionnée à différentes positions. Dans le code ci-dessous, la première boucle <code>for</code> s'occupe des lignes alors que la seconde gère les colonnes. L'image est redimensionnée à un tiers de sa taille originale, ce qui fait 50×38 pixels.</p> +Dans cet exemple, nous utiliserons une image comme fond d'écran en la répétant plusieurs fois sur le canevas. Cette opération est réalisée simplement en faisant une boucle qui place l'image redimensionnée à différentes positions. Dans le code ci-dessous, la première boucle `for` s'occupe des lignes alors que la seconde gère les colonnes. L'image est redimensionnée à un tiers de sa taille originale, ce qui fait 50×38 pixels. -<div class="note"> -<p><strong>Note :</strong> Les images peuvent devenir floues lorsqu'elles sont agrandies ou granuleuses si elles sont réduites. Il vaut mieux ne pas redimensionner une image contenant du texte devant rester lisible.</p> -</div> +> **Note :** Les images peuvent devenir floues lorsqu'elles sont agrandies ou granuleuses si elles sont réduites. Il vaut mieux ne pas redimensionner une image contenant du texte devant rester lisible. -<pre class="brush: html hidden"> -<html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> -</html> -</pre> +```html hidden +<html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +``` -<pre class="brush: js"> +```js function draw() { let ctx = document.getElementById('canvas').getContext('2d'); let img = new Image(); img.onload = function() { - for (let i = 0; i < 4; i++) { - for (let j = 0; j < 3; j++) { + for (let i = 0; i < 4; i++) { + for (let j = 0; j < 3; j++) { ctx.drawImage(img, j * 50, i * 38, 50, 38); } } }; img.src = 'rhino.jpg'; } -</pre> +``` -<p>Le canevas résultant ressemble à ceci :</p> +Le canevas résultant ressemble à ceci : -<p>{{EmbedLiveSample("example_tiling_an_image", 160, 160, "canvas_scale_image.png")}}</p> +{{EmbedLiveSample("example_tiling_an_image", 160, 160, "canvas_scale_image.png")}} -<h2 id="slicing">Découpage</h2> +## Découpage -<p>La troisième et dernière variante de la méthode <code>drawImage()</code> possède huit nouveaux paramètres. On peut l'utiliser pour découper des parties d'une image source et les afficher sur le canevas.</p> +La troisième et dernière variante de la méthode `drawImage()` possède huit nouveaux paramètres. On peut l'utiliser pour découper des parties d'une image source et les afficher sur le canevas. -<dl> - <dt><a href="/fr/docs/Web/API/CanvasRenderingContext2D/drawImage"><code>drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)</code></a></dt> - <dd>Cette fonction prend la zone de l'<code>image</code> source spécifiée par le rectangle dont le coin en haut à gauche est (<code>sx</code>, <code>sy</code>) et dont la largeur et la hauteur sont <code>sWidth</code> et <code>sHeight</code> puis dessine cette portion de l'image dans le canevas en le plaçant sur le canevas (aux coordonnées <code>dx</code>, <code>dy</code>) et le redimensionne à la taille spécifiée par <code>dWidth</code> et <code>dHeight</code>.</dd> -</dl> +- [`drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)`](/fr/docs/Web/API/CanvasRenderingContext2D/drawImage) + - : Cette fonction prend la zone de l'`image` source spécifiée par le rectangle dont le coin en haut à gauche est (`sx`, `sy`) et dont la largeur et la hauteur sont `sWidth` et `sHeight` puis dessine cette portion de l'image dans le canevas en le plaçant sur le canevas (aux coordonnées `dx`, `dy`) et le redimensionne à la taille spécifiée par `dWidth` et `dHeight`. -<p>Pour vraiment comprendre ce que cela fait, il peut être utile de regarder l'image qui suit. Les quatre premiers paramètres définissent l'emplacement et la taille du morceau de l'image source. Les quatre derniers paramètres définissent le rectangle dans lequel dessiner l'image sur le canevas de destination.</p> +Pour vraiment comprendre ce que cela fait, il peut être utile de regarder l'image qui suit. Les quatre premiers paramètres définissent l'emplacement et la taille du morceau de l'image source. Les quatre derniers paramètres définissent le rectangle dans lequel dessiner l'image sur le canevas de destination. -<img alt="Un schéma avec l'image source et le canevas destination qui illustre les rôles de chacun des paramètres." src="canvas_drawimage.jpg"> + -<p>Le découpage peut être un outil utile pour réaliser des compositions. Vous pouvez disposer tous les éléments dans un seul fichier image et utiliser cette méthode pour composer un dessin complet. Par exemple, si vous voulez réaliser un graphique, vous pouvez utiliser une image PNG contenant tout le texte nécessaire dans un seul fichier et, selon vos données, changer l'échelle de votre graphique sans trop de difficultés. Un autre avantage est qu'il n'est pas nécessaire de charger chaque image individuellement.</p> +Le découpage peut être un outil utile pour réaliser des compositions. Vous pouvez disposer tous les éléments dans un seul fichier image et utiliser cette méthode pour composer un dessin complet. Par exemple, si vous voulez réaliser un graphique, vous pouvez utiliser une image PNG contenant tout le texte nécessaire dans un seul fichier et, selon vos données, changer l'échelle de votre graphique sans trop de difficultés. Un autre avantage est qu'il n'est pas nécessaire de charger chaque image individuellement. -<h3 id="example_framing_an_image">Exemple : encadrer une image</h3> +### Exemple : encadrer une image -<p>Dans cet exemple, nous utiliserons le même rhinocéros que plus haut, mais sa tête sera coupée et composée avec un cadre. L'image du cadre fournit une ombre portée qui a été enregistrée dans une image PNG 24 bits. Comme les images PNG 24 bits comportent un canal alpha complet de 8 bits, contrairement aux images GIF et PNG 8 bits, elle peut être placée sur n'importe quel fond sans avoir à se préoccuper de la couleur de transition.</p> +Dans cet exemple, nous utiliserons le même rhinocéros que plus haut, mais sa tête sera coupée et composée avec un cadre. L'image du cadre fournit une ombre portée qui a été enregistrée dans une image PNG 24 bits. Comme les images PNG 24 bits comportent un canal alpha complet de 8 bits, contrairement aux images GIF et PNG 8 bits, elle peut être placée sur n'importe quel fond sans avoir à se préoccuper de la couleur de transition. -<pre class="brush: html"> -<html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - <div style="display:none;"> - <img id="source" src="rhino.jpg" width="300" height="227"> - <img id="frame" src="canvas_picture_frame.png" width="132" height="150"> - </div> - </body> -</html> -</pre> +```html +<html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + <div style="display:none;"> + <img id="source" src="rhino.jpg" width="300" height="227"> + <img id="frame" src="canvas_picture_frame.png" width="132" height="150"> + </div> + </body> +</html> +``` -<pre class="brush: js"> +```js function draw() { let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); @@ -249,47 +233,47 @@ function draw() { // On dessine le cadre ctx.drawImage(document.getElementById('frame'), 0, 0); } -</pre> +``` -<p>Nous avons pris une approche différente pour charger les images cette fois. Au lieu de les charger en créant de nouveaux objets <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a>, nous les avons incluses comme balises <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> 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 <a href="/fr/docs/Web/CSS/display"><code>display</code></a> qui vaut <code>none</code>.</p> +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`. -<p>{{EmbedLiveSample("example_framing_an_image", 160, 160, "canvas_drawimage2.jpg")}}</p> +{{EmbedLiveSample("example_framing_an_image", 160, 160, "canvas_drawimage2.jpg")}} -<p>Chaque <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> se voit attribuer un attribut <code>id</code>, ce qui facilite leur sélection en utilisant <a href="/fr/docs/Web/API/Document/getElementById"><code>document.getElementById()</code></a>. Nous utilisons <code>drawImage()</code> 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 <code>drawImage()</code>.</p> +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()`. -<h2 id="art_gallery_example">Exemple d'une galerie d'art</h2> +## Exemple d'une galerie d'art -<p>Dans le dernier exemple de ce chapitre, nous présenterons une petite galerie d'art. Cette galerie est constituée d'un tableau contenant plusieurs images. Lorsque la page est chargée, un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> est inséré pour chaque image et un cadre est dessiné autour.</p> +Dans le dernier exemple de ce chapitre, nous présenterons une petite galerie d'art. Cette galerie est constituée d'un tableau contenant plusieurs images. Lorsque la page est chargée, un élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) est inséré pour chaque image et un cadre est dessiné autour. -<p>Dans notre cas, toutes les images ont une largeur et une hauteur fixes, ainsi que le cadre qui sera dessiné autour. Le script pourrait être amélioré afin d'utiliser la largeur et la hauteur de l'image pour que le cadre s'adapte parfaitement à ses dimensions.</p> +Dans notre cas, toutes les images ont une largeur et une hauteur fixes, ainsi que le cadre qui sera dessiné autour. Le script pourrait être amélioré afin d'utiliser la largeur et la hauteur de l'image pour que le cadre s'adapte parfaitement à ses dimensions. -<p>Dans le code qui suit, nous parcourons le conteneur <a href="/fr/docs/Web/API/Document/images"><code>document.images</code></a> et nous ajoutons de nouveaux éléments canvas. La seule chose notable est probablement l'utilisation de la méthode <a href="/fr/docs/Web/API/Node/insertBefore"><code>Node.insertBefore</code></a>. <code>insertBefore()</code> est une méthode du nœud parent (une cellule de tableau) de l'élément (l'image) avant lequel on désire insérer le nouveau nœud (l'élément <code>canvas</code>).</p> +Dans le code qui suit, nous parcourons le conteneur [`document.images`](/fr/docs/Web/API/Document/images) et nous ajoutons de nouveaux éléments canvas. La seule chose notable est probablement l'utilisation de la méthode [`Node.insertBefore`](/fr/docs/Web/API/Node/insertBefore). `insertBefore()` est une méthode du nœud parent (une cellule de tableau) de l'élément (l'image) avant lequel on désire insérer le nouveau nœud (l'élément `canvas`). -<pre class="brush: html"> -<html> - <body onload="draw();"> - <table> - <tr> - <td><img src="gallery_1.jpg"></td> - <td><img src="gallery_2.jpg"></td> - <td><img src="gallery_3.jpg"></td> - <td><img src="gallery_4.jpg"></td> - </tr> - <tr> - <td><img src="gallery_5.jpg"></td> - <td><img src="gallery_6.jpg"></td> - <td><img src="gallery_7.jpg"></td> - <td><img src="gallery_8.jpg"></td> - </tr> - </table> - <img id="frame" src="canvas_picture_frame.png" width="132" height="150"> - </body> -</html> -</pre> +```html +<html> + <body onload="draw();"> + <table> + <tr> + <td><img src="gallery_1.jpg"></td> + <td><img src="gallery_2.jpg"></td> + <td><img src="gallery_3.jpg"></td> + <td><img src="gallery_4.jpg"></td> + </tr> + <tr> + <td><img src="gallery_5.jpg"></td> + <td><img src="gallery_6.jpg"></td> + <td><img src="gallery_7.jpg"></td> + <td><img src="gallery_8.jpg"></td> + </tr> + </table> + <img id="frame" src="canvas_picture_frame.png" width="132" height="150"> + </body> +</html> +``` -<p>Voici la feuille de style CSS pour mettre en forme :</p> +Voici la feuille de style CSS pour mettre en forme : -<pre class="brush: css"> +```css body { background: 0 -100px repeat-x url(bg_gallery.png) #4F191A; margin: 10px; @@ -306,15 +290,15 @@ table { td { padding: 15px; } -</pre> +``` -<p>Relions l'ensemble avec du JavaScript qui permettra de dessiner les images encadrées :</p> +Relions l'ensemble avec du JavaScript qui permettra de dessiner les images encadrées : -<pre class="brush: js"> +```js function draw() { // Boucle à travers toutes les images - for (let i = 0; i < document.images.length; i++) { + for (let i = 0; i < document.images.length; i++) { // N'ajoute pas de canevas pour l'image du cadre if (document.images[i].getAttribute('id') != 'frame') { @@ -337,19 +321,19 @@ function draw() { } } } -</pre> +``` -<p>{{EmbedLiveSample("art_gallery_example", 725, 400)}}</p> +{{EmbedLiveSample("art_gallery_example", 725, 400)}} -<h2 id="controlling_image_scaling_behavior">Contrôler la mise à l'échelle de l'image</h2> +## Contrôler la mise à l'échelle de l'image -<p>Comme mentionné précédemment, la mise à l'échelle des images peut entraîner des objets flous ou granuleux en raison du processus de redimensionnement. Vous pouvez utiliser la propriété <a href="/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled"><code>imageSmoothingEnabled</code></a> du contexte de dessin pour contrôler l'utilisation des algorithmes de lissage d'image lors du redimensionnement des images dans votre contexte. Par défaut, cette propriété vaut <code>true</code>, ce qui signifie que les images seront lissées lors du redimensionnement. Cette fonctionnalité peut être désactivée ainsi :</p> +Comme mentionné précédemment, la mise à l'échelle des images peut entraîner des objets flous ou granuleux en raison du processus de redimensionnement. Vous pouvez utiliser la propriété [`imageSmoothingEnabled`](/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled) du contexte de dessin pour contrôler l'utilisation des algorithmes de lissage d'image lors du redimensionnement des images dans votre contexte. Par défaut, cette propriété vaut `true`, ce qui signifie que les images seront lissées lors du redimensionnement. Cette fonctionnalité peut être désactivée ainsi : -<pre class="brush: js"> +```js ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false; -</pre> +``` -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p> +{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}} diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.md b/files/fr/web/api/canvasgradient/addcolorstop/index.md index f88d7413a9..7af56a60ec 100644 --- a/files/fr/web/api/canvasgradient/addcolorstop/index.md +++ b/files/fr/web/api/canvasgradient/addcolorstop/index.md @@ -9,38 +9,37 @@ tags: - Reference translation_of: Web/API/CanvasGradient/addColorStop --- -<div>{{APIRef("Canvas API")}}</div> +{{APIRef("Canvas API")}} -<p>La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un <code>décalage</code> et une <code>couleur</code>, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("<color>")}} CSS, une erreur SYNTAX_ERR est générée.</p> +La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un `décalage` et une `couleur`, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("<color>")}} CSS, une erreur SYNTAX_ERR est générée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>gradient</em>.addColorStop(décalage, couleur);</var> -</pre> + void gradient.addColorStop(décalage, couleur); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>décalage</dt> - <dd>Un nombre entre 0 et 1. Une erreur INDEX_SIZE_ERR est générée, si le nombre n'est pas dans cette plage.</dd> - <dt>couleur</dt> - <dd>Une {{cssxref ("<color>")}} CSS. Une erreur SYNTAX_ERR est générée, si la valeur ne peut pas être analysée en tant que valeur <color> CSS.</dd> -</dl> +- décalage + - : Un nombre entre 0 et 1. Une erreur INDEX_SIZE_ERR est générée, si le nombre n'est pas dans cette plage. +- couleur + - : Une {{cssxref ("<color>")}} CSS. Une erreur SYNTAX_ERR est générée, si la valeur ne peut pas être analysée en tant que valeur \<color> CSS. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_addColorStop">Utilisation de la méthode <code>addColorStop</code> </h3> +### Utilisation de la méthode `addColorStop` -<p>Il s'agit seulement d'un simple fragment de code qui utilise la méthode <code>addColorStop</code> avec un objet {{domxref("CanvasGradient")}}.</p> +Il s'agit seulement d'un simple fragment de code qui utilise la méthode `addColorStop` avec un objet {{domxref("CanvasGradient")}}. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> +```html +<canvas id="canevas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canevas = document.getElementById('canevas'); +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); var degrade = ctx.createLinearGradient(0, 0, 200, 0); @@ -48,26 +47,28 @@ degrade.addColorStop(0, 'green'); degrade.addColorStop(1, 'white'); ctx.fillStyle = degrade; ctx.fillRect(10, 10, 200, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> var gradient = ctx.createLinearGradient(0,0,200,0); gradient.addColorStop(0,"green"); gradient.addColorStop(1,"white"); ctx.fillStyle = gradient; -ctx.fillRect(10,10,200,100);</textarea> -</pre> +ctx.fillRect(10,10,200,100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -90,35 +91,22 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasGradient.addColorStop")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface ladéfinissant, {{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 360) }} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasGradient.addColorStop")}} + +## Voir aussi + +- L'interface ladéfinissant, {{domxref("CanvasGradient")}} +- {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} +- {{domxref("CanvasRenderingContext2D.createRadialGradient()")}} diff --git a/files/fr/web/api/canvasgradient/index.md b/files/fr/web/api/canvasgradient/index.md index c3422b011a..be3e32d89c 100644 --- a/files/fr/web/api/canvasgradient/index.md +++ b/files/fr/web/api/canvasgradient/index.md @@ -10,49 +10,32 @@ tags: - Reference translation_of: Web/API/CanvasGradient --- -<div>{{APIRef("Canvas API")}}</div> +{{APIRef("Canvas API")}} -<p>L'interface <code><strong>CanvasGradient</strong></code> représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}.</p> +L'interface **`CanvasGradient`** représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>Représentant un objet opaque, il n'y a aucune propriété exposée.</em></p> +_Représentant un objet opaque, il n'y a aucune propriété exposée._ -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p><em>Il n'y a pas de méthode héritée.</em></p> +_Il n'y a pas de méthode héritée._ -<dl> - <dt>{{domxref("CanvasGradient.addColorStop()")}}</dt> - <dd>Ajoute un nouveau point d'arrêt, défini par un <code>décalage</code> et une <code>couleur</code>. Si le décalage n'est pas compris entre 0 et 1, une <code>INDEX_SIZE_ERR</code> est générée ; si la couleur ne peut être analysée comme une {{cssxref("<color>")}} CSS, une <code>SYNTAX_ERR</code> est générée.</dd> -</dl> +- {{domxref("CanvasGradient.addColorStop()")}} + - : Ajoute un nouveau point d'arrêt, défini par un `décalage` et une `couleur`. Si le décalage n'est pas compris entre 0 et 1, une `INDEX_SIZE_ERR` est générée ; si la couleur ne peut être analysée comme une {{cssxref("<color>")}} CSS, une `SYNTAX_ERR` est générée. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasGradient")}}</p> +{{Compat("api.CanvasGradient")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>Créateur dans {{domxref("CanvasRenderingContext2D")}}.</li> - <li>L'élément {{HTMLElement("canvas")}} et son interface associée {{domxref("HTMLCanvasElement")}}.</li> -</ul> +- Créateur dans {{domxref("CanvasRenderingContext2D")}}. +- L'élément {{HTMLElement("canvas")}} et son interface associée {{domxref("HTMLCanvasElement")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md index d51cb083df..0656bd50da 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md @@ -8,67 +8,70 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/arc --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> de l'API Canvas 2D permet d'ajouter un arc de cercle au tracé, en le centrant aux positions <em>(x, y)</em> et avec un rayon <em>r</em> qui démarre à <em>angleDépart</em> et qui finit à <em>angleFin</em>, dans la direction de <em>sensAntiHoraire </em>(par défaut en sens horaire).</p> +La méthode **`CanvasRenderingContext2D`\*\***`.arc()`\*_ de l'API Canvas 2D permet d'ajouter un arc de cercle au tracé, en le centrant aux positions _(x, y)* et avec un rayon *r* qui démarre à *angleDépart* et qui finit à *angleFin*, dans la direction de *sensAntiHoraire\* (par défaut en sens horaire). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);</var> -</pre> + void ctx.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>La position en x du centre de l'arc.</dd> - <dt><code>y</code></dt> - <dd>La position en y du centre de l'arc.</dd> - <dt><code>radius</code><em> (rayon)</em></dt> - <dd>Le rayon de l'arc.</dd> - <dt><code>startAngle</code> <em>(angle départ)</em></dt> - <dd>La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.</dd> - <dt><code>endAngle</code> <em>(angle fin)</em></dt> - <dd>La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.</dd> - <dt><code>anticlockwise</code><em> (sens anti-horaire)</em> {{optional_inline}}</dt> - <dd>Un {{jsxref("Booléen")}} facultatif qui, si à <code>true</code><em>(vrai),</em> indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre.</dd> -</dl> +- `x` + - : La position en x du centre de l'arc. +- `y` + - : La position en y du centre de l'arc. +- `radius` _(rayon)_ + - : Le rayon de l'arc. +- `startAngle` _(angle départ)_ + - : La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. +- `endAngle` _(angle fin)_ + - : La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. +- `anticlockwise` _(sens anti-horaire)_ {{optional_inline}} + - : Un {{jsxref("Booléen")}} facultatif qui, si à `true`_(vrai),_ indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_arc_method">En utilisant la méthode <code>arc</code> </h3> +### En utilisant la méthode `arc` -<p>Voici un code simple permettant de dessiner un cercle .</p> +Voici un code simple permettant de dessiner un cercle . -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html line-numbers"><canvas id="canvas"></canvas></pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75, 75, 50, 0, 2 * Math.PI); -ctx.stroke();</pre> +ctx.stroke(); +``` -<p>Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :</p> +Modifiez le code ci-dessous et voyez les changements en direct sur le canvas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.beginPath(); ctx.arc(50, 50, 50, 0, 2 * Math.PI, false); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js">var canvas = document.getElementById("canvas"); +```js +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -91,25 +94,25 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> -</div> +``` -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +{{ EmbedLiveSample('Playable_code', 700, 360) }} -<h3 id="Different_shapes_demonstrated">Exemple avec différentes formes</h3> +### Exemple avec différentes formes -<p>Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par <code>arc()</code>.</p> +Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par `arc()`. +```html hidden +<canvas id="canvas" width="150" height="200"></canvas> +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="200"></canvas> -</pre> - -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Draw shapes -for (var i = 0; i < 4; i++) { - for(var j = 0; j < 3; j++) { +for (var i = 0; i < 4; i++) { + for(var j = 0; j < 3; j++) { ctx.beginPath(); var x = 25 + j * 50; // x coordinate var y = 25 + i * 50; // y coordinate @@ -120,48 +123,34 @@ for (var i = 0; i < 4; i++) { ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); - if (i > 1) { + if (i > 1) { ctx.fill(); } else { ctx.stroke(); } } -}</pre> +} +``` -<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }}</p> +{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.arc")}}</p> +{{Compat("api.CanvasRenderingContext2D.arc")}} -<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2> +## Notes spécifiques à Gecko -<p>Avec Gecko 2.0 {{geckoRelease("2.0")}}:</p> +Avec Gecko 2.0 {{geckoRelease("2.0")}}: -<ul> - <li>Le paramètre <code>anticlockwise</code> est optionnel,</li> - <li>Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( "L'index ou la taille est négatif ou supérieur à la valeur autorisée" ).</li> -</ul> +- Le paramètre `anticlockwise` est optionnel, +- Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( "L'index ou la taille est négatif ou supérieur à la valeur autorisée" ). -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}}</li> -</ul> +- L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md index e59e5be4a4..b663d63dd6 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md @@ -7,29 +7,30 @@ tags: - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/beginPath --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.beginPath()</code></strong> de l'API Canvas 2D permet de commencer un nouveau chemin<em> e</em>n vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.beginPath()`\** de l'API Canvas 2D permet de commencer un nouveau chemin *e\*n vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.beginPath();</var> -</pre> + void ctx.beginPath(); -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_la_méthode_beginPath">Utiliser la méthode <code>beginPath</code></h3> +### Utiliser la méthode `beginPath` -<p>Ceci est un simple snippet de code qui utilise la méthode <code>beginPath</code>.</p> +Ceci est un simple snippet de code qui utilise la méthode `beginPath`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Premier chemin @@ -45,18 +46,19 @@ ctx.strokeStyle = 'green'; ctx.moveTo(20, 20); ctx.lineTo(120, 120); ctx.stroke(); -</pre> +``` -<p>Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:</p> +Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code" style="height:200px"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code" style="height:200px"> // First path ctx.beginPath(); ctx.strokeStyle = 'blue'; @@ -69,10 +71,11 @@ ctx.beginPath(); ctx.strokeStyle = 'green'; ctx.moveTo(20,20); ctx.lineTo(120, 120); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -95,34 +98,21 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 460) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 460) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.beginPath")}}</p> +{{Compat("api.CanvasRenderingContext2D.beginPath")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.closePath()")}}</li> -</ul> +- L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.closePath()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md index f5e140589e..eb9c087775 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md @@ -4,47 +4,46 @@ slug: Web/API/CanvasRenderingContext2D/bezierCurveTo translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo browser-compat: api.CanvasRenderingContext2D.bezierCurveTo --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D.bezierCurveTo()</strong></code> de l'API Canvas 2D ajoute une <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">courbe de Bézier</a> cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode <a href="/fr/docs/Web/API/CanvasRenderingContext2D/moveTo"><code>moveTo()</code></a> avant de créer une courbe de Bézier.</p> +La méthode **`CanvasRenderingContext2D.bezierCurveTo()`** de l'API Canvas 2D ajoute une [courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier) cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode [`moveTo()`](/fr/docs/Web/API/CanvasRenderingContext2D/moveTo) avant de créer une courbe de Bézier. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); -</pre> +```js +void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>cp1x</code></dt> - <dd>L'abscisse du premier point de contrôle.</dd> - <dt><code>cp1y</code></dt> - <dd>L'ordonnée du premier point de contrôle.</dd> - <dt><code>cp2x</code></dt> - <dd>L'abscisse du second point de contrôle.</dd> - <dt><code>cp2y</code></dt> - <dd>L'ordonnée du second point de contrôle.</dd> - <dt><code>x</code></dt> - <dd>L'abscisse du point d'arrivée.</dd> - <dt><code>y</code></dt> - <dd>L'ordonnée du point d'arrivée.</dd> -</dl> +- `cp1x` + - : L'abscisse du premier point de contrôle. +- `cp1y` + - : L'ordonnée du premier point de contrôle. +- `cp2x` + - : L'abscisse du second point de contrôle. +- `cp2y` + - : L'ordonnée du second point de contrôle. +- `x` + - : L'abscisse du point d'arrivée. +- `y` + - : L'ordonnée du point d'arrivée. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="how_beziercurveto_works">Fonctionnement de bezierCurveTo()</h3> +### Fonctionnement de bezierCurveTo() -<p>Cet exemple montre comment une courbe cubique de Bézier est dessinée.</p> +Cet exemple montre comment une courbe cubique de Bézier est dessinée. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"> -<canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js;"> +```js // Define canvas and context const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); @@ -74,52 +73,51 @@ ctx.beginPath(); ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI); // Point de contrôle n°1 ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI); // Point de contrôle n°2 ctx.fill(); -</pre> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus.</p> +Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus. -<p>{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}}</p> +{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}} -<h3 id="a_simple_bezier_curve">Une courbe cubique de Bézier simple</h3> +### Une courbe cubique de Bézier simple -<p>Cet exemple dessine une courbe cubique de Bézier simple en utilisant <code>bezierCurveTo()</code>.</p> +Cet exemple dessine une courbe cubique de Bézier simple en utilisant `bezierCurveTo()`. -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"> -<canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript_2">JavaScript</h4> +#### JavaScript -<p>La courbe débute au point spécifié par <code>moveTo()</code> : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).</p> +La courbe débute au point spécifié par `moveTo()` : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140). -<pre class="brush: js"> +```js const canvas = document.getElementById("canvas"); const contexte2D = canvas.getContext("2d"); contexte2D.beginPath(); contexte2D.moveTo(30, 30); contexte2D.bezierCurveTo(120,160, 180,10, 220,140); -contexte2D.stroke();</pre> +contexte2D.stroke(); +``` -<h4 id="result_2">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}}</p> +{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}} -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface définissant cette méthode : <a href="/fr/docs/Web/API/CanvasRenderingContext2D"><code>CanvasRenderingContext2D</code></a></li> - <li><a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">L'article Wikipédia sur les courbes de Bézier</a></li> -</ul> +- L'interface définissant cette méthode : [`CanvasRenderingContext2D`](/fr/docs/Web/API/CanvasRenderingContext2D) +- [L'article Wikipédia sur les courbes de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier) diff --git a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md index c548b4ed9e..c537047361 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md @@ -9,51 +9,40 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/canvas --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D.canvas</strong></code> est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}.</p> +La propriété **`CanvasRenderingContext2D.canvas`** est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em></var>.canvas;</pre> + ctx.canvas; -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Soit cet élément {{HTMLElement("canvas")}}:</p> +Soit cet élément {{HTMLElement("canvas")}}: -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<p>Vous pouvez obtenir la référence à l'élément <code>canvas</code> grâce à <code>CanvasRenderingContext2D</code> en utilisant la propriété <code>canvas</code> :</p> +Vous pouvez obtenir la référence à l'élément `canvas` grâce à `CanvasRenderingContext2D` en utilisant la propriété `canvas` : -<pre class="brush: js">var canvas = document.getElementById("canvas"); +```js +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.canvas // HTMLCanvasElement -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.canvas")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("CanvasRenderingContext2D")}}</li> -</ul> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.canvas")}} + +## Voir aussi + +- {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md index 7bf854557e..f11c76ec20 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -9,46 +9,45 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/clearRect --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong> de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées <em>(x, y)</em> et par les tailles <em>(largeur, hauteur)</em>, supprimant tout contenu précédemment dessiné.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.clearRect()`\*_ de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées _(x, y)_ et par les tailles _(largeur, hauteur)\*, supprimant tout contenu précédemment dessiné. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.clearRect(x, y, largeur, hauteur);</var> -</pre> + void ctx.clearRect(x, y, largeur, hauteur); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>La coordonnée sur l'axe des <em>x</em> du point de départ du rectangle.</dd> - <dt><code>y</code></dt> - <dd>La coordonnée sur l'axe des <em>y</em> du point de départ du rectangle.</dd> - <dt><code>largeur</code></dt> - <dd>La largeur du rectangle.</dd> - <dt><code>hauteur</code></dt> - <dd>La hauteur de rectangle.</dd> -</dl> +- `x` + - : La coordonnée sur l'axe des *x* du point de départ du rectangle. +- `y` + - : La coordonnée sur l'axe des *y* du point de départ du rectangle. +- `largeur` + - : La largeur du rectangle. +- `hauteur` + - : La hauteur de rectangle. -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> +## Notes d'utilisation -<p>Un problème classique avec <code>clearRect</code> est qu'il peut apparaître comme ne fonctionnant pas si l'on n'<a href="/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths">utilise pas les trajets de façon appropriée</a>. N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé <code>clearRect</code>.</p> +Un problème classique avec `clearRect` est qu'il peut apparaître comme ne fonctionnant pas si l'on n'[utilise pas les trajets de façon appropriée](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths). N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé `clearRect`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_clearRect">Utilisation de la méthode <code>clearRect</code></h3> +### Utilisation de la méthode `clearRect` -<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>clearRect</code>.</p> +Ceci est seulement un fragment de code simple qui utilise la méthode `clearRect`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canevas = document.getElementById("canvas"); +```js +var canevas = document.getElementById("canvas"); var ctx = canevas.getContext("2d"); ctx.beginPath(); @@ -62,18 +61,19 @@ ctx.clearRect(10, 10, 100, 100); // effacer le canevas entièrement // ctx.clearRect(0, 0, canvas.width, canvas.height); -</pre> +``` -<p>Modifiez le code suivant et voyez vos changements en direct dans le canevas :</p> +Modifiez le code suivant et voyez vos changements en direct dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code" style="height:140px;"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code" style="height:140px;"> ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(200,20); @@ -81,10 +81,11 @@ ctx.lineTo(120,120); ctx.closePath(); // dessine la dernière ligne du triangle ctx.stroke(); -ctx.clearRect(10, 10, 100, 100);</textarea> -</pre> +ctx.clearRect(10, 10, 100, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -107,35 +108,22 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 400) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.clearRect")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 400) }} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.clearRect")}} + +## Voir aussi + +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.fillRect()")}} +- {{domxref("CanvasRenderingContext2D.strokeRect()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md index ee83dd8db5..73798baafa 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md @@ -5,29 +5,30 @@ tags: - Méthode translation_of: Web/API/CanvasRenderingContext2D/closePath --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.closePath()</code></strong> de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.closePath()`\*\* de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien. -<h2 id="Syntax">Syntax</h2> +## Syntax -<pre class="syntaxbox">void <var><em>ctx</em>.closePath();</var> -</pre> + void ctx.closePath(); -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_la_méthode_closePath">Utiliser la méthode <code>closePath</code></h3> +### Utiliser la méthode `closePath` -<p>Voici un exemple d'utilisation de la méthode closePath.</p> +Voici un exemple d'utilisation de la méthode closePath. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById("canvas"); +```js +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); @@ -36,27 +37,29 @@ ctx.lineTo(200,20); ctx.lineTo(120,120); ctx.closePath(); // ferme le triangle par une ligne droite ctx.stroke(); -</pre> +``` -<p>Editez le code ci-dessous et observez les répercutions dans le canvas:</p> +Editez le code ci-dessous et observez les répercutions dans le canvas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code" style="height:140px;"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code" style="height:140px;"> ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(200,20); ctx.lineTo(120,120); ctx.closePath(); // draws last line of the triangle -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -79,34 +82,21 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 400) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 400) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.closePath")}}</p> +{{Compat("api.CanvasRenderingContext2D.closePath")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.beginPath()")}}</li> -</ul> +- The interface defining it, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.beginPath()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md index d8bab917a3..3fe6679a76 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md @@ -10,55 +10,52 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createLinearGradient()</code></strong> de l'API Canvas 2D crée un gradient le long de la ligne donnée par les coordonnées représentées par les paramètres.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.createLinearGradient()`\*\* de l'API Canvas 2D crée un gradient le long de la ligne donnée par les coordonnées représentées par les paramètres. -<p><img alt="" src="mdn-canvas-lineargradient.png"></p> + -<p>Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire.</p> +Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire. -<p>NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect".</p> +NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect". -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">CanvasGradient <var><em>ctx</em>.createLinearGradient(x0, y0, x1, y1);</var> -</pre> + CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x0</code></dt> - <dd>La coordonnée sur l'axe des x du point de début.</dd> - <dt><code>y0</code></dt> - <dd>La coordonnée sur l'axe des y du point de début.</dd> - <dt><code>x1</code></dt> - <dd>La coordonnée sur l'axe des x du point de fin.</dd> - <dt><code>y1</code></dt> - <dd>La coordonnée sur l'axe des y du point de fin.</dd> -</dl> +- `x0` + - : La coordonnée sur l'axe des x du point de début. +- `y0` + - : La coordonnée sur l'axe des y du point de début. +- `x1` + - : La coordonnée sur l'axe des x du point de fin. +- `y1` + - : La coordonnée sur l'axe des y du point de fin. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<dl> - <dt>{{domxref("CanvasGradient")}}</dt> - <dd>Un <code>CanvasGradient linéaire</code> initialisé avec la ligne spécifiée.</dd> -</dl> +- {{domxref("CanvasGradient")}} + - : Un `CanvasGradient linéaire` initialisé avec la ligne spécifiée. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_createLinearGradient">Utilisation de la méthode <code>createLinearGradient</code></h3> +### Utilisation de la méthode `createLinearGradient` -<p>Ceci est seulement un simple fragment de code qui utilise la méthode <code>createLinearGradient</code> pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple.</p> +Ceci est seulement un simple fragment de code qui utilise la méthode `createLinearGradient` pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var gradient = ctx.createLinearGradient(0, 0, 200, 0); @@ -66,26 +63,28 @@ gradient.addColorStop(0, 'green'); gradient.addColorStop(1, 'white'); ctx.fillStyle = gradient; ctx.fillRect(10, 10, 200, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> var gradient = ctx.createLinearGradient(0,0,200,0); gradient.addColorStop(0,"green"); gradient.addColorStop(1,"white"); ctx.fillStyle = gradient; -ctx.fillRect(10,10,200,100);</textarea> -</pre> +ctx.fillRect(10,10,200,100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -108,40 +107,25 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}</p> +{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}} -<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2> +## Notes spécifiques à Gecko -<ul> - <li>A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies déclenche maintenant <code>NOT_SUPPORTED_ERR</code> au lieu de <code>SYNTAX_ERR</code>.</li> -</ul> +- A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies déclenche maintenant `NOT_SUPPORTED_ERR` au lieu de `SYNTAX_ERR`. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.createRadialGradient()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md index e4dae769e1..b56729678a 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md @@ -10,67 +10,68 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/direction --- -<div>{{APIRef}} {{SeeCompatTable}}</div> +{{APIRef}} {{SeeCompatTable}} -<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.direction</code></strong> de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte.</p> +La propriété **`CanvasRenderingContext2D`\*\***`.direction`\*\* de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.direction = "ltr" || "rtl" || "inherit";</var> -</pre> + ctx.direction = "ltr" || "rtl" || "inherit"; -<h3 id="Options">Options</h3> +### Options -<p>Valeurs possibles :</p> +Valeurs possibles : -<dl> - <dt>ltr</dt> - <dd>La direction du texte est de gauche à droite.</dd> - <dt>rtl</dt> - <dd>La direction du texte est de droite à gauche.</dd> - <dt>inherit</dt> - <dd>La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié.</dd> -</dl> +- ltr + - : La direction du texte est de gauche à droite. +- rtl + - : La direction du texte est de droite à gauche. +- inherit + - : La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié. -<p>La valeur par défaut est <code>inherit</code>.</p> +La valeur par défaut est `inherit`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_direction_property">Utilisation de la propriété <code>direction</code></h3> +### Utilisation de la propriété `direction` -<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>direction</code> pour indiquer un réglage de ligne de base différent.</p> +Ceci est seulement un fragment de code simple utilisant la propriété `direction` pour indiquer un réglage de ligne de base différent. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.font = '48px serif'; ctx.direction = 'ltr'; ctx.strokeText('Hello world', 0, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.font = '48px serif'; ctx.direction = 'ltr'; -ctx.strokeText('Hello world', 0, 100);</textarea> -</pre> +ctx.strokeText('Hello world', 0, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -93,33 +94,20 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); -</pre> +``` -<p>{{EmbedLiveSample('code_jouable', 700, 360)}}</p> +{{EmbedLiveSample('code_jouable', 700, 360)}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.direction")}}</p> +{{Compat("api.CanvasRenderingContext2D.direction")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md index 92bc5a9b9d..e7bb8508f3 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md @@ -9,92 +9,91 @@ tags: - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/drawImage --- -<div>{{APIRef}}</div> - -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawImage()</code></strong> de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">void <var><em>ctx</em>.drawImage(image, dx, dy);</var> -void <var><em>ctx</em>.drawImage(image, dx, dy, dLargeur, dHauteur);</var> -void <var><em>ctx</em>.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);</var> -</pre> - -<p><img alt="drawImage" src="canvas_drawimage.jpg"></p> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>image</code></dt> - <dd>Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}.</dd> - <dt><code>dx</code></dt> - <dd>La coordonnée <code>x</code> dans le canvas de destination où placer le coin supérieur gauche de l'<code>image</code> source.</dd> - <dt><code>dy</code></dt> - <dd>La coordonnée <code>y</code> dans le canvas de destination où placer le coin supérieur gauche de l'<code>image</code> source.</dd> - <dt><code>dLargeur</code></dt> - <dd>La largeur de l'<code>image</code> dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale.</dd> - <dt>dHauteur</dt> - <dd>La hauteur de l'<code>image</code> dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale.</dd> - <dt><code>sx</code></dt> - <dd>La coordonnée <code>x</code> du bord en haut à gauche de la partie de l'<code>image</code> source à dessiner dans le contexte du canvas.</dd> - <dt><code>sy</code></dt> - <dd>La coordonnée <code>y</code> du bord en haut à gauche de la partie de l'<code>image</code> source à dessiner dans le contexte du canvas.</dd> - <dt><code>sLargeur</code></dt> - <dd>La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins <code>sx</code>, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (<code>sx</code> ; <code>sy</code>) et jusqu'au bord en bas à droite.</dd> - <dt><code>sHauteur</code></dt> - <dd>La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins <code>sy</code>.</dd> -</dl> - -<h3 id="Exceptions">Exceptions</h3> - -<dl> - <dt><code>INDEX_SIZE_ERR</code></dt> - <dd>Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins.</dd> - <dt><code>INVALID_STATE_ERR</code></dt> - <dd>L'image reçue n'en est pas une.</dd> - <dt><code>TYPE_MISMATCH_ERR</code></dt> - <dd>L'image reçue n'est pas supportée.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_la_méthode_drawImage">Utiliser la méthode <code>drawImage</code></h3> - -<p>Ceci est un extrait de code utilisant la méthode <code>drawImage</code> :</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><canvas id="canvas"></canvas> - <img id="source" src="rhino.jpg" - width="300" height="227"> -</div> -</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">var canvas = document.getElementById("canvas"); -var ctx = canvas.getContext("2d"); -var image = document.getElementById("source"); +{{APIRef}} -ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); -</pre> +La méthode **`CanvasRenderingContext2D`\*\***`.drawImage()`\*\* de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas. + +## Syntaxe + + void ctx.drawImage(image, dx, dy); + void ctx.drawImage(image, dx, dy, dLargeur, dHauteur); + void ctx.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur); + + + +### Paramètres + +- `image` + - : Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}. +- `dx` + - : La coordonnée `x` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. +- `dy` + - : La coordonnée `y` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. +- `dLargeur` + - : La largeur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale. +- dHauteur + - : La hauteur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale. +- `sx` + - : La coordonnée `x` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. +- `sy` + - : La coordonnée `y` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. +- `sLargeur` + - : La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins `sx`, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (`sx` ; `sy`) et jusqu'au bord en bas à droite. +- `sHauteur` + - : La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins `sy`. + +### Exceptions -<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> +- `INDEX_SIZE_ERR` + - : Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins. +- `INVALID_STATE_ERR` + - : L'image reçue n'en est pas une. +- `TYPE_MISMATCH_ERR` + - : L'image reçue n'est pas supportée. -<h4 id="code_jouable">Code jouable</h4> +## Exemples -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> - <img id="source" src="rhino.jpg" width="300" height="227"> -</div> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> -ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea> -</pre> +### Utiliser la méthode `drawImage` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +Ceci est un extrait de code utilisant la méthode `drawImage` : + +#### HTML + +```html +<canvas id="canvas"></canvas> + <img id="source" src="rhino.jpg" + width="300" height="227"> +</div> +``` + +#### JavaScript + +```js +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var image = document.getElementById("source"); + +ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); +``` + +Éditez le code suivant pour voir les changements en direct dans la balise canvas: + +#### Code jouable + +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> + <img id="source" src="rhino.jpg" width="300" height="227"> +</div> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea> +``` + +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var image = document.getElementById('source'); var textarea = document.getElementById("code"); @@ -118,50 +117,33 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.drawImage")}}</p> +{{Compat("api.CanvasRenderingContext2D.drawImage")}} -<h2 id="Notes_concernant_la_compatibilité">Notes concernant la compatibilité</h2> +## Notes concernant la compatibilité -<ul> - <li>Un support pour l'inversion de l'image pour les valeurs négatives pour <code>sLargeur</code> et <code>sHauteur</code> a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}.</li> - <li>A partir de {{geckoRelease("5.0")}} <code>drawImage()</code> gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes.</li> - <li>Spécifier une image <code>null</code> ou <code>undefined</code> en appellant <code>drawImage()</code> correctement retournera une exception <code>TYPE_MISMATCH_ERR</code> à partir de {{geckoRelease("5.0")}}.</li> - <li>Prior to Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox ajoute une exception si une des coordonnées est nulle ou négative. Selon la spécification, cela ne durera pas.</li> - <li>Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans <a href="/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP">corrompre le canvas</a>.</li> - <li>Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans <a href="/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP">corrompre le canevas</a>.</li> -</ul> +- Un support pour l'inversion de l'image pour les valeurs négatives pour `sLargeur` et `sHauteur` a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}. +- A partir de {{geckoRelease("5.0")}} `drawImage()` gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes. +- Spécifier une image `null` ou `undefined` en appellant `drawImage()` correctement retournera une exception `TYPE_MISMATCH_ERR` à partir de {{geckoRelease("5.0")}}. +- Prior to Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox ajoute une exception si une des coordonnées est nulle ou négative. Selon la spécification, cela ne durera pas. +- Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans [corrompre le canvas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). +- Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans [corrompre le canevas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). -<h2 id="Notes">Notes</h2> +## Notes -<ul> - <li>drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}}<strong> est supérieur à 1.</strong> (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime)</li> -</ul> +- drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}} **est supérieur à 1.** (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}.</li> -</ul> +- L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md index 49a19c218c..197d6aad25 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md @@ -9,73 +9,74 @@ tags: - Méthode translation_of: Web/API/CanvasRenderingContext2D/ellipse --- -<div>{{APIRef}} {{SeeCompatTable}}</div> +{{APIRef}} {{SeeCompatTable}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.ellipse()</code></strong> de l'API Canvas 2D ajoute une ellipse au trajet, centrée en <em>(x, y),</em> les rayons <em>rayonX</em> et <em>rayonY</em> commençant à <em>angleDeDébut</em> et se terminant à <em>angleDeFin,</em> en allant dans le sens indiqué par <em>antiHoraire</em> (par défaut, horaire).</p> +La méthode **`CanvasRenderingContext2D`\*\***`.ellipse()`\*_ de l'API Canvas 2D ajoute une ellipse au trajet, centrée en _(x, y),* les rayons *rayonX* et *rayonY* commençant à *angleDeDébut* et se terminant à *angleDeFin,* en allant dans le sens indiqué par *antiHoraire\* (par défaut, horaire). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.ellipse(x, y, rayonX, rayonY, rotation, angleDébut, angleFin, antihoraire);</var> -</pre> + void ctx.ellipse(x, y, rayonX, rayonY, rotation, angleDébut, angleFin, antihoraire); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>La coordonnée sur l'axe des x du centre de l'ellipse.</dd> - <dt><code>y</code></dt> - <dd>La coordonnée sur l'axe des y du centre de l'ellipse.</dd> - <dt><code>rayon</code>X</dt> - <dd>Le rayon du grand axe de l'ellipse.</dd> - <dt><code>rayon</code>Y</dt> - <dd>Le rayon du petit axe de l'ellipse.</dd> - <dt><code>rotation</code></dt> - <dd>La rotation pour cette ellipse, exprimée en radians.</dd> - <dt><code>angleDébut</code></dt> - <dd>L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians.</dd> - <dt><code>angleFin</code></dt> - <dd>L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians.</dd> - <dt><code>antihoraire</code> {{optional_inline}}</dt> - <dd>Un {{jsxref("Boolean")}} optionnel qui, si <code>true</code>, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire.</dd> -</dl> +- `x` + - : La coordonnée sur l'axe des x du centre de l'ellipse. +- `y` + - : La coordonnée sur l'axe des y du centre de l'ellipse. +- `rayon`X + - : Le rayon du grand axe de l'ellipse. +- `rayon`Y + - : Le rayon du petit axe de l'ellipse. +- `rotation` + - : La rotation pour cette ellipse, exprimée en radians. +- `angleDébut` + - : L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians. +- `angleFin` + - : L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians. +- `antihoraire` {{optional_inline}} + - : Un {{jsxref("Boolean")}} optionnel qui, si `true`, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_ellipse_method">Utilisation de la méthode <code>ellipse</code></h3> +### Utilisation de la méthode `ellipse` -<p>Ceci est seulement un fragment de code simple dessinant une ellipse.</p> +Ceci est seulement un fragment de code simple dessinant une ellipse. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> +```html +<canvas id="canevas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canevas = document.getElementById('canevas'); +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.beginPath(); ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); ctx.stroke(); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) :</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.beginPath(); ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -98,33 +99,20 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.ellipse")}}</p> +{{Compat("api.CanvasRenderingContext2D.ellipse")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md index f71a817ce6..d7197dc21c 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md @@ -7,65 +7,66 @@ tags: - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/fill --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fill()</code></strong> 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.</p> +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. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.fill([fillRule]);</var> -void <var><em>ctx</em>.fill(path[, fillRule]);</var> -</pre> + void ctx.fill([fillRule]); + void ctx.fill(path[, fillRule]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>fillRule</code></dt> - <dd>L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin.<br> - Valeurs possible: - <ul> - <li><code><strong>"nonzero</strong></code>": La <a href="http://en.wikipedia.org/wiki/Nonzero-rule">règle de remplissage extérieur/intérieur non nul</a>, qui est la règle par défaut.</li> - <li><code><strong>"evenodd"</strong></code>: La <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">règle de remplissage pair/impair</a>.</li> - </ul> - </dd> - <dt><code>path</code></dt> - <dd>Un chemin {{domxref("Path2D")}} à remplir.</dd> -</dl> +- `fillRule` -<h2 id="Exemples">Exemples</h2> + - : L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin. + Valeurs possible: -<h3 id="Utiliser_la_méthode_fill">Utiliser la méthode <code>fill</code></h3> + - **`"nonzero`**": La [règle de remplissage extérieur/intérieur non nul](http://en.wikipedia.org/wiki/Nonzero-rule), qui est la règle par défaut. + - **`"evenodd"`**: La [règle de remplissage pair/impair](http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule). -<p>Ceci est un simple snippet de code qui utilise la méthode <code>fill</code> pour remplir un chemin.</p> +- `path` + - : Un chemin {{domxref("Path2D")}} à remplir. -<h4 id="HTML">HTML</h4> +## Exemples -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +### Utiliser la méthode `fill` -<h4 id="JavaScript">JavaScript</h4> +Ceci est un simple snippet de code qui utilise la méthode `fill` pour remplir un chemin. -<pre class="brush: js">var canvas = document.getElementById('canvas'); +#### HTML + +```html +<canvas id="canvas"></canvas> +``` + +#### JavaScript + +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); -</pre> +``` -<p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p> +Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); -ctx.fill();</textarea> -</pre> +ctx.fill();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -88,19 +89,22 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h3 id="Utiliser_l'option_fillRule">Utiliser l'option <code>fillRule</code></h3> +### Utiliser l'option `fillRule` -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> </pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript_2">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); @@ -115,18 +119,20 @@ ctx.closePath(); ctx.fillStyle = "lightblue"; ctx.lineWidth = 2; ctx.fill("nonzero"); -ctx.stroke();</pre> +ctx.stroke(); +``` -<p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p> +Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct: -<h4 id="code_jouable_2">Code jouable 2</h4> +#### Code jouable 2 -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.beginPath(); ctx.moveTo(96.50,50.00); ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17); @@ -139,10 +145,11 @@ ctx.closePath(); ctx.fillStyle = "lightblue"; ctx.lineWidth = 2; ctx.fill("nonzero"); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -165,33 +172,20 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{EmbedLiveSample('code_jouable_2', 700, 360)}}</p> +{{EmbedLiveSample('code_jouable_2', 700, 360)}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.fill")}}</p> +{{Compat("api.CanvasRenderingContext2D.fill")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}.</li> -</ul> +- L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md index cd98d786b5..d8fc1404f8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md @@ -8,65 +8,66 @@ tags: - Méthode translation_of: Web/API/CanvasRenderingContext2D/fillRect --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong> de l'API 2D des Canvas dessine un rectangle plein aux coordonnées <em>(x, y)</em>, aux dimensions déterminées par <em>largeur</em> et <em>hauteur</em> et au style déterminé par l'attribut <code>fillStyle</code>.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.fillRect()`\*_ de l'API 2D des Canvas dessine un rectangle plein aux coordonnées _(x, y)*, aux dimensions déterminées par *largeur* et *hauteur\* et au style déterminé par l'attribut `fillStyle`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, largeur, hauteur);</var> -</pre> + void ctx.fillRect(x, y, largeur, hauteur); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>L'ordonnée <em>x</em> des coordonnées du point de départ du rectangle.</dd> - <dt><code>y</code></dt> - <dd>L'abscisse <em>y</em> des coordonnées du point de départ du rectangle.</dd> - <dt><code>largeur</code></dt> - <dd>La largeur du rectangle.</dd> - <dt><code>hauteur</code></dt> - <dd>La hauteur de rectangle.</dd> -</dl> +- `x` + - : L'ordonnée *x* des coordonnées du point de départ du rectangle. +- `y` + - : L'abscisse *y* des coordonnées du point de départ du rectangle. +- `largeur` + - : La largeur du rectangle. +- `hauteur` + - : La hauteur de rectangle. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_fillRect">Utilisation de la méthode <code>fillRect</code></h3> +### Utilisation de la méthode `fillRect` -<p>Ceci est juste un extrait de code qui utilise la méthode <code>fillRect</code>.</p> +Ceci est juste un extrait de code qui utilise la méthode `fillRect`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById("canvas"); +```js +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(10, 10, 100, 100); // remplir la balise entièrement // ctx.fillRect(0, 0, canvas.width, canvas.height); -</pre> +``` -<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> +Éditez le code suivant pour voir les changements en direct dans la balise canvas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.fillStyle = "green"; -ctx.fillRect(10, 10, 100, 100);</textarea> -</pre> +ctx.fillRect(10, 10, 100, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -89,36 +90,23 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.fillRect")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li> - <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 360) }} + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.fillRect")}} + +## Voir aussi + +- L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.fillStyle")}} +- {{domxref("CanvasRenderingContext2D.clearRect()")}} +- {{domxref("CanvasRenderingContext2D.strokeRect()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md index 598ec204af..539ce49e67 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md @@ -9,65 +9,66 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/fillStyle --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong> de l'API Canvas 2D spécifie la couleur ou style à utiliser à l'intérieur des formes. La valeur par défaut est <code>#000</code> (black).</p> +La propriété **`CanvasRenderingContext2D`\*\***`.fillStyle`\*\* de l'API Canvas 2D spécifie la couleur ou style à utiliser à l'intérieur des formes. La valeur par défaut est `#000` (black). -<p>Voir également le chapitre <a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p> +Voir également le chapitre [Ajout de styles et de couleurs](/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.fillStyle = color; -</var><var><em>ctx</em>.fillStyle = gradient; -</var><var><em>ctx</em>.fillStyle = pattern;</var> -</pre> + ctx.fillStyle = color; + ctx.fillStyle = gradient; + ctx.fillStyle = pattern; -<h3 id="Options">Options</h3> +### Options -<dl> - <dt><code>color</code></dt> - <dd>Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}.</dd> - <dt><code>gradient</code></dt> - <dd>Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).</dd> - <dt><code>pattern</code></dt> - <dd>Un objet {{domxref("CanvasPattern")}} (une image répétée).</dd> -</dl> +- `color` + - : Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}. +- `gradient` + - : Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial). +- `pattern` + - : Un objet {{domxref("CanvasPattern")}} (une image répétée). -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_fillStyle_property">Utiliser la propriété <code>fillStyle</code> pour définir une couleur différente</h3> +### Utiliser la propriété `fillStyle` pour définir une couleur différente -<p>Ceci est un simple snippet de code utilisant la propriété <code>fillStyle</code> pour définir une couleur différente.</p> +Ceci est un simple snippet de code utilisant la propriété `fillStyle` pour définir une couleur différente. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'blue'; ctx.fillRect(10, 10, 100, 100); -</pre> +``` -<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement:</p> +Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.fillStyle = 'blue'; -ctx.fillRect(10, 10, 100, 100);</textarea> -</pre> +ctx.fillRect(10, 10, 100, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -90,69 +91,56 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h3 id="Un_exemple_fillStyle_avec_les_boucles_for">Un exemple <code>fillStyle</code> avec les boucles <code>for</code></h3> +### Un exemple `fillStyle` avec les boucles `for` -<p>Dans cet exemple, nous allons utiliser deux boucles <code>for</code> pour dessiner une grille de rectangles, chacun avec une couleur différente. L'image qui en résulte devrait ressembler à la capture d'écran. Il n'y a rien de très extraordinaire ici, nous utilisons deux variables <code>i</code> et <code>j</code> pour générer une couleur RGB unique pour chaque carré, en modifiant uniquement les valeurs de rouge et vert; le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sorte de palettes. En augmentant le nombre, vous pouvez générer quelque chose de ressemblant aux palettes de couleurs utilisées par Photoshop.</p> +Dans cet exemple, nous allons utiliser deux boucles `for` pour dessiner une grille de rectangles, chacun avec une couleur différente. L'image qui en résulte devrait ressembler à la capture d'écran. Il n'y a rien de très extraordinaire ici, nous utilisons deux variables `i` et `j` pour générer une couleur RGB unique pour chaque carré, en modifiant uniquement les valeurs de rouge et vert; le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sorte de palettes. En augmentant le nombre, vous pouvez générer quelque chose de ressemblant aux palettes de couleurs utilisées par Photoshop. -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> -</div> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js hidden">var ctx = document.getElementById('canvas').getContext('2d'); -for (var i = 0; i < 6; i++){ - for (var j = 0; j < 6; j++){ +```js hidden +var ctx = document.getElementById('canvas').getContext('2d'); +for (var i = 0; i < 6; i++){ + for (var j = 0; j < 6; j++){ ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ',0)'; ctx.fillRect(j * 25, i * 25, 25, 25); } } -</pre> +``` -<p>Le résultat devrait ressembler à ça:</p> +Le résultat devrait ressembler à ça: -<p>{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}}</p> +{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.fillStyle")}}</p> +{{Compat("api.CanvasRenderingContext2D.fillStyle")}} -<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2> +## Notes spécifiques à WebKit/Blink -<ul> - <li>Outre <code>ctx.fillStyle</code>, il existe dans les navigateurs basés sur WebKit et Blink une méthode non-standard et dépréciée, <code>ctx.setFillColor()</code>. +- Outre `ctx.fillStyle`, il existe dans les navigateurs basés sur WebKit et Blink une méthode non-standard et dépréciée, `ctx.setFillColor()`. - <pre class="brush: js">setFillColor(color, optional alpha); -setFillColor(grayLevel, optional alpha); -setFillColor(r, g, b, a); -setFillColor(c, m, y, k, a); -</pre> - </li> -</ul> + ```js + setFillColor(color, optional alpha); + setFillColor(grayLevel, optional alpha); + setFillColor(r, g, b, a); + setFillColor(c, m, y, k, a); + ``` -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface définissant cette méthode, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasPattern")}}</li> -</ul> +- L'interface définissant cette méthode, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasGradient")}} +- {{domxref("CanvasPattern")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md index fefd1c875a..73d1a75588 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md @@ -9,68 +9,69 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/fillText --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillText()</code></strong> de l'API Canvas 2D écrit un texte donné à la position <em>(x, y)</em> donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.fillText()`\*_ de l'API Canvas 2D écrit un texte donné à la position _(x, y)\* donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur. -<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour dessiner un texte mis en forme.</p> +Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour dessiner un texte mis en forme. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.fillText(texte, x, y [, largeurMax]);</var> -</pre> + void ctx.fillText(texte, x, y [, largeurMax]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>texte</code></dt> - <dd>Le texte à représenter en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et de {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd> -</dl> +- `texte` + - : Le texte à représenter en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et de {{domxref("CanvasRenderingContext2D.direction","direction")}}. -<dl> - <dt><code>x</code></dt> - <dd>La valeur de la coordonnée sur l'axe des x du point de début du texte.</dd> - <dt><code>y</code></dt> - <dd>La valeur de la coordonnée sur l'axe des y du point de fin du texte.</dd> - <dt><code>largeurMax</code> {{optional_inline}}</dt> - <dd>La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police.</dd> -</dl> +<!----> -<h2 id="Exemples">Exemples</h2> +- `x` + - : La valeur de la coordonnée sur l'axe des x du point de début du texte. +- `y` + - : La valeur de la coordonnée sur l'axe des y du point de fin du texte. +- `largeurMax` {{optional_inline}} + - : La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police. -<h3 id="Utilisation_de_la_méthode_fillText">Utilisation de la méthode <code>fillText</code></h3> +## Exemples -<p>Ceci est seulement un fragment de code simple utilisant la méthode <code>fillText</code>.</p> +### Utilisation de la méthode `fillText` -<h4 id="HTML">HTML</h4> +Ceci est seulement un fragment de code simple utilisant la méthode `fillText`. -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +#### HTML -<h4 id="JavaScript">JavaScript</h4> +```html +<canvas id="canvas"></canvas> +``` -<pre class="brush: js">var canvas = document.getElementById('canvas'); +#### JavaScript + +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.font = '48px serif'; ctx.fillText('Hello world', 50, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.font = "48px serif"; -ctx.fillText("Hello world", 50, 100);</textarea> -</pre> +ctx.fillText("Hello world", 50, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -93,34 +94,21 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.fillText")}}</p> +{{Compat("api.CanvasRenderingContext2D.fillText")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.strokeText()")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.strokeText()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.md b/files/fr/web/api/canvasrenderingcontext2d/font/index.md index 34b90f9580..37ebc8f81b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/font/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.md @@ -9,57 +9,58 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/font --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.font</code></strong><code> de l'API</code> Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de <a href="/fr-FR/docs/Web/CSS/font">police CSS</a>. La police par défaut est 10px sans-serif.</p> +La propriété **`CanvasRenderingContext2D`\*\***`.font`\*\*` de l'API` Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de [police CSS](/fr-FR/docs/Web/CSS/font). La police par défaut est 10px sans-serif. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.font = value;</var> -</pre> + ctx.font = value; -<h3 id="Options">Options</h3> +### Options -<dl> - <dt><code>valeur</code></dt> - <dd>Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif.</dd> -</dl> +- `valeur` + - : Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_propriété_font">Utilisation de la propriété <code>font</code></h3> +### Utilisation de la propriété `font` -<p>Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes.</p> +Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.font = '48px serif'; ctx.strokeText('Hello world', 50, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.font = '48px serif'; -ctx.strokeText('Hello world', 50, 100);</textarea> -</pre> +ctx.strokeText('Hello world', 50, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -82,55 +83,40 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h3 id="Chargement_de_polices_avec_l'API_CSS_Font_Loading">Chargement de polices avec l'API CSS Font Loading</h3> +### Chargement de polices avec l'API CSS Font Loading -<p>A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.</p> +A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas. -<pre class="brush: js">var f = new FontFace('test', 'url(x)'); +```js +var f = new FontFace('test', 'url(x)'); f.load().then(function() { // Prêt à utiliser la police dans un contexte de canevas -});</pre> +}); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.font")}}</p> +{{Compat("api.CanvasRenderingContext2D.font")}} -<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2> +## Notes spécifiques à Gecko -<ul> - <li>Dans les navigateurs basés sur Gecko, tels que Firefox, une propriété non standard et désapprouvée <code>ctx.mozTextStyle</code> est implémentée en plus de cette propriété. Ne l'utilisez pas.</li> -</ul> +- Dans les navigateurs basés sur Gecko, tels que Firefox, une propriété non standard et désapprouvée `ctx.mozTextStyle` est implémentée en plus de cette propriété. Ne l'utilisez pas. -<h3 id="Notes_relatives_à_Quantum">Notes relatives à Quantum</h3> +### Notes relatives à Quantum -<ul> - <li>Un bug ({{bug(1374885)}}) a été corrigé avec Quantum et qui empêchait de récupérer la police d'un contexte lorsqu'une police système était utilisée. Cela a été corrigée avec <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> qui a été publié avec Firefox 57.</li> -</ul> +- Un bug ({{bug(1374885)}}) a été corrigé avec Quantum et qui empêchait de récupérer la police d'un contexte lorsqu'une police système était utilisée. Cela a été corrigée avec [Stylo](https://wiki.mozilla.org/Quantum/Stylo) qui a été publié avec Firefox 57. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md index 94059efba8..e49af96a35 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md @@ -14,88 +14,72 @@ tags: - getImageDate translation_of: Web/API/CanvasRenderingContext2D/getImageData --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getImageData()</code></strong> de l'API Canvas 2D retourne un objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions <em>(sx, sy)</em> et qui possède des attributs : <em>largeur (sw</em>) et <em>hauteur</em> (<em>sh)</em>. Cette méthode n'est pas affectée par la matrice de transformation du canevas.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.getImageData()`\*_ de l'API Canvas 2D retourne un objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions _(sx, sy)* et qui possède des attributs : *largeur (sw*) et *hauteur* (*sh)\*. Cette méthode n'est pas affectée par la matrice de transformation du canevas. -<p>Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées.</p> +Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var> -</pre> + ImageData ctx.getImageData(sx, sy, sw, sh); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>sx</code></dt> - <dd>La coordonnée x du coin supérieur gauche du rectangle à partir duquel <em>ImageData</em> sera extrait.</dd> - <dt><code>sy</code></dt> - <dd>La coordonnée y du coin supérieur gauche du rectangle à partir duquel <em>ImageData</em><strong><em> </em></strong> sera extrait.</dd> - <dt><code>sw</code></dt> - <dd>La largeur du rectangle à partir duquel <em>ImageData<strong> </strong></em>sera extrait.</dd> - <dt><code>sh</code></dt> - <dd>La hauteur du rectangle à partir duquel <em>ImageData<strong> </strong></em>sera extrait.</dd> -</dl> +- `sx` + - : La coordonnée x du coin supérieur gauche du rectangle à partir duquel _ImageData_ sera extrait. +- `sy` + - : La coordonnée y du coin supérieur gauche du rectangle à partir duquel \*ImageData\***\* \*** sera extrait. +- `sw` + - : La largeur du rectangle à partir duquel \*ImageData** \***sera extrait. +- `sh` + - : La hauteur du rectangle à partir duquel \*ImageData** \***sera extrait. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Un objet {{domxref("ImageData")}} contenant les données de l'image pour le rectangle donné du canevas.</p> +Un objet {{domxref("ImageData")}} contenant les données de l'image pour le rectangle donné du canevas. -<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3> +### Erreurs renvoyées -<dl> - <dt><code>IndexSizeError</code></dt> - <dd>Renvoyé si l'un des arguments de largeur ou de hauteur est égal à zéro.</dd> -</dl> +- `IndexSizeError` + - : Renvoyé si l'un des arguments de largeur ou de hauteur est égal à zéro. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_getImageData">Utilisation de la méthode <code>getImageData</code></h3> +### Utilisation de la méthode `getImageData` -<p>Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez <a href="/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a> et l'objet {{domxref("ImageData")}}.</p> +Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez [Manipulation de pixels avec canvas](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas) et l'objet {{domxref("ImageData")}}. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); console.log(ctx.getImageData(50, 50, 100, 100)); // ImageData { largeur: 100, hauteur: 100, données: Uint8ClampedArray[40000] } -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.getImageData")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface le définissant : {{domxref("CanvasRenderingContext2D")}}.</li> - <li>{{domxref("ImageData")}}</li> - <li><a href="/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a></li> -</ul> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.getImageData")}} + +## Voir aussi + +- L'interface le définissant : {{domxref("CanvasRenderingContext2D")}}. +- {{domxref("ImageData")}} +- [Manipulation de pixels avec canvas](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas) diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md index 5b404da724..3ffbf48e4e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md @@ -9,40 +9,35 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/globalAlpha --- -<div>{{APIRef}}</div> +{{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). -<div>La propriété <strong>CanvasRenderingContext2D.globalAlpha</strong> 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).</div> +Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). -<div> </div> +## Syntaxe -<p>Voir aussi le chapitre <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a> dans le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">Tutoriel canvas</a>.</p> + ctx.globalAlpha = valeur; -<h2 id="Syntaxe">Syntaxe</h2> +### Options -<pre class="syntaxbox"><var>ctx.globalAlpha = valeur;</var> -</pre> +- `valeur` + - : Un nombre entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). La valeur par défaut est 1,0. Les valeurs hors de la plage, y compris {{jsxref ("Infinity")}} et {{jsxref ("NaN")}} ne seront pas définies et `globalAlpha` conservera sa valeur précédente. -<h3 id="Options">Options</h3> +## Exemples -<dl> - <dt><code>valeur</code></dt> - <dd>Un nombre entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). La valeur par défaut est 1,0. Les valeurs hors de la plage, y compris {{jsxref ("Infinity")}} et {{jsxref ("NaN")}} ne seront pas définies et <code>globalAlpha</code> conservera sa valeur précédente.</dd> -</dl> +### Utilisation de la propriété `globalAlpha` -<h2 id="Exemples">Exemples</h2> +Il s'agit seulement d'un simple fragment de code utilisant la propriété `globalAlpha` pour dessiner deux rectangles semi-transparents. -<h3 id="Using_the_globalAlpha_property">Utilisation de la propriété <code>globalAlpha</code></h3> +#### HTML -<p>Il s'agit seulement d'un simple fragment de code utilisant la propriété <code>globalAlpha</code> pour dessiner deux rectangles semi-transparents.</p> +```html +<canvas id="canevas"></canvas> +``` -<h4 id="HTML">HTML</h4> +#### JavaScript -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">var canevas = document.getElementById('canevas'); +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.globalAlpha = 0.5; @@ -52,28 +47,30 @@ ctx.fillRect(10, 10, 100, 100); ctx.fillStyle = "red"; ctx.fillRect(50, 50, 100, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="modifier" type="button" value="Modifier" /> - <input id="effacement" type="button" value="Effacement" /> -</div> -<textarea id="code" class="playable-code" style="height:120px;"> +```html hidden +<canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="modifier" type="button" value="Modifier" /> + <input id="effacement" type="button" value="Effacement" /> +</div> +<textarea id="code" class="playable-code" style="height:120px;"> ctx.globalAlpha = 0.5; ctx.fillStyle = 'blue'; ctx.fillRect(10, 10, 100, 100); ctx.fillStyle = 'red'; -ctx.fillRect(50, 50, 100, 100);</textarea> -</pre> +ctx.fillRect(50, 50, 100, 100);</textarea> +``` -<pre class="brush: js hidden">var canevas = document.getElementById('canevas'); +```js hidden +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); var zoneTexte = document.getElementById('code'); var effacement = document.getElementById('effacement'); @@ -96,15 +93,16 @@ modifier.addEventListener('click', function() { zoneTexte.addEventListener('input', dessinerCanevas); window.addEventListener('load', dessinerCanevas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 380) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 380) }} -<h3 id="A_globalAlpha_example">Un exemple de <code>globalAlpha</code></h3> +### Un exemple de `globalAlpha` -<p>Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle <code>for</code> dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image.</p> +Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle `for` dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image. -<pre class="brush: js">var ctx = document.getElementById('canevas').getContext('2d'); +```js +var ctx = document.getElementById('canevas').getContext('2d'); // Dessiner l'arrière-plan ctx.fillStyle = '#FD0'; @@ -121,53 +119,38 @@ ctx.fillStyle = '#FFF'; ctx.globalAlpha = 0.2; // Dessiner les cercles semi-transparents -for (i = 0; i < 7; i++){ +for (i = 0; i < 7; i++){ ctx.beginPath(); ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true); ctx.fill(); } -</pre> +``` -<pre class="brush: html hidden"><canvas id="canevas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canevas" width="150" height="150"></canvas> +``` -<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}</p> +{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}</p> +{{Compat("api.CanvasRenderingContext2D.globalAlpha")}} -<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2> +## Notes spécifiques à Gecko -<ul> - <li>À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées.</li> -</ul> +- À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées. -<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2> +## Notes spécifiques à WebKit/Blink -<ul> - <li>Dans les navigateurs WebKit et Blink, une méthode non standard et désapprouvée <code>ctx.setAlpha() </code>est implémentée en plus de cette propriété.</li> -</ul> +- Dans les navigateurs WebKit et Blink, une méthode non standard et désapprouvée `ctx.setAlpha() `est implémentée en plus de cette propriété. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md index 7291e23e2b..c82c88770b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md @@ -3,36 +3,38 @@ title: CanvasRenderingContext2D.globalCompositeOperation slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.globalCompositeOperation</code></strong> de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes.</p> +La propriété **`CanvasRenderingContext2D`\*\***`.globalCompositeOperation`\*\* de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes. -<p>Voir aussi <a href="/fr/docs/Tutoriel_canvas/Composition">Composition et découpe</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p> +Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>ctx</em>.globalCompositeOperation = <em>type</em>;</pre> + ctx.globalCompositeOperation = type; -<p><code>type</code> est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser.</p> +`type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser. -<h3 id="Types">Types</h3> +### Types -<p>{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p> +{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}} -<h2 id="Examples">Examples</h2> +## Examples -<h3 id="Changer_lopération_de_composition">Changer l'opération de composition</h3> +### Changer l'opération de composition -<p>Cet exemple utilise la propriété <code>globalCompositeOperation</code> pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent.</p> +Cet exemple utilise la propriété `globalCompositeOperation` pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">const canvas = document.getElementById('canvas'); +```js +const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.globalCompositeOperation = 'xor'; @@ -42,54 +44,33 @@ ctx.fillRect(10, 10, 100, 100); ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 100, 100); -</pre> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }}</p> +{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Etat</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('Compositing')}}</td> - <td>{{Spec2('Compositing')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Etat | Commentaires | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('Compositing')}} | {{Spec2('Compositing')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}</p> +{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}} -<h3 id="Remarques_concernant_WebKitBlink">Remarques concernant WebKit/Blink</h3> +### Remarques concernant WebKit/Blink -<ul> - <li>Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète <code>ctx.setCompositeOperation()</code> est implémentée à la place de cette propriété.</li> - <li>Le support de <code>"plus-darker"</code> et<code>"darker"</code> a été abandonné à partir de Chrome 48. Veuillez utiliser <code>"darken"</code> à la place.</li> -</ul> +- Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète `ctx.setCompositeOperation()` est implémentée à la place de cette propriété. +- Le support de `"plus-darker"` et`"darker"` a été abandonné à partir de Chrome 48. Veuillez utiliser `"darken"` à la place. -<h3 id="Remarques_concernant_Gecko">Remarques concernant Gecko</h3> +### Remarques concernant Gecko -<ul> - <li>Une version préliminaire de la spécification de Canvas définissait une valeur <code>"darker"</code>. Cependant, Firefox a abandonné le support de <code>"darker"</code> dans sa version 4 ({{bug(571532)}}). Voir aussi <a href="http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker">cet article de blog</a> qui suggère l'utilisation de <code>"difference"</code> pour parvenir à un effet similaire à <code>"darker"</code>.</li> -</ul> +- Une version préliminaire de la spécification de Canvas définissait une valeur `"darker"`. Cependant, Firefox a abandonné le support de `"darker"` dans sa version 4 ({{bug(571532)}}). Voir aussi [cet article de blog](http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker) qui suggère l'utilisation de `"difference"` pour parvenir à un effet similaire à `"darker"`. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui définit cette propriété : {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</li> -</ul> +- L'interface qui définit cette propriété : {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.globalAlpha")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md index d9064377d8..27fa24574b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md @@ -11,37 +11,37 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled --- -<div>{{APIRef}} {{SeeCompatTable}}</div> +{{APIRef}} {{SeeCompatTable}} -<p>La propriété <code>CanvasRenderingContext2D.imageSmoothingEnabled</code> de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (<code>true</code>, par défaut) ou non (<code>false</code>). Lors de la récupération de la propriété <code>imageSmoothingEnabled</code>, la dernière valeur à laquelle elle a été définie est renvoyée.</p> +La propriété `CanvasRenderingContext2D.imageSmoothingEnabled` de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (`true`, par défaut) ou non (`false`). Lors de la récupération de la propriété `imageSmoothingEnabled`, la dernière valeur à laquelle elle a été définie est renvoyée. -<p>Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à <code>false</code> dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}.</p> +Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à `false` dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.imageSmoothingEnabled = valeur;</var></pre> + ctx.imageSmoothingEnabled = valeur; -<h3 id="Options">Options</h3> +### Options -<dl> - <dt><code>valeur</code></dt> - <dd>Un {{jsxref("Boolean")}} indiquant de lisser les images ou non.</dd> -</dl> +- `valeur` + - : Un {{jsxref("Boolean")}} indiquant de lisser les images ou non. -<h2 id="exemples">exemples</h2> +## exemples -<h3 id="désactiver_le_lissage_d_image">Désactiver le lissage d'image</h3> +### Désactiver le lissage d'image -<p>Dans cet exemple, on compare trois images. La première image est dessinée avec sa taille naturelle, la deuxième est élargie pour obtenir 3 fois la taille originale et le lissage est activée, la troisième est élargie pour obtenir 3 fois la taille originale et le lissage est désactivé.</p> +Dans cet exemple, on compare trois images. La première image est dessinée avec sa taille naturelle, la deuxième est élargie pour obtenir 3 fois la taille originale et le lissage est activée, la troisième est élargie pour obtenir 3 fois la taille originale et le lissage est désactivé. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas" width="460" height="210"></canvas> -</pre> +```html +<canvas id="canvas" width="460" height="210"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js;">const canvas = document.getElementById('canvas'); +```js +const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.font = '16px sans-serif'; @@ -64,36 +64,23 @@ img.onload = function() { ctx.imageSmoothingEnabled = false; ctx.drawImage(img, w * 4, 24, w * 3, h * 3); }; -</pre> +``` -<h4 id="résultat">Résultat</h4> +#### Résultat -<p>{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }}</p> +{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}</p> +{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{cssxref("image-rendering")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{cssxref("image-rendering")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.md b/files/fr/web/api/canvasrenderingcontext2d/index.md index 73758824a3..68b20a683f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/index.md @@ -8,373 +8,311 @@ tags: - graphique translation_of: Web/API/CanvasRenderingContext2D --- -<p>{{APIRef}}</p> - -<p>L'interface <strong>CanvasRenderingContext2D</strong> est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}.</p> - -<p>Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <code><canvas></code>, en fournissant "2d" comme argument :</p> - -<pre>var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas> -var ctx = canevas.getContext('2d'); -</pre> - -<p>Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple :</p> - -<pre>ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle -ctx.fillRect(10, 10, 55, 50); // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50 -</pre> - -<p>Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">tutoriel canvas</a> a davantage d'informations, d'exemples et de ressources également.</p> - -<h2 id="Dessin_de_rectangles">Dessin de rectangles</h2> - -<p>Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt> - <dd>Initialise tous les pixels dans le rectangle défini par le point de départ <em>(x, y)</em> et la taille <em>(largeur, hauteur)</em> à noir transparent, en effaçant tout contenu précédemment dessiné.</dd> - <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt> - <dd>Dessine un rectangle rempli à la position <em>(x, y)</em> dont la taille est déterminée par <em>largeur</em> et <em>hauteur</em>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt> - <dd>Peint un rectangle ayant un point de départ en <em>(x, y)</em>, une largeur <em>l</em> et une hauteur <em>h</em> sur le canevas, en utilisant le style de trait en cours.</dd> -</dl> - -<h2 id="Dessiner_du_texte">Dessiner du texte</h2> - -<p>Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt> - <dd>Dessine (rempli) un texte donné à la position (x,y) donnée.</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt> - <dd>Dessine (contour) un texte donné à la position (x, y) donnée.</dd> - <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt> - <dd>Renvoie un objet {{domxref("TextMetrics")}}.</dd> -</dl> - -<h2 id="Styles_de_ligne">Styles de ligne</h2> - -<p>Les méthodes et propriétés suivantes controllent comment les lignes sont dessinées.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt> - <dd>Largeur des lignes. Défaut <code>1.0</code></dd> - <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt> - <dd>Type de finission pour la fin de la ligne. Valeurs possible: <code>butt</code> (défaut), <code>round</code>, <code>square</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt> - <dd>Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: <code>round</code>, <code>bevel</code>, <code>miter</code> (défaut).</dd> - <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt> - <dd>Le taux limite du miter. Sa valeur par défaut est <code>10</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt> - <dd>Retourne le tableau de modèle du trait courant contenant un nombre pair de nombre positifs.</dd> - <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt> - <dd>Définit le modèle du trait courant.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt> - <dd>Specifies where to start a dash array on a line.</dd> -</dl> - -<h2 id="Styles_de_texte">Styles de texte</h2> - -<p>Les propriétés suivantes contrôlent la manière dont le texte est rendu à l’affichage.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt> - <dd>Paramètre de fonte dont la valeur par défaut est <code>10px sans-serif</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt> - <dd>Paramètre d’alignement horizontal. Ses valeurs possibles sont : <code>start</code> (par défaut), <code>end</code>, <code>left</code>, <code>right</code> et <code>center</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt> - <dd>Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (par défaut), <code>ideographic</code>, <code>bottom</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt> - <dd>Direction d’affichage. Ses valeurs possibles sont : <code>ltr, rtl</code>, <code>inherit</code> (par défaut).</dd> -</dl> - -<h2 id="Fill_and_stroke_styles">Fill and stroke styles</h2> - -<p>Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt> - <dd>Color or style to use inside shapes. Default <code>#000</code> (black).</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt> - <dd>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</dd> -</dl> - -<h2 id="Gradients_and_patterns">Gradients and patterns</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt> - <dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd> - <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt> - <dd>Creates a radial gradient given by the coordinates of the two circles represented by the parameters.</dd> - <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt> - <dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd> -</dl> - -<h2 id="Shadows">Shadows</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt> - <dd>Specifies the blurring effect. Default <code>0</code></dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt> - <dd>Color of the shadow. Default fully-transparent black.</dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt> - <dd>Horizontal distance the shadow will be offset. Default 0.</dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt> - <dd>Vertical distance the shadow will be offset. Default 0.</dd> -</dl> - -<h2 id="Paths">Paths</h2> - -<p>The following methods can be used to manipulate paths of objects.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt> - <dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd> - <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt> - <dd>Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</dd> - <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt> - <dd>Moves the starting point of a new sub-path to the <strong>(x, y)</strong> coordinates.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt> - <dd>Connects the last point in the subpath to the <code>x, y</code> coordinates with a straight line.</dd> - <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt> - <dd>Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using <code>moveTo()</code>before creating the Bézier curve.</dd> - <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt> - <dd>Adds a quadratic Bézier curve to the current path.</dd> - <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt> - <dd>Adds an arc to the path which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd> - <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt> - <dd>Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.</dd> - <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt> - <dd>Adds an ellipse to the path which is centered at <em>(x, y)</em> position with the radii <em>radiusX</em> and <em>radiusY</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd> - <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt> - <dd>Creates a path for a rectangle at<em> </em>position <em>(x, y)</em> with a size that is determined by <em>width</em> and <em>height</em>.</dd> -</dl> - -<h2 id="Drawing_paths">Drawing paths</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt> - <dd>Fills the subpaths with the current fill style.</dd> - <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt> - <dd>Strokes the subpaths with the current stroke style.</dd> - <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt> - <dd>If a given element is focused, this method draws a focus ring around the current path.</dd> - <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt> - <dd>Scrolls the current path or a given path into the view.</dd> - <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt> - <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing">Clipping paths</a> in the Canvas tutorial.</dd> - <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt> - <dd>Reports whether or not the specified point is contained in the current path.</dd> - <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt> - <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd> -</dl> - -<h2 id="Transformations">Transformations</h2> - -<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt> - <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd> - <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt> - <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd> - <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt> - <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd> - <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt> - <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd> - <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt> - <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd> - <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt> - <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd> - <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt> - <dd>Resets the current transform by the identity matrix.</dd> -</dl> - -<h2 id="Compositing">Compositing</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt> - <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code>(opaque).</dd> - <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt> - <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd> -</dl> - -<h2 id="Drawing_images">Drawing images</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt> - <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd> -</dl> - -<h2 id="Pixel_manipulation">Pixel manipulation</h2> - -<p>See also the {{domxref("ImageData")}} object.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt> - <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd> - <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt> - <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd> - <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt> - <dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd> -</dl> - -<h2 id="Image_smoothing">Image smoothing</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt> - <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd> -</dl> - -<h2 id="The_canvas_state">The canvas state</h2> - -<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt> - <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt> - <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt> - <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd> -</dl> - -<h2 id="Hit_regions">Hit regions</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> - <dd>Adds a hit region to the canvas.</dd> - <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> - <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd> - <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> - <dd>Removes all hit regions from the canvas.</dd> -</dl> - -<h2 id="Non-standard_APIs">Non-standard APIs</h2> - -<h3 id="Blink_and_WebKit">Blink and WebKit</h3> - -<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and will be removed in the future</a>.</p> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt> - <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt> - <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd> -</dl> - -<h3 id="Blink_only">Blink only</h3> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt> - <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd> -</dl> - -<h3 id="WebKit_only">WebKit only</h3> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt> - <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt> - <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt> - <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> -</dl> - -<dl> -</dl> - -<h3 id="Gecko_only">Gecko only</h3> - -<dl> - <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt> - <dd>CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.</dd> -</dl> - -<h4 id="Prefixed_APIs">Prefixed APIs</h4> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt> - <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }}</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt> - <dd>Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }}</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt> - <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd> - <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt> - <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd> - <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt> - <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd> - <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt> - <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd> - <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt> - <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> - <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt> - <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> -</dl> - -<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4> - -<dl> - <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt> - <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt> - <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd> -</dl> - -<h3 id="Internet_Explorer">Internet Explorer</h3> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt> - <dd>The <a href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("api.CanvasRenderingContext2D")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("HTMLCanvasElement")}}</li> -</ul> +{{APIRef}} + +L'interface **CanvasRenderingContext2D** est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}. + +Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément `<canvas>`, en fournissant "2d" comme argument : + + var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas> + var ctx = canevas.getContext('2d'); + +Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple : + + ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle + ctx.fillRect(10, 10, 55, 50); // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50 + +Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le [tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial) a davantage d'informations, d'exemples et de ressources également. + +## Dessin de rectangles + +Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap. + +- {{domxref("CanvasRenderingContext2D.clearRect()")}} + - : Initialise tous les pixels dans le rectangle défini par le point de départ _(x, y)_ et la taille _(largeur, hauteur)_ à noir transparent, en effaçant tout contenu précédemment dessiné. +- {{domxref("CanvasRenderingContext2D.fillRect()")}} + - : Dessine un rectangle rempli à la position _(x, y)_ dont la taille est déterminée par _largeur_ et _hauteur_. +- {{domxref("CanvasRenderingContext2D.strokeRect()")}} + - : Peint un rectangle ayant un point de départ en *(x, y)*, une largeur *l* et une hauteur _h_ sur le canevas, en utilisant le style de trait en cours. + +## Dessiner du texte + +Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte. + +- {{domxref("CanvasRenderingContext2D.fillText()")}} + - : Dessine (rempli) un texte donné à la position (x,y) donnée. +- {{domxref("CanvasRenderingContext2D.strokeText()")}} + - : Dessine (contour) un texte donné à la position (x, y) donnée. +- {{domxref("CanvasRenderingContext2D.measureText()")}} + - : Renvoie un objet {{domxref("TextMetrics")}}. + +## Styles de ligne + +Les méthodes et propriétés suivantes controllent comment les lignes sont dessinées. + +- {{domxref("CanvasRenderingContext2D.lineWidth")}} + - : Largeur des lignes. Défaut `1.0` +- {{domxref("CanvasRenderingContext2D.lineCap")}} + - : Type de finission pour la fin de la ligne. Valeurs possible: `butt` (défaut), `round`, `square`. +- {{domxref("CanvasRenderingContext2D.lineJoin")}} + - : Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: `round`, `bevel`, `miter` (défaut). +- {{domxref("CanvasRenderingContext2D.miterLimit")}} + - : Le taux limite du miter. Sa valeur par défaut est `10`. +- {{domxref("CanvasRenderingContext2D.getLineDash()")}} + - : Retourne le tableau de modèle du trait courant contenant un nombre pair de nombre positifs. +- {{domxref("CanvasRenderingContext2D.setLineDash()")}} + - : Définit le modèle du trait courant. +- {{domxref("CanvasRenderingContext2D.lineDashOffset")}} + - : Specifies where to start a dash array on a line. + +## Styles de texte + +Les propriétés suivantes contrôlent la manière dont le texte est rendu à l’affichage. + +- {{domxref("CanvasRenderingContext2D.font")}} + - : Paramètre de fonte dont la valeur par défaut est `10px sans-serif`. +- {{domxref("CanvasRenderingContext2D.textAlign")}} + - : Paramètre d’alignement horizontal. Ses valeurs possibles sont : `start` (par défaut), `end`, `left`, `right` et `center`. +- {{domxref("CanvasRenderingContext2D.textBaseline")}} + - : Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : `top`, `hanging`, `middle`, `alphabetic` (par défaut), `ideographic`, `bottom`. +- {{domxref("CanvasRenderingContext2D.direction")}} + - : Direction d’affichage. Ses valeurs possibles sont : `ltr, rtl`, `inherit` (par défaut). + +## Fill and stroke styles + +Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes. + +- {{domxref("CanvasRenderingContext2D.fillStyle")}} + - : Color or style to use inside shapes. Default `#000` (black). +- {{domxref("CanvasRenderingContext2D.strokeStyle")}} + - : Color or style to use for the lines around shapes. Default `#000` (black). + +## Gradients and patterns + +- {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} + - : Creates a linear gradient along the line given by the coordinates represented by the parameters. +- {{domxref("CanvasRenderingContext2D.createRadialGradient()")}} + - : Creates a radial gradient given by the coordinates of the two circles represented by the parameters. +- {{domxref("CanvasRenderingContext2D.createPattern()")}} + - : Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}. + +## Shadows + +- {{domxref("CanvasRenderingContext2D.shadowBlur")}} + - : Specifies the blurring effect. Default `0` +- {{domxref("CanvasRenderingContext2D.shadowColor")}} + - : Color of the shadow. Default fully-transparent black. +- {{domxref("CanvasRenderingContext2D.shadowOffsetX")}} + - : Horizontal distance the shadow will be offset. Default 0. +- {{domxref("CanvasRenderingContext2D.shadowOffsetY")}} + - : Vertical distance the shadow will be offset. Default 0. + +## Paths + +The following methods can be used to manipulate paths of objects. + +- {{domxref("CanvasRenderingContext2D.beginPath()")}} + - : Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path. +- {{domxref("CanvasRenderingContext2D.closePath()")}} + - : Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing. +- {{domxref("CanvasRenderingContext2D.moveTo()")}} + - : Moves the starting point of a new sub-path to the **(x, y)** coordinates. +- {{domxref("CanvasRenderingContext2D.lineTo()")}} + - : Connects the last point in the subpath to the `x, y` coordinates with a straight line. +- {{domxref("CanvasRenderingContext2D.bezierCurveTo()")}} + - : Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using `moveTo()`before creating the Bézier curve. +- {{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}} + - : Adds a quadratic Bézier curve to the current path. +- {{domxref("CanvasRenderingContext2D.arc()")}} + - : Adds an arc to the path which is centered at *(x, y)* position with radius *r* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). +- {{domxref("CanvasRenderingContext2D.arcTo()")}} + - : Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line. +- {{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}} + - : Adds an ellipse to the path which is centered at *(x, y)* position with the radii *radiusX* and *radiusY* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). +- {{domxref("CanvasRenderingContext2D.rect()")}} + - : Creates a path for a rectangle at\* *position *(x, y)* with a size that is determined by *width* and *height\*. + +## Drawing paths + +- {{domxref("CanvasRenderingContext2D.fill()")}} + - : Fills the subpaths with the current fill style. +- {{domxref("CanvasRenderingContext2D.stroke()")}} + - : Strokes the subpaths with the current stroke style. +- {{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} + - : If a given element is focused, this method draws a focus ring around the current path. +- {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} + - : Scrolls the current path or a given path into the view. +- {{domxref("CanvasRenderingContext2D.clip()")}} + - : Creates a clipping path from the current sub-paths. Everything drawn after `clip()` is called appears inside the clipping path only. For an example, see [Clipping paths](/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing) in the Canvas tutorial. +- {{domxref("CanvasRenderingContext2D.isPointInPath()")}} + - : Reports whether or not the specified point is contained in the current path. +- {{domxref("CanvasRenderingContext2D.isPointInStroke()")}} + - : Reports whether or not the specified point is inside the area contained by the stroking of a path. + +## Transformations + +Objects in the `CanvasRenderingContext2D` rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead. + +- {{domxref("CanvasRenderingContext2D.currentTransform")}} + - : Current transformation matrix ({{domxref("SVGMatrix")}} object). +- {{domxref("CanvasRenderingContext2D.rotate()")}} + - : Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians. +- {{domxref("CanvasRenderingContext2D.scale()")}} + - : Adds a scaling transformation to the canvas units by x horizontally and by y vertically. +- {{domxref("CanvasRenderingContext2D.translate()")}} + - : Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid. +- {{domxref("CanvasRenderingContext2D.transform()")}} + - : Multiplies the current transformation matrix with the matrix described by its arguments. +- {{domxref("CanvasRenderingContext2D.setTransform()")}} + - : Resets the current transform to the identity matrix, and then invokes the `transform()` method with the same arguments. +- {{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}} + - : Resets the current transform by the identity matrix. + +## Compositing + +- {{domxref("CanvasRenderingContext2D.globalAlpha")}} + - : Alpha value that is applied to shapes and images before they are composited onto the canvas. Default `1.0`(opaque). +- {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} + - : With `globalAlpha` applied this sets how shapes and images are drawn onto the existing bitmap. + +## Drawing images + +- {{domxref("CanvasRenderingContext2D.drawImage()")}} + - : Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use. + +## Pixel manipulation + +See also the {{domxref("ImageData")}} object. + +- {{domxref("CanvasRenderingContext2D.createImageData()")}} + - : Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black. +- {{domxref("CanvasRenderingContext2D.getImageData()")}} + - : Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at *(sx, sy)* and has an *sw* width and *sh* height. +- {{domxref("CanvasRenderingContext2D.putImageData()")}} + - : Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted. + +## Image smoothing + +- {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}} + - : Image smoothing mode; if disabled, images will not be smoothed if scaled. + +## The canvas state + +The `CanvasRenderingContext2D` rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state: + +- {{domxref("CanvasRenderingContext2D.save()")}} + - : Saves the current drawing style state using a stack so you can revert any change you make to it using `restore()`. +- {{domxref("CanvasRenderingContext2D.restore()")}} + - : Restores the drawing style state to the last element on the 'state stack' saved by `save()`. +- {{domxref("CanvasRenderingContext2D.canvas")}} + - : A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element. + +## Hit regions + +- {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}} + - : Adds a hit region to the canvas. +- {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}} + - : Removes the hit region with the specified `id` from the canvas. +- {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}} + - : Removes all hit regions from the canvas. + +## Non-standard APIs + +### Blink and WebKit + +Most of these APIs are [deprecated and will be removed in the future](https://code.google.com/p/chromium/issues/detail?id=363198). + +- {{non-standard_inline}} `CanvasRenderingContext2D.clearShadow()` + - : Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}. +- {{non-standard_inline}} `CanvasRenderingContext2D.drawImageFromRect()` + - : This is redundant with an equivalent overload of `drawImage`. +- {{non-standard_inline}} `CanvasRenderingContext2D.setAlpha()` + - : Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setCompositeOperation()` + - : Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineWidth()` + - : Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineJoin()` + - : Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineCap()` + - : Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setMiterLimit()` + - : Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setStrokeColor()` + - : Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setFillColor()` + - : Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setShadow()` + - : Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDash` + - : Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDashOffset` + - : Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitImageSmoothingEnabled` + - : Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead. + +### Blink only + +- {{non-standard_inline}} `CanvasRenderingContext2D.isContextLost()` + - : Inspired by the same `WebGLRenderingContext` method it returns `true` if the Canvas context has been lost, or `false` if not. + +### WebKit only + +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitBackingStorePixelRatio` + - : The backing store size in relation to the canvas element. See [High DPI Canvas](http://www.html5rocks.com/en/tutorials/canvas/hidpi/). +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitGetImageDataHD` + - : Intended for HD backing stores, but removed from canvas specifications. +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitPutImageDataHD` + - : Intended for HD backing stores, but removed from canvas specifications. + +<!----> + +### Gecko only + +- {{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}} + - : CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification. + +#### Prefixed APIs + +- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransform` + - : Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }} +- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransformInverse` + - : Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }} +- {{non-standard_inline}} `CanvasRenderingContext2D.mozImageSmoothingEnabled` + - : See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}. +- {{non-standard_inline}} {{deprecated_inline}} `CanvasRenderingContext2D.mozTextStyle` + - : Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property. +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozDrawText()` + - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead. +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozMeasureText()` + - : This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead. +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozPathText()` + - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozTextAlongPath()` + - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. + +#### Internal APIs (chrome-context only) + +- {{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}} + - : Renders a region of a window into the `canvas`. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling. +- {{non-standard_inline}} `CanvasRenderingContext2D.demote()` + - : This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved. + +### Internet Explorer + +- {{non-standard_inline}} `CanvasRenderingContext2D.msFillRule` + - : The [fill rule](http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t) to use. This must be one of `evenodd` or `nonzero` (default). + +## Specifications + +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}} | {{Spec2('HTML WHATWG')}} | | + +## Browser compatibility + +{{Compat("api.CanvasRenderingContext2D")}} + +## See also + +- {{domxref("HTMLCanvasElement")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md index ee87a2aafe..033a50cd4c 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md @@ -9,43 +9,43 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/lineCap --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <strong>CanvasRenderingContext2D.lineCap</strong> de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : <code>butt</code>, <code>round</code> et <code>square</code>. Par défaut, cette propriété est définie comme <code>butt</code>.</p> +La propriété **CanvasRenderingContext2D.lineCap** de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : `butt`, `round` et `square`. Par défaut, cette propriété est définie comme `butt`. -<p>Voir aussi le chapitre <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a> dans le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">Tutoriel canvas</a>.</p> +Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.lineCap = "butt"; -<var><em>ctx</em>.lineCap = "round"; -<var><em>ctx</em>.lineCap = "square";</var></var></var></pre> + ctx.lineCap = "butt"; + ctx.lineCap = "round"; + ctx.lineCap = "square"; -<h3 id="Options">Options</h3> +### Options -<dl> - <dt><code>butt</code></dt> - <dd>Les extrémités de ligne sont coupées à angle droit.</dd> - <dt><code>round</code></dt> - <dd>Les extrémités de ligne sont arrondies.</dd> - <dt><code>square</code></dt> - <dd>Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié.</dd> -</dl> +- `butt` + - : Les extrémités de ligne sont coupées à angle droit. +- `round` + - : Les extrémités de ligne sont arrondies. +- `square` + - : Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_lineCap_property">Utilisation de la propriété <code>lineCap</code></h3> +### Utilisation de la propriété `lineCap` -<p>Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies.</p> +Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> +```html +<canvas id="canevas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canevas = document.getElementById('canevas'); +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.beginPath(); @@ -54,27 +54,29 @@ ctx.lineWidth = 15; ctx.lineCap = 'round'; ctx.lineTo(100, 100); ctx.stroke(); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas :</p> +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="modifier" type="button" value="Modifier" /> - <input id="effacer" type="button" value="Effacer" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="modifier" type="button" value="Modifier" /> + <input id="effacer" type="button" value="Effacer" /> +</div> +<textarea id="code" class="playable-code"> ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineWidth = 15; ctx.lineCap = 'round'; ctx.lineTo(100, 100); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canevas = document.getElementById('canevas'); +```js hidden +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); var zoneTexte = document.getElementById('code'); var effacer = document.getElementById('effacer'); @@ -97,17 +99,18 @@ modifier.addEventListener('click', function() { zoneTexte.addEventListener('input', dessinerCanevas); window.addEventListener('load', dessinerCanevas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h3 id="A_lineCap_example">Un exemple de <code>lineCap</code></h3> +### Un exemple de `lineCap` -<p>Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété <code>lineCap</code>. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides.</p> +Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété `lineCap`. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides. -<p>La ligne à gauche utilise l'option par défaut <code>butt</code>. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option <code>round</code>. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option <code>square</code>. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié.</p> +La ligne à gauche utilise l'option par défaut `butt`. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option `round`. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié. -<pre class="brush: js">var ctx = document.getElementById('canevas').getContext('2d'); +```js +var ctx = document.getElementById('canevas').getContext('2d'); var lineCap = ['butt','round','square']; // Dessiner les guides @@ -121,7 +124,7 @@ ctx.stroke(); // Dessiner les lignes ctx.strokeStyle = 'black'; -for (var i = 0; i < lineCap.length; i++) { +for (var i = 0; i < lineCap.length; i++) { ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; ctx.beginPath(); @@ -129,43 +132,30 @@ for (var i = 0; i < lineCap.length; i++) { ctx.lineTo(25 + i * 50, 140); ctx.stroke(); } -</pre> +``` -<pre class="brush: html hidden"><canvas id="canevas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canevas" width="150" height="150"></canvas> +``` -<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}}</p> +{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.lineCap")}}</p> +{{Compat("api.CanvasRenderingContext2D.lineCap")}} -<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2> +## Notes spécifiques à WebKit/Blink -<ul> - <li>Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée <code>ctx.setLineCap()</code> est implémentée en plus de cette propriété.</li> -</ul> +- Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée `ctx.setLineCap()` est implémentée en plus de cette propriété. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li> - <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.lineWidth")}} +- {{domxref("CanvasRenderingContext2D.lineJoin")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md index 93b38bb13d..c438190f71 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -10,50 +10,47 @@ tags: - stroke translation_of: Web/API/CanvasRenderingContext2D/lineJoin --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineJoin</code></strong> de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection.</p> +La propriété **`CanvasRenderingContext2D`\*\***`.lineJoin`\*\* de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection. -<p>Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés.</p> +Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés. -<div class="blockIndicator note"> -<p><strong>Note:</strong> Les lignes peuvent être dessinées aves les méthodes {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.</p> -</div> +> **Note :** Les lignes peuvent être dessinées aves les méthodes {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>ctx</em>.lineJoin = "bevel" || "round" || "miter"; -</pre> + ctx.lineJoin = "bevel" || "round" || "miter"; -<h3 id="Options">Options</h3> +### Options -<p>Il y a trois valeurs possibles pour cette propriété: <code>"round"</code>, <code>"bevel"</code> et <code>"miter"</code>. Celle par défaut est <code>"miter"</code>.</p> +Il y a trois valeurs possibles pour cette propriété: `"round"`, `"bevel"` et `"miter"`. Celle par défaut est `"miter"`. -<p><img alt="" src="canvas_linejoin.png"></p> + -<dl> - <dt><code>"round"</code> (rond)</dt> - <dd>Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne .</dd> - <dt><code>"bevel"</code> (biseau)</dt> - <dd>Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés.</dd> - <dt><code>"miter"</code> (onglet)</dt> - <dd>Les segments raccordés sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut.</dd> -</dl> +- `"round"` (rond) + - : Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne . +- `"bevel"` (biseau) + - : Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés. +- `"miter"` (onglet) + - : Les segments raccordés sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Modifier_les_jointures_d'un_tracé">Modifier les jointures d'un tracé</h3> +### Modifier les jointures d'un tracé -<p>Cet exemple applique des jointures arrondies au tracé.</p> +Cet exemple applique des jointures arrondies au tracé. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">const canvas = document.getElementById('canvas'); +```js +const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.lineWidth = 20; @@ -64,23 +61,26 @@ ctx.lineTo(190, 100); ctx.lineTo(280, 20); ctx.lineTo(280, 150); ctx.stroke(); -</pre> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}</p> +{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }} -<h3 id="Comparaison_des_jointures_de_lignes">Comparaison des jointures de lignes</h3> +### Comparaison des jointures de lignes -<p>L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de <code>lineJoin</code>.</p> +L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de `lineJoin`. -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); +```js +var ctx = document.getElementById('canvas').getContext('2d'); var lineJoin = ['round', 'bevel', 'miter']; ctx.lineWidth = 10; -for (let i = 0; i < lineJoin.length; i++) { +for (let i = 0; i < lineJoin.length; i++) { ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(-5, 5 + i * 40); @@ -90,44 +90,27 @@ for (let i = 0; i < lineJoin.length; i++) { ctx.lineTo(155, 5 + i * 40); ctx.stroke(); } -</pre> +``` -<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}}</p> +{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_naviagateurs">Compatibilité des naviagateurs</h2> +## Compatibilité des naviagateurs +{{Compat("api.CanvasRenderingContext2D.lineJoin")}} +### WebKit/Blink-notes particulières -<p>{{Compat("api.CanvasRenderingContext2D.lineJoin")}}</p> +- Dans les navigateurs basés sur WebKit et Blink, une méthode `ctx.setLineJoin()` non-standard et obsolète est implémentée en plus de cette propriété. -<h3 id="WebKitBlink-notes_particulières">WebKit/Blink-notes particulières</h3> +## Voir aussi -<ul> - <li>Dans les navigateurs basés sur WebKit et Blink, une méthode <code>ctx.setLineJoin()</code> non-standard et obsolète est implémentée en plus de cette propriété.</li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface définissant cette propriété: {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li> - <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li> - <li><a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a></li> -</ul> +- L'interface définissant cette propriété: {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.lineCap")}} +- {{domxref("CanvasRenderingContext2D.lineWidth")}} +- [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md index 6ed54f222e..776fe0223d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md @@ -9,63 +9,64 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/lineTo --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineTo()</code></strong> de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées <code>x, y</code> spécifiées avec une ligne droite (sans tracer réellement le chemin).</p> +La méthode **`CanvasRenderingContext2D`\*\***`.lineTo()`\*\* de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées `x, y` spécifiées avec une ligne droite (sans tracer réellement le chemin). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.lineTo(x, y);</var> -</pre> + void ctx.lineTo(x, y); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>L'abscisse <em>x</em> du point d'arrivée.</dd> - <dt><code>y</code></dt> - <dd>L'ordonnée <em>y</em> du point d'arrivée.</dd> -</dl> +- `x` + - : L'abscisse _x_ du point d'arrivée. +- `y` + - : L'ordonnée _y_ du point d'arrivée. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_lineTo">Utilisation de la méthode <code>lineTo</code></h3> +### Utilisation de la méthode `lineTo` -<p>Ceci est un extrait de code utilisant la méthode <code>lineTo</code>. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible.</p> +Ceci est un extrait de code utilisant la méthode `lineTo`. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById("canvas"); +```js +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(100, 100); ctx.stroke(); -</pre> +``` -<p>Éditez le code suivant pour voir les changements en direct:</p> +Éditez le code suivant pour voir les changements en direct: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(100, 100); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -88,35 +89,22 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.lineTo")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.moveTo()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 360) }} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.lineTo")}} + +## Voir aussi + +- l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.moveTo()")}} +- {{domxref("CanvasRenderingContext2D.stroke()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md index ef2a1af3a9..48521a7e8d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md @@ -9,65 +9,52 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/measureText --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.measureText()</code></strong> renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple).</p> +La méthode **`CanvasRenderingContext2D`\*\***`.measureText()`\*\* renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple). -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em></var>.measureText(texte);</pre> + ctx.measureText(texte); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>texte</dt> - <dd>Le texte à mesurer.</dd> -</dl> +- texte + - : Le texte à mesurer. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Un objet {{domxref("TextMetrics")}}.</p> +Un objet {{domxref("TextMetrics")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p> +Étant donné cet élément {{HTMLElement("canvas")}} : -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> +```html +<canvas id="canevas"></canvas> +``` -<p>vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :</p> +vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : -<pre class="brush: js">var canevas = document.getElementById('canevas'); +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); var texte = ctx.measureText('foo'); // objet TextMetrics texte.width; // 16; -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.measureText")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li> - <li>{{domxref("TextMetrics")}}</li> -</ul> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.measureText")}} + +## Voir aussi + +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}. +- {{domxref("TextMetrics")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md index 958b41c5aa..e2bd2fb269 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md @@ -7,63 +7,64 @@ tags: - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/moveTo --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.moveTo()</code></strong> de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées <code>(x, y)</code>.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.moveTo()`\*\* de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées `(x, y)`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.moveTo(x, y);</var> -</pre> + void ctx.moveTo(x, y); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>L'axe des x du point.</dd> - <dt><code>y</code></dt> - <dd>L'axe des y du point.</dd> -</dl> +- `x` + - : L'axe des x du point. +- `y` + - : L'axe des y du point. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_la_méthode_moveTo">Utiliser la méthode <code>moveTo</code></h3> +### Utiliser la méthode `moveTo` -<p>Ceci est un simple snippet de code qui utilise la méthode <code>moveTo</code> pour déplacer le stylo à une position de départ pour dessiner une ligne.</p> +Ceci est un simple snippet de code qui utilise la méthode `moveTo` pour déplacer le stylo à une position de départ pour dessiner une ligne. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 50); ctx.stroke(); -</pre> +``` -<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p> +Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(200, 50); -ctx.stroke()</textarea> -</pre> +ctx.stroke()</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -86,35 +87,22 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.moveTo")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.lineTo()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 360) }} + +## Spécifications + +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.moveTo")}} + +## Voir aussi + +- L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.lineTo()")}} +- {{domxref("CanvasRenderingContext2D.stroke()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md index 7587faa897..7b95e52523 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md @@ -16,42 +16,41 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.quadraticCurveTo()</code></strong> de l'API Canvas 2D ajoute une <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">courbe de Bézier</a> quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer la courbe quadratique de Bézier.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.quadraticCurveTo()`\*\* de l'API Canvas 2D ajoute une [courbe de Bézier](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer la courbe quadratique de Bézier. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void contexte2D.quadraticCurveTo(<em>pointContrôleX</em>, <em>pointContrôleY</em>, <em>pointArrivéeX</em>, <em>pointArrivéeY</em>); -</pre> + void contexte2D.quadraticCurveTo(pointContrôleX, pointContrôleY, pointArrivéeX, pointArrivéeY); -<h3 id="Paramètress">Paramètress</h3> +### Paramètress -<dl> - <dt><code>pointContrôleX</code></dt> - <dd>La coordonnée en x du point de contrôle.</dd> - <dt><code>pointContrôleY</code></dt> - <dd>La coordonnée en y du point de contrôle.</dd> - <dt><code>pointArrivéeX</code></dt> - <dd>La coordonnée en x du point d'arrivée.</dd> - <dt><code>pointArrivéeY</code></dt> - <dd>La coordonnée en y du point d'arrivée.</dd> -</dl> +- `pointContrôleX` + - : La coordonnée en x du point de contrôle. +- `pointContrôleY` + - : La coordonnée en y du point de contrôle. +- `pointArrivéeX` + - : La coordonnée en x du point d'arrivée. +- `pointArrivéeY` + - : La coordonnée en y du point d'arrivée. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Comment_quadraticCurveTo_fonctionne">Comment quadraticCurveTo fonctionne</h3> +### Comment quadraticCurveTo fonctionne -<p>Cet exemple montre comment un courbe quadratique de Bézier est dessinée.</p> +Cet exemple montre comment un courbe quadratique de Bézier est dessinée. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">const canevas = document.getElementById("canvas"); +```js +const canevas = document.getElementById("canvas"); const contexte2D= canevas.getContext("2d"); // courbe quadratique de Bézier @@ -72,66 +71,53 @@ contexte2D.fillStyle = 'red'; contexte2D.beginPath(); contexte2D.arc(230, 30, 5, 0, 2 * Math.PI); contexte2D.fill(); -</pre> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu.</p> +Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu. -<p>{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}</p> +{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}} -<h3 id="Une_courbe_quadratique_simple">Une courbe quadratique simple</h3> +### Une courbe quadratique simple -<p>Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode <code>quadraticCurveTo()</code>.</p> +Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode `quadraticCurveTo()`. -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript_2">JavaScript</h4> +#### JavaScript -<p>La courbe commence au point spécifié par <code>moveTo()</code>: (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20).</p> +La courbe commence au point spécifié par `moveTo()`: (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20). -<pre class="brush: js">const canevas = document.getElementById("canvas"); +```js +const canevas = document.getElementById("canvas"); const contexte2D = canevas.getContext("2d"); contexte2D.beginPath(); contexte2D.moveTo(20, 110); contexte2D.quadraticCurveTo(230, 150, 250, 20); contexte2D.stroke(); -</pre> +``` -<h4 id="Résultat_2">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}}</p> +{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}} +## Voir aussi -<p>{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}}</li> - <li><a href="http://fr.wikipedia.org/wiki/Courbe_de_Bézier">L'article Wikipédia sur les courbes quadratiques de Bézier</a></li> -</ul> +- L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}} +- [L'article Wikipédia sur les courbes quadratiques de Bézier](http://fr.wikipedia.org/wiki/Courbe_de_Bézier) diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md index 8a822dd115..982b8594f8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md @@ -8,62 +8,63 @@ tags: - Méthode translation_of: Web/API/CanvasRenderingContext2D/rect --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong> de l'API Canvas 2D crée un chemin de rectangle à la position <em>(x, y)</em> et de dimensions <em>width</em> et <em>height</em>. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser <code>fill</code> ou <code>stroke</code> pour dessiner ce rectangle.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.rect()`\*_ de l'API Canvas 2D crée un chemin de rectangle à la position _(x, y)* et de dimensions *width* et *height\*. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser `fill` ou `stroke` pour dessiner ce rectangle. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.rect(x, y, width, height);</var> -</pre> + void ctx.rect(x, y, width, height); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>La coordonnée x pour le côté gauche du rectangle.</dd> - <dt><code>y</code></dt> - <dd>La coordonnée y pour le haut du rectangle.</dd> - <dt><code>width</code></dt> - <dd>La largeur du rectangle.</dd> - <dt><code>height</code></dt> - <dd>La hauteur du rectangle.</dd> -</dl> +- `x` + - : La coordonnée x pour le côté gauche du rectangle. +- `y` + - : La coordonnée y pour le haut du rectangle. +- `width` + - : La largeur du rectangle. +- `height` + - : La hauteur du rectangle. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_la_méthode_rect">Utiliser la méthode <code>rect</code></h3> +### Utiliser la méthode `rect` -<p>Ceci est un simple bout de code qui utilise la méthode <code>rect</code> pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape.</p> +Ceci est un simple bout de code qui utilise la méthode `rect` pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); -</pre> +``` -<p>Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:</p> +Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); -ctx.fill();</textarea> -</pre> +ctx.fill();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -86,37 +87,24 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.rect")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.fillRect")}}</li> - <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.fill()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 360) }} + +## Spécifications + +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.rect")}} + +## Voir aussi + +- L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.fillRect")}} +- {{domxref("CanvasRenderingContext2D.strokeRect()")}} +- {{domxref("CanvasRenderingContext2D.fill()")}} +- {{domxref("CanvasRenderingContext2D.stroke()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md index 5cde5f8af5..3aec5226fa 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md @@ -9,40 +9,39 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/rotate --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rotate()</code></strong><code> de l'API</code> Canvas 2D ajoute une rotation à la matrice de transformation. L'argument angle représente un angle de rotation horaire et il est exprimé en radians.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.rotate()`\*\*` de l'API` Canvas 2D ajoute une rotation à la matrice de transformation. L'argument angle représente un angle de rotation horaire et il est exprimé en radians. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.rotate(angle);</var> -</pre> + void ctx.rotate(angle); -<p><img alt="" src="canvas_grid_rotate.png"></p> + -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>angle</code></dt> - <dd>L'angle de rotation horaire en radians. Vous pouvez utiliser <code><em>degrés</em> * Math.PI / 180</code> si vous voulez faire la conversion à partir d'une valeur en degrés.</dd> -</dl> +- `angle` + - : L'angle de rotation horaire en radians. Vous pouvez utiliser `degrés * Math.PI / 180` si vous voulez faire la conversion à partir d'une valeur en degrés. -<p>Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.</p> +Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_rotate">Utilisation de la méthode <code>rotate</code></h3> +### Utilisation de la méthode `rotate` -<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>rotate</code>.</p> +Ceci est seulement un fragment de code simple qui utilise la méthode `rotate`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rotate(45 * Math.PI / 180); @@ -50,24 +49,26 @@ ctx.fillRect(70, 0, 100, 30); // réinitialise la matrice de transformation courante à la matrice identité ctx.setTransform(1, 0, 0, 1, 0, 0); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.rotate(45 * Math.PI / 180); ctx.fillRect(70,0,100,30); -ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> -</pre> +ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -90,33 +91,20 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.rotate")}}</p> +{{Compat("api.CanvasRenderingContext2D.rotate")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/save/index.md b/files/fr/web/api/canvasrenderingcontext2d/save/index.md index d91e31ffbe..cc49bad21e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/save/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/save/index.md @@ -9,39 +9,39 @@ tags: - Save translation_of: Web/API/CanvasRenderingContext2D/save --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.save()</code></strong> de l'API Canvas 2D API enregistre l'état complet du canvas en plaçant l'état courant dans une stack.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.save()`\*\* de l'API Canvas 2D API enregistre l'état complet du canvas en plaçant l'état courant dans une stack. -<h3 id="Létat_du_dessin">L'état du dessin</h3> +### L'état du dessin -<p>L'état du dessin qui est sauvegardé dans une stack se compose de:</p> +L'état du dessin qui est sauvegardé dans une stack se compose de: -<ul> - <li>La matrice de transformation actuelle.</li> - <li>La région de détourage actuelle.</li> - <li>Le tableau pour les tracés en pointillés.</li> - <li>Les valeurs des attributs suivant: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li> -</ul> +- La matrice de transformation actuelle. +- La région de détourage actuelle. +- Le tableau pour les tracés en pointillés. +- Les valeurs des attributs suivant: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <em>ctx</em>.save();</pre> + void ctx.save(); -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="Enregistrer_létat_du_dessin">Enregistrer l'état du dessin</h3> +### Enregistrer l'état du dessin -<p>Cet exemple utilise la méthode <code>save()</code> pour enregistrer l'état par défaut et <code>restore()</code> pour le rétablir plus tard, on pourra ainsi dessiner un rectangle avec l'état de base après.</p> +Cet exemple utilise la méthode `save()` pour enregistrer l'état par défaut et `restore()` pour le rétablir plus tard, on pourra ainsi dessiner un rectangle avec l'état de base après. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">const canvas = document.getElementById('canvas'); +```js +const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // On sauvegarde l'état par défaut @@ -54,38 +54,23 @@ ctx.fillRect(10, 10, 100, 100); ctx.restore(); ctx.fillRect(150, 40, 100, 100); -</pre> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}</p> +{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.CanvasRenderingContext2D.save")}} +## Voir aussi -<p>{{Compat("api.CanvasRenderingContext2D.save")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface définissant cette méthode: {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.restore()")}}</li> -</ul> +- L'interface définissant cette méthode: {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.restore()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md index cb24a37aa0..f8ca5735cb 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md @@ -9,40 +9,39 @@ tags: - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/scale --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méhode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.scale()</code></strong> de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement.</p> +La méhode **`CanvasRenderingContext2D`\*\***`.scale()`\*\* de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement. -<p>Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes.</p> +Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.scale(x, y);</var> -</pre> + void ctx.scale(x, y); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>Facteur d'échelle dans la direction horizontale.</dd> - <dt>y</dt> - <dd>Facteur d'échelle dans la direction verticale.</dd> -</dl> +- `x` + - : Facteur d'échelle dans la direction horizontale. +- y + - : Facteur d'échelle dans la direction verticale. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_scale">Utilisation de la méthode <code>scale</code></h3> +### Utilisation de la méthode `scale` -<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>scale</code>.</p> +Ceci est seulement un fragment de code simple qui utilise la méthode `scale`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.scale(10, 3); @@ -50,24 +49,26 @@ ctx.fillRect(10, 10, 10, 10); // remet la matrice de transformation courante à la matrice identité ctx.setTransform(1, 0, 0, 1, 0, 0); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.scale(10, 3); ctx.fillRect(10,10,10,10); -ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> -</pre> +ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -90,29 +91,31 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h3 id="Utilisation_de_scale_pour_un_retournement_horizontal_ou_vertical">Utilisation de <code>scale</code> pour un retournement horizontal ou vertical</h3> +### Utilisation de `scale` pour un retournement horizontal ou vertical -<p>Vous pouvez utiliser <code>ctx.scale(-1, 1)</code> pour retourner le contexte horizontalement et <code>ctx.scale(1, -1) </code>pour le retourner verticalement.</p> +Vous pouvez utiliser `ctx.scale(-1, 1)` pour retourner le contexte horizontalement et `ctx.scale(1, -1) `pour le retourner verticalement. -<h4 id="code_jouable_2">Code jouable 2</h4> +#### Code jouable 2 -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.scale(-1, 1); ctx.font = "48px serif"; ctx.fillText("Hello world!", -320, 120); -ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> -</pre> +ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -135,33 +138,20 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable_2', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable_2', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2> +## Compatibilité navigateur -<p>{{Compat("api.CanvasRenderingContext2D.scale")}}</p> +{{Compat("api.CanvasRenderingContext2D.scale")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md index e8cdb0416e..520e2c8bb5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md @@ -14,42 +14,39 @@ tags: - setLineDash translation_of: Web/API/CanvasRenderingContext2D/setLineDash --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <strong><code>setLineDash()</code></strong> de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux.</p> +La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux. -<div class="note"> -<p><strong>Note :</strong> Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.</p> -</div> +> **Note :** Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.setLineDash(segments);</var> -</pre> + ctx.setLineDash(segments); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>segments</code></dt> - <dd>Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, <code>[5, 15, 25]</code> est transformé en <code>[5, 15, 25, 5, 15, 25]</code>. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine.</dd> -</dl> +- `segments` + - : Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, `[5, 15, 25]` est transformé en `[5, 15, 25, 5, 15, 25]`. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p><code>undefined</code>.</p> +`undefined`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>C'est simplement un fragment de code qui utilise la méthode <code>setLineDash()</code> pour dessiner une ligne pointillée au dessus d'une ligne pleine.</p> +C'est simplement un fragment de code qui utilise la méthode `setLineDash()` pour dessiner une ligne pointillée au dessus d'une ligne pleine. -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); @@ -63,20 +60,21 @@ ctx.setLineDash([]); ctx.moveTo(0, 150); ctx.lineTo(400, 150); ctx.stroke(); -</pre> +``` -<h3 id="Essayez_le">Essayez le</h3> +### Essayez le -<p>Editez le code ci-dessous et observez les changements se produire dans le canvas:</p> +Editez le code ci-dessous et observez les changements se produire dans le canvas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code" style="height:150px"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code" style="height:150px"> ctx.beginPath(); ctx.setLineDash([5, 15]); ctx.moveTo(0, 50); @@ -87,10 +85,11 @@ ctx.beginPath(); ctx.setLineDash([]); ctx.moveTo(0, 150); ctx.lineTo(400, 150); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -113,47 +112,30 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 10, 410) }}</p> +{{ EmbedLiveSample('code_jouable', 10, 410) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navivgateurs">Compatibilité des navivgateurs</h2> +## Compatibilité des navivgateurs -<p>{{Compat("api.CanvasRenderingContext2D.setLineDash")}}</p> +{{Compat("api.CanvasRenderingContext2D.setLineDash")}} -<h2 id="Notes_spécifiques_pour_Gecko">Notes spécifiques pour Gecko</h2> +## Notes spécifiques pour Gecko -<ul> - <li>Depuis Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée <code>mozDash</code> a été implémentée comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez <code>setLineDash()</code> à la place.</li> -</ul> +- Depuis Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée `mozDash` a été implémentée comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez `setLineDash()` à la place. -<h2 id="Notes_spécifiques_pour_WebKit">Notes spécifiques pour WebKit</h2> +## Notes spécifiques pour WebKit -<ul> - <li>Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée <code>webkitLineDash</code> est implémentée en plus de cette méthode. Utilisez <code>setLineDash()</code> à la place.</li> -</ul> +- Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée `webkitLineDash` est implémentée en plus de cette méthode. Utilisez `setLineDash()` à la place. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li> -</ul> +- L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.getLineDash()")}} +- {{domxref("CanvasRenderingContext2D.lineDashOffset")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md index e66241605d..a1dcc5a0f9 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md @@ -9,71 +9,72 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/setTransform --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.setTransform()</code></strong> de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.setTransform()`\*\* de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode. -<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée..</p> +Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée.. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.setTransform(a, b, c, d, e, f);</var> -</pre> + void ctx.setTransform(a, b, c, d, e, f); -<p>La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math></p> +La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math> -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>a (m11)</code></dt> - <dd>Échelle horizontale.</dd> - <dt><em><code>b (m12)</code></em></dt> - <dd>Inclinaison horizontale.</dd> - <dt><code>c (m21)</code></dt> - <dd>Inclinaison verticale.</dd> - <dt><code>d (m22)</code></dt> - <dd>Échelle verticale.</dd> - <dt><code>e (dx)</code></dt> - <dd>Déplacement horizontal.</dd> - <dt><code>f (dy)</code></dt> - <dd>Déplacement vertical.</dd> -</dl> +- `a (m11)` + - : Échelle horizontale. +- _`b (m12)`_ + - : Inclinaison horizontale. +- `c (m21)` + - : Inclinaison verticale. +- `d (m22)` + - : Échelle verticale. +- `e (dx)` + - : Déplacement horizontal. +- `f (dy)` + - : Déplacement vertical. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_setTransform">Utilisation de la méthode <code>setTransform</code></h3> +### Utilisation de la méthode `setTransform` -<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>setTransform</code>.</p> +Ceci est seulement un fragment de code simple qui utilise la méthode `setTransform`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.setTransform(1, 1, 0, 1, 0, 0); ctx.fillRect(0, 0, 100, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.setTransform(1,1,0,1,0,0); -ctx.fillRect(0,0,100,100);</textarea> -</pre> +ctx.fillRect(0,0,100,100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -96,34 +97,21 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.setTransform")}}</p> +{{Compat("api.CanvasRenderingContext2D.setTransform")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.transform()")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.transform()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md index fd836674ad..8d06004dc7 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md @@ -3,57 +3,58 @@ title: CanvasRenderingContext2D.stroke() slug: Web/API/CanvasRenderingContext2D/stroke translation_of: Web/API/CanvasRenderingContext2D/stroke --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.stroke()</code></strong> de l'API Canvas 2D dessine le chemin actuel ou donné avec le style de trait actuel utilisant la règle d'enroulement non nulle.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.stroke()`\*\* de l'API Canvas 2D dessine le chemin actuel ou donné avec le style de trait actuel utilisant la règle d'enroulement non nulle. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.stroke();</var> -void <var><em>ctx</em>.stroke(path);</var> -</pre> + void ctx.stroke(); + void ctx.stroke(path); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>path</code></dt> - <dd>Un chemin {{domxref("Path2D")}} à dessiner.</dd> -</dl> +- `path` + - : Un chemin {{domxref("Path2D")}} à dessiner. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_stroke">Utilisation de la méthode <code>stroke</code></h3> +### Utilisation de la méthode `stroke` -<p>Il s'agit d'un extrait de code simple utilisant la méthode <code>stroke</code> pour tracer un chemin.</p> +Il s'agit d'un extrait de code simple utilisant la méthode `stroke` pour tracer un chemin. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.stroke(); -</pre> +``` -<p>Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas :</p> +Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -76,33 +77,20 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2> +## Compatibilité avec les navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.stroke")}}</p> +{{Compat("api.CanvasRenderingContext2D.stroke")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}.</li> -</ul> +- L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md index 14620b3c66..0c696da8c0 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md @@ -9,63 +9,64 @@ tags: - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/strokeRect --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeRect()</code></strong> de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche <em>(x, y)</em> et aux dimensions déterminées par <em>largeur</em> et <em>hauteur</em> dans la balise canvas, et en utilisant l'actuel <code>strokeStyle</code>.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.strokeRect()`\*_ de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche _(x, y)* et aux dimensions déterminées par *largeur* et *hauteur\* dans la balise canvas, et en utilisant l'actuel `strokeStyle`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.strokeRect(x, y, largeur, hauteur);</var> -</pre> + void ctx.strokeRect(x, y, largeur, hauteur); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>L'abcisse <em>x</em> des coordonnées du point de départ du rectangle.</dd> - <dt><code>y</code></dt> - <dd>L'ordonnée <em>y</em> des coordonnées du point de départ du rectangle.</dd> - <dt>largeur</dt> - <dd>La largeur du rectangle.</dd> - <dt><code>hauteur</code></dt> - <dd>La hauteur de rectangle.</dd> -</dl> +- `x` + - : L'abcisse *x* des coordonnées du point de départ du rectangle. +- `y` + - : L'ordonnée _y_ des coordonnées du point de départ du rectangle. +- largeur + - : La largeur du rectangle. +- `hauteur` + - : La hauteur de rectangle. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_strokeRect">Utilisation de la méthode <code>strokeRect</code></h3> +### Utilisation de la méthode `strokeRect` -<p>Ceci est juste un extrait de code qui utilise la méthode <code>strokeRect</code>.</p> +Ceci est juste un extrait de code qui utilise la méthode `strokeRect`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById("canvas"); +```js +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle = "green"; ctx.strokeRect(10, 10, 100, 100); -</pre> +``` -<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> +Éditez le code suivant pour voir les changements en direct dans la balise canvas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.strokeStyle = "green"; -ctx.strokeRect(10, 10, 100, 100);</textarea> -</pre> +ctx.strokeRect(10, 10, 100, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -88,36 +89,23 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.strokeRect")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</li> - <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 360) }} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.strokeRect")}} + +## Voir aussi + +- l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.strokeStyle")}} +- {{domxref("CanvasRenderingContext2D.clearRect()")}} +- {{domxref("CanvasRenderingContext2D.fillRect()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md index fa703e43d0..1bde6b2ed5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -3,65 +3,66 @@ title: CanvasRenderingContext2D.strokeStyle slug: Web/API/CanvasRenderingContext2D/strokeStyle translation_of: Web/API/CanvasRenderingContext2D/strokeStyle --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D.strokeStyle</strong></code> de l'API Canvas 2D spécifie la couleur ou le style à utiliser pour dessiner les lignes autour des formes. La valeur par défaut est <code>#000</code> (black).</p> +La propriété **`CanvasRenderingContext2D.strokeStyle`** de l'API Canvas 2D spécifie la couleur ou le style à utiliser pour dessiner les lignes autour des formes. La valeur par défaut est `#000` (black). -<p>Voir également le chapitre <a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p> +Voir également le chapitre [Ajout de styles et de couleurs](/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.strokeStyle = color; -</var><var><em>ctx</em>.strokeStyle = gradient; -</var><var><em>ctx</em>.strokeStyle = pattern;</var> -</pre> + ctx.strokeStyle = color; + ctx.strokeStyle = gradient; + ctx.strokeStyle = pattern; -<h3 id="Options">Options</h3> +### Options -<dl> - <dt><code>color</code></dt> - <dd>Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}.</dd> - <dt><code>gradient</code></dt> - <dd>Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).</dd> - <dt><code>pattern</code></dt> - <dd>Un objet {{domxref("CanvasPattern")}} (une image répétée).</dd> -</dl> +- `color` + - : Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}. +- `gradient` + - : Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial). +- `pattern` + - : Un objet {{domxref("CanvasPattern")}} (une image répétée). -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_strokeStyle_property">Utiliser la propriété <code>strokeStyle</code> pour définir une couleur différente</h3> +### Utiliser la propriété `strokeStyle` pour définir une couleur différente -<p>Ceci est un simple snippet de code utilisant la propriété <code>strokeStyle</code> pour définir une couleur différente.</p> +Ceci est un simple snippet de code utilisant la propriété `strokeStyle` pour définir une couleur différente. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.strokeStyle = 'blue'; ctx.strokeRect(10, 10, 100, 100); -</pre> +``` -<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p> +Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.strokeStyle = 'blue'; -ctx.strokeRect(10, 10, 100, 100);</textarea> -</pre> +ctx.strokeRect(10, 10, 100, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -84,18 +85,19 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h3 id="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3> +### Un exemple `strokeStyle` -<p>Cet exemple utilise la propriété <code>strokeStyle</code> pour changer les couleurs des contours des formes. Nous utilisons la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}} pour dessiner des cercles au lieu de carrés.</p> +Cet exemple utilise la propriété `strokeStyle` pour changer les couleurs des contours des formes. Nous utilisons la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}} pour dessiner des cercles au lieu de carrés. -<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); +```js +var ctx = document.getElementById('canvas').getContext('2d'); -for (var i = 0; i < 6; i++) { - for (var j = 0; j < 6; j++) { +for (var i = 0; i < 6; i++) { + for (var j = 0; j < 6; j++) { ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ')'; ctx.beginPath(); @@ -103,52 +105,39 @@ for (var i = 0; i < 6; i++) { ctx.stroke(); } } -</pre> +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<p>Le résultat devrait ressembler à ça:</p> +Le résultat devrait ressembler à ça: -<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}</p> +{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Browser_compatibility">Browser compatibility</h2> +## Browser compatibility -<p>{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}</p> +{{Compat("api.CanvasRenderingContext2D.strokeStyle")}} -<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2> +## Notes spécifiques à WebKit/Blink -<ul> - <li>Dans les navigateurs basés sur WebKit et Blink, une méthode non standard et dépréciée, <code>ctx.setStrokeColor()</code>, est implémentée en plus de cette propriété. +- Dans les navigateurs basés sur WebKit et Blink, une méthode non standard et dépréciée, `ctx.setStrokeColor()`, est implémentée en plus de cette propriété. - <pre class="brush: js">setStrokeColor(color, optional alpha); -setStrokeColor(grayLevel, optional alpha); -setStrokeColor(r, g, b, a); -setStrokeColor(c, m, y, k, a); -</pre> - </li> -</ul> + ```js + setStrokeColor(color, optional alpha); + setStrokeColor(grayLevel, optional alpha); + setStrokeColor(r, g, b, a); + setStrokeColor(c, m, y, k, a); + ``` -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui définit cette propriété, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasPattern")}}</li> -</ul> +- L'interface qui définit cette propriété, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasGradient")}} +- {{domxref("CanvasPattern")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md index c1b20a2580..3778eedf4f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md @@ -9,68 +9,69 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/strokeText --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D.strokeText()</strong></code> de l'API Canvas 2D trace le texte fourni à la position donnée <em>(x, y)</em>. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur.</p> +La méthode **`CanvasRenderingContext2D.strokeText()`** de l'API Canvas 2D trace le texte fourni à la position donnée _(x, y)_. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur. -<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli.</p> +Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.strokeText(texte, x, y [, largeurMax]);</var> -</pre> + void ctx.strokeText(texte, x, y [, largeurMax]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>texte</code></dt> - <dd>Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd> -</dl> +- `texte` + - : Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}. -<dl> - <dt><code>x</code></dt> - <dd>La coordonnée sur l'axe des x du point de départ du texte.</dd> - <dt><code>y</code></dt> - <dd>La coordonnée sur l'axe des y du point de départ du texte.</dd> - <dt><code>largeurMax</code> {{optional_inline}}</dt> - <dd>La largeur maximum à dessiner. Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite.</dd> -</dl> +<!----> -<h2 id="Exemples">Exemples</h2> +- `x` + - : La coordonnée sur l'axe des x du point de départ du texte. +- `y` + - : La coordonnée sur l'axe des y du point de départ du texte. +- `largeurMax` {{optional_inline}} + - : La largeur maximum à dessiner. Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite. -<h3 id="Utilisation_de_la_méthode_strokeText">Utilisation de la méthode <code>strokeText</code></h3> +## Exemples -<p>Il ne s'agit que d'un extrait de code simple qui utilise la méthode <code>strokeText</code>.</p> +### Utilisation de la méthode `strokeText` -<h4 id="HTML">HTML</h4> +Il ne s'agit que d'un extrait de code simple qui utilise la méthode `strokeText`. -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> +#### HTML -<h4 id="JavaScript">JavaScript</h4> +```html +<canvas id="canevas"></canvas> +``` -<pre class="brush: js">var canevas = document.getElementById('canevas'); +#### JavaScript + +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.font = '48px serif'; ctx.strokeText('Hello world', 50, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:</p> +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.font = "48px serif"; -ctx.strokeText("Hello world", 50, 100);</textarea> -</pre> +ctx.strokeText("Hello world", 50, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -93,34 +94,21 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.strokeText")}}</p> +{{Compat("api.CanvasRenderingContext2D.strokeText")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.fillText()")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.fillText()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md index ba3b152f70..a6da0bb4f9 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md @@ -9,71 +9,72 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/textAlign --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textAlign</code></strong> de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode CanvasRenderingContext2D.<strong>fillText</strong>. Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%*width.</p> +La propriété **`CanvasRenderingContext2D`\*\***`.textAlign`** de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode CanvasRenderingContext2D.**fillText\*\*. Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%\*width. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var> -</pre> + ctx.textAlign = "left" || "right" || "center" || "start" || "end"; -<h3 id="Options">Options</h3> +### Options -<p>Valeurs possibles :</p> +Valeurs possibles : -<dl> - <dt>left</dt> - <dd>Le texte est aligné à gauche.</dd> - <dt>right</dt> - <dd>Le texte est aligné à droite.</dd> - <dt>center</dt> - <dd>Le texte est centré.</dd> - <dt>start</dt> - <dd>Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche).</dd> - <dt>end</dt> - <dd>Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche).</dd> -</dl> +- left + - : Le texte est aligné à gauche. +- right + - : Le texte est aligné à droite. +- center + - : Le texte est centré. +- start + - : Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche). +- end + - : Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche). -<p>La valeur pa défaut est <code>start</code>.</p> +La valeur pa défaut est `start`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_textAlign_property">Utilisation de la propriété <code>textAlign</code></h3> +### Utilisation de la propriété `textAlign` -<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>textAlign pour indiquer un alignement de texte</code>.</p> +Ceci est seulement un fragment de code simple utilisant la propriété `textAlign pour indiquer un alignement de texte`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.font = '48px serif'; ctx.textAlign = 'left'; ctx.strokeText('Hello world', 0, 100); -</pre> +``` -<p>Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> +Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -<h4 id="code_jouable">Playable code</h4> +#### Playable code -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.font = '48px serif'; ctx.textAlign = 'left'; -ctx.strokeText('Hello world', 0, 100);</textarea> -</pre> +ctx.strokeText('Hello world', 0, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -96,33 +97,20 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.textAlign")}}</p> +{{Compat("api.CanvasRenderingContext2D.textAlign")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md index c2dadee8db..24253e2225 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md @@ -9,73 +9,74 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/textBaseline --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textBaseline</code></strong> de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte.</p> +La propriété **`CanvasRenderingContext2D`\*\***`.textBaseline`\*\* de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";</var> -</pre> + ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"; -<h3 id="Options">Options</h3> +### Options -<p>Valeurs possibles :</p> +Valeurs possibles : -<dl> - <dt>top</dt> - <dd>La ligne de base du texte est le haut du cadratin.</dd> - <dt>hanging</dt> - <dd>La ligne de base du texte est la ligne de base supérieure.</dd> - <dt>middle</dt> - <dd>La ligne de base du texte est le milieu du cadratin.</dd> - <dt>alphabetic</dt> - <dd>La ligne de base du texte est la ligne de base normale alphabétique.</dd> - <dt>ideographic</dt> - <dd>La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique.</dd> - <dt>bottom</dt> - <dd>La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages.</dd> -</dl> +- top + - : La ligne de base du texte est le haut du cadratin. +- hanging + - : La ligne de base du texte est la ligne de base supérieure. +- middle + - : La ligne de base du texte est le milieu du cadratin. +- alphabetic + - : La ligne de base du texte est la ligne de base normale alphabétique. +- ideographic + - : La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique. +- bottom + - : La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages. -<p>La valeur par défaut est <code>alphabetic</code>.</p> +La valeur par défaut est `alphabetic`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_textBaseline_property">Utilisation de la propritété <code>textBaseline</code></h3> +### Utilisation de la propritété `textBaseline` -<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>textBaseline</code> pour définir un réglage différent de ligne de base de texte.</p> +Ceci est seulement un fragment de code simple utilisant la propriété `textBaseline` pour définir un réglage différent de ligne de base de texte. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.font = '48px serif'; ctx.textBaseline = 'hanging'; ctx.strokeText('Hello world', 0, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.font = '48px serif'; ctx.textBaseline = 'hanging'; -ctx.strokeText('Hello world', 0, 100);</textarea> -</pre> +ctx.strokeText('Hello world', 0, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -98,33 +99,20 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.textBaseline")}}</p> +{{Compat("api.CanvasRenderingContext2D.textBaseline")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md index c80bc02507..204a89deb2 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md @@ -9,71 +9,72 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/transform --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <strong>CanvasRenderingContext2D.transform ()</strong> de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte.</p> +La méthode **CanvasRenderingContext2D.transform ()** de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte. -<p>Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque <code>transform()</code>.</p> +Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque `transform()`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.transform(a, b, c, d, e, f);</var> -</pre> + void ctx.transform(a, b, c, d, e, f); -<p>La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math></p> +La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math> -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>a (m11)</code></dt> - <dd>Échelle horizontale.</dd> - <dt><em><code>b (m12)</code></em></dt> - <dd>Inclinaison horizontale.</dd> - <dt><code>c (m21)</code></dt> - <dd>Inclinaison verticale.</dd> - <dt><code>d (m22)</code></dt> - <dd>Échelle verticale.</dd> - <dt><code>e (dx)</code></dt> - <dd>Déplacement horizontal.</dd> - <dt><code>f (dy)</code></dt> - <dd>Déplacement vertical.</dd> -</dl> +- `a (m11)` + - : Échelle horizontale. +- _`b (m12)`_ + - : Inclinaison horizontale. +- `c (m21)` + - : Inclinaison verticale. +- `d (m22)` + - : Échelle verticale. +- `e (dx)` + - : Déplacement horizontal. +- `f (dy)` + - : Déplacement vertical. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_transform">Utilisation de la méthode <code>transform</code></h3> +### Utilisation de la méthode `transform` -<p>Ceci est seulement un fragment de code simple utilisant la méthode <code>transform</code>.</p> +Ceci est seulement un fragment de code simple utilisant la méthode `transform`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> +```html +<canvas id="canevas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canevas = document.getElementById('canevas'); +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.transform(1, 1, 0, 1, 0, 0); ctx.fillRect(0, 0, 100, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.transform(1,1,0,1,0,0); -ctx.fillRect(0,0,100,100);</textarea> -</pre> +ctx.fillRect(0,0,100,100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -99,34 +100,21 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.transform")}}</p> +{{Compat("api.CanvasRenderingContext2D.transform")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.setTransform()")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.setTransform()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md index 9b82274d6d..561d1897b1 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md @@ -9,40 +9,39 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/translate --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <strong>CanvasRenderingContext2D.translate()</strong> de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille.</p> +La méthode **CanvasRenderingContext2D.translate()** de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.translate(x, y);</var> -</pre> + void ctx.translate(x, y); -<p><img alt="" src="canvas_grid_translate.png"></p> + -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>Distance de déplacement dans le sens horizontal.</dd> - <dt>y</dt> - <dd>Distance de déplacement dans le sens vertical.</dd> -</dl> +- `x` + - : Distance de déplacement dans le sens horizontal. +- y + - : Distance de déplacement dans le sens vertical. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_translate">Utilisation de la méthode <code>translate</code></h3> +### Utilisation de la méthode `translate` -<p>Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate.</p> +Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> +```html +<canvas id="canevas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canevas = document.getElementById('canevas'); +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.translate(50, 50); @@ -50,24 +49,26 @@ ctx.fillRect(0, 0, 100, 100); // Réinitialise la matrice de transformation en cours à la matrice identité ctx.setTransform(1, 0, 0, 1, 0, 0); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas :</p> +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> ctx.translate(50, 50); ctx.fillRect(0,0,100,100); -ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> -</pre> +ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -90,33 +91,20 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.translate")}}</p> +{{Compat("api.CanvasRenderingContext2D.translate")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/cdatasection/index.md b/files/fr/web/api/cdatasection/index.md index 2f1d631cef..f4689ac7e3 100644 --- a/files/fr/web/api/cdatasection/index.md +++ b/files/fr/web/api/cdatasection/index.md @@ -9,77 +9,51 @@ tags: - Section translation_of: Web/API/CDATASection --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>L'interface <code><strong>CDATASection</strong></code> représente une section CDATA qui peut être utilisée dans un document XML afin d'inclure des portions de texte qui ne sont pas échappées (les symboles < et & présents dans ces portions n'ont pas besoin d'être échappés comme ils doivent l'être normalement dans un document XML).</p> +L'interface **`CDATASection`** représente une section CDATA qui peut être utilisée dans un document XML afin d'inclure des portions de texte qui ne sont pas échappées (les symboles < et & présents dans ces portions n'ont pas besoin d'être échappés comme ils doivent l'être normalement dans un document XML). -<p>En termes de balisage, une section CDATA a la forme suivante :</p> +En termes de balisage, une section CDATA a la forme suivante : -<pre class="syntaxbox"><![CDATA[ ... ]]> -</pre> + <![CDATA[ ... ]]> -<p>Par exemple :</p> +Par exemple : -<pre class="brush:xml"><toto> +```xml +<toto> Voici une section CDATA : - <![CDATA[ < > & ]]> dans laquelle + <![CDATA[ < > & ]]> dans laquelle le texte n'est pas échappé. -</toto> -</pre> +</toto> +``` -<p>La seule séquence qui n'est pas autorisée dans une section CDATA est le délimiteur de fin d'une séquence CDATA lui-même :</p> +La seule séquence qui n'est pas autorisée dans une section CDATA est le délimiteur de fin d'une séquence CDATA lui-même : -<pre class="brush:xml"><![CDATA[ ]]> causera une erreur ]]> -</pre> +```xml +<![CDATA[ ]]> causera une erreur ]]> +``` -<p>On notera que les sections ne doivent pas être utilisées dans des documents HTML.</p> +On notera que les sections ne doivent pas être utilisées dans des documents HTML. -<p>{{InheritanceDiagram(600,120)}}</p> +{{InheritanceDiagram(600,120)}} -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>Cette interface ne dispose pas de propriétés spécifiques et implémente celles de son parent : {{domxref("Text")}}.</em></p> +_Cette interface ne dispose pas de propriétés spécifiques et implémente celles de son parent : {{domxref("Text")}}._ -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p><em>Cette interface ne dispose pas de méthodes spécifiques et implémente celles de son parent : {{domxref("Text")}}.</em></p> +_Cette interface ne dispose pas de méthodes spécifiques et implémente celles de son parent : {{domxref("Text")}}._ -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th>Spécification</th> - <th>État</th> - <th>Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-cdatasection', 'CDATASection')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Rajouté dans le bogue <a href="https://github.com/whatwg/dom/pull/295">#295</a></td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-667469212', 'CDATASection')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Aucune modification depuis {{SpecName('DOM2 Core')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-667469212', 'CDATASection')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Aucune modification depuis {{SpecName('DOM1')}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-667469212', 'CDATASection')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#interface-cdatasection', 'CDATASection')}} | {{Spec2('DOM WHATWG')}} | Rajouté dans le bogue [#295](https://github.com/whatwg/dom/pull/295) | +| {{SpecName('DOM3 Core', 'core.html#ID-667469212', 'CDATASection')}} | {{Spec2('DOM3 Core')}} | Aucune modification depuis {{SpecName('DOM2 Core')}} | +| {{SpecName('DOM2 Core', 'core.html#ID-667469212', 'CDATASection')}} | {{Spec2('DOM2 Core')}} | Aucune modification depuis {{SpecName('DOM1')}}. | +| {{SpecName('DOM1', 'level-one-core.html#ID-667469212', 'CDATASection')}} | {{Spec2('DOM1')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs - - -<p>{{Compat("api.CDATASection")}}</p> +{{Compat("api.CDATASection")}} diff --git a/files/fr/web/api/characterdata/index.md b/files/fr/web/api/characterdata/index.md index 4ae6c1bbad..ef27efe0dd 100644 --- a/files/fr/web/api/characterdata/index.md +++ b/files/fr/web/api/characterdata/index.md @@ -6,84 +6,55 @@ tags: - DOM translation_of: Web/API/CharacterData --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>L'interface abstraite <code><strong>CharacterData</strong></code> représente un objet {{domxref("Node")}} (<em>noeud</em>) qui contient des caractères. C'est une interface abstraite, ce qui signifie qu'il n'existe aucun objet de type <code>CharacterData</code> : elle est implémentée par d'autres interfaces comme {{domxref("Text")}}, {{domxref("Comment")}} ou {{domxref("ProcessingInstruction")}} qui ne sont pas abstraites.</p> +L'interface abstraite **`CharacterData`** représente un objet {{domxref("Node")}} (_noeud_) qui contient des caractères. C'est une interface abstraite, ce qui signifie qu'il n'existe aucun objet de type `CharacterData` : elle est implémentée par d'autres interfaces comme {{domxref("Text")}}, {{domxref("Comment")}} ou {{domxref("ProcessingInstruction")}} qui ne sont pas abstraites. -<p>{{InheritanceDiagram}}</p> +{{InheritanceDiagram}} -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>Hérite des propriétés de son parent {{domxref("Node")}} et implémente les interfaces {{domxref("ChildNode")}} et {{domxref("NonDocumentTypeChildNode")}}.</em></p> +_Hérite des propriétés de son parent {{domxref("Node")}} et implémente les interfaces {{domxref("ChildNode")}} et {{domxref("NonDocumentTypeChildNode")}}._ -<dl> - <dt>{{domxref("CharacterData.data")}}</dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) representant les données textuelles contenues dans cet objet.</dd> - <dt>{{domxref("CharacterData.length")}} {{readonlyInline}}</dt> - <dd>Retourne un <code>unsigned long</code> représentant la taille de la chaîne de caractères contenue dans <code>CharacterData.data</code>.</dd> - <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt> - <dd>Retourne l'{{domxref("Element")}} immédiatement après celui spécifié dans la liste des enfants de son parent, ou <code>null</code> si l'élément spécifié est le dernier de la liste.</dd> - <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt> - <dd>Retourne l'{{domxref("Element")}} immédiatement avant celui spécifié dans la liste des enfants de son parent, ou <code>null</code> si l'élément spécifié est le premier de la liste.</dd> -</dl> +- {{domxref("CharacterData.data")}} + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) representant les données textuelles contenues dans cet objet. +- {{domxref("CharacterData.length")}} {{readonlyInline}} + - : Retourne un `unsigned long` représentant la taille de la chaîne de caractères contenue dans `CharacterData.data`. +- {{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}} + - : Retourne l'{{domxref("Element")}} immédiatement après celui spécifié dans la liste des enfants de son parent, ou `null` si l'élément spécifié est le dernier de la liste. +- {{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}} + - : Retourne l'{{domxref("Element")}} immédiatement avant celui spécifié dans la liste des enfants de son parent, ou `null` si l'élément spécifié est le premier de la liste. -<h2 id="Methods">Méthodes</h2> +## Méthodes -<p><em>Hérite des méthodes de son parent {{domxref("Node")}}, et implémente les interfaces {{domxref("ChildNode")}} <em>et {{domxref("NonDocumentTypeChildNode")}}</em>.</em></p> +*Hérite des méthodes de son parent {{domxref("Node")}}, et implémente les interfaces {{domxref("ChildNode")}} *et {{domxref("NonDocumentTypeChildNode")}}_._ -<dl> - <dt>{{domxref("CharacterData.appendData()")}}</dt> - <dd>Ajoute la {{domxref("DOMString")}} (<em>chaîne de caractères</em>) donnée à la chaîne <code>CharacterData.data</code> ; dans le retour de la méthode, <code>data</code> contient la {{domxref("DOMString")}} concaténée .</dd> - <dt>{{domxref("CharacterData.deleteData()")}}</dt> - <dd>Supprime la quantité spécifiée de caractères, en commençant au point désigné, à partir de la chaîne <code>CharacterData.data</code> ; dans le retour de la méthode, <code>data</code> contient le raccourci {{domxref ("DOMString")}}.</dd> - <dt>{{domxref("CharacterData.insertData()")}}</dt> - <dd>Insère les caractères spécifiés, au point désigné, dans la chaîne <code>CharacterData.data</code> ; dans le retour de cette méthode, <code>data</code> contient la {{domxref ("DOMString")}} (<em>chaîne de caractères</em>) modifiée.</dd> - <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> - <dd>Supprime l'objet de la liste d'enfants de son parent.</dd> - <dt>{{domxref("CharacterData.replaceData()")}}</dt> - <dd>Remplace la quantité spécifiée de caractères, en commençant au point désigné, avec la {{domxref ("DOMString")}} (<em>chaîne de caractères</em>) spécifiée ; dans le retour de cette méthode, <code>data</code> contient la {{domxref ("DOMString")}} modifiée.</dd> - <dt>{{domxref("CharacterData.substringData()")}}</dt> - <dd>Renvoie une {{domxref ("DOMString")}} (<em>chaîne de caractères</em>) contenant la partie de <code>CharacterData.data</code> de la longueur spécifiée et commençant au point désigné.</dd> -</dl> +- {{domxref("CharacterData.appendData()")}} + - : Ajoute la {{domxref("DOMString")}} (_chaîne de caractères_) donnée à la chaîne `CharacterData.data` ; dans le retour de la méthode, `data` contient la {{domxref("DOMString")}} concaténée . +- {{domxref("CharacterData.deleteData()")}} + - : Supprime la quantité spécifiée de caractères, en commençant au point désigné, à partir de la chaîne `CharacterData.data` ; dans le retour de la méthode, `data` contient le raccourci {{domxref ("DOMString")}}. +- {{domxref("CharacterData.insertData()")}} + - : Insère les caractères spécifiés, au point désigné, dans la chaîne `CharacterData.data` ; dans le retour de cette méthode, `data` contient la {{domxref ("DOMString")}} (_chaîne de caractères_) modifiée. +- {{domxref("ChildNode.remove()")}} {{experimental_inline}} + - : Supprime l'objet de la liste d'enfants de son parent. +- {{domxref("CharacterData.replaceData()")}} + - : Remplace la quantité spécifiée de caractères, en commençant au point désigné, avec la {{domxref ("DOMString")}} (_chaîne de caractères_) spécifiée ; dans le retour de cette méthode, `data` contient la {{domxref ("DOMString")}} modifiée. +- {{domxref("CharacterData.substringData()")}} + - : Renvoie une {{domxref ("DOMString")}} (_chaîne de caractères_) contenant la partie de `CharacterData.data` de la longueur spécifiée et commençant au point désigné. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#characterdata', 'CharacterData')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Ajoute une implémention des interfaces {{domxref("ChildNode")}} et{{domxref("NonDocumentTypeChildNode")}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Pas de changement depuis {{SpecName('DOM2 Core')}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Pas de changement depuis {{SpecName('DOM1')}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#characterdata', 'CharacterData')}} | {{Spec2('DOM WHATWG')}} | Ajoute une implémention des interfaces {{domxref("ChildNode")}} et{{domxref("NonDocumentTypeChildNode")}}. | +| {{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}} | {{Spec2('DOM3 Core')}} | Pas de changement depuis {{SpecName('DOM2 Core')}}. | +| {{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}} | {{Spec2('DOM2 Core')}} | Pas de changement depuis {{SpecName('DOM1')}}. | +| {{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}} | {{Spec2('DOM1')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CharacterData")}}</p> +{{Compat("api.CharacterData")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a>.</li> -</ul> +- [Référence du DOM](/fr/docs/Web/API/Document_Object_Model). diff --git a/files/fr/web/api/clearinterval/index.md b/files/fr/web/api/clearinterval/index.md index a6dbfe8cb4..08aeb26bbd 100644 --- a/files/fr/web/api/clearinterval/index.md +++ b/files/fr/web/api/clearinterval/index.md @@ -10,63 +10,43 @@ tags: translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval original_slug: Web/API/WindowOrWorkerGlobalScope/clearInterval --- -<div>{{APIRef("HTML DOM")}}</div> +{{APIRef("HTML DOM")}} -<p>La méthode <strong><code>clearInterval()</code></strong>, rattachée au <em>mixin </em>{{domxref("WindowOrWorkerGlobalScope")}}, permet d'annuler une action répétée minutée initiée via un appel à {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}.</p> +La méthode **`clearInterval()`**, rattachée au _mixin_ {{domxref("WindowOrWorkerGlobalScope")}}, permet d'annuler une action répétée minutée initiée via un appel à {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>scope</em>.clearInterval(<var>intervalID</var>) -</pre> + scope.clearInterval(intervalID) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>intervalID</code></dt> - <dd>L'identifiant de l'intervalle de répétition qu'on souhaite annuler. Cet identifiant est renvoyé lorsqu'on appelle <code>setInterval()</code> pour définir l'intervalle de répétition.</dd> -</dl> +- `intervalID` + - : L'identifiant de l'intervalle de répétition qu'on souhaite annuler. Cet identifiant est renvoyé lorsqu'on appelle `setInterval()` pour définir l'intervalle de répétition. -<p>On notera que l'ensemble des identifiants utilisés est commun entre ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} et ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}. Cela signifie qu'on peut, techniquement, utiliser <code>clearInterval()</code> et {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} de façon interchangeable. C'est toutefois une mauvaise pratique, qui nuit à la lisibilité du code et à sa maintenabilité.</p> +On notera que l'ensemble des identifiants utilisés est commun entre ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} et ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}. Cela signifie qu'on peut, techniquement, utiliser `clearInterval()` et {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} de façon interchangeable. C'est toutefois une mauvaise pratique, qui nuit à la lisibilité du code et à sa maintenabilité. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>{{jsxref("undefined")}}</p> +{{jsxref("undefined")}} -<h2 id="Example">Exemples</h2> +## Exemples -<p>Voir <a href="/fr/docs/Web/API/WindowTimers/setInterval#Exemples">l'exemple <code>setInterval()</code></a>.</p> +Voir [l'exemple `setInterval()`](/fr/docs/Web/API/WindowTimers/setInterval#Exemples). -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Cette méthode a été déplacée sur le <em>mixin</em> <code>WindowOrWorkerGlobalScope</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------ | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}} | {{Spec2("HTML WHATWG")}} | Cette méthode a été déplacée sur le _mixin_ `WindowOrWorkerGlobalScope`. | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.WindowOrWorkerGlobalScope.clearInterval")}}</p> +{{Compat("api.WindowOrWorkerGlobalScope.clearInterval")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li> - <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li> - <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li> - <li>{{domxref("Window.requestAnimationFrame")}}</li> -</ul> +- {{domxref("WindowOrWorkerGlobalScope.setTimeout")}} +- {{domxref("WindowOrWorkerGlobalScope.setInterval")}} +- {{domxref("WindowOrWorkerGlobalScope.clearTimeout")}} +- {{domxref("Window.requestAnimationFrame")}} diff --git a/files/fr/web/api/client/frametype/index.md b/files/fr/web/api/client/frametype/index.md index 4d3ed3cae9..acba1e7eac 100644 --- a/files/fr/web/api/client/frametype/index.md +++ b/files/fr/web/api/client/frametype/index.md @@ -11,36 +11,28 @@ tags: - frameType translation_of: Web/API/Client/frameType --- -<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p> +{{SeeCompatTable}}{{APIRef("Service Workers API")}} -<p>La propriété <code><strong>frameType</strong></code> (accessible en lecture seule) de l'interface {{domxref("Client")}} indique le type de contexte de navigation du {{domxref("Client")}} courant. Cette valeur peut être <code>auxiliary</code>, <code>top-level</code>, <code>nested</code>, ou <code>none</code>.</p> +La propriété **`frameType`** (accessible en lecture seule) de l'interface {{domxref("Client")}} indique le type de contexte de navigation du {{domxref("Client")}} courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, ou `none`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var myFrameType = Client.frameType;</pre> +```js +var myFrameType = Client.frameType; +``` -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">TBD -</pre> +```js +TBD +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#client-frametype', 'frameType')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#client-frametype', 'frameType')}} | {{Spec2('Service Workers')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Client.frameType")}}</p> +{{Compat("api.Client.frameType")}} diff --git a/files/fr/web/api/client/id/index.md b/files/fr/web/api/client/id/index.md index 5860d16888..e38a2fb262 100644 --- a/files/fr/web/api/client/id/index.md +++ b/files/fr/web/api/client/id/index.md @@ -12,36 +12,28 @@ tags: - id translation_of: Web/API/Client/id --- -<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p> +{{SeeCompatTable}}{{APIRef("Service Workers API")}} -<p>La propriété <code><strong>id</strong></code> (lecture seule) de l'interface {{domxref("Client")}} retourne l'identifiant universellement unique de l'objet {{domxref("Client")}}.</p> +La propriété **`id`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'identifiant universellement unique de l'objet {{domxref("Client")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var clientId = Client.id;</pre> +```js +var clientId = Client.id; +``` -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">TBD -</pre> +```js +TBD +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#client-id', 'id')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName('Service Workers', '#client-id', 'id')}} | {{Spec2('Service Workers')}} | Initial definition. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Client.id")}}</p> +{{Compat("api.Client.id")}} diff --git a/files/fr/web/api/client/index.md b/files/fr/web/api/client/index.md index 1852bcbdb3..1727a3bf41 100644 --- a/files/fr/web/api/client/index.md +++ b/files/fr/web/api/client/index.md @@ -13,35 +13,32 @@ tags: - ServiceWorkers translation_of: Web/API/Client --- -<p>{{APIRef("Service Workers API")}}</p> +{{APIRef("Service Workers API")}} -<p>L'interface <code>Client</code> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> représente la portée d'exécution d'un {{domxref("Worker")}} ou {{domxref("SharedWorker")}}. Les clients {{domxref("Window")}} sont représentés par le plus spécifique {{domxref("WindowClient")}}. Vous pouvez obtenir les objets <code>Client</code>/<code>WindowClient</code> via les méthodes {{domxref("Clients.matchAll","Clients.matchAll()")}} et {{domxref("Clients.get","Clients.get()")}}.</p> +L'interface `Client` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'exécution d'un {{domxref("Worker")}} ou {{domxref("SharedWorker")}}. Les clients {{domxref("Window")}} sont représentés par le plus spécifique {{domxref("WindowClient")}}. Vous pouvez obtenir les objets `Client`/`WindowClient` via les méthodes {{domxref("Clients.matchAll","Clients.matchAll()")}} et {{domxref("Clients.get","Clients.get()")}}. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<dl> - <dt>{{domxref("Client.postMessage()")}}</dt> - <dd>Permet à un service worker d'envoyer un message au <code><a href="/en-US/docs/Web/API/ServiceWorkerClient">ServiceWorkerClient</a></code>.</dd> -</dl> +- {{domxref("Client.postMessage()")}} + - : Permet à un service worker d'envoyer un message au [`ServiceWorkerClient`](/en-US/docs/Web/API/ServiceWorkerClient). -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt>{{domxref("Client.id")}} {{readonlyInline}}</dt> - <dd>Retourne l'identifiant universellement unique de l'objet <code>Client</code>.</dd> - <dt>{{domxref("Client.type")}} {{readonlyInline}}</dt> - <dd>Indique le type de contexte de navigation du client courant. Cette valeur peut être <code>auxiliary</code>, <code>top-level</code>, <code>nested</code>, or <code>none</code>.</dd> - <dt>{{domxref("Client.url")}} {{readonlyInline}}</dt> - <dd>Retourne l'URL du client service worker courant.</dd> -</dl> +- {{domxref("Client.id")}} {{readonlyInline}} + - : Retourne l'identifiant universellement unique de l'objet `Client`. +- {{domxref("Client.type")}} {{readonlyInline}} + - : Indique le type de contexte de navigation du client courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, or `none`. +- {{domxref("Client.url")}} {{readonlyInline}} + - : Retourne l'URL du client service worker courant. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Ce code est basé sur un fragment pris d'un <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html">exemple d'envoi de message</a> (voir <a href="https://googlechrome.github.io/samples/service-worker/post-message/">l'exemple en ligne</a>.) Ce code envoie une référence de message à laquelle le service worker peut répondre via {{domxref("Client.postMessage()")}}.</p> +Ce code est basé sur un fragment pris d'un [exemple d'envoi de message](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) (voir [l'exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/).) Ce code envoie une référence de message à laquelle le service worker peut répondre via {{domxref("Client.postMessage()")}}. -<p>Ce message est contenu dans une promesse qui est résolue si la réponse ne contient pas d'erreur et est rejetée avec une erreur.</p> +Ce message est contenu dans une promesse qui est résolue si la réponse ne contient pas d'erreur et est rejetée avec une erreur. -<pre class="brush: js">// client service worker (par exemple un document) +```js +// client service worker (par exemple un document) function sendMessage(message) { return new Promise(function(resolve, reject) { // Notez que c'est la version du ServiceWorker.postMessage @@ -57,36 +54,23 @@ self.addEventListener("message", function(e) { // e.source est un object client e.source.postMessage("Hello! Your message was: " + e.data); }); -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#client', 'Client')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div>{{Compat("api.Client")}}</div> - -<h2 id="Voir_également">Voir également</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li><a href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li> - <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est ce que le ServiceWorker est prêt ?</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promesses</a></li> - <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation performante des web workers</a></li> - <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a></li> -</ul> +``` + +## Spécifications + +| Spécification | État | Commentaire | +| -------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName('Service Workers', '#client', 'Client')}} | {{Spec2('Service Workers')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.Client")}} + +## Voir également + +- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Exemple simple de service workers](https://github.com/mdn/sw-test) +- [Est ce que le ServiceWorker est prêt ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Promesses](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) +- [Utilisation performante des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) +- [Channel Messaging API](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/client/postmessage/index.md b/files/fr/web/api/client/postmessage/index.md index 3ea26daa58..45e64508aa 100644 --- a/files/fr/web/api/client/postmessage/index.md +++ b/files/fr/web/api/client/postmessage/index.md @@ -11,34 +11,35 @@ tags: - postMessage translation_of: Web/API/Client/postMessage --- -<p>{{SeeCompatTable}}{{APIRef("Client")}}</p> +{{SeeCompatTable}}{{APIRef("Client")}} -<p>La méthode <code><strong>postMessage() </strong></code>de l'interface {{domxref("Client")}} permet à un service worker client d'envoyer un message à un {{domxref("ServiceWorker")}}.</p> +La méthode **`postMessage() `**de l'interface {{domxref("Client")}} permet à un service worker client d'envoyer un message à un {{domxref("ServiceWorker")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">Client.postMessage(message[, transfer]);</pre> +```js +Client.postMessage(message[, transfer]); +``` -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Void.</p> +Void. -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>message</code></dt> - <dd>Le message à envoyer au service worker.</dd> - <dt><code>transfer {{optional_inline}}</code></dt> - <dd>Un objet transferable, comme par exemple une référence à un port.</dd> -</dl> +- `message` + - : Le message à envoyer au service worker. +- `transfer {{optional_inline}}` + - : Un objet transferable, comme par exemple une référence à un port. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Ce fragment de code est tiré de l'<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html">exemple d'envoi de message du service worker</a> exemple d'envoi de message du service worker (voir <a href="https://googlechrome.github.io/samples/service-worker/post-message/">exemple en ligne</a>). Le code envoi un message et transfert le port vers le service worker qui pourra répondre via {{domxref("Client.postMessage()")}}.</p> +Ce fragment de code est tiré de l'[exemple d'envoi de message du service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) exemple d'envoi de message du service worker (voir [exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/)). Le code envoi un message et transfert le port vers le service worker qui pourra répondre via {{domxref("Client.postMessage()")}}. -<p>Ce message est contenu dans une promesse qui se résolvera si la réponse ne contient pas d'erreur et qui échouera avec l'erreur.</p> +Ce message est contenu dans une promesse qui se résolvera si la réponse ne contient pas d'erreur et qui échouera avec l'erreur. -<pre class="brush: js">function sendMessage(message) { +```js +function sendMessage(message) { return new Promise(function(resolve, reject) { var messageChannel = new MessageChannel(); messageChannel.port1.onmessage = function(event) { @@ -50,25 +51,15 @@ translation_of: Web/API/Client/postMessage }; navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]); }); -}</pre> +} +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#client-postmessage-method', 'postMessage()')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName('Service Workers', '#client-postmessage-method', 'postMessage()')}} | {{Spec2('Service Workers')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Client.postMessage")}}</p> +{{Compat("api.Client.postMessage")}} diff --git a/files/fr/web/api/client/url/index.md b/files/fr/web/api/client/url/index.md index e024102c50..7b40c93b14 100644 --- a/files/fr/web/api/client/url/index.md +++ b/files/fr/web/api/client/url/index.md @@ -11,23 +11,22 @@ tags: - URL translation_of: Web/API/Client/url --- -<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div> +{{SeeCompatTable}}{{APIRef("Service Workers API")}}La propriété **`url`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'url du service worker client courant. -<div>La propriété <code><strong>url</strong></code> (lecture seule) de l'interface {{domxref("Client")}} retourne l'url du service worker client courant.</div> +## Syntaxe -<div> </div> +```js +var clientUrl = Client.url; +``` -<h2 id="Syntaxe">Syntaxe</h2> +### Valeur de retour -<pre class="brush: js">var clientUrl = Client.url;</pre> +Valeur de type {{domxref("USVString")}}. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +## Exemple -<p>Valeur de type {{domxref("USVString")}}.</p> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: js">self.addEventListener('notificationclick', function(event) { +```js +self.addEventListener('notificationclick', function(event) { console.log('Au click de notification : ', event.notification.tag); event.notification.close(); @@ -36,33 +35,23 @@ translation_of: Web/API/Client/url event.waitUntil(clients.matchAll({ type: "window" }).then(function(clientList) { - for (var i = 0; i < clientList.length; i++) { + for (var i = 0; i < clientList.length; i++) { var client = clientList[i]; - if (client.url == '/' && 'focus' in client) + if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openWindow) return clients.openWindow('/'); })); -});</pre> +}); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#client-url', 'url')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Défintion initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------ | ------------------------------------ | ------------------- | +| {{SpecName('Service Workers', '#client-url', 'url')}} | {{Spec2('Service Workers')}} | Défintion initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Client.url")}}</p> +{{Compat("api.Client.url")}} diff --git a/files/fr/web/api/clients/claim/index.md b/files/fr/web/api/clients/claim/index.md index bd76981af1..e392a459aa 100644 --- a/files/fr/web/api/clients/claim/index.md +++ b/files/fr/web/api/clients/claim/index.md @@ -10,66 +10,56 @@ tags: - claim translation_of: Web/API/Clients/claim --- -<p>{{SeeCompatTable}}{{APIRef("Service Worker Clients")}}</p> +{{SeeCompatTable}}{{APIRef("Service Worker Clients")}} -<p>La méthode <code><strong>claim()</strong></code> de l'interface {{domxref("Clients")}} permet à un service worker actif de se définir comme service worker actif de la page client quand le worker et la page sont dans le même scope. Ceci déclenche un évènement {{domxref("ServiceWorkerContainer.oncontrollerchange","oncontrollerchange")}} dans toutes les pages dans la portée du service worker.</p> +La méthode **`claim()`** de l'interface {{domxref("Clients")}} permet à un service worker actif de se définir comme service worker actif de la page client quand le worker et la page sont dans le même scope. Ceci déclenche un évènement {{domxref("ServiceWorkerContainer.oncontrollerchange","oncontrollerchange")}} dans toutes les pages dans la portée du service worker. -<p>Cette méthode peut être utilisée avec {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} pour s'assurer que la mise à jour du service worker sous jacent prend effet immédiatement pour et le client courant et tous les autres clients actifs.</p> +Cette méthode peut être utilisée avec {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} pour s'assurer que la mise à jour du service worker sous jacent prend effet immédiatement pour et le client courant et tous les autres clients actifs. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">ServiceWorkerClients.claim().then(function() { +```js +ServiceWorkerClients.claim().then(function() { // Faire quelque chose }); -</pre> +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<p>None.</p> +None. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>.</code></p> +Une `Promise.` -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple suivant utilise <code>claim()</code> dans le gestionnaire d'évènement <code>onActivate</code> d'un service worker. Donc la page client chargée dans la même portée n'a pas besoin d'être rechargée avant de pouvoir utiliser le service worker.</p> +L'exemple suivant utilise `claim()` dans le gestionnaire d'évènement `onActivate` d'un service worker. Donc la page client chargée dans la même portée n'a pas besoin d'être rechargée avant de pouvoir utiliser le service worker. -<pre class="brush: js">self.addEventListener('install', function(event) { +```js +self.addEventListener('install', function(event) { event.waitUntil(self.skipWaiting()); }); self.addEventListener('activate', function(event) { event.waitUntil(self.clients.claim()); -});</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale. Toujours en cours de développement (voir <a href="https://github.com/slightlyoff/ServiceWorker/issues/414">ticket 414</a> et <a href="https://github.com/slightlyoff/ServiceWorker/issues/423">ticket 423</a>).</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_de_navigateurs">Compatibilité de navigateurs</h2> - -<p>{{Compat("api.Clients.claim")}}</p> - -<h2 id="À_voir_aussi">À voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li><a href="https://github.com/mdn/sw-test">Example simple de service workers</a></li> - <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les ServiceWorker sont prêt?</a></li> - <li>{{jsxref("Promise")}}</li> - <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation optimisée des web workers</a></li> - <li>{{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}</li> -</ul> +}); +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------ | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('Service Workers', '#clients', 'Clients')}} | {{Spec2('Service Workers')}} | Définition initiale. Toujours en cours de développement (voir [ticket 414](https://github.com/slightlyoff/ServiceWorker/issues/414) et [ticket 423](https://github.com/slightlyoff/ServiceWorker/issues/423)). | + +## Compatibilité de navigateurs + +{{Compat("api.Clients.claim")}} + +## À voir aussi + +- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Example simple de service workers](https://github.com/mdn/sw-test) +- [Est-ce que les ServiceWorker sont prêt?](https://jakearchibald.github.io/isserviceworkerready/) +- {{jsxref("Promise")}} +- [Utilisation optimisée des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) +- {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} diff --git a/files/fr/web/api/clients/get/index.md b/files/fr/web/api/clients/get/index.md index dd2d46c018..24de95f0eb 100644 --- a/files/fr/web/api/clients/get/index.md +++ b/files/fr/web/api/clients/get/index.md @@ -10,50 +10,39 @@ tags: - get translation_of: Web/API/Clients/get --- -<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div> +{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`get()`** de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}. -<div>La méthode <code><strong>get()</strong></code> de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}.</div> +## Syntaxe -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: js">self.clients.get(id).then(function(client) { +```js +self.clients.get(id).then(function(client) { // Faire quelque chose avec le client -});</pre> +}); +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>id</code></dt> - <dd>Une {{domxref("DOMString")}} représentant l'id du client que vous souhaitez récuperer.</dd> -</dl> +- `id` + - : Une {{domxref("DOMString")}} représentant l'id du client que vous souhaitez récuperer. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> qui se résoud avec un objet {{domxref("Client")}}.</p> +Une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résoud avec un objet {{domxref("Client")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">self.clients.get(options).then(function(client) { +```js +self.clients.get(options).then(function(client) { self.clients.openWindow(client.url); -});</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#clients-get-method', 'get()')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Clients.get")}}</p> +}); +``` + +## Spécifications + +| Spécification | Statut | Commentaires | +| ------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- | +| {{SpecName('Service Workers', '#clients-get-method', 'get()')}} | {{Spec2('Service Workers')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.Clients.get")}} diff --git a/files/fr/web/api/clients/index.md b/files/fr/web/api/clients/index.md index aab1e6c132..54909751dc 100644 --- a/files/fr/web/api/clients/index.md +++ b/files/fr/web/api/clients/index.md @@ -13,28 +13,27 @@ tags: - Workers translation_of: Web/API/Clients --- -<div>{{APIRef("Service Workers API")}}</div> +{{APIRef("Service Workers API")}} -<p>L'interface <code>Clients</code> permet d'accéder aux objets <a href="/fr/docs/Web/API/Client"><code>Client</code></a>. On y accède via <code><a href="/fr/docs/Web/API/ServiceWorkerGlobalScope"><code>self</code></a>.clients</code> au sein d'un <a href="/fr/docs/Web/API/Service_Worker_API">service worker</a>.</p> +L'interface `Clients` permet d'accéder aux objets [`Client`](/fr/docs/Web/API/Client). On y accède via `self.clients` au sein d'un [service worker](/fr/docs/Web/API/Service_Worker_API). -<h2 id="methods">Méthodes</h2> +## Méthodes -<dl> - <dt><a href="/fr/docs/Web/API/Clients/get"><code>Clients.get()</code></a></dt> - <dd>Retourne une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a> (« <i>Promesse</i> ») pour un <a href="/fr/docs/Web/API/Client"><code>Client</code></a> correspondant à un <a href="/fr/docs/Web/API/Client/id"><code>id</code></a> donné.</dd> - <dt><a href="/fr/docs/Web/API/Clients/matchAll"><code>Clients.matchAll()</code></a></dt> - <dd>Retourne une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a> (« <i>Promesse</i> ») pour un tableau d'objets <a href="/fr/docs/Web/API/Client"><code>Client</code></a>. L'argument options vous permet de contrôler les types de clients renvoyés.</dd> - <dt><a href="/fr/docs/Web/API/Clients/openWindow"><code>Clients.openWindow()</code></a></dt> - <dd>Ouvre une nouvelle fenêtre de navigateur pour une url donnée et renvoie une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a> (« <i>Promesse</i> ») pour le nouveau <a href="/fr/docs/Web/API/WindowClient"><code>WindowClient</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Clients/claim"><code>Clients.claim()</code></a></dt> - <dd>Permet à un service worker actif de se définir comme le <a href="/fr/docs/Web/API/ServiceWorkerContainer/controller"><code>controller</code></a> (« <i>Controlleur</i> ») pour tous les clients dans son <a href="/fr/docs/Web/API/ServiceWorkerRegistration/scope"><code>scope</code></a> (« <i>sa portée</i> »).</dd> -</dl> +- [`Clients.get()`](/fr/docs/Web/API/Clients/get) + - : Retourne une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) (« _Promesse_ ») pour un [`Client`](/fr/docs/Web/API/Client) correspondant à un [`id`](/fr/docs/Web/API/Client/id) donné. +- [`Clients.matchAll()`](/fr/docs/Web/API/Clients/matchAll) + - : Retourne une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) (« _Promesse_ ») pour un tableau d'objets [`Client`](/fr/docs/Web/API/Client). L'argument options vous permet de contrôler les types de clients renvoyés. +- [`Clients.openWindow()`](/fr/docs/Web/API/Clients/openWindow) + - : Ouvre une nouvelle fenêtre de navigateur pour une url donnée et renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) (« _Promesse_ ») pour le nouveau [`WindowClient`](/fr/docs/Web/API/WindowClient). +- [`Clients.claim()`](/fr/docs/Web/API/Clients/claim) + - : Permet à un service worker actif de se définir comme le [`controller`](/fr/docs/Web/API/ServiceWorkerContainer/controller) (« _Controlleur_ ») pour tous les clients dans son [`scope`](/fr/docs/Web/API/ServiceWorkerRegistration/scope) (« _sa portée_ »). -<h2 id="exemple">Exemple</h2> +## Exemple -<p>L'exemple suivant montre une fenêtre de chat existante ou en crée une nouvelle lorsque l'utilisateur clique sur une notification.</p> +L'exemple suivant montre une fenêtre de chat existante ou en crée une nouvelle lorsque l'utilisateur clique sur une notification. -<pre class="brush: js">addEventListener('notificationclick', event => { +```js +addEventListener('notificationclick', event => { event.waitUntil(async function() { const allClients = await clients.matchAll({ includeUncontrolled: true @@ -63,35 +62,21 @@ translation_of: Web/API/Clients // Envoyez un message au client : chatClient.postMessage("Nouveaux messages !"); }()); -});</pre> - -<h2 id="specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Clients")}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Le ServiceWorker est-il prêt ?</a> <small>(en anglais)</small></li> - <li>L'objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a></li> -</ul> +}); +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#clients', 'Clients')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Clients")}} + +## Voir aussi + +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Le ServiceWorker est-il prêt ?](https://jakearchibald.github.io/isserviceworkerready/) (en anglais) +- L'objet [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) diff --git a/files/fr/web/api/clients/matchall/index.md b/files/fr/web/api/clients/matchall/index.md index 2636074f8d..992754486c 100644 --- a/files/fr/web/api/clients/matchall/index.md +++ b/files/fr/web/api/clients/matchall/index.md @@ -10,62 +10,48 @@ tags: - Service Workers translation_of: Web/API/Clients/matchAll --- -<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div> +{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`matchAll()`** de l'interface {{domxref("Clients")}} retourne une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) pour une liste de service worker clients. Inclure le paramètre `options` permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si `options` n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker. -<div>La méthode <strong><code>matchAll()</code></strong> de l'interface {{domxref("Clients")}} retourne une <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promesse</a></code> pour une liste de service worker clients. Inclure le paramètre <code>options</code> permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si <code>options</code> n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker.</div> +## Syntaxe -<div> </div> +```js +ServiceWorkerClients.matchAll(options).then(function(clients) { + // faire quelque chose avec la list de clients +}); +``` -<h2 id="Syntaxe">Syntaxe</h2> +### Paramètres -<pre class="brush: js">ServiceWorkerClients.matchAll(options).then(function(clients) { - // faire quelque chose avec la list de clients -});</pre> +- `options` -<h3 id="Paramètres">Paramètres</h3> + - : L'objet `option` vous permet de définir les options pour l'opération. Les options disponibles sont : -<dl> - <dt><code>options</code></dt> - <dd><p>L'objet <code>option</code> vous permet de définir les options pour l'opération. Les options disponibles sont :</p> - <ul> - <li><code>includeUncontrolled</code>: Un {{domxref("Boolean")}} — défini à <code>true</code>, l'opération retournera tous les services worker clients qui sont de la même origine que le service worker courant. Sinon, elle ne retournera que le service worker client controllé par le service worker courant. La valeur par défaut est <code>false</code>.</li> - <li><code>type</code>: Défini le type de client que vous voulez observer. Les types disponibles sont <code>window</code>, <code>worker</code>, <code>sharedworker</code>, et <code>all</code>. La valeur par défaut est <code>all</code>.</li> - </ul> - </dd> -</dl> + - `includeUncontrolled`: Un {{domxref("Boolean")}} — défini à `true`, l'opération retournera tous les services worker clients qui sont de la même origine que le service worker courant. Sinon, elle ne retournera que le service worker client controllé par le service worker courant. La valeur par défaut est `false`. + - `type`: Défini le type de client que vous voulez observer. Les types disponibles sont `window`, `worker`, `sharedworker`, et `all`. La valeur par défaut est `all`. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promesse</a></code> qui se résout avec un tableau d'objets {{domxref("Client")}}.</p> +Une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout avec un tableau d'objets {{domxref("Client")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">clients.matchAll(options).then(function(clientList) { - for(var i = 0 ; i < clients.length ; i++) { +```js +clients.matchAll(options).then(function(clientList) { + for(var i = 0 ; i < clients.length ; i++) { if(clientList[i].url === 'index.html') { clients.openWindow(clientList[i]); // ou faire quelque chose avec le client } } -});</pre> +}); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initial.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------ | ------------------------------------ | ------------------- | +| {{SpecName('Service Workers', '#clients', 'Clients')}} | {{Spec2('Service Workers')}} | Définition initial. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Clients.matchAll")}}</p> +{{Compat("api.Clients.matchAll")}} diff --git a/files/fr/web/api/clients/openwindow/index.md b/files/fr/web/api/clients/openwindow/index.md index 1116da97f5..c991c6653c 100644 --- a/files/fr/web/api/clients/openwindow/index.md +++ b/files/fr/web/api/clients/openwindow/index.md @@ -3,37 +3,38 @@ title: Clients.openWindow() slug: Web/API/Clients/openWindow translation_of: Web/API/Clients/openWindow --- -<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p> +{{SeeCompatTable}}{{APIRef("Service Workers API")}} -<p>La méthode <strong><code>openWindow()</code></strong> de l'interface {{domxref("Clients")}} crée un nouveau niveau de contexte de navigation et charge une URL donnée. Si le script d'origine n'a pas la permission d'ouvrir une popup, <strong><code>openWindow()</code></strong> lèvera une InvalidAccessError.</p> +La méthode **`openWindow()`** de l'interface {{domxref("Clients")}} crée un nouveau niveau de contexte de navigation et charge une URL donnée. Si le script d'origine n'a pas la permission d'ouvrir une popup, **`openWindow()`** lèvera une InvalidAccessError. -<p>Dans Firefox, une méthode est authorisée d'ouvrir une popup seulement lorsqu'elle est appelée à la suite d'un click sur une notification.</p> +Dans Firefox, une méthode est authorisée d'ouvrir une popup seulement lorsqu'elle est appelée à la suite d'un click sur une notification. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">ServiceWorkerClients.openWindow(url).then(function(WindowClient) { +```js +ServiceWorkerClients.openWindow(url).then(function(WindowClient) { // Faire quelque chose avec le WindowClient -});</pre> +}); +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>url</code></dt> - <dd>Une {{domxref("USVString")}} représentant l'URL que le client veut ouvrir dans une nouvelle fenêtre. Généralement, cette valeur doit être une URL de la même origine que le script d'origine.</dd> -</dl> +- `url` + - : Une {{domxref("USVString")}} représentant l'URL que le client veut ouvrir dans une nouvelle fenêtre. Généralement, cette valeur doit être une URL de la même origine que le script d'origine. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une {{jsxref("Promise")}} qui résoud un objet {{domxref("WindowClient")}} si l'URL est de la même origine que le service worker, et {{Glossary("null", "null value")}} sinon.</p> +Une {{jsxref("Promise")}} qui résoud un objet {{domxref("WindowClient")}} si l'URL est de la même origine que le service worker, et {{Glossary("null", "null value")}} sinon. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">// Quand l'utilisateur click sur une notification, focus sur la fenêtre si elle existe, +```js +// Quand l'utilisateur click sur une notification, focus sur la fenêtre si elle existe, // ou ouvre en une autre. onotificationclick = function(event) { var found = false; clients.matchAll().then(function(clients) { - for (i = 0; i < clients.length; i++) { + for (i = 0; i < clients.length; i++) { if (clients[i].url === event.data.url) { // La fenêtre existe, focus dessus. found = true; @@ -49,25 +50,14 @@ onotificationclick = function(event) { } }); }; -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------ | ------------------------------------ | ------------------- | +| {{SpecName('Service Workers', '#clients', 'Clients')}} | {{Spec2('Service Workers')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Clients.openWindow")}}</p> +{{Compat("api.Clients.openWindow")}} diff --git a/files/fr/web/api/clipboard/index.md b/files/fr/web/api/clipboard/index.md index 2dbef5414b..b9ca3fca06 100644 --- a/files/fr/web/api/clipboard/index.md +++ b/files/fr/web/api/clipboard/index.md @@ -13,68 +13,51 @@ tags: - Reference translation_of: Web/API/Clipboard --- -<p>{{APIRef("Clipboard API")}}</p> +{{APIRef("Clipboard API")}} -<div class="note"> -<p><strong>Note :</strong> Le <strong>presse-papiers</strong> est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications. Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies.</p> +> **Note :** Le **presse-papiers** est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications. Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies. +> +> Une application typique accède aux fonctionnalités du presse-papiers en associant des {{interwiki("wikipedia", "Entr%C3%A9es-sorties", "entrées utilisateur")}} telles que des {{interwiki("wikipedia", "Raccourci_clavier", "raccourcis clavier")}}, des éléments de {{interwiki("wikipedia", "Menu_(informatique)", "menus")}}, etc. à ces interfaces. -<p>Une application typique accède aux fonctionnalités du presse-papiers en associant des {{interwiki("wikipedia", "Entr%C3%A9es-sorties", "entrées utilisateur")}} telles que des {{interwiki("wikipedia", "Raccourci_clavier", "raccourcis clavier")}}, des éléments de {{interwiki("wikipedia", "Menu_(informatique)", "menus")}}, etc. à ces interfaces.</p> -</div> +L’interface **`Clipboard`** implémente l’[API clipboard](/en-US/docs/Web/API/Clipboard_API), qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système. L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web. -<p>L’interface <strong><code>Clipboard</code></strong> implémente l’<a href="/en-US/docs/Web/API/Clipboard_API">API clipboard</a>, qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système. L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web.</p> +Le presse-papiers du système est exposé via la propriété globale {{domxref("Navigator.clipboard")}}. -<p>Le presse-papiers du système est exposé via la propriété globale {{domxref("Navigator.clipboard")}}.</p> +Les appels aux méthodes de l’objet `Clipboard` échoueront si l’utilisateur ou l’utilisatrice n’a pas accordé les permissions requises en utilisant l’[API permissions](/docs/Web/API/Permissions_API), et la permission `"clipboard-read"` ou `"clipboard-write"` selon le besoin. -<p>Les appels aux méthodes de l’objet <code>Clipboard</code> échoueront si l’utilisateur ou l’utilisatrice n’a pas accordé les permissions requises en utilisant l’<a href="/docs/Web/API/Permissions_API">API permissions</a>, et la permission <code>"clipboard-read"</code> ou <code>"clipboard-write"</code> selon le besoin.</p> +> **Note :** En réalité, actuellement, les prérequis des navigateurs pour accéder au presse-papiers varient significativement. Veuillez consulter la section {{anch("Clipboard availability")}} pour plus de détails. -<div class="note"> -<p><strong>Note :</strong> En réalité, actuellement, les prérequis des navigateurs pour accéder au presse-papiers varient significativement. Veuillez consulter la section {{anch("Clipboard availability")}} pour plus de détails.</p> -</div> +Toutes les méthodes de l’API clipboard fonctionnent de manière asynchrone ; elles renvoient une {{jsxref("Promise")}} qui est résolue une fois que l’accès au presse-papiers a réussi. La promesse est rejetée si l’accès au presse-papiers est refusé. -<p>Toutes les méthodes de l’API clipboard fonctionnent de manière asynchrone ; elles renvoient une {{jsxref("Promise")}} qui est résolue une fois que l’accès au presse-papiers a réussi. La promesse est rejetée si l’accès au presse-papiers est refusé.</p> +## Méthodes -<h2 id="Méthodes">Méthodes</h2> +_`Clipboard` est basé sur l’interface {{domxref("EventTarget")}}, et inclut les méthodes de celle-ci._ -<p><em><code>Clipboard</code> est basé sur l’interface {{domxref("EventTarget")}}, et inclut les méthodes de celle-ci.</em></p> +- {{domxref("Clipboard.read()","read()")}} + - : Demande des données arbitraires (telles que des images) depuis le presse-papiers, et renvoie une {{jsxref("Promise")}}. Quand les données ont été obtenues, la promesse est résolue avec un objet {{domxref("DataTransfer")}} qui fournit les données. +- {{domxref("Clipboard.readText()","readText()")}} + - : Demande du texte depuis le presse-papiers du système ; renvoie une `Promise` qui est résolue avec une {{domxref("DOMString")}} contenant le texte du presse-papiers une fois disponible. +- {{domxref("Clipboard.write()","write()")}} + - : Écrit des données arbitraires dans le presse-papiers du système. Cette opération asynchrone signale quand elle a terminé en résolvant la `Promise` renvoyée. +- {{domxref("Clipboard.writeText()","writeText()")}} + - : Écrit du texte dans le presse-papiers du système, renvoyant une `Promise` qui est résolue une fois que le texte est entièrement copié dans le presse-papiers. -<dl> - <dt>{{domxref("Clipboard.read()","read()")}}</dt> - <dd>Demande des données arbitraires (telles que des images) depuis le presse-papiers, et renvoie une {{jsxref("Promise")}}. Quand les données ont été obtenues, la promesse est résolue avec un objet {{domxref("DataTransfer")}} qui fournit les données.</dd> - <dt>{{domxref("Clipboard.readText()","readText()")}}</dt> - <dd>Demande du texte depuis le presse-papiers du système ; renvoie une <code>Promise</code> qui est résolue avec une {{domxref("DOMString")}} contenant le texte du presse-papiers une fois disponible.</dd> - <dt>{{domxref("Clipboard.write()","write()")}}</dt> - <dd>Écrit des données arbitraires dans le presse-papiers du système. Cette opération asynchrone signale quand elle a terminé en résolvant la <code>Promise</code> renvoyée.</dd> - <dt>{{domxref("Clipboard.writeText()","writeText()")}}</dt> - <dd>Écrit du texte dans le presse-papiers du système, renvoyant une <code>Promise</code> qui est résolue une fois que le texte est entièrement copié dans le presse-papiers.</dd> -</dl> +## Disponibilité du presse-papiers -<h2 id="Disponibilité_du_presse-papiers">Disponibilité du presse-papiers</h2> +L’API clipboard asynchrone est une addition relativement récente, et son processus de mise en œuvre dans les navigateurs n’est pas encore terminé. En raison de questions de sécurité et de complexités techniques, l’intégration de cette API se fait progressivement dans la plupart des navigateurs. -<p>L’API clipboard asynchrone est une addition relativement récente, et son processus de mise en œuvre dans les navigateurs n’est pas encore terminé. En raison de questions de sécurité et de complexités techniques, l’intégration de cette API se fait progressivement dans la plupart des navigateurs.</p> +Par exemple, Firefox ne supporte pas encore les permissions `"clipboard-read"` et `"clipboard-write"`, et l’accès aux méthodes pour lire et modifier le contenu du presse-papiers sont restreintes d’autres façons. -<p>Par exemple, Firefox ne supporte pas encore les permissions <code>"clipboard-read"</code> et <code>"clipboard-write"</code>, et l’accès aux méthodes pour lire et modifier le contenu du presse-papiers sont restreintes d’autres façons.</p> +Pour les WebExtensions, vous pouvez demander les permissions `"clipboardRead"` et `"clipboardWrite"` afin de pouvoir utiliser `clipboard.readText()` et `clipboard.writeText()`. Les {{Glossary("Content Script", "scripts de contenu")}} appliqués à des sites HTTP n’ont pas accès à l’objet `Clipboard`. Voir [extensions in Firefox 63](https://blog.mozilla.org/addons/2018/08/31/extensions-in-firefox-63/). -<p>Pour les WebExtensions, vous pouvez demander les permissions <code>"clipboardRead"</code> et <code>"clipboardWrite"</code> afin de pouvoir utiliser <code>clipboard.readText()</code> et <code>clipboard.writeText()</code>. Les {{Glossary("Content Script", "scripts de contenu")}} appliqués à des sites HTTP n’ont pas accès à l’objet <code>Clipboard</code>. Voir <a href="https://blog.mozilla.org/addons/2018/08/31/extensions-in-firefox-63/">extensions in Firefox 63</a>.</p> +De plus, {{domxref("Clipboard.read", "read()")}} et {{domxref("Clipboard.write", "write()")}} sont désactivées par défaut et requièrent de changer une préférence pour les activer. Consultez les tables de compatibilité de chaque méthode avant de les utiliser. -<p>De plus, {{domxref("Clipboard.read", "read()")}} et {{domxref("Clipboard.write", "write()")}} sont désactivées par défaut et requièrent de changer une préférence pour les activer. Consultez les tables de compatibilité de chaque méthode avant de les utiliser.</p> +## Spécifications -<h2 id="Spécifications">Spécifications</h2> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Clipboard API','#clipboard-interface','Clipboard')}} | {{Spec2('Clipboard API')}} | Définition initiale. | -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Clipboard API','#clipboard-interface','Clipboard')}}</td> - <td>{{Spec2('Clipboard API')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +## Compatibilité des navigateurs -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Clipboard")}}</p> +{{Compat("api.Clipboard")}} diff --git a/files/fr/web/api/clipboard/write/index.md b/files/fr/web/api/clipboard/write/index.md index 214a32eac6..955bf1f320 100644 --- a/files/fr/web/api/clipboard/write/index.md +++ b/files/fr/web/api/clipboard/write/index.md @@ -3,36 +3,33 @@ title: Clipboard.write() slug: Web/API/Clipboard/write translation_of: Web/API/Clipboard/write --- -<div>{{APIRef("Clipboard API")}}</div> +{{APIRef("Clipboard API")}} -<p>La methode <strong><code>write()</code></strong> de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier. Elle peut être utilisé pour implémenter une fonctionalité de copier coller.</p> +La methode **`write()`** de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier. Elle peut être utilisé pour implémenter une fonctionalité de copier coller. -<p>Avant de pouvoir écrire dans le presse-papier, vous devez utiliser <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a> pour avoir l'autorisation <code>"clipboard-write"</code>.</p> +Avant de pouvoir écrire dans le presse-papier, vous devez utiliser [Permissions API](/en-US/docs/Web/API/Permissions_API) pour avoir l'autorisation `"clipboard-write"`. -<div class="note"> -<p><strong>Note:</strong> Browser support for the asynchronous clipboard APIs is still in the process of being implemented. Be sure to check the {{anch("Browser compatibility", "compatibility table")}} as well as {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} for more information.</p> -</div> +> **Note :** Browser support for the asynchronous clipboard APIs is still in the process of being implemented. Be sure to check the {{anch("Browser compatibility", "compatibility table")}} as well as {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} for more information. -<h2 id="Syntax">Syntax</h2> +## Syntax -<pre class="syntaxbox">var <em>promise</em> = navigator.clipboard.write(<em>dataTransfer</em>)</pre> + var promise = navigator.clipboard.write(dataTransfer) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>dataTransfer</code></dt> - <dd>Un objet {{domxref("DataTransfer")}} contenant les données à écrire dans le presse-papier.</dd> -</dl> +- `dataTransfer` + - : Un objet {{domxref("DataTransfer")}} contenant les données à écrire dans le presse-papier. -<h3 id="Return_value">Return value</h3> +### Return value -<p>Une {{jsxref("Promise")}} qui sera résolut quand les données seront écrite dans le presse papier. Cette promesse est rejetée si l'accés au presse-papier échoue.</p> +Une {{jsxref("Promise")}} qui sera résolut quand les données seront écrite dans le presse papier. Cette promesse est rejetée si l'accés au presse-papier échoue. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Cette fonction d'exemple remplace l'actuel contenut du presse-papier par le texte spécifié en paramètre.</p> +Cette fonction d'exemple remplace l'actuel contenut du presse-papier par le texte spécifié en paramètre. -<pre class="brush: js">function setClipboard(text) { +```js +function setClipboard(text) { let data = new DataTransfer(); data.items.add(text, "text/plain"); @@ -42,29 +39,16 @@ translation_of: Web/API/Clipboard/write /* failure */ }); } -</pre> +``` -<p>Le code commence par la creation d'un nouveau objet {{domxref("DataTransfer")}} dans lequel le texte est placé pour être envoyé au presse-papier. {{domxref("DataTransferItemList.add()")}} est appelé pour ajouté le texte à<code>DataTransfer</code>, ensuite <code>write()</code> est appelé, en spécifiant une function d'accomplissement et une fonction d'erreur.</p> +Le code commence par la creation d'un nouveau objet {{domxref("DataTransfer")}} dans lequel le texte est placé pour être envoyé au presse-papier. {{domxref("DataTransferItemList.add()")}} est appelé pour ajouté le texte à`DataTransfer`, ensuite `write()` est appelé, en spécifiant une function d'accomplissement et une fonction d'erreur. -<h2 id="Specifications">Specifications</h2> +## Specifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Clipboard API','#h-clipboard-write-data','write()')}}</td> - <td>{{Spec2('Clipboard API')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName('Clipboard API','#h-clipboard-write-data','write()')}} | {{Spec2('Clipboard API')}} | Initial definition. | -<h2 id="Browser_compatibility">Browser compatibility</h2> +## Browser compatibility - - -<p>{{Compat("api.Clipboard.write")}}</p> +{{Compat("api.Clipboard.write")}} diff --git a/files/fr/web/api/clipboard/writetext/index.md b/files/fr/web/api/clipboard/writetext/index.md index 93b7310625..226177f104 100644 --- a/files/fr/web/api/clipboard/writetext/index.md +++ b/files/fr/web/api/clipboard/writetext/index.md @@ -3,57 +3,43 @@ title: Clipboard.writeText() slug: Web/API/Clipboard/writeText translation_of: Web/API/Clipboard/writeText --- -<div>{{APIRef("Clipboard API")}}</div> +{{APIRef("Clipboard API")}} -<p>La méthode <strong><code>writeText()</code></strong> de l’interface {{domxref("Clipboard")}} écrit le texte spécifié dans le presse-papiers du système.</p> +La méthode **`writeText()`** de l’interface {{domxref("Clipboard")}} écrit le texte spécifié dans le presse-papiers du système. -<div class="note"> -<p><strong>Note :</strong> La spécification requiert que l’<a href="/en-US/docs/Web/API/Permissions_API">API Permissions</a> soit utilisée pour obtenir la permission <code>"clipboardWrite"</code> avant d’écrire dans le presse-papiers. Cependant, les prérequis exacts varient de navigateur en navigateur, car c’est une API récente. Consultez la {{anch("Browser compatibility", "table de compatibilité")}} et {{SectionOnPage("/docs/Web/API/Clipboard", "Clipboard availability")}} pour plus de détails.</p> -</div> +> **Note :** La spécification requiert que l’[API Permissions](/en-US/docs/Web/API/Permissions_API) soit utilisée pour obtenir la permission `"clipboardWrite"` avant d’écrire dans le presse-papiers. Cependant, les prérequis exacts varient de navigateur en navigateur, car c’est une API récente. Consultez la {{anch("Browser compatibility", "table de compatibilité")}} et {{SectionOnPage("/docs/Web/API/Clipboard", "Clipboard availability")}} pour plus de détails. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>promesse</em> = navigator.clipboard.writeText(<em>nouveauTexte</em>)</pre> + var promesse = navigator.clipboard.writeText(nouveauTexte) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>nouveauTexte</code></dt> - <dd>La {{domxref("DOMString")}} devant être écrite dans le presse-papiers.</dd> -</dl> +- `nouveauTexte` + - : La {{domxref("DOMString")}} devant être écrite dans le presse-papiers. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une {{jsxref("Promise")}} qui sera résolue une fois que le contenu du presse-papiers aura été mis à jour. La promesse est rejetée si le code appelant n’a pas la permission d’écrire dans le presse-papiers.</p> +Une {{jsxref("Promise")}} qui sera résolue une fois que le contenu du presse-papiers aura été mis à jour. La promesse est rejetée si le code appelant n’a pas la permission d’écrire dans le presse-papiers. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Cet exemple définit le contenu du presse-papiers comme la chaîne "<presse-papiers vide>".</p> +Cet exemple définit le contenu du presse-papiers comme la chaîne "\<presse-papiers vide>". -<pre class="brush: js">navigator.clipboard.writeText("<presse-papiers vide>").then(function() { +```js +navigator.clipboard.writeText("<presse-papiers vide>").then(function() { /* presse-papiers modifié avec succès */ }, function() { /* échec de l’écriture dans le presse-papiers */ }); -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Clipboard API','#h-clipboard-writetext-data','writeText()')}}</td> - <td>{{Spec2('Clipboard API')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Clipboard.writeText")}}</p> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Clipboard API','#h-clipboard-writetext-data','writeText()')}} | {{Spec2('Clipboard API')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Clipboard.writeText")}} diff --git a/files/fr/web/api/clipboard_api/index.md b/files/fr/web/api/clipboard_api/index.md index bef8e4bafd..bdd7d9543c 100644 --- a/files/fr/web/api/clipboard_api/index.md +++ b/files/fr/web/api/clipboard_api/index.md @@ -1,61 +1,60 @@ --- title: API Clipboard slug: Web/API/Clipboard_API -translation_of: 'Web/API/Clipboard_API' +translation_of: Web/API/Clipboard_API --- -<div>{{DefaultAPISidebar("Clipboard API")}}</div> +{{DefaultAPISidebar("Clipboard API")}} -<p>L'<strong>API Clipboard</strong> (en français : API Presse-papiers) fournit la possibilité de répondre aux commandes du presse-papiers (couper, copier et coller) ainsi que de lire et écrire sur le presse-papiers système de façon asynchrone. L'accès aux contenus du presse-papiers est protégé par l'<a href="/fr/docs/Web/API/Permissions_API">API Permissions</a> : la permission <code>clipboard-write</code> est donnée automatiquement aux pages lorsqu'elles sont dans l'onglet actif. La permission <code>clipboard-read</code> doit quant à elle être demandée, ce que vous pouvez faire en tentant de lire les données du presse-papiers.</p> +L'**API Clipboard** (en français : API Presse-papiers) fournit la possibilité de répondre aux commandes du presse-papiers (couper, copier et coller) ainsi que de lire et écrire sur le presse-papiers système de façon asynchrone. L'accès aux contenus du presse-papiers est protégé par l'[API Permissions](/fr/docs/Web/API/Permissions_API) : la permission `clipboard-write` est donnée automatiquement aux pages lorsqu'elles sont dans l'onglet actif. La permission `clipboard-read` doit quant à elle être demandée, ce que vous pouvez faire en tentant de lire les données du presse-papiers. -<div class="note"> -<p><strong>Note :</strong> Cette API <em>n'est pas disponible</em> dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a> (elle n'est pas exposée via {{domxref("WorkerNavigator")}}).</p> -</div> +> **Note :** Cette API _n'est pas disponible_ dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API) (elle n'est pas exposée via {{domxref("WorkerNavigator")}}). -<p>Cette API est conçue pour remplacer l'accès au presse-papiers précédemment proposé via {{domxref("document.execCommand()")}}.</p> +Cette API est conçue pour remplacer l'accès au presse-papiers précédemment proposé via {{domxref("document.execCommand()")}}. -<h2 id="accessing_the_clipboard">Accéder au presse-papier</h2> +## Accéder au presse-papier -<p>Au lieu de créer un objet <code>Clipboard</code> lors de l'instanciation, vous pouvez accéder au presse-papier du système avec la globale {{domxref("Navigator.clipboard")}} :</p> +Au lieu de créer un objet `Clipboard` lors de l'instanciation, vous pouvez accéder au presse-papier du système avec la globale {{domxref("Navigator.clipboard")}} : -<pre class="brush: js">navigator.clipboard.readText().then( - clipText => document.querySelector(".editor").innerText += clipText);</pre> +```js +navigator.clipboard.readText().then( + clipText => document.querySelector(".editor").innerText += clipText); +``` -<p>Ce bout de code analyse le texte à partir du presse-papiers et l'insère après le premier élément trouvé comportant la classe <code>editor</code>. Puisque {{domxref("Clipboard.readText", "readText()")}} (sans oublier {{domxref("Clipboard.read", "read()")}}) retournent une chaîne vide si le contenu du presse-papier n'est pas textuel, ce code est sécurisé.</p> +Ce bout de code analyse le texte à partir du presse-papiers et l'insère après le premier élément trouvé comportant la classe `editor`. Puisque {{domxref("Clipboard.readText", "readText()")}} (sans oublier {{domxref("Clipboard.read", "read()")}}) retournent une chaîne vide si le contenu du presse-papier n'est pas textuel, ce code est sécurisé. -<h2 id="interfaces">Interfaces</h2> +## Interfaces -<dl> - <dt>{{domxref("Clipboard")}} {{securecontext_inline}}</dt> - <dd>Fournit une interface pour la lecture et l'écriture de texte et de données sur le presse-papiers du système. La spécification s'y réfère avec le terme "Async Clipboard API".</dd> - <dt>{{domxref("ClipboardEvent")}} {{securecontext_inline}}</dt> - <dd>Représente les évènements fournissant l'information relative à la modification du presse-papiers, qui peut être l'évènement {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}} ou {{domxref("Element/paste_event", "paste")}}. La spécification s'y réfère avec le terme "Clipboard Event API".</dd> - <dt>{{domxref("ClipboardItem")}} {{securecontext_inline}}</dt> - <dd>Représente un format de terme unique utilisé pour lire ou écrire des données.</dd> -</dl> +- {{domxref("Clipboard")}} {{securecontext_inline}} + - : Fournit une interface pour la lecture et l'écriture de texte et de données sur le presse-papiers du système. La spécification s'y réfère avec le terme "Async Clipboard API". +- {{domxref("ClipboardEvent")}} {{securecontext_inline}} + - : Représente les évènements fournissant l'information relative à la modification du presse-papiers, qui peut être l'évènement {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}} ou {{domxref("Element/paste_event", "paste")}}. La spécification s'y réfère avec le terme "Clipboard Event API". +- {{domxref("ClipboardItem")}} {{securecontext_inline}} + - : Représente un format de terme unique utilisé pour lire ou écrire des données. -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications("api.Clipboard")}}</p> +{{Specifications("api.Clipboard")}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<h3 id="clipboard">Clipboard</h3> +### Clipboard -<p>{{Compat("api.Clipboard")}}</p> +{{Compat("api.Clipboard")}} -<h3 id="clipboardevent">ClipboardEvent</h3> +### ClipboardEvent -<p>{{Compat("api.ClipboardEvent")}}</p> +{{Compat("api.ClipboardEvent")}} -<h3 id="clipboarditem">ClipboardItem</h3> +### ClipboardItem -<p>{{Compat("api.ClipboardItem")}}</p> +{{Compat("api.ClipboardItem")}} -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://async-clipboard-api.glitch.me/">Démonstration de l'API Async Clipboard sur Glitch (en anglais)</a></li> - <li><a href="https://web.dev/image-support-for-async-clipboard/"><i lang="en">Image support for Async Clipboard article</i> (en anglais)</a></li> - <li><a href="/fr/docs/Web/API/Permissions_API">API Permissions</a></li> - <li><a href="/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API">Utiliser l'API Permissions</a></li> -</ul> +- [Démonstration de l'API Async Clipboard sur Glitch (en anglais)](https://async-clipboard-api.glitch.me/) +- <i lang="en">Image support for Async Clipboard article</i> + + [<i lang="en">Image support for Async Clipboard article</i> (en anglais)](https://web.dev/image-support-for-async-clipboard/) + +- [API Permissions](/fr/docs/Web/API/Permissions_API) +- [Utiliser l'API Permissions](/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API) diff --git a/files/fr/web/api/closeevent/index.md b/files/fr/web/api/closeevent/index.md index 3873ad5d76..f891301908 100644 --- a/files/fr/web/api/closeevent/index.md +++ b/files/fr/web/api/closeevent/index.md @@ -9,171 +9,212 @@ tags: - WebSocket translation_of: Web/API/CloseEvent --- -<p>{{APIRef("Websockets API")}}</p> - -<p>Un événement CloseEvent est envoyé au client utilisant une <a href="/en-US/docs/Glossary/WebSockets">WebSocket </a>lorsque la connexion est fermée. Cet événement est envoyé au listener indiqué par l'attribut <code>onclose </code>de la WebSocket.</p> - -<h2 id="Attributes">Constructeur</h2> - -<dl> - <dt>{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}</dt> - <dd>Construit un nouvel événement <code>CloseEvent</code>.</dd> -</dl> - -<h2 id="Attributes">Propriétés</h2> - -<p><em>Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}.</em></p> - -<dl> - <dt>{{domxref("CloseEvent.code")}} {{readOnlyInline}}</dt> - <dd>Retourne un <code>unsigned short</code> contenant le code de fermeture envoyé par le serveur. Les valeurs possibles sont données ci-dessous. - <table class="standard-table"> - <tbody> - <tr> - <td class="header">Status code</td> - <td class="header">Nom</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>0</code>–<code>999</code></td> - <td> </td> - <td><strong>Reservé et inutilisé.</strong></td> - </tr> - <tr> - <td><code>1000</code></td> - <td><code>CLOSE_NORMAL</code></td> - <td>Fermeture normale ; la connexion s'est terminée normalement.</td> - </tr> - <tr> - <td><code>1001</code></td> - <td><code>CLOSE_GOING_AWAY</code></td> - <td> - <p>Reçu lorsque une erreur est apparue sur le serveur ou le navigateur quitte la page ayant ouvert la connexion.</p> - </td> - </tr> - <tr> - <td><code>1002</code></td> - <td><code>CLOSE_PROTOCOL_ERROR</code></td> - <td>L'autre partie de la connexion termine la connexion à cause d'une erreur de protocole.</td> - </tr> - <tr> - <td><code>1003</code></td> - <td><code>CLOSE_UNSUPPORTED</code></td> - <td>La connexion est terminée car le serveur à reçu des données d'un type qu'il ne peut pas accepter (par exemple des données binaire plutôt que du texte).</td> - </tr> - <tr> - <td><code>1004</code></td> - <td> </td> - <td><strong>Réservé.</strong> Une utilisation pourrait être définie dans le futur.</td> - </tr> - <tr> - <td><code>1005</code></td> - <td><code>CLOSE_NO_STATUS</code></td> - <td><strong>Réservé.</strong> Indique qu'aucun code n'est donné bien qu'un code était attendu.</td> - </tr> - <tr> - <td><code>1006</code></td> - <td><code>CLOSE_ABNORMAL</code></td> - <td><strong>Réservé.</strong> Utilisé pour indiquer que la connexion a été terminée anormalement (sans paquet indiquant la fermeture).</td> - </tr> - <tr> - <td><code>1007</code></td> - <td> </td> - <td>Le serveur termine la connexion car un message contenant des données incohérentes a été reçu (e.g., des données qui ne sont pas au format UTF-8 dans un message texte).</td> - </tr> - <tr> - <td><code>1008</code></td> - <td> </td> - <td>Le serveur termine la connexion car un message ne respectant pas la politique du serveur est reçu. C'est un code d'état générique qui est utilisé lorsque les codes 1003 et 1009 ne correspondent pas à la situation.</td> - </tr> - <tr> - <td><code>1009</code></td> - <td><code>CLOSE_TOO_LARGE</code></td> - <td>Le serveur termine la connexion car les données reçues sont trop grosses.</td> - </tr> - <tr> - <td><code>1010</code></td> - <td> </td> - <td>Le client termine la connexion car il souhaitait négocier une ou plusieurs extensions mais le serveur ne l'a pas fait.</td> - </tr> - <tr> - <td><code>1011</code></td> - <td> </td> - <td>Le serveur termine la connexion car il a rencontré un problème qui l'empêche de traiter la requête.</td> - </tr> - <tr> - <td>–<code>1014</code></td> - <td> </td> - <td><strong>Réservé pour une utilisation future par le standard WebSocket.</strong></td> - </tr> - <tr> - <td><code>1015</code></td> - <td> </td> - <td><strong>Réservé.</strong> Indique que la connexion a été fermée à cause d'une erreur durant le handshake TLS (e.g., le certificat du serveur ne peut pas être vérifié).</td> - </tr> - <tr> - <td><code>1016</code>–<code>1999</code></td> - <td> </td> - <td><strong>Réservé pour une utilisation future par le standard WebSocket.</strong></td> - </tr> - <tr> - <td><code>2000</code>–<code>2999</code></td> - <td> </td> - <td><strong>Réservé pour une utilisation future par le standard WebSocket.</strong></td> - </tr> - <tr> - <td><code>3000</code>–<code>3999</code></td> - <td> </td> - <td>Disponible pour être utilisé par des bibliothèques ou des frameworks. Ces codes <strong>ne doivent pas</strong> être utilisés par des applications.</td> - </tr> - <tr> - <td><code>4000</code>–<code>4999</code></td> - <td> </td> - <td>Disponible pour être utilisés par des applications.</td> - </tr> - </tbody> - </table> - </dd> - <dt>{{domxref("CloseEvent.reason")}} {{readOnlyInline}}</dt> - <dd>Retourne un {{ domxref("DOMString") }} qui indique la raison pour laquelle le serveur a fermé la connexion. Ce message est spécifique au serveur et au sous-protocole utilisé.</dd> - <dt>{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}</dt> - <dd>Retourne un {{jsxref("Boolean")}} qui indique si la connexion a été correctement fermée ou non.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p><em>Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}.</em></p> - -<dl> - <dt>{{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}}</dt> - <dd>Initialise la valeur d'un <code>CloseEvent</code>. Si l'événement a déjà été envoyé, cette méthode ne fait rien.</dd> -</dl> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('HTML WHATWG', 'web-sockets.html#the-closeevent-interface', 'CloseEvent') }}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CloseEvent")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("WebSocket")}}</li> -</ul> +{{APIRef("Websockets API")}} + +Un événement CloseEvent est envoyé au client utilisant une [WebSocket ](/en-US/docs/Glossary/WebSockets)lorsque la connexion est fermée. Cet événement est envoyé au listener indiqué par l'attribut `onclose `de la WebSocket. + +## Constructeur + +- {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} + - : Construit un nouvel événement `CloseEvent`. + +## Propriétés + +_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._ + +- {{domxref("CloseEvent.code")}} {{readOnlyInline}} + + - : Retourne un `unsigned short` contenant le code de fermeture envoyé par le serveur. Les valeurs possibles sont données ci-dessous. + + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Status code</td> + <td class="header">Nom</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>0</code>–<code>999</code></td> + <td> </td> + <td><strong>Reservé et inutilisé.</strong></td> + </tr> + <tr> + <td><code>1000</code></td> + <td><code>CLOSE_NORMAL</code></td> + <td>Fermeture normale ; la connexion s'est terminée normalement.</td> + </tr> + <tr> + <td><code>1001</code></td> + <td><code>CLOSE_GOING_AWAY</code></td> + <td> + <p> + Reçu lorsque une erreur est apparue sur le serveur ou le navigateur + quitte la page ayant ouvert la connexion. + </p> + </td> + </tr> + <tr> + <td><code>1002</code></td> + <td><code>CLOSE_PROTOCOL_ERROR</code></td> + <td> + L'autre partie de la connexion termine la connexion à cause d'une erreur + de protocole. + </td> + </tr> + <tr> + <td><code>1003</code></td> + <td><code>CLOSE_UNSUPPORTED</code></td> + <td> + La connexion est terminée car le serveur à reçu des données d'un type + qu'il ne peut pas accepter (par exemple des données binaire plutôt que + du texte). + </td> + </tr> + <tr> + <td><code>1004</code></td> + <td> </td> + <td> + <strong>Réservé.</strong> Une utilisation pourrait être définie dans le + futur. + </td> + </tr> + <tr> + <td><code>1005</code></td> + <td><code>CLOSE_NO_STATUS</code></td> + <td> + <strong>Réservé.</strong> Indique qu'aucun code n'est donné bien qu'un + code était attendu. + </td> + </tr> + <tr> + <td><code>1006</code></td> + <td><code>CLOSE_ABNORMAL</code></td> + <td> + <strong>Réservé.</strong> Utilisé pour indiquer que la connexion a été + terminée anormalement (sans paquet indiquant la fermeture). + </td> + </tr> + <tr> + <td><code>1007</code></td> + <td> </td> + <td> + Le serveur termine la connexion car un message contenant des données + incohérentes a été reçu (e.g., des données qui ne sont pas au format + UTF-8 dans un message texte). + </td> + </tr> + <tr> + <td><code>1008</code></td> + <td> </td> + <td> + Le serveur termine la connexion car un message ne respectant pas la + politique du serveur est reçu. C'est un code d'état générique qui est + utilisé lorsque les codes 1003 et 1009 ne correspondent pas à la + situation. + </td> + </tr> + <tr> + <td><code>1009</code></td> + <td><code>CLOSE_TOO_LARGE</code></td> + <td> + Le serveur termine la connexion car les données reçues sont trop + grosses. + </td> + </tr> + <tr> + <td><code>1010</code></td> + <td> </td> + <td> + Le client termine la connexion car il souhaitait négocier une ou + plusieurs extensions mais le serveur ne l'a pas fait. + </td> + </tr> + <tr> + <td><code>1011</code></td> + <td> </td> + <td> + Le serveur termine la connexion car il a rencontré un problème qui + l'empêche de traiter la requête. + </td> + </tr> + <tr> + <td>–<code>1014</code></td> + <td> </td> + <td> + <strong + >Réservé pour une utilisation future par le standard + WebSocket.</strong + > + </td> + </tr> + <tr> + <td><code>1015</code></td> + <td> </td> + <td> + <strong>Réservé.</strong> Indique que la connexion a été fermée à cause + d'une erreur durant le handshake TLS (e.g., le certificat du serveur ne + peut pas être vérifié). + </td> + </tr> + <tr> + <td><code>1016</code>–<code>1999</code></td> + <td> </td> + <td> + <strong + >Réservé pour une utilisation future par le standard + WebSocket.</strong + > + </td> + </tr> + <tr> + <td><code>2000</code>–<code>2999</code></td> + <td> </td> + <td> + <strong + >Réservé pour une utilisation future par le standard + WebSocket.</strong + > + </td> + </tr> + <tr> + <td><code>3000</code>–<code>3999</code></td> + <td> </td> + <td> + Disponible pour être utilisé par des bibliothèques ou des frameworks. + Ces codes <strong>ne doivent pas</strong> être utilisés par des + applications. + </td> + </tr> + <tr> + <td><code>4000</code>–<code>4999</code></td> + <td> </td> + <td>Disponible pour être utilisés par des applications.</td> + </tr> + </tbody> + </table> + +- {{domxref("CloseEvent.reason")}} {{readOnlyInline}} + - : Retourne un {{ domxref("DOMString") }} qui indique la raison pour laquelle le serveur a fermé la connexion. Ce message est spécifique au serveur et au sous-protocole utilisé. +- {{domxref("CloseEvent.wasClean")}} {{readOnlyInline}} + - : Retourne un {{jsxref("Boolean")}} qui indique si la connexion a été correctement fermée ou non. + +## Méthodes + +_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._ + +- {{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}} + - : Initialise la valeur d'un `CloseEvent`. Si l'événement a déjà été envoyé, cette méthode ne fait rien. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{ SpecName('HTML WHATWG', 'web-sockets.html#the-closeevent-interface', 'CloseEvent') }} | {{ Spec2('HTML WHATWG') }} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.CloseEvent")}} + +## Voir aussi + +- {{domxref("WebSocket")}} diff --git a/files/fr/web/api/comment/comment/index.md b/files/fr/web/api/comment/comment/index.md index 8e4017c0d3..c487b14422 100644 --- a/files/fr/web/api/comment/comment/index.md +++ b/files/fr/web/api/comment/comment/index.md @@ -7,47 +7,31 @@ tags: - DOM translation_of: Web/API/Comment/Comment --- -<p>{{ApiRef("DOM")}}{{seeCompatTable}}</p> +{{ApiRef("DOM")}}{{seeCompatTable}} -<p>Le constructeur <code><strong>Comment()</strong></code> renvoie un objet {{domxref("Comment")}} <em>(Commentaire)</em> nouvellement créé avec le {{domxref ("DOMString")}} donné en paramètre comme contenu textuel.</p> +Le constructeur **`Comment()`** renvoie un objet {{domxref("Comment")}} _(Commentaire)_ nouvellement créé avec le {{domxref ("DOMString")}} donné en paramètre comme contenu textuel. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>comment</em>1 = new Comment(); // Create an empty comment -<code><em>comment2</em></code> = new Comment("This is a comment"); -</pre> + comment1 = new Comment(); // Create an empty comment + comment2 = new Comment("This is a comment"); -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">var comment = new Comment("Test");</pre> +```js +var comment = new Comment("Test"); +``` -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#comment', 'Comment.Comment()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG', '#comment', 'Comment.Comment()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.Comment.Comment")}} +## Voir aussi -<p>{{Compat("api.Comment.Comment")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Document_Object_Model">The DOM interfaces index</a></li> -</ul> - -<p> </p> +- [The DOM interfaces index](/fr/docs/Web/API/Document_Object_Model) diff --git a/files/fr/web/api/comment/index.md b/files/fr/web/api/comment/index.md index 804bd44d58..40f4ebe0de 100644 --- a/files/fr/web/api/comment/index.md +++ b/files/fr/web/api/comment/index.md @@ -6,65 +6,38 @@ tags: - DOM translation_of: Web/API/Comment --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>L'interface <code><strong>Comment</strong></code> représente des annotations textuelles au sein du balisage; même si elles ne sont généralement pas montrées, elles sont disponibles à la lecture dans le code source. Les commentaires sont représentés en HTML et XML avec du contenu entre cette balise '<code><!--</code>' et celle ci '<code>--></code>'. Pour XML, la séquence de caractère suivante '<code>--</code>' ne peut être utilisée dans un commentaire.</p> +L'interface **`Comment`** représente des annotations textuelles au sein du balisage; même si elles ne sont généralement pas montrées, elles sont disponibles à la lecture dans le code source. Les commentaires sont représentés en HTML et XML avec du contenu entre cette balise '`<!--`' et celle ci '`-->`'. Pour XML, la séquence de caractère suivante '`--`' ne peut être utilisée dans un commentaire. -<p>{{InheritanceDiagram}}</p> +{{InheritanceDiagram}} -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>Cette interface ne possède pas de propriétés spécifiques, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}.</em></p> +_Cette interface ne possède pas de propriétés spécifiques, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}._ -<h2 id="Constructeur">Constructeur</h2> +## Constructeur -<dl> - <dt>{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}</dt> - <dd>Retourne un objet <code>Comment</code> avec son contenu textuel en paramètre.</dd> -</dl> +- {{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}} + - : Retourne un objet `Comment` avec son contenu textuel en paramètre. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p><em>Cette interface ne possède pas de méthode spécifique, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}.</em></p> +_Cette interface ne possède pas de méthode spécifique, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}._ -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#comment', 'Comment')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Ajoute le constructeur.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Pas de changement à partir de {{SpecName('DOM2 Core')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Pas de changement à partir de {{SpecName('DOM1')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#comment', 'Comment')}} | {{Spec2('DOM WHATWG')}} | Ajoute le constructeur. | +| {{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}} | {{Spec2('DOM3 Core')}} | Pas de changement à partir de {{SpecName('DOM2 Core')}} | +| {{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}} | {{Spec2('DOM2 Core')}} | Pas de changement à partir de {{SpecName('DOM1')}} | +| {{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}} | {{Spec2('DOM1')}} | Définition initale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Comment")}}</p> +{{Compat("api.Comment")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> -</ul> +- [The DOM interfaces index](/en-US/docs/DOM/DOM_Reference) diff --git a/files/fr/web/api/compositionevent/index.md b/files/fr/web/api/compositionevent/index.md index cf94e5b643..f91b5a3815 100644 --- a/files/fr/web/api/compositionevent/index.md +++ b/files/fr/web/api/compositionevent/index.md @@ -7,73 +7,46 @@ tags: - Evènement translation_of: Web/API/CompositionEvent --- -<p>{{APIRef("DOM Events")}}</p> +{{APIRef("DOM Events")}} -<p>Le <code>CompositionEvent DOM</code> représente les évènements qui se produisent en raison de l'utilisateur entrant indirectement le texte.</p> +Le `CompositionEvent DOM` représente les évènements qui se produisent en raison de l'utilisateur entrant indirectement le texte. -<h2 id="Constructeur">Constructeur</h2> +## Constructeur -<dl> - <dt>{{domxref("CompositionEvent.CompositionEvent()", "CompositionEvent()")}}</dt> - <dd>Crée une nouvelle instance d'objet <code>CompositionEvent</code> .</dd> -</dl> +- {{domxref("CompositionEvent.CompositionEvent()", "CompositionEvent()")}} + - : Crée une nouvelle instance d'objet `CompositionEvent` . -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>Cette interface hérite également des propriétés de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}.</em></p> +_Cette interface hérite également des propriétés de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}._ -<dl> - <dt>{{domxref("CompositionEvent.data")}} {{readonlyinline}}</dt> - <dd>Renvoie les caractères générés par la méthode d'entrée qui a relevé l'événement ; cela varie en fonction du type d'événement ayant généré l'objet <code>CompositionEvent</code>.</dd> - <dt>{{domxref("CompositionEvent.locale")}} {{readonlyinline}} {{deprecated_inline}}</dt> - <dd>Renvoie les paramètres régionaux de la méthode de saisie actuelle (par exemple, les paramètres régionaux de disposition du clavier si la composition est associée à IME).</dd> -</dl> +- {{domxref("CompositionEvent.data")}} {{readonlyinline}} + - : Renvoie les caractères générés par la méthode d'entrée qui a relevé l'événement ; cela varie en fonction du type d'événement ayant généré l'objet `CompositionEvent`. +- {{domxref("CompositionEvent.locale")}} {{readonlyinline}} {{deprecated_inline}} + - : Renvoie les paramètres régionaux de la méthode de saisie actuelle (par exemple, les paramètres régionaux de disposition du clavier si la composition est associée à IME). -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p><em>Cette interface hérite également des méthodes de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}.</em></p> +_Cette interface hérite également des méthodes de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}._ -<dl> - <dt>{{domxref("CompositionEvent.initCompositionEvent()")}} {{deprecated_inline}}</dt> - <dd>Initialise les attributs d'un objet <code>CompositionEvent.</code></dd> -</dl> +- {{domxref("CompositionEvent.initCompositionEvent()")}} {{deprecated_inline}} + - : Initialise les attributs d'un objet `CompositionEvent.` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('UI Events', '#interface-compositionevent', 'CompositionEvent')}}</td> - <td>{{Spec2('UI Events')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#idl-compositionevent', 'CompositionEvent')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('UI Events', '#interface-compositionevent', 'CompositionEvent')}} | {{Spec2('UI Events')}} | | +| {{SpecName('DOM3 Events', '#idl-compositionevent', 'CompositionEvent')}} | {{Spec2('DOM3 Events')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div> +{{Compat("api.CompositionEvent")}} +## Voir aussi -<p>{{Compat("api.CompositionEvent")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><code>compositionstart</code></li> - <li><code>compositionend</code></li> - <li><code>compositionupdate</code></li> - <li><a href="/fr/docs/Web/API/UIEvent">UIEvent</a></li> - <li><a href="/fr/docs/Web/API/Event">Event</a></li> -</ul> +- `compositionstart` +- `compositionend` +- `compositionupdate` +- [UIEvent](/fr/docs/Web/API/UIEvent) +- [Event](/fr/docs/Web/API/Event) diff --git a/files/fr/web/api/console/assert/index.md b/files/fr/web/api/console/assert/index.md index db81d236b2..0b3aaddfaf 100644 --- a/files/fr/web/api/console/assert/index.md +++ b/files/fr/web/api/console/assert/index.md @@ -8,69 +8,49 @@ tags: - débogage translation_of: Web/API/console/assert --- -<p>{{APIRef("Console API")}}</p> +{{APIRef("Console API")}} -<p>Affiche un message d'erreur dans la console si l'assertion est fausse. Si l'assertion est vraie, rien ne se produit.</p> +Affiche un message d'erreur dans la console si l'assertion est fausse. Si l'assertion est vraie, rien ne se produit. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<div class="note"> -<p><strong>Note:</strong> <em>La méthode <code>console.assert()</code> est implémentée différement dans les vieilles version de Node.js que dans celle disponible dans les navigateurs.</em></p> +> **Note :** _La méthode `console.assert()` est implémentée différement dans les vieilles version de Node.js que dans celle disponible dans les navigateurs._ +> +> Plus précisément, dans les navigateurs, appeler `console.assert()` avec une condition fausse affichera le `message` dans la console sans interrompre l'éxecution du code suivant. Dans les versions inférieure à la v10 de Node.js, cependant, une assertion fausse lèvera une exception `AssertionError`. Cette différence de comportement a été corrigée par la v10 de Node et `console.assert()` se comporte maintenant de la même façon dans Node et dans les navigateurs. -<p>Plus précisément, dans les navigateurs, appeler <code>console.assert()</code> avec une condition fausse affichera le <code>message</code> dans la console sans interrompre l'éxecution du code suivant. Dans les versions inférieure à la v10 de Node.js, cependant, une assertion fausse lèvera une exception <code>AssertionError</code>. Cette différence de comportement a été corrigée par la v10 de Node et <code>console.assert()</code> se comporte maintenant de la même façon dans Node et dans les navigateurs.</p> -</div> +## Syntaxe -<h2 id="Syntax">Syntaxe</h2> + console.assert(assertion, obj1 [, obj2, ..., objN]); + console.assert(assertion, msg [, subst1, ..., substN]); -<pre class="syntaxbox">console.assert(<em>assertion</em>, <em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); -console.assert(<em>assertion</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); -</pre> +### Paramètres -<h3 id="Parameters">Paramètres</h3> +- `assertion` + - : N'importe quelle expression booléenne. Si l'assertion est fausse, le message s'affichera dans la console. +- `obj1` ... `objN` + - : Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée. +- `msg` + - : Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution. +- `subst1` ... `substN` + - : L'objet javascript avec lequel remplacer les chaînes de substitution dans `msg`. Ceci vous offre plus de contrôle sur ce qui est affiché. -<dl> - <dt><code>assertion</code></dt> - <dd>N'importe quelle expression booléenne. Si l'assertion est fausse, le message s'affichera dans la console.</dd> - <dt><code>obj1</code> ... <code>objN</code></dt> - <dd>Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée.</dd> - <dt><code>msg</code></dt> - <dd>Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution.</dd> - <dt><code>subst1</code> ... <code>substN</code></dt> - <dd>L'objet javascript avec lequel remplacer les chaînes de substitution dans <code>msg</code>. Ceci vous offre plus de contrôle sur ce qui est affiché.</dd> -</dl> +Allez voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. -<p>Allez voir <a href="/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p> +## Spécification -<h2 id="Specification">Spécification</h2> +| Specification | Status | Comment | +| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("Console API", "#assert", "console.assert()")}} | {{Spec2("Console API")}} | Définition initiale | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#assert", "console.assert()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> -<p> </p> -<h2 id="Browser_compatibility">Compatibilité entre les navigateurs</h2> +## Compatibilité entre les navigateurs -<p>{{Compat("api.Console.assert")}}</p> +{{Compat("api.Console.assert")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://console.spec.whatwg.org/#assert-condition-data">WHATWG Console Standard: console.assert</a></li> - <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> - <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> - <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li> -</ul> +- [WHATWG Console Standard: console.assert](https://console.spec.whatwg.org/#assert-condition-data) +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) +- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530) +- [Chrome Developer Tools: Using the Console](https://developer.chrome.com/devtools/docs/console#assertions) diff --git a/files/fr/web/api/console/clear/index.md b/files/fr/web/api/console/clear/index.md index 0df1cf3edf..e0914af264 100644 --- a/files/fr/web/api/console/clear/index.md +++ b/files/fr/web/api/console/clear/index.md @@ -3,46 +3,30 @@ title: clear() slug: Web/API/Console/clear translation_of: Web/API/Console/clear --- -<div>{{APIRef("Console API")}}</div> +{{APIRef("Console API")}} -<p>Vide la console.</p> +Vide la console. -<p>Tous les messages de la console seront supprimés et remplacés par un message de confirmation ("Console was cleared").</p> +Tous les messages de la console seront supprimés et remplacés par un message de confirmation ("Console was cleared"). -<p>À noter: sur Google Chrome, <code>console.clear()</code> n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les <a href="https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation">paramètres de l'inspecteur</a>.</p> +À noter: sur Google Chrome, `console.clear()` n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les [paramètres de l'inspecteur](https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.clear(); -</pre> + console.clear(); -<h2 id="Paramètres">Paramètres</h2> +## Paramètres -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Paramètres</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#clear", "console.clear()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition Initial</td> - </tr> - </tbody> -</table> +| Paramètres | Status | Commentaire | +| ---------------------------------------------------------------------------- | -------------------------------- | ------------------ | +| {{SpecName("Console API", "#clear", "console.clear()")}} | {{Spec2("Console API")}} | Définition Initial | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Console.clear")}}</p> +{{Compat("api.Console.clear")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> - <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> - <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li> -</ul> +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) +- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530) +- [Chrome Developer Tools: Using the Console](https://developer.chrome.com/devtools/docs/console#assertions) diff --git a/files/fr/web/api/console/count/index.md b/files/fr/web/api/console/count/index.md index 6c10e8458f..7cb5fa0d25 100644 --- a/files/fr/web/api/console/count/index.md +++ b/files/fr/web/api/console/count/index.md @@ -11,19 +11,20 @@ tags: - débogage translation_of: Web/API/Console/count --- -<div>{{APIRef("Console API")}}</div> +{{APIRef("Console API")}} -<p>Affiche dans la console le nombre de fois où la fonction <code>count()</code> a été appelée. Cette fonction accepte l'argument optionnel <code>label</code>.</p> +Affiche dans la console le nombre de fois où la fonction `count()` a été appelée. Cette fonction accepte l'argument optionnel `label`. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<p>Si un <code>label</code> est passé en paramètre, la fonction affiche le nombre de fois où la fonction <code>count()</code> a été appelée pour ce <code>label</code> spécifiquempent.</p> +Si un `label` est passé en paramètre, la fonction affiche le nombre de fois où la fonction `count()` a été appelée pour ce `label` spécifiquempent. -<p>Si aucun <code>label</code> est passé en paramètre, la fonction affiche le nombre de fois où la fonction <code>count()</code> a été appelée jusqu'à présent.</p> +Si aucun `label` est passé en paramètre, la fonction affiche le nombre de fois où la fonction `count()` a été appelée jusqu'à présent. -<p>Ci-dessous, un exemple d'utilisation :</p> +Ci-dessous, un exemple d'utilisation : -<pre class="brush: js">function greet() { +```js +function greet() { console.count(); return "hi " + user; } @@ -33,21 +34,22 @@ greet(); user = "alice"; greet(); greet(); -console.count();</pre> +console.count(); +``` -<p>La console affichera les lignes suivantes :</p> +La console affichera les lignes suivantes : -<pre class="eval">"<no label>: 1" -"<no label>: 2" -"<no label>: 3" -"<no label>: 1" -</pre> + "<no label>: 1" + "<no label>: 2" + "<no label>: 3" + "<no label>: 1" -<p>A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction <code>count()</code> de la ligne 11 qui est traité comme un événement indépendant.</p> +A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction `count()` de la ligne 11 qui est traité comme un événement indépendant. -<p>Si la variable <code>user</code> est passée à la fonction comme paramètre <code>label</code>, le code ci-dessous génèrera un nouveau compteur lorsque la variable <code>user</code> sera modifiée :</p> +Si la variable `user` est passée à la fonction comme paramètre `label`, le code ci-dessous génèrera un nouveau compteur lorsque la variable `user` sera modifiée : -<pre class="brush: js">function greet() { +```js +function greet() { console.count(user); return "hi " + user; } @@ -57,48 +59,33 @@ greet(); user = "alice"; greet(); greet(); -console.count("alice");</pre> +console.count("alice"); +``` -<p>La console affichera les lignes suivantes :</p> +La console affichera les lignes suivantes : -<pre class="eval">"bob: 1" -"alice: 1" -"alice: 2" -"alice: 3"</pre> + "bob: 1" + "alice: 1" + "alice: 2" + "alice: 3" -<p>Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction <code>count()</code> avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà.</p> +Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction `count()` avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.count([label]); -</pre> + console.count([label]); -<h2 id="Paramètres">Paramètres</h2> +## Paramètres -<dl> - <dt><code>label</code></dt> - <dd><p>Une chaîne de caractères. Si ce paramètre est renseigné, <code>count()</code> affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé. S'il est omis, <code>count()</code> affiche le nombre de fois que la fonction a été appelée sur cette ligne.</p></dd> -</dl> +- `label` + - : Une chaîne de caractères. Si ce paramètre est renseigné, `count()` affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé. S'il est omis, `count()` affiche le nombre de fois que la fonction a été appelée sur cette ligne. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#count", "console.count()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Status | Commentaire | +| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("Console API", "#count", "console.count()")}} | {{Spec2("Console API")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Console.count")}}</p>
\ No newline at end of file +{{Compat("api.Console.count")}} diff --git a/files/fr/web/api/console/countreset/index.md b/files/fr/web/api/console/countreset/index.md index 7cf74195e7..3fb703d448 100644 --- a/files/fr/web/api/console/countreset/index.md +++ b/files/fr/web/api/console/countreset/index.md @@ -3,49 +3,47 @@ title: Console.countReset() slug: Web/API/Console/countReset translation_of: Web/API/Console/countReset --- -<div>{{APIRef("Console API")}}</div> +{{APIRef("Console API")}} -<p>Remet le compteur à zero. Cette fonction prend un argument optionnel <code>label</code></p> +Remet le compteur à zero. Cette fonction prend un argument optionnel `label` -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="Syntax">Syntax</h2> +## Syntax -<pre class="syntaxbox">console.countReset(<var>[label]</var>); -</pre> + console.countReset([label]); -<h3 id="Parameters">Parameters</h3> +### Parameters -<dl> - <dt><code>label</code></dt> - <dd>Si specifié, <code>countReset()</code> remet à zero le compteur associé à ce label. S'il n'est pas specifié, <code>countReset()</code> remet à zéro le compteur par defaut.</dd> -</dl> +- `label` + - : Si specifié, `countReset()` remet à zero le compteur associé à ce label. S'il n'est pas specifié, `countReset()` remet à zéro le compteur par defaut. -<h3 id="Return_value">Return value</h3> +### Return value -<p>Si le paramètre label à été spécifié :</p> +Si le paramètre label à été spécifié : -<pre> counter-name: 0</pre> + counter-name: 0 -<p>Si aucun label n'as été specifié</p> +Si aucun label n'as été specifié -<pre>default: 0</pre> + default: 0 -<h3 id="Warnings">Warnings</h3> +### Warnings -<p>Si <code>label</code> est specifié mais n'existe pas <code>countReset()</code> renvoie cet avertissement :</p> +Si `label` est specifié mais n'existe pas `countReset()` renvoie cet avertissement : -<pre><code>Counter "counter-name" doesn’t exist.</code></pre> + Counter "counter-name" doesn’t exist. -<p>Si <code>label</code> n'est pas specifé et que <code>count()</code> n'as pas encore été appellé <code>countReset()</code> renvoie cette avertissement :</p> +Si `label` n'est pas specifé et que `count()` n'as pas encore été appellé `countReset()` renvoie cette avertissement : -<pre><code>Counter "default" doesn’t exist.</code></pre> + Counter "default" doesn’t exist. -<h2 id="Examples">Examples</h2> +## Examples -<p>Par exemple avec un code comme celui ci :</p> +Par exemple avec un code comme celui ci : -<pre class="brush: js">var user = ""; +```js +var user = ""; function greet() { console.count(); @@ -58,22 +56,23 @@ user = "alice"; greet(); greet(); console.count(); -console.countReset();</pre> +console.countReset(); +``` -<p>Le retour de la console ressemblera à ceci :</p> +Le retour de la console ressemblera à ceci : -<pre class="eval">"default: 1" -"default: 2" -"default: 3" -"default: 1" -"default: 0" -</pre> + "default: 1" + "default: 2" + "default: 3" + "default: 1" + "default: 0" -<p>Pour information l'appel à <code>console.counterReset()</code> remet à zero la valeur du compteur par défaut.</p> +Pour information l'appel à `console.counterReset()` remet à zero la valeur du compteur par défaut. -<p>S'il on passe la variable <code>user</code> comme argument pour <code>label</code> et que l'on effectue un premier appel de la fonction <code>count()</code>, avec la chaine "bob" puis un second appel avec la chaine "alice" :</p> +S'il on passe la variable `user` comme argument pour `label` et que l'on effectue un premier appel de la fonction `count()`, avec la chaine "bob" puis un second appel avec la chaine "alice" : -<pre class="brush: js">var user = ""; +```js +var user = ""; function greet() { console.count(user); @@ -86,39 +85,25 @@ user = "alice"; greet(); greet(); console.countReset("bob"); -console.count("alice");</pre> +console.count("alice"); +``` -<p>On obtiendra ce retour dans la console</p> +On obtiendra ce retour dans la console -<pre class="eval">"bob: 1" -"alice: 1" -"alice: 2" -"bob: 0" -"alice: 3"</pre> + "bob: 1" + "alice: 1" + "alice: 2" + "bob: 0" + "alice: 3" -<p>Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée.</p> +Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée. -<h2 id="Specifications">Specifications</h2> +## Specifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#count", "console.countReset()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| -------------------------------------------------------------------------------- | -------------------------------- | ------------------ | +| {{SpecName("Console API", "#count", "console.countReset()")}} | {{Spec2("Console API")}} | Initial definition | -<h2 id="Browser_compatibility">Browser compatibility</h2> +## Browser compatibility - - -<p>{{Compat("api.Console.countReset")}}</p> +{{Compat("api.Console.countReset")}} diff --git a/files/fr/web/api/console/debug/index.md b/files/fr/web/api/console/debug/index.md index 03082131d9..5a3471c1db 100644 --- a/files/fr/web/api/console/debug/index.md +++ b/files/fr/web/api/console/debug/index.md @@ -11,58 +11,40 @@ tags: - outils de développement translation_of: Web/API/Console/debug --- -<div>{{APIRef("Console API")}}</div> +{{APIRef("Console API")}} -<p>Affiche un message dans la console web, avec le niveau de log "debug". Le message est affiché uniquement si la console est configurée pour afficher les messages de type debug.</p> +Affiche un message dans la console web, avec le niveau de log "debug". Le message est affiché uniquement si la console est configurée pour afficher les messages de type debug. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.debug(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); -console.debug(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); -</pre> + console.debug(obj1 [, obj2, ..., objN]); + console.debug(msg [, subst1, ..., substN]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>obj1</code> ... <code>objN</code></dt> - <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractères, de chacun de ces objets est affichée dans l'ordre de la liste.</dd> - <dt><code>msg</code></dt> - <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd> - <dt><code>subst1</code> ... <code>substN</code></dt> - <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie. Voir {{SectionOnPage("fr/docs/Web/API/Console", "Utiliser les caractères de substitution")}} pour une description du fonctionnement des substitutions.</dd> -</dl> +- `obj1` ... `objN` + - : Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractères, de chacun de ces objets est affichée dans l'ordre de la liste. +- `msg` + - : Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères. +- `subst1` ... `substN` + - : Une liste d'objets JavaScript qui remplace les chaînes de caractéres de `msg`. Cela vous donne plus de contrôle sur le format de sortie. Voir {{SectionOnPage("fr/docs/Web/API/Console", "Utiliser les caractères de substitution")}} pour une description du fonctionnement des substitutions. -<p>Voir <a href="/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p> +Voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#debug", "console.debug()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("Console API", "#debug", "console.debug()")}} | {{Spec2("Console API")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Console.debug")}}</p> +{{Compat("api.Console.debug")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> - <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> - <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li> -</ul> +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) +- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530) +- [Chrome Developer Tools: Using the Console](https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings) diff --git a/files/fr/web/api/console/dir/index.md b/files/fr/web/api/console/dir/index.md index 82b45f36cf..c63a997ea5 100644 --- a/files/fr/web/api/console/dir/index.md +++ b/files/fr/web/api/console/dir/index.md @@ -11,57 +11,37 @@ tags: - débogage translation_of: Web/API/Console/dir --- -<div>{{APIRef("Console API")}}</div> +{{APIRef("Console API")}} -<p>Affiche une liste interactive des propriétés de l'objet Javascript spécifié. La sortie est présenté comme un listing hiérarchique avec des triangles qui permettent l'affichage du contenu des objets-enfants.</p> +Affiche une liste interactive des propriétés de l'objet Javascript spécifié. La sortie est présenté comme un listing hiérarchique avec des triangles qui permettent l'affichage du contenu des objets-enfants. -<p>En d'autres termes, console.dir est le moyen de voir toutes les propriétés de l'objet JavaScript spécifié dans la console, par lequel le développeur peut facilement obtenir les propriétés de l'objet.</p> +En d'autres termes, console.dir est le moyen de voir toutes les propriétés de l'objet JavaScript spécifié dans la console, par lequel le développeur peut facilement obtenir les propriétés de l'objet. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<p><img src="console-dir.png"></p> + -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.dir(<em>object</em>); -</pre> + console.dir(object); -<h2 id="Paramètres">Paramètres</h2> +## Paramètres -<dl> - <dt><code>object</code></dt> - <dd>Un objet Javascript qui contient les propriétés qui doivent être affichées.</dd> -</dl> +- `object` + - : Un objet Javascript qui contient les propriétés qui doivent être affichées. -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#dir", "console.dir()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName("Console API", "#dir", "console.dir()")}} | {{Spec2("Console API")}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.Console.dir")}} +## Voir aussi -<p>{{Compat("api.Console.dir")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> - <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> - <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a></li> -</ul> +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) +- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530) +- [Chrome Console API reference](https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject) diff --git a/files/fr/web/api/console/dirxml/index.md b/files/fr/web/api/console/dirxml/index.md index 8571cc33a4..5540aa7b7b 100644 --- a/files/fr/web/api/console/dirxml/index.md +++ b/files/fr/web/api/console/dirxml/index.md @@ -10,49 +10,27 @@ tags: - débogage translation_of: Web/API/Console/dirxml --- -<div>{{APIRef ("Console API")}}</div> +{{APIRef ("Console API")}}Affiche un arbre interactif des éléments descendants de l'élément XML / HTML spécifié. S'il n'est pas possible d'afficher en tant qu'élément, la vue Objet JavaScript est affichée à la place. La sortie est présentée sous la forme d'une liste hiérarchique des noeuds extensibles qui vous permettent de voir le contenu des nœuds enfants. -<div>Affiche un arbre interactif des éléments descendants de l'élément XML / HTML spécifié. S'il n'est pas possible d'afficher en tant qu'élément, la vue Objet JavaScript est affichée à la place. La sortie est présentée sous la forme d'une liste hiérarchique des noeuds extensibles qui vous permettent de voir le contenu des nœuds enfants.</div> +## Syntaxe -<h2 id="Syntaxe">Syntaxe</h2> + console.dirxml(object); -<pre class="syntaxbox">console.dirxml(<em>object</em>); -</pre> +## Paramètres -<h2 id="Paramètres">Paramètres</h2> +- `object` + - : Un objet JavaScript dont les propriétés doivent être sorties. -<dl> - <dt><code>object</code></dt> - <dd>Un objet JavaScript dont les propriétés doivent être sorties.</dd> -</dl> +## Spécification -<h2 id="Spécification">Spécification</h2> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("Console API", "#dirxml", "console.dirxml()")}} | {{Spec2("Console API")}} | Définition initiale | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#dirxml", "console.dirxml()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +## Compatibilité des navigateurs -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +{{Compat("api.Console.dirxml")}} +## Voir aussi - -<p>{{Compat("api.Console.dirxml")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> -</ul> +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) diff --git a/files/fr/web/api/console/error/index.md b/files/fr/web/api/console/error/index.md index 21bfa8b40a..58ccae6929 100644 --- a/files/fr/web/api/console/error/index.md +++ b/files/fr/web/api/console/error/index.md @@ -11,64 +11,44 @@ tags: - débogage translation_of: Web/API/Console/error --- -<div>{{APIRef("Console API")}}</div> +{{APIRef("Console API")}} -<p>Affiche un message d'erreur dans la console du navigateur.</p> +Affiche un message d'erreur dans la console du navigateur. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.error(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); -console.error(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); -console.exception(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); -console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); -</pre> + console.error(obj1 [, obj2, ..., objN]); + console.error(msg [, subst1, ..., substN]); + console.exception(obj1 [, obj2, ..., objN]); + console.exception(msg [, subst1, ..., substN]); -<div class="note"> -<p><strong>Note:</strong> <code>console.exception()</code> est un alias de <code>console.error()</code>; ils sont fonctionnellement identiques.</p> -</div> +> **Note :** `console.exception()` est un alias de `console.error()`; ils sont fonctionnellement identiques. -<h3 id="Parameters">Paramètres</h3> +### Paramètres -<dl> - <dt><code>obj1</code> ... <code>objN</code></dt> - <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd> - <dt><code>msg</code></dt> - <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd> - <dt><code>subst1</code> ... <code>substN</code></dt> - <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd> -</dl> +- `obj1` ... `objN` + - : Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste. +- `msg` + - : Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères. +- `subst1` ... `substN` + - : Une liste d'objets JavaScript qui remplace les chaînes de caractéres de `msg`. Cela vous donne plus de contrôle sur le format de sortie. -<p>Voir <a href="/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p> +Voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#error", "console.error()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("Console API", "#error", "console.error()")}} | {{Spec2("Console API")}} | Définition initiale | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.Console.error")}}</div> +{{Compat("api.Console.error")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> - <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> - <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li> -</ul> +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) +- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530) +- [Chrome Developer Tools: Using the Console](https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings) diff --git a/files/fr/web/api/console/group/index.md b/files/fr/web/api/console/group/index.md index 0a3e6f8265..11edef282a 100644 --- a/files/fr/web/api/console/group/index.md +++ b/files/fr/web/api/console/group/index.md @@ -11,35 +11,31 @@ tags: - débogage translation_of: Web/API/Console/group --- -<div>{{APIRef("Console API")}}</div> +{{APIRef("Console API")}} -<p>Création d'un nouveau groupe en ligne dans la <a href="/en-US/docs/Tools/Web_Console">console Web</a>. Cela indente les messages de console suivants par un niveau supplémentaire, jusqu'à ce que {{domxref("console.groupEnd()")}} soit appelé.</p> +Création d'un nouveau groupe en ligne dans la [console Web](/en-US/docs/Tools/Web_Console). Cela indente les messages de console suivants par un niveau supplémentaire, jusqu'à ce que {{domxref("console.groupEnd()")}} soit appelé. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="Syntax">Syntax</h2> +## Syntax -<pre class="syntaxbox">console.group(); -</pre> + console.group(); -<h2 id="Paramètres">Paramètres</h2> +## Paramètres -<dl> - <dt><code>label</code></dt> - <dd>donne une étiquette au groupe. Facultatif. (Chrome 59 testé). Ne fonctionne pas avec<code> </code> <code>console.groupEnd()</code>.</dd> -</dl> +- `label` + - : donne une étiquette au groupe. Facultatif. (Chrome 59 testé). Ne fonctionne pas avec` ``console.groupEnd()`. -<p>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</p> +{{h3_gecko_minversion("Using groups in the console", "9.0")}} -<p>Vous pouvez utiliser des groupes imbriqués pour organiser votre sortie en associant visuellement les messages correspondants. Pour créer un nouveau bloc imbriqué, appelez <code>console.group ()</code>. La méthode <code>console.groupCollapsed ()</code> est similaire, mais le nouveau bloc est réduit et nécessite de cliquer sur un bouton de divulgation pour le lire.</p> +Vous pouvez utiliser des groupes imbriqués pour organiser votre sortie en associant visuellement les messages correspondants. Pour créer un nouveau bloc imbriqué, appelez `console.group ()`. La méthode `console.groupCollapsed ()` est similaire, mais le nouveau bloc est réduit et nécessite de cliquer sur un bouton de divulgation pour le lire. -<div class="note"> -<p><strong>Note :</strong> De Gecko 9 jusqu'à Gecko 51, la méthode <code>groupCollapsed()</code> n'était pas identique à <code>group()</code>. Les groupes réduits sont entièrement pris en charge depuis Gecko 52. Voir {{bug("1088360")}}.</p> -</div> +> **Note :** De Gecko 9 jusqu'à Gecko 51, la méthode `groupCollapsed()` n'était pas identique à `group()`. Les groupes réduits sont entièrement pris en charge depuis Gecko 52. Voir {{bug("1088360")}}. -<p>Pour sortir du groupe courant, appeler <code>console.groupEnd()</code>. Par exemple, étant donné ce code :</p> +Pour sortir du groupe courant, appeler `console.groupEnd()`. Par exemple, étant donné ce code : -<pre class="brush: js">console.log("This is the outer level"); +```js +console.log("This is the outer level"); console.group(); console.log("Level 2"); console.group(); @@ -48,39 +44,25 @@ console.warn("More of level 3"); console.groupEnd(); console.log("Back to level 2"); console.groupEnd(); -console.log("Back to the outer level");</pre> +console.log("Back to the outer level"); +``` -<p>La sortie ressemble à ceci :</p> +La sortie ressemble à ceci : -<p><img alt="Une capture d'écran de messages imbriqués dans la sortie de la console." src="nesting.png"></p> + -<p>Pour plus de détail, se reporter à l'article <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> dans la documentation sur la {{domxref("console")}}.</p> +Pour plus de détail, se reporter à l'article [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation sur la {{domxref("console")}}. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#consolegroupobject-object-", "console.group()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | +| {{SpecName("Console API", "#consolegroupobject-object-", "console.group()")}} | {{Spec2("Console API")}} | Initial definition | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Console.group")}}</p> +{{Compat("api.Console.group")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> -</ul> +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) diff --git a/files/fr/web/api/console/groupcollapsed/index.md b/files/fr/web/api/console/groupcollapsed/index.md index 5956aca479..aa84ded541 100644 --- a/files/fr/web/api/console/groupcollapsed/index.md +++ b/files/fr/web/api/console/groupcollapsed/index.md @@ -12,53 +12,35 @@ tags: - débogage translation_of: Web/API/Console/groupCollapsed --- -<div>{{APIRef("Console API")}}</div> +{{APIRef("Console API")}} -<p>Crée un nouveau groupe intégré dans la console Web. Contrairement à {{domxref ("console.group ()")}}, le nouveau groupe est créé réduit. L'utilisateur devra utiliser le bouton de divulgation à côté pour le développer, en révélant les entrées créées dans le groupe.</p> +Crée un nouveau groupe intégré dans la console Web. Contrairement à {{domxref ("console.group ()")}}, le nouveau groupe est créé réduit. L'utilisateur devra utiliser le bouton de divulgation à côté pour le développer, en révélant les entrées créées dans le groupe. -<p>Appellez {{domxref("console.groupEnd()")}} pour revenir au groupe parent.</p> +Appellez {{domxref("console.groupEnd()")}} pour revenir au groupe parent. -<p>Voir <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> dans la documentation de {{domxref("console")}} pour plus de détails et des exemples.</p> +Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation de {{domxref("console")}} pour plus de détails et des exemples. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.groupCollapsed([label]); -</pre> + console.groupCollapsed([label]); -<h2 id="Paramètres">Paramètres</h2> +## Paramètres -<dl> - <dt><code>label</code></dt> - <dd>Étiquette pour le groupe. Facultatif.</dd> -</dl> +- `label` + - : Étiquette pour le groupe. Facultatif. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#groupcollapsed", "console.groupCollapsed()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("Console API", "#groupcollapsed", "console.groupCollapsed()")}} | {{Spec2("Console API")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Console.groupCollapsed")}}</p> +{{Compat("api.Console.groupCollapsed")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> -</ul> +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) diff --git a/files/fr/web/api/console/groupend/index.md b/files/fr/web/api/console/groupend/index.md index bb64ea32cb..8729a7f1cb 100644 --- a/files/fr/web/api/console/groupend/index.md +++ b/files/fr/web/api/console/groupend/index.md @@ -10,46 +10,30 @@ tags: - débogage translation_of: Web/API/Console/groupEnd --- -<p>{{APIRef("Console API")}}</p> +{{APIRef("Console API")}} -<p>Quitte le groupe en ligne actuel dans la <a href="/fr/docs/Outils/Console_Web">console Web</a>. Voir <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples.</p> +Quitte le groupe en ligne actuel dans la [console Web](/fr/docs/Outils/Console_Web). Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.groupEnd(); -</pre> + console.groupEnd(); -<h2 id="Paramètres">Paramètres</h2> +## Paramètres -<p>Aucun.</p> +Aucun. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#groupend", "console.groupEnd()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Console API", "#groupend", "console.groupEnd()")}} | {{Spec2("Console API")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Console.groupEnd")}}</p> +{{Compat("api.Console.groupEnd")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> -</ul> +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) diff --git a/files/fr/web/api/console/index.md b/files/fr/web/api/console/index.md index 3fea02614b..c761ed3f78 100644 --- a/files/fr/web/api/console/index.md +++ b/files/fr/web/api/console/index.md @@ -9,176 +9,179 @@ tags: - débogage translation_of: Web/API/Console --- -<div>{{APIRef("Console API")}}</div> - -<p>L'objet <strong><code>console</code></strong> donne accès à la console de débogage du navigateur (par exemple., la<a href="/fr/docs/Outils/Console_Web"> Console Web</a> dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base.</p> - -<p>La <code>console</code> est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console. Par exemple :</p> - -<pre class="brush: js">console.log("Failed to open the specified link")</pre> - -<p>Cette page documente les {{anch("Methods", "méthodes")}} disponibles pour l'objet <code>console</code> et donne quelques {{anch("Usage", "exemples d'utilisation")}}.</p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{domxref("Console.assert()")}}</dt> - <dd>Affiche un message et une trace d'appels dans la console si l'assertion en argument est à <code>false</code>.</dd> - <dt>{{domxref("Console.clear()")}}</dt> - <dd>Vide la console.</dd> - <dt>{{domxref("Console.count()")}}</dt> - <dd>Affiche le nombre de fois que la ligne a été appelée avec un label donné.</dd> - <dt>{{domxref("Console.debug()")}}</dt> - <dd>Un alias de <code>log().</code></dd> -</dl> - -<div class="note"> -<p><strong>Note :</strong> À partir de Chromium 58, cette méthode n'apparaît que dans les consoles de navigateur Chromium lorsque le niveau "Verbose" est sélectionné.</p> -</div> - -<dl> - <dt>{{domxref("Console.dir()")}} {{Non-standard_inline}}</dt> - <dd>Affiche une liste interactive des propriétés d'un objet JavaScript donné. Cette liste vous permet d'examiner le contenu des enfants de l'objet en ouvrant les détails (petits triangles).</dd> - <dt>{{domxref("Console.dirxml()")}} {{Non-standard_inline}}</dt> - <dd> - <p>Affiche si possible une représentation d'éléments XML/HTML d'un objet spécifié. Sinon, c'est une vue de l'objet JavaScript.</p> - </dd> - <dt>{{domxref("Console.error()")}}</dt> - <dd>Affiche un message d'erreur. Vous pouvez utiliser les <a href="/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd> - <dt>{{domxref("Console._exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Un alias d'<code>error();</code></dd> - <dt>{{domxref("Console.group()")}}</dt> - <dd>Crée un nouveau <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à <code>group()</code>. Pour revenir au niveau précédent, appeler <code>groupEnd()</code>.</dd> - <dt>{{domxref("Console.groupCollapsed()")}}</dt> - <dd>Crée un nouveau <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à <code>group()</code> , cela commence avec le groupe en ligne effondré, nécessitant l'utilisation d'un bouton de divulgation pour l'agrandir. Pour revenir au niveau précédent, appeler <code>groupEnd()</code>.</dd> - <dt>{{domxref("Console.groupEnd()")}}</dt> - <dd>Quitte le <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> d'indentation courant.</dd> - <dt>{{domxref("Console.info()")}}</dt> - <dd>Affiche un message d'information. Vous pouvez utiliser les <a href="/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd> - <dt>{{domxref("Console.log()")}}</dt> - <dd>Permet d'afficher des messages dans la console. Vous pouvez utiliser les <a href="/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd> - <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt> - <dd>démarre le profilage du navigateur (par exemple, l'<a href="/fr/docs/Outils/Performance">outil performances de Firefox</a>). Vous pouvez spécifier un nom en option pour ce profil.</dd> - <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt> - <dd>Arrête le profilage. Vous pouvez voir le résultat de ce dernier dans l'outil « performance » du navigateur (par exemple, l'<a href="/fr/docs/Outils/Performance">outil performance Firefox</a>).</dd> - <dt>{{domxref("Console.table()")}}</dt> - <dd>Affiche des données tabulaires comme un tableau.</dd> - <dt>{{domxref("Console.time()")}}</dt> - <dd>Démarre un <a href="/fr/docs/Web/API/console#Timers">chronomètre</a> que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page.</dd> - <dt>{{domxref("Console.timeEnd()")}}</dt> - <dd>Arrête le <a href="/fr/docs/Web/API/console#Timers">chronomètre</a> spécifié et affiche le temps écoulé en millisecondes depuis son démarrage.</dd> - <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt> - <dd>Ajoute un marqueur dans la <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> du navigateur ou l'outil <a href="/fr/docs/Outils/Performance/Waterfall">Waterfall</a>.</dd> - <dt>{{domxref("Console.trace()")}}</dt> - <dd>Affiche une <a href="/fr/docs/Web/API/console#Traces_d%27appel">trace d'appels</a>.</dd> - <dt>{{domxref("Console.warn()")}}</dt> - <dd>Affiche un message d'avertissement. Vous pouvez utiliser les <a href="/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd> -</dl> - - -<h2 id="Usage">Exemples d'utilisation</h2> - -<h3 id="Outputting_text_to_the_console">Afficher du texte dans la console</h3> - -<p>La fonction la plus utilisée de la console est d'afficher du texte ou autres données. Il y a quatre sortes d'affichages que vous pouvez générer, en utilisant les méthodes {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, et {{domxref("console.error()")}}. Chacune de ces méthodes génére un affichage différent dans la console, et vous pouvez utiliser les fonctions de filtrage du navigateur pour voir uniquement les types de sortie qui vous intéressent.</p> - -<p>Il y a deux manières d'utiliser chacune de ces méthodes de sortie ; Vous pouvez passer une liste d'objets dont leur représentation sera concaténée dans une seule chaine et s'affichera dans la console, ou vous pouvez passer une chaîne de caractères contenant zéro et plus de caractères de substitution suivis d'une liste d'objets avec lesquels les remplacer.</p> - -<h4 id="Afficher_un_seul_objet">Afficher un seul objet</h4> - -<p>La manière la plus simple d'utiliser les méthodes de « log » est d'afficher un seul objet :</p> - -<pre class="brush: js">var someObject = { str: "Some text", id: 5 }; +{{APIRef("Console API")}} + +L'objet **`console`** donne accès à la console de débogage du navigateur (par exemple., la[ Console Web](/fr/docs/Outils/Console_Web) dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base. + +La `console` est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console. Par exemple : + +```js +console.log("Failed to open the specified link") +``` + +Cette page documente les {{anch("Methods", "méthodes")}} disponibles pour l'objet `console` et donne quelques {{anch("Usage", "exemples d'utilisation")}}. + +{{AvailableInWorkers}} + +## Méthodes + +- {{domxref("Console.assert()")}} + - : Affiche un message et une trace d'appels dans la console si l'assertion en argument est à `false`. +- {{domxref("Console.clear()")}} + - : Vide la console. +- {{domxref("Console.count()")}} + - : Affiche le nombre de fois que la ligne a été appelée avec un label donné. +- {{domxref("Console.debug()")}} + - : Un alias de `log().` + +> **Note :** À partir de Chromium 58, cette méthode n'apparaît que dans les consoles de navigateur Chromium lorsque le niveau "Verbose" est sélectionné. + +- {{domxref("Console.dir()")}} {{Non-standard_inline}} + - : Affiche une liste interactive des propriétés d'un objet JavaScript donné. Cette liste vous permet d'examiner le contenu des enfants de l'objet en ouvrant les détails (petits triangles). +- {{domxref("Console.dirxml()")}} {{Non-standard_inline}} + - : Affiche si possible une représentation d'éléments XML/HTML d'un objet spécifié. Sinon, c'est une vue de l'objet JavaScript. +- {{domxref("Console.error()")}} + - : Affiche un message d'erreur. Vous pouvez utiliser les [caractères de substitution](/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution) et des arguments supplémentaires avec cette méthode. +- {{domxref("Console._exception()")}} {{Non-standard_inline}} {{deprecated_inline}} + - : Un alias d'`error();` +- {{domxref("Console.group()")}} + - : Crée un nouveau [groupe](/fr/docs/Web/API/console#Using_groups_in_the_console) en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à `group()`. Pour revenir au niveau précédent, appeler `groupEnd()`. +- {{domxref("Console.groupCollapsed()")}} + - : Crée un nouveau [groupe](/fr/docs/Web/API/console#Using_groups_in_the_console) en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à `group()` , cela commence avec le groupe en ligne effondré, nécessitant l'utilisation d'un bouton de divulgation pour l'agrandir. Pour revenir au niveau précédent, appeler `groupEnd()`. +- {{domxref("Console.groupEnd()")}} + - : Quitte le [groupe](/fr/docs/Web/API/console#Using_groups_in_the_console) d'indentation courant. +- {{domxref("Console.info()")}} + - : Affiche un message d'information. Vous pouvez utiliser les [caractères de substitution](/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution) et des arguments supplémentaires avec cette méthode. +- {{domxref("Console.log()")}} + - : Permet d'afficher des messages dans la console. Vous pouvez utiliser les [caractères de substitution](/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution) et des arguments supplémentaires avec cette méthode. +- {{domxref("Console.profile()")}} {{Non-standard_inline}} + - : démarre le profilage du navigateur (par exemple, l'[outil performances de Firefox](/fr/docs/Outils/Performance)). Vous pouvez spécifier un nom en option pour ce profil. +- {{domxref("Console.profileEnd()")}} {{Non-standard_inline}} + - : Arrête le profilage. Vous pouvez voir le résultat de ce dernier dans l'outil « performance » du navigateur (par exemple, l'[outil performance Firefox](/fr/docs/Outils/Performance)). +- {{domxref("Console.table()")}} + - : Affiche des données tabulaires comme un tableau. +- {{domxref("Console.time()")}} + - : Démarre un [chronomètre](/fr/docs/Web/API/console#Timers) que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page. +- {{domxref("Console.timeEnd()")}} + - : Arrête le [chronomètre](/fr/docs/Web/API/console#Timers) spécifié et affiche le temps écoulé en millisecondes depuis son démarrage. +- {{domxref("Console.timeStamp()")}} {{Non-standard_inline}} + - : Ajoute un marqueur dans la [Timeline](https://developer.chrome.com/devtools/docs/timeline) du navigateur ou l'outil [Waterfall](/fr/docs/Outils/Performance/Waterfall). +- {{domxref("Console.trace()")}} + - : Affiche une [trace d'appels](/fr/docs/Web/API/console#Traces_d%27appel). +- {{domxref("Console.warn()")}} + - : Affiche un message d'avertissement. Vous pouvez utiliser les [caractères de substitution](/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution) et des arguments supplémentaires avec cette méthode. + +## Exemples d'utilisation + +### Afficher du texte dans la console + +La fonction la plus utilisée de la console est d'afficher du texte ou autres données. Il y a quatre sortes d'affichages que vous pouvez générer, en utilisant les méthodes {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, et {{domxref("console.error()")}}. Chacune de ces méthodes génére un affichage différent dans la console, et vous pouvez utiliser les fonctions de filtrage du navigateur pour voir uniquement les types de sortie qui vous intéressent. + +Il y a deux manières d'utiliser chacune de ces méthodes de sortie ; Vous pouvez passer une liste d'objets dont leur représentation sera concaténée dans une seule chaine et s'affichera dans la console, ou vous pouvez passer une chaîne de caractères contenant zéro et plus de caractères de substitution suivis d'une liste d'objets avec lesquels les remplacer. + +#### Afficher un seul objet + +La manière la plus simple d'utiliser les méthodes de « log » est d'afficher un seul objet : + +```js +var someObject = { str: "Some text", id: 5 }; console.log(someObject); -</pre> +``` -<p>L'affichage ressemblera à ceci :</p> +L'affichage ressemblera à ceci : -<pre>[09:27:13.475] ({str:"Some text", id:5})</pre> + [09:27:13.475] ({str:"Some text", id:5}) -<h4 id="Afficher_plusieurs_objets">Afficher plusieurs objets</h4> +#### Afficher plusieurs objets -<p>Vous pouvez aussi afficher plusieurs objets, en les séparant par une virgule, comme ceci :</p> +Vous pouvez aussi afficher plusieurs objets, en les séparant par une virgule, comme ceci : -<pre class="brush: js">var car = "Dodge Charger"; +```js +var car = "Dodge Charger"; var someObject = {str:"Some text", id:5}; -console.info("My first car was a", car, ". The object is: ", someObject);</pre> +console.info("My first car was a", car, ". The object is: ", someObject); +``` -<p>L'affichage ressemblera à ceci :</p> +L'affichage ressemblera à ceci : -<pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) -</pre> + [09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) -<h4 id="Utiliser_les_caractères_de_substitution">Utiliser les caractères de substitution</h4> +#### Utiliser les caractères de substitution -<p>Gecko 9.0 {{geckoRelease("9.0")}} a amené le support des caractères de substitution. Lorsque l'on passe en argument une chaîne à l'une des méthodes qui acceptent des chaînes de caractère, on peut utiliser ces caractères de substitution :</p> +Gecko 9.0 {{geckoRelease("9.0")}} a amené le support des caractères de substitution. Lorsque l'on passe en argument une chaîne à l'une des méthodes qui acceptent des chaînes de caractère, on peut utiliser ces caractères de substitution : <table class="standard-table"> - <tbody> - <tr> - <td class="header">caractère de substitution</td> - <td class="header">description</td> - </tr> - <tr> - <td>%o or %O</td> - <td>Affiche un lien hypertexte sur un objet JavaScript. Cliquer le lien ouvre l'inspecteur.</td> - </tr> - <tr> - <td>%d or %i</td> - <td>Affiche un entier. Le formatage des nombres est supporté, par exemple console.log ("Foo% .2d", 1.1) affichera le nombre sous forme de deux chiffres significatifs avec un 0 : Foo 01</td> - </tr> - <tr> - <td>%s</td> - <td>Affiche une chaîne de caractères.</td> - </tr> - <tr> - <td>%f</td> - <td>Affiche un nombre réél. Le formatage est supporté, par exemple, <code>console.log("Foo %.2f", 1.1)</code> affichera un nombre avec 2 décimales : <code>Foo 1.10</code> .</td> - </tr> - </tbody> + <tbody> + <tr> + <td class="header">caractère de substitution</td> + <td class="header">description</td> + </tr> + <tr> + <td>%o or %O</td> + <td> + Affiche un lien hypertexte sur un objet JavaScript. Cliquer le lien + ouvre l'inspecteur. + </td> + </tr> + <tr> + <td>%d or %i</td> + <td> + Affiche un entier. Le formatage des nombres est supporté, par exemple + console.log ("Foo% .2d", 1.1) affichera le nombre sous forme de deux + chiffres significatifs avec un 0 : Foo 01 + </td> + </tr> + <tr> + <td>%s</td> + <td>Affiche une chaîne de caractères.</td> + </tr> + <tr> + <td>%f</td> + <td> + Affiche un nombre réél. Le formatage est supporté, par exemple, + <code>console.log("Foo %.2f", 1.1)</code> affichera un nombre avec 2 + décimales : <code>Foo 1.10</code> . + </td> + </tr> + </tbody> </table> -<p>Chacun de ceux-ci ira chercher l'argument qui suit la chaîne à formater. Par exemple :</p> +Chacun de ceux-ci ira chercher l'argument qui suit la chaîne à formater. Par exemple : -<pre>for (var i=0; i<5; i++) { - console.log("Hello, %s. You've called me %d times.", "Bob", i+1); -} -</pre> + for (var i=0; i<5; i++) { + console.log("Hello, %s. You've called me %d times.", "Bob", i+1); + } -<p>L'affichage ressemblera à ceci :</p> +L'affichage ressemblera à ceci : -<pre>[13:14:13.481] Hello, Bob. You've called me 1 times. -[13:14:13.483] Hello, Bob. You've called me 2 times. -[13:14:13.485] Hello, Bob. You've called me 3 times. -[13:14:13.487] Hello, Bob. You've called me 4 times. -[13:14:13.488] Hello, Bob. You've called me 5 times. -</pre> + [13:14:13.481] Hello, Bob. You've called me 1 times. + [13:14:13.483] Hello, Bob. You've called me 2 times. + [13:14:13.485] Hello, Bob. You've called me 3 times. + [13:14:13.487] Hello, Bob. You've called me 4 times. + [13:14:13.488] Hello, Bob. You've called me 5 times. -<h4 id="Donner_un_style_à_l'affichage_de_la_console">Donner un style à l'affichage de la console</h4> +#### Donner un style à l'affichage de la console -<p>Vous pouvez utiliser l'instruction <code>"%c"</code> pour appliquer du style CSS à l'affichage de la console :</p> +Vous pouvez utiliser l'instruction `"%c"` pour appliquer du style CSS à l'affichage de la console : -<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre> +```js +console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px"); +``` -<p><img alt="" src="css-styling.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Un certain nombre de propriétés CSS sont supportées par ce style; vous devriez expérimenter et voir lesquels s'avèrent utiles.</p> -</div> +> **Note :** Un certain nombre de propriétés CSS sont supportées par ce style; vous devriez expérimenter et voir lesquels s'avèrent utiles. -<p>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</p> +{{h3_gecko_minversion("Using groups in the console", "9.0")}} -<p>Vous pouvez utiliser des groupes imbriqués pour vous aider à vous repérer dans l'affichage. Pour créer un nouveau bloc, appelez <code>console.group()</code>. La méthode <code>console.groupCollapsed()</code> est similaire, mais elle crée un bloc qui sera réduit.</p> +Vous pouvez utiliser des groupes imbriqués pour vous aider à vous repérer dans l'affichage. Pour créer un nouveau bloc, appelez `console.group()`. La méthode `console.groupCollapsed()` est similaire, mais elle crée un bloc qui sera réduit. -<div class="note"> - <p><strong>Note :</strong> "Collapsed groups" ne sont pas supportés pour l'instant dans Gecko; La méthode <code>groupCollapsed()</code> est la même que <code>group()</code> en ce moment.</p> -</div> +> **Note :** "Collapsed groups" ne sont pas supportés pour l'instant dans Gecko; La méthode `groupCollapsed()` est la même que `group()` en ce moment. -<p>Pour quitter le groupe dans lequel on est, appeler <code>console.groupEnd()</code>. Par exemple, examinez ce code :</p> +Pour quitter le groupe dans lequel on est, appeler `console.groupEnd()`. Par exemple, examinez ce code : -<pre class="brush: js">console.log("This is the outer level"); +```js +console.log("This is the outer level"); console.group(); console.log("Level 2"); console.group(); @@ -188,90 +191,71 @@ console.groupEnd(); console.log("Back to level 2"); console.groupEnd(); console.debug("Back to the outer level"); -</pre> +``` -<p>L'affichage ressemblera à ceci :</p> +L'affichage ressemblera à ceci : -<p><img alt="Démonstration de groupes imbriqués dans la console Firefox" src="console_groups_demo.png"></p> + -<div>{{h3_gecko_minversion("Timers", "10.0")}}</div> +{{h3_gecko_minversion("Timers", "10.0")}} -<p>Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet <code>console</code>. pour démarrer un chronomètre, appelez la méthode <code>console.time</code><code>()</code> en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode <code>console.timeEnd()</code>, en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres.</p> +Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet `console`. pour démarrer un chronomètre, appelez la méthode ` console.time``() ` en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode `console.timeEnd()`, en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres. -<p>Par exemple, voici ce code :</p> +Par exemple, voici ce code : -<pre class="brush: js">console.time("answer time"); +```js +console.time("answer time"); alert("Click to continue"); console.timeEnd("answer time"); -</pre> +``` -<p>affichera le temps pour l'utilisateur dont il a eu besoin pour faire disparaitre la fenêtre d'alerte :</p> +affichera le temps pour l'utilisateur dont il a eu besoin pour faire disparaitre la fenêtre d'alerte : -<p><img src="console-timelog.png"></p> + -<p>Notez que le nom du chronomètre est affiché deux fois, à son départ et quand il se termine.</p> +Notez que le nom du chronomètre est affiché deux fois, à son départ et quand il se termine. -<div class="note"> - <p><strong>Note:</strong> Il est important de noter que si vous vous servez de ceci pour enregistrer les durées du traffic réseau, le chronomètre renverra le temps total d'échanges, alors que les durées affichées dans l'onglet network représente seulement la durée à la réception du header. Si vous avez activer l'enregistrement de réponse du body, le temps listé pour la réponse du header et du body devrait correspondre à ce qu'affiche la sortie de la console.</p> -</div> +> **Note :** Il est important de noter que si vous vous servez de ceci pour enregistrer les durées du traffic réseau, le chronomètre renverra le temps total d'échanges, alors que les durées affichées dans l'onglet network représente seulement la durée à la réception du header. Si vous avez activer l'enregistrement de réponse du body, le temps listé pour la réponse du header et du body devrait correspondre à ce qu'affiche la sortie de la console. -<h3 id="Traces_d'appel">Traces d'appel</h3> +### Traces d'appel -<p>L'objet console supporte aussi l'affichage d'une trace d'appels ; cela montre le chemin pris pour atteindre l'endroit auquel vous avez fait appel à la fonction {{domxref("console.trace()")}}. Ce qui donne avec ce code :</p> +L'objet console supporte aussi l'affichage d'une trace d'appels ; cela montre le chemin pris pour atteindre l'endroit auquel vous avez fait appel à la fonction {{domxref("console.trace()")}}. Ce qui donne avec ce code : -<pre>foo(); + foo(); -function foo() { - function bar() { - console.trace(); - } - bar(); -} -</pre> + function foo() { + function bar() { + console.trace(); + } + bar(); + } -<p>L'affichage dans la console ressemblera à ceci :</p> +L'affichage dans la console ressemblera à ceci : -<p><img alt="" src="api-trace2.png"></p> + -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Console API')}}</td> - <td>{{Spec2('Console API')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('Console API')}} | {{Spec2('Console API')}} | Définition initiale. | -<h2 id="Notes">Notes</h2> +## Notes -<ul> - <li>Au moins dans Firefox, si une page définit un objet console, cet objet remplace celui créé dans Firefox.</li> - <li>Antérieur à {{Gecko ("12.0")}}, les méthodes de l'objet console ne fonctionnent que lorsque la console Web est ouverte. À partir de {{Gecko ("12.0")}}, la sortie est mise en cache jusqu'à ce que la console Web soit ouverte, puis affichée à ce moment-là.</li> - <li>Il est à noter que l'objet de console intégré de Firefox est compatible avec celui fourni par <a href="http://getfirebug.com/">Firebug</a>.</li> -</ul> +- Au moins dans Firefox, si une page définit un objet console, cet objet remplace celui créé dans Firefox. +- Antérieur à {{Gecko ("12.0")}}, les méthodes de l'objet console ne fonctionnent que lorsque la console Web est ouverte. À partir de {{Gecko ("12.0")}}, la sortie est mise en cache jusqu'à ce que la console Web soit ouverte, puis affichée à ce moment-là. +- Il est à noter que l'objet de console intégré de Firefox est compatible avec celui fourni par [Firebug](http://getfirebug.com/). -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Outils">Outils de développement</a></li> - <li><a href="/fr/docs/Outils/Console_Web">Console web</a> - comment la console Web de Firefox gère les appels d'API de console</li> - <li><a href="/fr/docs/Outils/D%C3%A9bogage_distant">Débogage distant</a> - comment afficher la sortie de la console lorsque la cible de débogage est un périphérique mobile</li> - <li><a href="/fr/docs/Archive/B2G_OS/Debugging/Journalisation_console">Journalisation console sur l'appareil</a> - comment se connecter sur les appareils Firefox OS</li> -</ul> +- [Outils de développement](/fr/docs/Outils) +- [Console web](/fr/docs/Outils/Console_Web) - comment la console Web de Firefox gère les appels d'API de console +- [Débogage distant](/fr/docs/Outils/D%C3%A9bogage_distant) - comment afficher la sortie de la console lorsque la cible de débogage est un périphérique mobile +- [Journalisation console sur l'appareil](/fr/docs/Archive/B2G_OS/Debugging/Journalisation_console) - comment se connecter sur les appareils Firefox OS -<h3 id="Autres_implémentations">Autres implémentations</h3> +### Autres implémentations -<ul> - <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li> - <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li> - <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li> - <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li> -</ul> +- [Google Chrome DevTools](https://developers.google.com/chrome-developer-tools/docs/console-api) +- [Firebug](http://getfirebug.com/wiki/index.php/Console_API) +- [Internet Explorer](<http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx>) +- [Safari](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html) diff --git a/files/fr/web/api/console/info/index.md b/files/fr/web/api/console/info/index.md index a9263f8f27..576900b263 100644 --- a/files/fr/web/api/console/info/index.md +++ b/files/fr/web/api/console/info/index.md @@ -9,57 +9,39 @@ tags: - web console translation_of: Web/API/Console/info --- -<p>{{ APIRef("Console API") }}{{Non-standard_header}}</p> +{{ APIRef("Console API") }}{{Non-standard_header}} -<p>Affiche un message informatif dans la console du navigateur. Dans Firefox et Chrome, une petit icône de <em>i </em>s'affiche devant le message.</p> +Affiche un message informatif dans la console du navigateur. Dans Firefox et Chrome, une petit icône de _i_ s'affiche devant le message. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.info(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); -console.info(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); -</pre> + console.info(obj1 [, obj2, ..., objN]); + console.info(msg [, subst1, ..., substN]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>obj1</code> ... <code>objN</code></dt> - <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd> - <dt><code>msg</code></dt> - <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd> - <dt><code>subst1</code> ... <code>substN</code></dt> - <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd> -</dl> +- `obj1` ... `objN` + - : Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste. +- `msg` + - : Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères. +- `subst1` ... `substN` + - : Une liste d'objets JavaScript qui remplace les chaînes de caractéres de `msg`. Cela vous donne plus de contrôle sur le format de sortie. -<p>Voir <a href="/fr/docs/Web/API/Console#Outputting_text_to_the_console">Afficher du texte sur la console</a> dans la documentation de {{ domxref("console") }} pour plus de détails.</p> +Voir [Afficher du texte sur la console](/fr/docs/Web/API/Console#Outputting_text_to_the_console) dans la documentation de {{ domxref("console") }} pour plus de détails. -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#info", "console.info()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName("Console API", "#info", "console.info()")}} | {{Spec2("Console API")}} | Définition initiale. | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Console.info")}}</p> +{{Compat("api.Console.info")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> - <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> -</ul> +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) +- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530) diff --git a/files/fr/web/api/console/log/index.md b/files/fr/web/api/console/log/index.md index c1f9577c6a..904e2809b6 100644 --- a/files/fr/web/api/console/log/index.md +++ b/files/fr/web/api/console/log/index.md @@ -4,61 +4,55 @@ slug: Web/API/Console/log translation_of: Web/API/Console/log browser-compat: api.Console.log --- -<div>{{APIRef("Console API")}}</div> +{{APIRef("Console API")}} -<p>La méthode <strong><code>console.log()</code></strong> affiche un message dans la console Web. Le message peut être une simple chaine de caractères (avec des valeurs optionnelles de substitution) ou peut être composé d'un ou plusieurs objets JavaScript.</p> +La méthode **`console.log()`** affiche un message dans la console Web. Le message peut être une simple chaine de caractères (avec des valeurs optionnelles de substitution) ou peut être composé d'un ou plusieurs objets JavaScript. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"> -console.log(<var>obj1</var> [, <var>obj2</var>, ..., <var>objN</var>]); -console.log(<var>msg</var> [, <var>subst1</var>, ..., <var>substN</var>]); -</pre> +```js +console.log(obj1 [, obj2, ..., objN]); +console.log(msg [, subst1, ..., substN]); +``` -<h3 id="parameters">Paramètres</h3> +### Paramètres -<dl> - <dt><code>obj1</code> ... <code>objN</code></dt> - <dd>Une liste d'objets Javascript à afficher. Les représentations textuelles de chacun de ces objets seront affichées dans la console du navigateur selon l'ordre indiqué. Attention, pour les versions récentes de Chrome et Firefox, ce qui apparaît dans la console est une <strong>référence à l'objet</strong> et pas nécessairement la valeur de l'objet au moment de l'appel à <code>console.log()</code> mais sa valeur au moment où on ouvre la console.</dd> - <dt><code>msg</code></dt> - <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs chaînes de substitution.</dd> - <dt><code>subst1</code> ... <code>substN</code></dt> - <dd>Des objets JavaScript dont les valeurs textuelles remplaceront les emplacements à substituer indiqués dans <code>msg</code>. Cela offre plus de contrôle sur le format d'affichage.</dd> -</dl> +- `obj1` ... `objN` + - : Une liste d'objets Javascript à afficher. Les représentations textuelles de chacun de ces objets seront affichées dans la console du navigateur selon l'ordre indiqué. Attention, pour les versions récentes de Chrome et Firefox, ce qui apparaît dans la console est une **référence à l'objet** et pas nécessairement la valeur de l'objet au moment de l'appel à `console.log()` mais sa valeur au moment où on ouvre la console. +- `msg` + - : Une chaîne de caractères JavaScript contenant zéro ou plusieurs chaînes de substitution. +- `subst1` ... `substN` + - : Des objets JavaScript dont les valeurs textuelles remplaceront les emplacements à substituer indiqués dans `msg`. Cela offre plus de contrôle sur le format d'affichage. -<p>Voir <a href="/fr/docs/Web/API/Console#outputting_text_to_the_console">Afficher du texte sur la console</a> dans la documentation de <a href="/fr/docs/Web/API/Console"><code>console</code></a> pour plus de détails.</p> +Voir [Afficher du texte sur la console](/fr/docs/Web/API/Console#outputting_text_to_the_console) dans la documentation de [`console`](/fr/docs/Web/API/Console) pour plus de détails. -<h2 id="difference_between_log_and_dir">Différence entre console.log() et console.dir()</h2> +## Différence entre console.log() et console.dir() -<p>Vous pourriez vous demander quelles sont les différences entre <a href="/fr/docs/Web/API/Console/dir"><code>console.dir()</code></a> et <code>console.log()</code>.</p> +Vous pourriez vous demander quelles sont les différences entre [`console.dir()`](/fr/docs/Web/API/Console/dir) et `console.log()`. -<p>Celles-ci concernent principalement la gestion particulière des objets du DOM :</p> -<ul> - <li><code>console.log()</code> affiche les éléments dans un arbre de type HTML,</li> - <li><code>console.dir()</code> affiche les propriétés de l'objet JavaScript.</li> -</ul> +Celles-ci concernent principalement la gestion particulière des objets du DOM : -<p><img alt="" src="dozdcyr.png"></p> +- `console.log()` affiche les éléments dans un arbre de type HTML, +- `console.dir()` affiche les propriétés de l'objet JavaScript. + -<h2 id="logging_objects">Affichage d'objets dans la console</h2> +## Affichage d'objets dans la console -<p>Évitez d'utiliser <code>console.log(obj)</code> mais préférez <code>console.log(JSON.parse(JSON.stringify(obj)))</code> si vous souhaîtez être sûr·e d'observer la valeur de l'objet au moment de l'exécution de <code>console.log()</code>. Autrement, de nombreux navigateurs produisent un affichage interactif de l'objet qui se maintient à jour quand les propriétés de l'objet changent. Cela ne pourrait pas être ce que vous voulez et peut porter à confusion.</p> +Évitez d'utiliser `console.log(obj)` mais préférez `console.log(JSON.parse(JSON.stringify(obj)))` si vous souhaîtez être sûr·e d'observer la valeur de l'objet au moment de l'exécution de `console.log()`. Autrement, de nombreux navigateurs produisent un affichage interactif de l'objet qui se maintient à jour quand les propriétés de l'objet changent. Cela ne pourrait pas être ce que vous voulez et peut porter à confusion. -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/console-log">Docs Microsoft : Edge - Afficher des messages dans la console</a></li> - <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">La référence de l'API Console pour Chrome</a></li> - <li><a href="https://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS : API Console</a></li> -</ul> +- [Docs Microsoft : Edge - Afficher des messages dans la console](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/console-log) +- [La référence de l'API Console pour Chrome](https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject) +- [NodeJS : API Console](https://nodejs.org/docs/latest/api/console.html#console_console_log_data) diff --git a/files/fr/web/api/console/profile/index.md b/files/fr/web/api/console/profile/index.md index d26727f201..f8a54b5e02 100644 --- a/files/fr/web/api/console/profile/index.md +++ b/files/fr/web/api/console/profile/index.md @@ -9,34 +9,29 @@ tags: - débogage translation_of: Web/API/Console/profile --- -<p>{{APIRef("Console API")}}{{Non-standard_header}}</p> +{{APIRef("Console API")}}{{Non-standard_header}} -<p>Commence l'enregistrement d'un profil de performance (par exemple, l'outil <a href="/fr/docs/Outils/Performance">performance de Firefox</a>).</p> +Commence l'enregistrement d'un profil de performance (par exemple, l'outil [performance de Firefox](/fr/docs/Outils/Performance)). -<p>Vous pouvez éventuellement fournir un argument pour nommer le profil, ce qui vous permet d'arrêter uniquement ce profil si plusieurs profils sont enregistrés. Voir {{domxref("Console.profileEnd()")}} pour voir comment cet argument est interprété.</p> +Vous pouvez éventuellement fournir un argument pour nommer le profil, ce qui vous permet d'arrêter uniquement ce profil si plusieurs profils sont enregistrés. Voir {{domxref("Console.profileEnd()")}} pour voir comment cet argument est interprété. -<p>Pour arrêter l'enregistrement, appeler {{domxref("Console.profileEnd()")}}.</p> +Pour arrêter l'enregistrement, appeler {{domxref("Console.profileEnd()")}}. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.profile(<em>profileName</em>); -</pre> + console.profile(profileName); -<h2 id="Paramètres">Paramètres</h2> +## Paramètres -<dl> - <dt><code>profileName</code></dt> - <dd>Le nom à donner au profil. Facultatif.</dd> -</dl> +- `profileName` + - : Le nom à donner au profil. Facultatif. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Console.profile")}}</p> +{{Compat("api.Console.profile")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Console.profileEnd()")}}</li> -</ul> +- {{domxref("Console.profileEnd()")}} diff --git a/files/fr/web/api/console/profileend/index.md b/files/fr/web/api/console/profileend/index.md index 9b267eb029..03466b8172 100644 --- a/files/fr/web/api/console/profileend/index.md +++ b/files/fr/web/api/console/profileend/index.md @@ -8,42 +8,33 @@ tags: - Profils translation_of: Web/API/Console/profileEnd --- -<p>{{APIRef("Console API")}}{{Non-standard_header}}</p> +{{APIRef("Console API")}}{{Non-standard_header}} -<div class="warning"> -<p><strong>Attention :</strong> L'appel de cet API immédiatement après <code>console.profile()</code> peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un <code>setTimeout</code> avec un délai d'au-moins 5 ms. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1173588">bug #1173588</a>.</p> -</div> +> **Attention :** L'appel de cet API immédiatement après `console.profile()` peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un `setTimeout` avec un délai d'au-moins 5 ms. Voir [bug #1173588](https://bugzilla.mozilla.org/show_bug.cgi?id=1173588). -<p>La méthode <code>profileEnd</code> arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}.</p> +La méthode `profileEnd` arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}. -<p>Vous pouvez éventuellement insérer un argument pour nommer le profil. Cela vous permet d'arrêter uniquement ce profil si vous avez enregistré plusieurs profils.</p> +Vous pouvez éventuellement insérer un argument pour nommer le profil. Cela vous permet d'arrêter uniquement ce profil si vous avez enregistré plusieurs profils. -<ul> - <li>Si <code>Console.profileEnd()</code> reçoit un nom de profil qui correspond au nom d'un profil en cours d'enregistrement, ce profil est arrêté.</li> - <li>Si <code>Console.profileEnd()</code> reçoit un nom de profil qui ne correspond pas au nom d'un profil en cours d'enregistrement, aucune modification n'est apportée.</li> - <li>Si <code>Console.profileEnd()</code> ne reçoit pas un nom de profil, le dernier profil démarré est arrêté.</li> -</ul> +- Si `Console.profileEnd()` reçoit un nom de profil qui correspond au nom d'un profil en cours d'enregistrement, ce profil est arrêté. +- Si `Console.profileEnd()` reçoit un nom de profil qui ne correspond pas au nom d'un profil en cours d'enregistrement, aucune modification n'est apportée. +- Si `Console.profileEnd()` ne reçoit pas un nom de profil, le dernier profil démarré est arrêté. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.profileEnd(<em>profileName</em>); -</pre> + console.profileEnd(profileName); -<h2 id="Paramètres">Paramètres</h2> +## Paramètres -<dl> - <dt><code>profileName</code></dt> - <dd>Le nom à donner au profil. Ce paramètre est facultatif.</dd> -</dl> +- `profileName` + - : Le nom à donner au profil. Ce paramètre est facultatif. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Console.profileEnd")}}</p> +{{Compat("api.Console.profileEnd")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Console.profile()")}}</li> -</ul> +- {{domxref("Console.profile()")}} diff --git a/files/fr/web/api/console/table/index.md b/files/fr/web/api/console/table/index.md index 1f5beabcd2..d10348512f 100644 --- a/files/fr/web/api/console/table/index.md +++ b/files/fr/web/api/console/table/index.md @@ -10,29 +10,32 @@ tags: - débogage translation_of: Web/API/Console/table --- -<div>{{APIRef("Console API")}}</div> +{{APIRef("Console API")}} -<p>Affiche des données tabulaires sous la forme d'un tableau.</p> +Affiche des données tabulaires sous la forme d'un tableau. -<p>Cette fonction prend un argument obligatoire <code>data</code>, qui doit être un tableau (Array) ou un objet, et un argument facultatif <code>columns</code>.</p> +Cette fonction prend un argument obligatoire `data`, qui doit être un tableau (Array) ou un objet, et un argument facultatif `columns`. -<p>Il affiche <code>data</code> sous la forme d'un tableau. Chaque élément dans le tableau fourni (Array) sera affiché comme une ligne dans le tableau. (ou les propriétés énumérables s'il s'agit d'un objet)</p> +Il affiche `data` sous la forme d'un tableau. Chaque élément dans le tableau fourni (Array) sera affiché comme une ligne dans le tableau. (ou les propriétés énumérables s'il s'agit d'un objet) -<p>La première colonne dans le tableau sera intitulé <code>(index)</code>. Si <code>data</code> est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si <code>data</code> est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) : <code>console.table</code> est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté)</p> +La première colonne dans le tableau sera intitulé `(index)`. Si `data` est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si `data` est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) : `console.table` est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté) -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h3 id="Collections_de_données_primitives">Collections de données primitives</h3> +### Collections de données primitives -<p><code>data</code> peut contenir un tableau ou un objet.</p> +`data` peut contenir un tableau ou un objet. -<pre class="brush: js">// un tableau de chaînes de caractères +```js +// un tableau de chaînes de caractères -console.table(["apples", "oranges", "bananas"]);</pre> +console.table(["apples", "oranges", "bananas"]); +``` -<p><img alt="" src="console-table-array.png"></p> + -<pre class="brush: js">// un objet dont les propriétés sont des chaînes de caractères +```js +// un objet dont les propriétés sont des chaînes de caractères function Person(firstName, lastName) { this.firstName = firstName; @@ -41,22 +44,26 @@ function Person(firstName, lastName) { var me = new Person("John", "Smith"); -console.table(me);</pre> +console.table(me); +``` -<p><img alt="" src="console-table-simple-object.png"></p> + -<h3 id="Collections_de_données_composées">Collections de données composées</h3> +### Collections de données composées -<p>Si les éléments d'un tableau, ou les propriétés d'un objet, sont eux-mêmes des tableaux ou des objets, alors ces éléments ou propriétés sont énumérés dans chaque ligne, un élément par colonne :</p> +Si les éléments d'un tableau, ou les propriétés d'un objet, sont eux-mêmes des tableaux ou des objets, alors ces éléments ou propriétés sont énumérés dans chaque ligne, un élément par colonne : -<pre class="brush: js">// un tableau de tableaux +```js +// un tableau de tableaux var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]] -console.table(people);</pre> +console.table(people); +``` -<p><img alt="Un tableau qui affiche un tableau de tableaux" src="console-table-array-of-array.png"></p> + -<pre class="brush: js">// un tableau d'objets +```js +// un tableau d'objets function Person(firstName, lastName) { this.firstName = firstName; @@ -67,13 +74,15 @@ var john = new Person("John", "Smith"); var jane = new Person("Jane", "Doe"); var emily = new Person("Emily", "Jones"); -console.table([john, jane, emily]);</pre> +console.table([john, jane, emily]); +``` -<p>Notez que si le tableau contient des objets, alors les colonnes seront nommées avec les noms des propriétés.</p> +Notez que si le tableau contient des objets, alors les colonnes seront nommées avec les noms des propriétés. -<p><img alt="Un tableau qui affiche un tableau d'objets" src="console-table-array-of-objects.png"></p> + -<pre class="brush: js">// un objet contenant des propriétés qui sont des objets +```js +// un objet contenant des propriétés qui sont des objets var family = {}; @@ -81,15 +90,17 @@ family.mother = new Person("Jane", "Smith"); family.father = new Person("John", "Smith"); family.daughter = new Person("Emily", "Smith"); -console.table(family);</pre> +console.table(family); +``` -<p><img alt="Un tableau affichant des objets composés d'objets" src="console-table-object-of-objects.png"></p> + -<h3 id="Restreindre_les_colonnes_affichées">Restreindre les colonnes affichées</h3> +### Restreindre les colonnes affichées -<p>Par défaut, <code>console.table()</code> liste tous les éléments pour chaque ligne. Vous pouvez utiliser le paramètre facultatif <code>columns</code> pour sélectionner un sous-ensemble de colonnes à afficher :</p> +Par défaut, `console.table()` liste tous les éléments pour chaque ligne. Vous pouvez utiliser le paramètre facultatif `columns` pour sélectionner un sous-ensemble de colonnes à afficher : -<pre class="brush: js">// un tableau d'objets, affichant seulement firstName +```js +// un tableau d'objets, affichant seulement firstName function Person(firstName, lastName) { this.firstName = firstName; @@ -100,47 +111,32 @@ var john = new Person("John", "Smith"); var jane = new Person("Jane", "Doe"); var emily = new Person("Emily", "Jones"); -console.table([john, jane, emily], ["firstName"]);</pre> +console.table([john, jane, emily], ["firstName"]); +``` -<p><img alt="Un tableau affichant un tableau d'objets dont la sortie est filtrée" src="console-table-array-of-objects-firstname-only.png"></p> + -<h3 id="Ordonner_les_colonnes">Ordonner les colonnes</h3> +### Ordonner les colonnes -<p>Vous pouvez ordonner les colonnes en cliquant sur l'intitulé de la colonne.</p> +Vous pouvez ordonner les colonnes en cliquant sur l'intitulé de la colonne. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.table(data [, <em>columns]</em>); -</pre> + console.table(data [, columns]); -<h3 id="Parameters">Paramètres</h3> +### Paramètres -<dl> - <dt><code>data</code></dt> - <dd>La donnée à afficher. Doit être un tableau ou un objet.</dd> - <dt><code>columns</code></dt> - <dd>Un tableau contenant les noms des colonnes à inclure dans la sortie.</dd> -</dl> +- `data` + - : La donnée à afficher. Doit être un tableau ou un objet. +- `columns` + - : Un tableau contenant les noms des colonnes à inclure dans la sortie. -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#table", "console.table()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("Console API", "#table", "console.table()")}} | {{Spec2("Console API")}} | Définition initiale | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.Console.table")}}</div> +{{Compat("api.Console.table")}} diff --git a/files/fr/web/api/console/time/index.md b/files/fr/web/api/console/time/index.md index 271b2e5497..af170f9326 100644 --- a/files/fr/web/api/console/time/index.md +++ b/files/fr/web/api/console/time/index.md @@ -11,50 +11,32 @@ tags: - débogage translation_of: Web/API/Console/time --- -<p>{{APIRef("Console API")}}</p> +{{APIRef("Console API")}} -<p>Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes dans la console.</p> +Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes dans la console. -<p>Voir <a href="/fr/docs/Web/API/console#Timers">Timers</a> dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples.</p> +Voir [Timers](/fr/docs/Web/API/console#Timers) dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.time(<em>label</em>); -</pre> + console.time(label); -<h2 id="Paramètres">Paramètres</h2> +## Paramètres -<dl> - <dt><code>label</code></dt> - <dd>Nom qui identifiera le nouveau "timer". Il faut utiliser le même nom pour {{ domxref("console.timeEnd()") }} pour arrêter le "timer" et afficher le temps dans la console.</dd> -</dl> +- `label` + - : Nom qui identifiera le nouveau "timer". Il faut utiliser le même nom pour {{ domxref("console.timeEnd()") }} pour arrêter le "timer" et afficher le temps dans la console. -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#time", "console.time()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Console API", "#time", "console.time()")}} | {{Spec2("Console API")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Console.time")}}</p> +{{Compat("api.Console.time")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{ domxref("console.timeEnd()") }}</li> - <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> -</ul> +- {{ domxref("console.timeEnd()") }} +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) diff --git a/files/fr/web/api/console/timeend/index.md b/files/fr/web/api/console/timeend/index.md index dc45ee8468..8e92a7eaf5 100644 --- a/files/fr/web/api/console/timeend/index.md +++ b/files/fr/web/api/console/timeend/index.md @@ -10,49 +10,31 @@ tags: - Méthode translation_of: Web/API/Console/timeEnd --- -<div>{{APIRef("Console API")}}</div> +{{APIRef("Console API")}} -<p>Arrête un chronomètre (<em>timer</em>) précédemment démarré par {{domxref("console.time()")}}.</p> +Arrête un chronomètre (_timer_) précédemment démarré par {{domxref("console.time()")}}. -<p>Voir <a href="/fr/docs/Web/API/console#Timers">Timers</a> dans la documentation de {{domxref("console")}} pour des détails et des exemples.</p> +Voir [Timers](/fr/docs/Web/API/console#Timers) dans la documentation de {{domxref("console")}} pour des détails et des exemples. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.timeEnd(<em>label</em>); -</pre> + console.timeEnd(label); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>label</code></dt> - <dd>Le nom du <em>timer</em> à stopper. Une fois arrêté, le temps écoulé est automatiquement affiché dans la <a href="/fr/docs/Outils/Console_Web">Console Web</a>.</dd> -</dl> +- `label` + - : Le nom du _timer_ à stopper. Une fois arrêté, le temps écoulé est automatiquement affiché dans la [Console Web](/fr/docs/Outils/Console_Web). -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#timeend", "console.timeEnd()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("Console API", "#timeend", "console.timeEnd()")}} | {{Spec2("Console API")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.Console.timeEnd")}}</div> +{{Compat("api.Console.timeEnd")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a>.</li> -</ul> +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/). diff --git a/files/fr/web/api/console/timelog/index.md b/files/fr/web/api/console/timelog/index.md index cd1f33d3be..b8fb84bc0c 100644 --- a/files/fr/web/api/console/timelog/index.md +++ b/files/fr/web/api/console/timelog/index.md @@ -11,89 +11,67 @@ tags: - débogage translation_of: Web/API/Console/timeLog --- -<div>{{APIRef("Console API")}}</div> +{{APIRef("Console API")}} -<p>Affiche dans la console la valeur actuelle d'un timer précédemment appelé par {{domxref("console.time()")}}</p> +Affiche dans la console la valeur actuelle d'un timer précédemment appelé par {{domxref("console.time()")}} -<p>Voir <a href="/en-US/docs/Web/API/console#Timers">Timers</a> dans la documentation pour des exemples et plus de détails</p> +Voir [Timers](/en-US/docs/Web/API/console#Timers) dans la documentation pour des exemples et plus de détails -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.timeLog(<em>label</em>); -</pre> + console.timeLog(label); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>label</code></dt> - <dd>Le nom du timer à afficher sur la console</dd> -</dl> +- `label` + - : Le nom du timer à afficher sur la console -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Si aucun label n'est inclus</p> +Si aucun label n'est inclus -<pre>default: 1042ms</pre> + default: 1042ms -<p>Si un <code>label</code> est inclus:</p> +Si un `label` est inclus: -<pre>timer name: 1242ms</pre> + timer name: 1242ms -<h3 id="Exceptions">Exceptions</h3> +### Exceptions -<p>Si aucun timer n'est en cours d'éxecution, <code>timeLog()</code> retourne l'avertissement suivant :</p> +Si aucun timer n'est en cours d'éxecution, `timeLog()` retourne l'avertissement suivant : -<pre>Timer “default” doesn’t exist.</pre> + Timer “default” doesn’t exist. -<p>Si le paramètre label est spécifé mais aucun timer n'y correspond :</p> +Si le paramètre label est spécifé mais aucun timer n'y correspond : -<pre> Timer “timer name” doesn’t exist. </pre> + Timer “timer name” doesn’t exist. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre>console.time("answer time"); -alert("Click to continue"); -console.timeLog("answer time"); -alert("Do a bunch of other stuff..."); -console.timeEnd("answer time");</pre> + console.time("answer time"); + alert("Click to continue"); + console.timeLog("answer time"); + alert("Do a bunch of other stuff..."); + console.timeEnd("answer time"); -<p>Le résultat de l'exemple ci-dessus montre le temps qu'a mis l'utilisateur à fermer la première pop-up d'alerte, puis le temps que l'utilisateur a pris pour fermer la seconde :</p> +Le résultat de l'exemple ci-dessus montre le temps qu'a mis l'utilisateur à fermer la première pop-up d'alerte, puis le temps que l'utilisateur a pris pour fermer la seconde : -<p><img src="timer_output.png"></p> + -<p>Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par <code>timeLog()</code> et lorsque le timer est arrêté</p> +Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par `timeLog()` et lorsque le timer est arrêté -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#timelog", "console.timeLog()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("Console API", "#timelog", "console.timeLog()")}} | {{Spec2("Console API")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div> +{{Compat("api.Console.timeLog")}} +## Voir aussi -<p>{{Compat("api.Console.timeLog")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="http://www.opera.com/dragonfly/documentation/console/">Documentation d'Opera Dragonfly: Console</a></li> -</ul> +- [Documentation d'Opera Dragonfly: Console](http://www.opera.com/dragonfly/documentation/console/) diff --git a/files/fr/web/api/console/timestamp/index.md b/files/fr/web/api/console/timestamp/index.md index ebf2f9bd83..fe8862399c 100644 --- a/files/fr/web/api/console/timestamp/index.md +++ b/files/fr/web/api/console/timestamp/index.md @@ -9,34 +9,29 @@ tags: - console translation_of: Web/API/Console/timeStamp --- -<div>{{APIRef("Console API")}}{{Non-standard_header}}</div> +{{APIRef("Console API")}}{{Non-standard_header}} -<p>Ajoute un seul marqueur à l'outil <a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference">Performance</a> ou <a href="/fr/docs/Outils/Performance/Waterfall">Waterfall</a> du navigateur. Cela vous permet de corréler un point de votre code avec les autres événements enregistrés dans la chronologie, tels que les événements de mise en page et de peinture.</p> +Ajoute un seul marqueur à l'outil [Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference) ou [Waterfall](/fr/docs/Outils/Performance/Waterfall) du navigateur. Cela vous permet de corréler un point de votre code avec les autres événements enregistrés dans la chronologie, tels que les événements de mise en page et de peinture. -<p>Vous pouvez éventuellement fournir un argument pour étiqueter l'horodatage, et cette étiquette sera ensuite affichée à côté du marqueur.</p> +Vous pouvez éventuellement fournir un argument pour étiqueter l'horodatage, et cette étiquette sera ensuite affichée à côté du marqueur. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.timeStamp(label); -</pre> + console.timeStamp(label); -<h2 id="Paramètres">Paramètres</h2> +## Paramètres -<dl> - <dt><code>label</code></dt> - <dd>Étiquette pour l'horodatage. Facultatif.</dd> -</dl> +- `label` + - : Étiquette pour l'horodatage. Facultatif. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Console.timestamp")}}</p> +{{Compat("api.Console.timestamp")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Console.time()")}}</li> - <li>{{domxref("Console.timeEnd()")}}</li> - <li><a href="/fr/docs/Outils/Performance/Waterfall#Marqueurs_de_temps">Ajout d'un marqueur de temps pour le Waterfall</a></li> -</ul> +- {{domxref("Console.time()")}} +- {{domxref("Console.timeEnd()")}} +- [Ajout d'un marqueur de temps pour le Waterfall](/fr/docs/Outils/Performance/Waterfall#Marqueurs_de_temps) diff --git a/files/fr/web/api/console/trace/index.md b/files/fr/web/api/console/trace/index.md index 481fb9f954..e94e5c7528 100644 --- a/files/fr/web/api/console/trace/index.md +++ b/files/fr/web/api/console/trace/index.md @@ -11,59 +11,49 @@ tags: - trace translation_of: Web/API/Console/trace --- -<p>{{ APIRef("Console API") }}</p> +{{ APIRef("Console API") }} -<p>Affiche la <em>stack trace</em> dans la <a href="/fr/docs/Outils/Console_Web">Web Console</a>.</p> +Affiche la _stack trace_ dans la [Web Console](/fr/docs/Outils/Console_Web). -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<p>Voir <a href="/fr/docs/Web/API/console#Stack_traces">Stack traces</a> dans la documentation de {{ domxref("console") }} pour plus de détails et d'exemples.</p> +Voir [Stack traces](/fr/docs/Web/API/console#Stack_traces) dans la documentation de {{ domxref("console") }} pour plus de détails et d'exemples. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.trace(); -</pre> + console.trace(); -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">function foo() { +```js +function foo() { function bar() { console.trace(); } bar(); } -foo();</pre> +foo(); +``` -<p>Dans la console, la trace suivante sera affichée :</p> +Dans la console, la trace suivante sera affichée : -<pre class="brush: html">bar +```html +bar foo -<anonymous></pre> - -<h2 id="Specification">Spécification</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#trace", "console.trace()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition Initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Console.trace")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<p><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></p> +<anonymous> +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("Console API", "#trace", "console.trace()")}} | {{Spec2("Console API")}} | Définition Initiale | + +## Compatibilité des navigateurs + +{{Compat("api.Console.trace")}} + +## Voir aussi + +[Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) diff --git a/files/fr/web/api/console/warn/index.md b/files/fr/web/api/console/warn/index.md index f67adb3582..b1d9132dc6 100644 --- a/files/fr/web/api/console/warn/index.md +++ b/files/fr/web/api/console/warn/index.md @@ -10,61 +10,41 @@ tags: - débogage translation_of: Web/API/Console/warn --- -<p>{{ APIRef("Console API") }}</p> +{{ APIRef("Console API") }} -<p>Affiche un message d'avertissement dans la console web.</p> +Affiche un message d'avertissement dans la console web. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<div class="note"> - <p><strong>Note :</strong> Dans Firefox, une icône de point d'exclamation est affichée à côté des messages d'avertissement</p> -</div> +> **Note :** Dans Firefox, une icône de point d'exclamation est affichée à côté des messages d'avertissement -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">console.warn(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); -console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); -</pre> + console.warn(obj1 [, obj2, ..., objN]); + console.warn(msg [, subst1, ..., substN]); -<h2 id="Paramétres">Paramétres</h2> +## Paramétres -<dl> - <dt><code>obj1</code> ... <code>objN</code></dt> - <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd> - <dt><code>msg</code></dt> - <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd> - <dt><code>subst1</code> ... <code>substN</code></dt> - <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd> -</dl> +- `obj1` ... `objN` + - : Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste. +- `msg` + - : Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères. +- `subst1` ... `substN` + - : Une liste d'objets JavaScript qui remplace les chaînes de caractéres de `msg`. Cela vous donne plus de contrôle sur le format de sortie. -<p>Voir <a href="/fr/docs/Web/API/console#Outputting_text_to_the_console">Outputting text to the console</a> dans la documentation de {{ domxref("console") }} pour plus de détails.</p> +Voir [Outputting text to the console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{ domxref("console") }} pour plus de détails. -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Console API", "#warn", "console.warn()")}}</td> - <td>{{Spec2("Console API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Console API", "#warn", "console.warn()")}} | {{Spec2("Console API")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Console.warn")}}</p> +{{Compat("api.Console.warn")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> - <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> -</ul> +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) +- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530) diff --git a/files/fr/web/api/console_api/index.md b/files/fr/web/api/console_api/index.md index 95de8bab21..2c7920c7a1 100644 --- a/files/fr/web/api/console_api/index.md +++ b/files/fr/web/api/console_api/index.md @@ -11,64 +11,49 @@ tags: - test translation_of: Web/API/Console_API --- -<div>{{DefaultAPISidebar("Console API")}}</div> +{{DefaultAPISidebar("Console API")}} -<p>L'<strong><code>API Console</code></strong> fournit des fonctionnalités permettant aux développeurs d'effectuer des tâches de débogage, telles que la journalisation des messages ou les valeurs des variables à des points définis dans votre code, ou calculer la durée d'une opération.</p> +L'**`API Console`** fournit des fonctionnalités permettant aux développeurs d'effectuer des tâches de débogage, telles que la journalisation des messages ou les valeurs des variables à des points définis dans votre code, ou calculer la durée d'une opération. -<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2> +## Concepts et utilisation -<p>L'<code>API Console</code> a commencé comme une API largement propriétaire, avec différents navigateurs l'implémentant, bien que cela ne soit pas cohérent. <a href="https://console.spec.whatwg.org/">La spécification de l'API Console</a> a été créée pour définir un comportement cohérent, et tous les navigateurs modernes ont finalement décidé d'implémenter ce comportement - bien que certaines implémentations aient toujours leurs propres fonctions propriétaires supplémentaires. Découvrez-les sur:</p> +L'`API Console` a commencé comme une API largement propriétaire, avec différents navigateurs l'implémentant, bien que cela ne soit pas cohérent. [La spécification de l'API Console](https://console.spec.whatwg.org/) a été créée pour définir un comportement cohérent, et tous les navigateurs modernes ont finalement décidé d'implémenter ce comportement - bien que certaines implémentations aient toujours leurs propres fonctions propriétaires supplémentaires. Découvrez-les sur: -<ul> - <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Implémentation de Google Chrome DevTools</a></li> - <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Implémentation de Safari DevTools</a></li> -</ul> +- [Implémentation de Google Chrome DevTools](https://developers.google.com/chrome-developer-tools/docs/console-api) +- [Implémentation de Safari DevTools](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html) -<p>L'utilisation est très simple - l'objet {{domxref ("console")}} - disponible via {{domxref ("window.console")}}, ou {{domxref ("WorkerGlobalScope.console")}} dans les workers; accessible en utilisant uniquement la <code>console</code> - contient de nombreuses méthodes que vous pouvez appeler pour effectuer des tâches de débogage rudimentaires, généralement axées sur la journalisation de diverses valeurs dans la <a href="/fr/docs/Tools/Web_Console">console Web</a> du navigateur.</p> +L'utilisation est très simple - l'objet {{domxref ("console")}} - disponible via {{domxref ("window.console")}}, ou {{domxref ("WorkerGlobalScope.console")}} dans les workers; accessible en utilisant uniquement la `console` - contient de nombreuses méthodes que vous pouvez appeler pour effectuer des tâches de débogage rudimentaires, généralement axées sur la journalisation de diverses valeurs dans la [console Web](/fr/docs/Tools/Web_Console) du navigateur. -<p>La méthode de loin la plus couramment utilisée est {{domxref ("console.log")}}, qui est utilisée pour consigner la valeur en cours contenue dans une variable spécifique.</p> +La méthode de loin la plus couramment utilisée est {{domxref ("console.log")}}, qui est utilisée pour consigner la valeur en cours contenue dans une variable spécifique. -<h2 id="Interfaces">Interfaces</h2> +## Interfaces -<dl> - <dt>{{domxref("console")}}</dt> - <dd>Fournit des fonctionnalités de débogage rudimentaires, y compris la journalisation, les traces de pile, les minuteries et les compteurs.</dd> -</dl> +- {{domxref("console")}} + - : Fournit des fonctionnalités de débogage rudimentaires, y compris la journalisation, les traces de pile, les minuteries et les compteurs. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">let myString = 'Hello world' +```js +let myString = 'Hello world' // Output "Hello world" to the console -console.log(myString)</pre> - -<p>Consultez <a href="/fr/docs/Web/API/Console#Usage">la page de référence de la console</a> pour plus d'exemples.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Console API')}}</td> - <td>{{Spec2('Console API')}}</td> - <td>Définition initial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Console")}}</p> - -<h2 id="Voir_également">Voir également</h2> - -<ul> - <li><a href="/en-US/docs/Tools">Outils</a></li> - <li><a href="/fr/docs/Tools/Web_Console">Console Web</a> - comment la console Web de Firefox traite les appels de l'<code>API Console</code>.</li> - <li><a href="/fr/docs/Tools/Remote_Debugging">Débogage à distance</a> - comment voir la sortie de la console lorsque la cible de débogage est un appareil mobile.</li> -</ul> +console.log(myString) +``` + +Consultez [la page de référence de la console](/fr/docs/Web/API/Console#Usage) pour plus d'exemples. + +## Spécifications + +| Spécification | Status | Comment | +| ------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('Console API')}} | {{Spec2('Console API')}} | Définition initial. | + +## Compatibilité des navigateurs + +{{Compat("api.Console")}} + +## Voir également + +- [Outils](/en-US/docs/Tools) +- [Console Web](/fr/docs/Tools/Web_Console) - comment la console Web de Firefox traite les appels de l'`API Console`. +- [Débogage à distance](/fr/docs/Tools/Remote_Debugging) - comment voir la sortie de la console lorsque la cible de débogage est un appareil mobile. diff --git a/files/fr/web/api/credential/index.md b/files/fr/web/api/credential/index.md index f5dd37c020..26433b17b0 100644 --- a/files/fr/web/api/credential/index.md +++ b/files/fr/web/api/credential/index.md @@ -9,56 +9,42 @@ tags: - Reference translation_of: Web/API/Credential --- -<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}</p> +{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}} -<p>L'interface <strong><code>Credential</code></strong>, rattachée à l'<a href="/fr/docs/Web/API/Credential_Management_API">API Credential Management</a>, fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance.</p> +L'interface **`Credential`**, rattachée à l'[API Credential Management](/fr/docs/Web/API/Credential_Management_API), fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt>{{domxref("Credential.id")}} {{readonlyInline}}</dt> - <dd>Une chaîne de caractères qui est l'identifiant des informations d'authentification. Cela peut être un GUID, un nom d'utilisateur ou une adresse électronique.</dd> - <dt>{{domxref("Credential.type")}} {{readonlyInline}}</dt> - <dd>Une chaîne de caractères qui décrit le type d'information d'authentification utilisée. Les valeurs valides sont - <ul> - <li><code>password</code> (pour {{domxref("PasswordCredential")}})</li> - <li><code>federated</code> (pour {{domxref("FederatedCredential")}})</li> - <li><code>public-key</code> (pour {{domxref("PublicKeyCredential")}})</li> - </ul> - </dd> -</dl> +- {{domxref("Credential.id")}} {{readonlyInline}} + - : Une chaîne de caractères qui est l'identifiant des informations d'authentification. Cela peut être un GUID, un nom d'utilisateur ou une adresse électronique. +- {{domxref("Credential.type")}} {{readonlyInline}} -<h3 id="Gestionnaires_d'évènements">Gestionnaires d'évènements</h3> + - : Une chaîne de caractères qui décrit le type d'information d'authentification utilisée. Les valeurs valides sont -<p>Aucun.</p> + - `password` (pour {{domxref("PasswordCredential")}}) + - `federated` (pour {{domxref("FederatedCredential")}}) + - `public-key` (pour {{domxref("PublicKeyCredential")}}) -<h2 id="Méthodes">Méthodes</h2> +### Gestionnaires d'évènements -<p>Aucune.</p> +Aucun. -<h2 id="Exemples">Exemples</h2> +## Méthodes -<pre class="brush: js">// TBD</pre> +Aucune. -<h2 id="Specifications">Specifications</h2> +## Exemples -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Credential Management')}}</td> - <td>{{Spec2('Credential Management')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +```js +// TBD +``` -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Specifications -<p>{{Compat("api.Credential")}}</p> +| Spécification | État | Commentaires | +| ------------------------------------------------ | -------------------------------------------- | -------------------- | +| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Credential")}} diff --git a/files/fr/web/api/credential_management_api/index.md b/files/fr/web/api/credential_management_api/index.md index 643d918367..bbb87724b3 100644 --- a/files/fr/web/api/credential_management_api/index.md +++ b/files/fr/web/api/credential_management_api/index.md @@ -10,60 +10,38 @@ tags: - WebAuthn translation_of: Web/API/Credential_Management_API --- -<div> -<p>{{APIRef("Credential Management API")}}{{ SeeCompatTable() }}</p> +{{APIRef("Credential Management API")}}{{ SeeCompatTable() }} -<p>L'API <strong>Credential Management</strong> (en français : gestion des informations d'authentification) permet à un site web d'enregistrer et de récupérer des informations d'authentifications pour un utilisateur (qu'elles soient fédérées, utilisent un mot de passe ou une paire de clés asymétrique). Un utilisateur peut ainsi se connecter à un service sans avoir à saisir de mot de passe, de voir le compte fédéré utilisé pour se connecter à un site, de rouvrir une session sans avoir à se reconnecter après une session expirée.</p> +L'API **Credential Management** (en français : gestion des informations d'authentification) permet à un site web d'enregistrer et de récupérer des informations d'authentifications pour un utilisateur (qu'elles soient fédérées, utilisent un mot de passe ou une paire de clés asymétrique). Un utilisateur peut ainsi se connecter à un service sans avoir à saisir de mot de passe, de voir le compte fédéré utilisé pour se connecter à un site, de rouvrir une session sans avoir à se reconnecter après une session expirée. -<h2 id="Concepts_et_utilisation_de_l'API_Credential_Management">Concepts et utilisation de l'API <em>Credential Management</em></h2> +## Concepts et utilisation de l'API _Credential Management_ -<p>Cette API permet aux sites web d'interagir avec le système de mots de passe de l'agent utilisateur afin que les sites web puissent gérer de façon uniforme les informations d'authentification. Ainsi, les sites et agents utilisateur peuvent mieux communiquer sur ces aspects.</p> +Cette API permet aux sites web d'interagir avec le système de mots de passe de l'agent utilisateur afin que les sites web puissent gérer de façon uniforme les informations d'authentification. Ainsi, les sites et agents utilisateur peuvent mieux communiquer sur ces aspects. -<p>Ainsi, sans cette API, un agent utilisateur pourra rencontrer certaines difficultés à gérer des fournisseurs d'identité fédérée ou d'autres mécanismes de connexion.</p> +Ainsi, sans cette API, un agent utilisateur pourra rencontrer certaines difficultés à gérer des fournisseurs d'identité fédérée ou d'autres mécanismes de connexion. -<div class="note"> -<p><strong>Note :</strong> Cette API est restreinte aux contextes de plus haut niveau. Les appels à <code>get()</code> et <code>store()</code> depuis une {{HTMLElement("iframe")}} seront résolus sans aucun effet.</p> -</div> +> **Note :** Cette API est restreinte aux contextes de plus haut niveau. Les appels à `get()` et `store()` depuis une {{HTMLElement("iframe")}} seront résolus sans aucun effet. -<h3 id="Informations_d'authentification_partagées_entre_les_sous-domaines">Informations d'authentification partagées entre les sous-domaines</h3> +### Informations d'authentification partagées entre les sous-domaines -<p>Les versions les plus récentes de la spécification permettent de récupérer les informations relatives à un sous-domaine différent. Ainsi, un mot de passe enregistré pour <code>login.example.com</code> pourrait être utilisé pour se connecter à <code>www.example.com</code>. Pour permettre cela, le mot de passe doit explicitement être stocké en appelant {{domxref("CredentialsContainer.store()")}}. Ce comportement est parfois intitulé <em>Public suffix list (PSL) matching</em> (correspondance des listes de suffixes publics). Toutefois, la spécification ne fait que recommander l'utilisation du PSL pour déterminer la portée des informations d'authentification. Formellement, le PSL n'est pas obligatoire. Les navigateurs peuvent donc varier dans leurs implémentations.</p> +Les versions les plus récentes de la spécification permettent de récupérer les informations relatives à un sous-domaine différent. Ainsi, un mot de passe enregistré pour `login.example.com` pourrait être utilisé pour se connecter à `www.example.com`. Pour permettre cela, le mot de passe doit explicitement être stocké en appelant {{domxref("CredentialsContainer.store()")}}. Ce comportement est parfois intitulé _Public suffix list (PSL) matching_ (correspondance des listes de suffixes publics). Toutefois, la spécification ne fait que recommander l'utilisation du PSL pour déterminer la portée des informations d'authentification. Formellement, le PSL n'est pas obligatoire. Les navigateurs peuvent donc varier dans leurs implémentations. -<h2 id="Interfaces">Interfaces</h2> +## Interfaces -<dl> - <dt>{{domxref("Credential")}}</dt> - <dd>Cette interface fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance.</dd> - <dt>{{domxref("CredentialsContainer")}}</dt> - <dd>Cette interface expose des méthodes pour récupérer des informations d'authentification et notifier l'agent utilisateur lorsque des évènements pertinents se produisent (connexion ou déconnexion réussies par exemple). Cette interface est accessible via <code>navigator.credentials</code>.</dd> - <dt>{{domxref("FederatedCredential")}}</dt> - <dd>Cette interface fournit des informations relatives à des informations d'authentifcation provenant d'un fournisseur d'identité fédéré (c'est une entité à laquelle un site web fait confiance pour authentifier un utilisateur et qui fournit une API à cet effet). Le <em>framework</em> <a href="http://openid.net/developers/specs/">OpenID Connect</a> est un exemple d'un tel cas de figure.</dd> - <dt>{{domxref("PasswordCredential")}}</dt> - <dd>Cette interface fournit des informations à propos d'un couple nom d'utilisateur / mot de passe.</dd> - <dt>{{domxref("PublicKeyCredential")}}</dt> - <dd>Cette interface fournit des informations d'authentification pour se connecter à l'aide d'une paire de clés asymétrique (permettant d'éviter le hameçonnage et la fuite de données) plutôt qu'avec un mot de passe.</dd> -</dl> +- {{domxref("Credential")}} + - : Cette interface fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance. +- {{domxref("CredentialsContainer")}} + - : Cette interface expose des méthodes pour récupérer des informations d'authentification et notifier l'agent utilisateur lorsque des évènements pertinents se produisent (connexion ou déconnexion réussies par exemple). Cette interface est accessible via `navigator.credentials`. +- {{domxref("FederatedCredential")}} + - : Cette interface fournit des informations relatives à des informations d'authentifcation provenant d'un fournisseur d'identité fédéré (c'est une entité à laquelle un site web fait confiance pour authentifier un utilisateur et qui fournit une API à cet effet). Le _framework_ [OpenID Connect](http://openid.net/developers/specs/) est un exemple d'un tel cas de figure. +- {{domxref("PasswordCredential")}} + - : Cette interface fournit des informations à propos d'un couple nom d'utilisateur / mot de passe. +- {{domxref("PublicKeyCredential")}} + - : Cette interface fournit des informations d'authentification pour se connecter à l'aide d'une paire de clés asymétrique (permettant d'éviter le hameçonnage et la fuite de données) plutôt qu'avec un mot de passe. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Credential Management')}}</td> - <td>{{Spec2('Credential Management')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('WebAuthn')}}</td> - <td>{{Spec2('WebAuthn')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ------------------------------------------------ | -------------------------------------------- | -------------------- | +| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. | +| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. | diff --git a/files/fr/web/api/credentialscontainer/create/index.md b/files/fr/web/api/credentialscontainer/create/index.md index 88f609ad56..a322b56e71 100644 --- a/files/fr/web/api/credentialscontainer/create/index.md +++ b/files/fr/web/api/credentialscontainer/create/index.md @@ -10,79 +10,53 @@ tags: - WebAuthn translation_of: Web/API/CredentialsContainer/create --- -<p>{{APIRef("Credential Management")}}{{SeeCompatTable}}</p> - -<p>La méthode <strong><code>create()</code></strong>, rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en</p> - -<ul> - <li>une nouvelle instance {{domxref("Credential")}} construite avec les options fournies</li> - <li>{{jsxref("null")}} si aucun objet <code>Credential</code> ne peut être créé.</li> -</ul> - -<div class="note"> -<p><strong>Note :</strong> Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.</p> -</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">var promise = CredentialsContainer.create([options])</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>options</code></dt> - <dd>Un objet de type {{domxref("CredentialCreationOptions")}} qui contient des options pour le nouvel objet <code>Credentials</code> demandé. Cet objet doit posséder au moins une des propriétés parmi <code>"password"</code>, <code>"federated"</code> ou <code>"publicKey"</code>. Les options sont : - <ul> - <li>password: {{optional_inline}} un objet {{domxref("HTMLFormElement")}} ou un objet {{domxref("PasswordCredentialData")}} - <ul> - <li><code>id</code>: (obligatoire) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.</li> - <li><code>name</code>: {{optional_inline}} {{domxref("USVString")}}</li> - <li><code>iconURL</code>: {{optional_inline}} {{domxref("USVString")}}</li> - <li><code>password</code>: (required) {{domxref("USVString")}}</li> - </ul> - </li> - <li>federated : {{optional_inline}} un objet {{domxref("FederatedCredentialInit")}}. Cet objet contient le nécessaire pour créer/obtenir des informations d'authentification fédérées. Les propriétés disponibles sont : - <ul> - <li><code>id</code>: (required) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.</li> - <li><code>name</code>: {{optional_inline}} {{domxref("USVString")}}</li> - <li><code>iconURL</code>: {{optional_inline}} {{domxref("USVString")}}</li> - <li><code>provider</code>: (required) {{domxref("USVString")}}</li> - <li><code>protocol</code>: {{optional_inline}} {{domxref("USVString")}}</li> - </ul> - </li> - <li><code>publicKey</code> : {{optional_inline}} un objet {{domxref("PublicKeyCredentialCreationOptions")}} qui décrit les options pour créer une information d'authentification <a href="/fr/docs/Web/API/Web_Authentication_API">WebAuthn</a>.</li> - </ul> - </dd> -</dl> - -<h3 id="Valeur_de_retour">Valeur de retour</h3> - -<p>Une promesse ({{jsxref("Promise")}}) dont la valeur de résolution est une instance {{domxref("Credential")}} telle que {{domxref("PasswordCredential")}}, {{domxref("FederatedCredential")}} ou {{domxref("PublicKeyCredential")}}.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Credential Management','#dom-credentialscontainer-get','get()')}}</td> - <td>{{Spec2('Credential Management')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('WebAuthn')}}</td> - <td>{{Spec2('WebAuthn')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CredentialsContainer.create")}}</p> +{{APIRef("Credential Management")}}{{SeeCompatTable}} + +La méthode **`create()`**, rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en + +- une nouvelle instance {{domxref("Credential")}} construite avec les options fournies +- {{jsxref("null")}} si aucun objet `Credential` ne peut être créé. + +> **Note :** Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet. + +## Syntaxe + + var promise = CredentialsContainer.create([options]) + +### Paramètres + +- `options` + + - : Un objet de type {{domxref("CredentialCreationOptions")}} qui contient des options pour le nouvel objet `Credentials` demandé. Cet objet doit posséder au moins une des propriétés parmi `"password"`, `"federated"` ou `"publicKey"`. Les options sont : + + - password: {{optional_inline}} un objet {{domxref("HTMLFormElement")}} ou un objet {{domxref("PasswordCredentialData")}} + + - `id`: (obligatoire) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}. + - `name`: {{optional_inline}} {{domxref("USVString")}} + - `iconURL`: {{optional_inline}} {{domxref("USVString")}} + - `password`: (required) {{domxref("USVString")}} + + - federated : {{optional_inline}} un objet {{domxref("FederatedCredentialInit")}}. Cet objet contient le nécessaire pour créer/obtenir des informations d'authentification fédérées. Les propriétés disponibles sont : + + - `id`: (required) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}. + - `name`: {{optional_inline}} {{domxref("USVString")}} + - `iconURL`: {{optional_inline}} {{domxref("USVString")}} + - `provider`: (required) {{domxref("USVString")}} + - `protocol`: {{optional_inline}} {{domxref("USVString")}} + + - `publicKey` : {{optional_inline}} un objet {{domxref("PublicKeyCredentialCreationOptions")}} qui décrit les options pour créer une information d'authentification [WebAuthn](/fr/docs/Web/API/Web_Authentication_API). + +### Valeur de retour + +Une promesse ({{jsxref("Promise")}}) dont la valeur de résolution est une instance {{domxref("Credential")}} telle que {{domxref("PasswordCredential")}}, {{domxref("FederatedCredential")}} ou {{domxref("PublicKeyCredential")}}. + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('Credential Management','#dom-credentialscontainer-get','get()')}} | {{Spec2('Credential Management')}} | Définition initiale. | +| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.CredentialsContainer.create")}} diff --git a/files/fr/web/api/credentialscontainer/get/index.md b/files/fr/web/api/credentialscontainer/get/index.md index a58d9405bf..cee2fcb61c 100644 --- a/files/fr/web/api/credentialscontainer/get/index.md +++ b/files/fr/web/api/credentialscontainer/get/index.md @@ -11,70 +11,47 @@ tags: - WebAuthn translation_of: Web/API/CredentialsContainer/get --- -<p>{{APIRef("Credential Management")}}{{SeeCompatTable}}</p> - -<p>La méthode <strong><code>get()</code></strong>, rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en une instance de {{domxref("Credential")}} correspondant aux paramètres fournis. Si aucune correspondance n'est trouvée, la promesse sera résolue avec la valeur {{jsxref("null")}}.</p> - -<p>Cette méthode collecte l'ensemble des informations d'authentification stockées dans l'objet {{domxref("CredentialsContainer")}} et qui respectent les critères indiqués (définis grâce à l'argument <code><strong>options</strong></code>). À partir de cet ensemble, l'agent utilisateur sélectionne la meilleure information d'authentification. Selon les options fournies, l'agent utilisateur pourra afficher une boîte de dialogue et demander à l'utilisateur de sélectionner la bonne information.</p> - -<p>Cette méthode récupère les informations d'authentification en appelant la méthode <code>CollectFromCredentialStore</code> pour chaque type d'authentification permis par l'argument <code><strong>options</strong></code>. Ainsi, si la propriété <code>options.password</code> existe dans l'argument passé, {{domxref("PasswordCredential")}}<code>.[[CollectFromCredentialStore]]</code> sera appelée.</p> - -<div class="note"> -<p><strong>Note :</strong> Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.</p> -</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">var promise = CredentialsContainer.get([options])</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>options</code> {{optional_inline}}</dt> - <dd>Un objet de type {{domxref("CredentialRequestOptions")}} qui contient les critères de la requête. et les options d'interaction avec l'utilisateur. Cet objet peut contenir les propriétés suivantes : - <ul> - <li><code>password</code> : un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée devrait contenir les informations sur l'utilisateur (contrairement aux informations d'authentification fédérées).</li> - <li><code>federated</code> : un objet {{domxref("FederatedCredentialRequestOptions")}} qui contient les critères que doivent respecter les informations d'authentification fédérées. Les options disponibles sont : - <ul> - <li><code>providers</code> : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les fournisseurs d'identité potentiels</li> - <li><code>protocols</code> : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les protocoles de fédération à rechercher.</li> - </ul> - </li> - <li><code>publicKey</code> : un objet {{domxref("PublicKeyCredentialRequestOptions")}} contenant les conditions que doivent respecter les informations d'authentification <a href="/fr/docs/Web/API/Web_Authentication_API">WebAuthn</a> qui seront renvoyées.</li> - <li><code>mediation</code> : une chaîne de caractères {{jsxref("String")}} qui indique si l'utilisateur devra se reconnecter à chaque visite sur le site. Les valeurs valides sont <code>"silent"</code>, <code>"optional"</code> ou <code>"required"</code>.</li> - <li><code>unmediated</code> : {{deprecated_inline()}} un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée ne devrait pas nécessiter de médiation avec l'utilisateur.</li> - </ul> - </dd> -</dl> - -<h3 id="Valeur_de_retour">Valeur de retour</h3> - -<p>Une promesse ({{jsxref("Promise")}}) qui est résolue avec une instance {{domxref("Credential")}} correspondant aux paramètres fournis. S'il n'est pas possible d'obtenir une seule instance sans ambiguïté, la promesse sera résolue avec la valeur {{jsxref("null")}}.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Credential Management','#dom-credentialscontainer-get','get()')}}</td> - <td>{{Spec2('Credential Management')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('WebAuthn')}}</td> - <td>{{Spec2('WebAuthn')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CredentialsContainer.get")}}</p> +{{APIRef("Credential Management")}}{{SeeCompatTable}} + +La méthode **`get()`**, rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en une instance de {{domxref("Credential")}} correspondant aux paramètres fournis. Si aucune correspondance n'est trouvée, la promesse sera résolue avec la valeur {{jsxref("null")}}. + +Cette méthode collecte l'ensemble des informations d'authentification stockées dans l'objet {{domxref("CredentialsContainer")}} et qui respectent les critères indiqués (définis grâce à l'argument **`options`**). À partir de cet ensemble, l'agent utilisateur sélectionne la meilleure information d'authentification. Selon les options fournies, l'agent utilisateur pourra afficher une boîte de dialogue et demander à l'utilisateur de sélectionner la bonne information. + +Cette méthode récupère les informations d'authentification en appelant la méthode `CollectFromCredentialStore` pour chaque type d'authentification permis par l'argument **`options`**. Ainsi, si la propriété `options.password` existe dans l'argument passé, {{domxref("PasswordCredential")}}`.[[CollectFromCredentialStore]]` sera appelée. + +> **Note :** Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet. + +## Syntaxe + + var promise = CredentialsContainer.get([options]) + +### Paramètres + +- `options` {{optional_inline}} + + - : Un objet de type {{domxref("CredentialRequestOptions")}} qui contient les critères de la requête. et les options d'interaction avec l'utilisateur. Cet objet peut contenir les propriétés suivantes : + + - `password` : un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée devrait contenir les informations sur l'utilisateur (contrairement aux informations d'authentification fédérées). + - `federated` : un objet {{domxref("FederatedCredentialRequestOptions")}} qui contient les critères que doivent respecter les informations d'authentification fédérées. Les options disponibles sont : + + - `providers` : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les fournisseurs d'identité potentiels + - `protocols` : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les protocoles de fédération à rechercher. + + - `publicKey` : un objet {{domxref("PublicKeyCredentialRequestOptions")}} contenant les conditions que doivent respecter les informations d'authentification [WebAuthn](/fr/docs/Web/API/Web_Authentication_API) qui seront renvoyées. + - `mediation` : une chaîne de caractères {{jsxref("String")}} qui indique si l'utilisateur devra se reconnecter à chaque visite sur le site. Les valeurs valides sont `"silent"`, `"optional"` ou `"required"`. + - `unmediated` : {{deprecated_inline()}} un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée ne devrait pas nécessiter de médiation avec l'utilisateur. + +### Valeur de retour + +Une promesse ({{jsxref("Promise")}}) qui est résolue avec une instance {{domxref("Credential")}} correspondant aux paramètres fournis. S'il n'est pas possible d'obtenir une seule instance sans ambiguïté, la promesse sera résolue avec la valeur {{jsxref("null")}}. + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('Credential Management','#dom-credentialscontainer-get','get()')}} | {{Spec2('Credential Management')}} | Définition initiale. | +| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.CredentialsContainer.get")}} diff --git a/files/fr/web/api/credentialscontainer/index.md b/files/fr/web/api/credentialscontainer/index.md index 31e6195ae8..8632edc66f 100644 --- a/files/fr/web/api/credentialscontainer/index.md +++ b/files/fr/web/api/credentialscontainer/index.md @@ -10,61 +10,46 @@ tags: - WebAuthn translation_of: Web/API/CredentialsContainer --- -<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}</p> - -<p>L'interface <strong><code>CredentialsContainer</code></strong>, rattachée à l'<a href="/en-US/docs/Web/API/Credential_Management_API">API Credential Management</a>, expose des méthodes pour demander l'accès aux informations d'authentification et informer l'agent utilisateur lorsque des évènements pertinents se produisent (connexion et déconnexion réussies par exemple). On peut accéder à cette interface via {{domxref('Navigator.credentials')}}.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<p>Aucune.</p> - -<h3 id="Gestionnaires_d'évènements">Gestionnaires d'évènements</h3> - -<p>Aucun.</p> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("CredentialsContainer.create()")}}{{securecontext_inline}}</dt> - <dd>Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec une nouvelle instance {{domxref("Credential")}} construite selon les options fournies ou <code>null</code> si aucun objet <code>Credential</code> ne peut être créé.</dd> - <dt>{{domxref("CredentialsContainer.get()")}}{{securecontext_inline}}</dt> - <dd>Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec l'instance de {{domxref("Credential")}} qui correspond aux paramètres fournis.</dd> - <dt>{{domxref("CredentialsContainer.preventSilentAccess()")}}{{securecontext_inline}}</dt> - <dd>Cette méthode active un marqueur qui indique si une connexion automatique est autorisée pour les futures visites sur cette origine et renvoie une promesse ({{jsxref("Promise")}}) vide. <br> - <br> - On pourra par exemple appeler cette méthode après qu'un utilisateur se soit déconnecté d'un site web pour s'assurer qu'il n'est pas reconnecté à la prochaine visite. Dans des versions antérieures de la spécification, cette méthode était intitulée <code>requireUserMediation()</code>. Voir le tableau de compatibilité ci-après pour plus de détails.</dd> - <dt>{{domxref("CredentialsContainer.store()")}}{{securecontext_inline}}</dt> - <dd>Cette méthode enregistre des informations d'authentification pour un utilisateur à partir d'une instance {{domxref("Credential")}} fournie et renvoie cette instance dans une promesse ({{jsxref("Promise")}}).</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: js">// TBD</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Credential Management')}}</td> - <td>{{Spec2('Credential Management')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('WebAuthn')}}</td> - <td>{{Spec2('WebAuthn')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CredentialsContainer")}}</p> +{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}} + +L'interface **`CredentialsContainer`**, rattachée à l'[API Credential Management](/en-US/docs/Web/API/Credential_Management_API), expose des méthodes pour demander l'accès aux informations d'authentification et informer l'agent utilisateur lorsque des évènements pertinents se produisent (connexion et déconnexion réussies par exemple). On peut accéder à cette interface via {{domxref('Navigator.credentials')}}. + +## Propriétés + +Aucune. + +### Gestionnaires d'évènements + +Aucun. + +## Methods + +- {{domxref("CredentialsContainer.create()")}}{{securecontext_inline}} + - : Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec une nouvelle instance {{domxref("Credential")}} construite selon les options fournies ou `null` si aucun objet `Credential` ne peut être créé. +- {{domxref("CredentialsContainer.get()")}}{{securecontext_inline}} + - : Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec l'instance de {{domxref("Credential")}} qui correspond aux paramètres fournis. +- {{domxref("CredentialsContainer.preventSilentAccess()")}}{{securecontext_inline}} + + - : Cette méthode active un marqueur qui indique si une connexion automatique est autorisée pour les futures visites sur cette origine et renvoie une promesse ({{jsxref("Promise")}}) vide. + + On pourra par exemple appeler cette méthode après qu'un utilisateur se soit déconnecté d'un site web pour s'assurer qu'il n'est pas reconnecté à la prochaine visite. Dans des versions antérieures de la spécification, cette méthode était intitulée `requireUserMediation()`. Voir le tableau de compatibilité ci-après pour plus de détails. + +- {{domxref("CredentialsContainer.store()")}}{{securecontext_inline}} + - : Cette méthode enregistre des informations d'authentification pour un utilisateur à partir d'une instance {{domxref("Credential")}} fournie et renvoie cette instance dans une promesse ({{jsxref("Promise")}}). + +## Exemples + +```js +// TBD +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------ | -------------------------------------------- | -------------------- | +| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. | +| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.CredentialsContainer")}} diff --git a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md index 3742b9fd86..6ca704fc70 100644 --- a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md +++ b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md @@ -9,45 +9,32 @@ tags: - Reference translation_of: Web/API/CredentialsContainer/preventSilentAccess --- -<p>{{APIRef("")}}{{SeeCompatTable}}</p> +{{APIRef("")}}{{SeeCompatTable}} -<p>La méthode <strong><code>preventSilentAccess()</code></strong>, rattachée à l'interface {{domxref("CredentialsContainer")}}, permet de paramétrer une option pour indiquer si les connexions automatiques sont autorisées pour les futures visites à l'origine. Elle renvoie ensuite une promesse ({{jsxref("Promise")}}) vide.</p> +La méthode **`preventSilentAccess()`**, rattachée à l'interface {{domxref("CredentialsContainer")}}, permet de paramétrer une option pour indiquer si les connexions automatiques sont autorisées pour les futures visites à l'origine. Elle renvoie ensuite une promesse ({{jsxref("Promise")}}) vide. -<p>Cette méthode peut, par exemple, être appelée lorsqu'un utilisateur se déconnecte d'un site web afin de s'assurer qu'il n'est pas reconnecté à la prochaine visite. Cette gestion doit être gérée pour chaque origine.</p> +Cette méthode peut, par exemple, être appelée lorsqu'un utilisateur se déconnecte d'un site web afin de s'assurer qu'il n'est pas reconnecté à la prochaine visite. Cette gestion doit être gérée pour chaque origine. -<p>Dans des versions antérieures de la spécification, cette méthode était intitulée <code>requireUserMediation()</code>. Voir le tableau ci-après sur la compatibilité des navigateurs pour plus de détails.</p> +Dans des versions antérieures de la spécification, cette méthode était intitulée `requireUserMediation()`. Voir le tableau ci-après sur la compatibilité des navigateurs pour plus de détails. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var Promise = CredentialsContainer.preventSilentAccess()</pre> + var Promise = CredentialsContainer.preventSilentAccess() -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<p>Aucun.</p> +Aucun. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une promesse ({{jsxref("Promise")}}) vide.</p> +Une promesse ({{jsxref("Promise")}}) vide. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Credential Management','#dom-credentialscontainer-preventsilentaccess','preventSilentAccess()')}}</td> - <td>{{Spec2('Credential Management')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- | +| {{SpecName('Credential Management','#dom-credentialscontainer-preventsilentaccess','preventSilentAccess()')}} | {{Spec2('Credential Management')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CredentialsContainer.preventSilentAccess")}}</p> +{{Compat("api.CredentialsContainer.preventSilentAccess")}} diff --git a/files/fr/web/api/credentialscontainer/store/index.md b/files/fr/web/api/credentialscontainer/store/index.md index a6f3af8023..c9180ba86d 100644 --- a/files/fr/web/api/credentialscontainer/store/index.md +++ b/files/fr/web/api/credentialscontainer/store/index.md @@ -9,52 +9,37 @@ tags: - Reference translation_of: Web/API/CredentialsContainer/store --- -<p>{{APIRef("")}}{{SeeCompatTable}}</p> +{{APIRef("")}}{{SeeCompatTable}} -<p>La méthode <strong><code>store()</code></strong>, rattachée à l'interface {{domxref("CredentialsContainer")}}, enregistre un ensemble d'informations d'authentification pour l'utilisateur dans une instance {{domxref("Credential")}} et renvoie cette instance au travers d'une promesse ({{domxref("Promise")}}).</p> +La méthode **`store()`**, rattachée à l'interface {{domxref("CredentialsContainer")}}, enregistre un ensemble d'informations d'authentification pour l'utilisateur dans une instance {{domxref("Credential")}} et renvoie cette instance au travers d'une promesse ({{domxref("Promise")}}). -<div class="note"> -<p><strong>Note :</strong> Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.</p> -</div> +> **Note :** Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">CredentialsContainer.store(cred).then(function(credRes) { ... } )</pre> + CredentialsContainer.store(cred).then(function(credRes) { ... } ) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>cred</code></dt> - <dd>Une instance valide de {{domxref("Credential")}}.</dd> -</dl> +- `cred` + - : Une instance valide de {{domxref("Credential")}}. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une promesse ({{domxref("Promise")}}) qui sera résolue avec l'instance de {{domxref("Credential")}} passée en argument.</p> +Une promesse ({{domxref("Promise")}}) qui sera résolue avec l'instance de {{domxref("Credential")}} passée en argument. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">// TBD</pre> +```js +// TBD +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Credential Management')}}</td> - <td>{{Spec2('Credential Management')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ------------------------------------------------ | -------------------------------------------- | -------------------- | +| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CredentialsContainer.store")}}</p> +{{Compat("api.CredentialsContainer.store")}} diff --git a/files/fr/web/api/crossoriginisolated/index.md b/files/fr/web/api/crossoriginisolated/index.md index 0fd49fde85..073f4faa25 100644 --- a/files/fr/web/api/crossoriginisolated/index.md +++ b/files/fr/web/api/crossoriginisolated/index.md @@ -4,56 +4,41 @@ slug: Web/API/crossOriginIsolated translation_of: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated original_slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated --- -<div>{{APIRef()}}{{SeeCompatTable}}</div> +{{APIRef()}}{{SeeCompatTable}} -<p>La propriéte en lecture seule <code><strong>crossOriginIsolated</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}.</p> +La propriéte en lecture seule **`crossOriginIsolated`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}. -<p>Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse.</p> +Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>myCrossOriginIsolated</em> = self.crossOriginIsolated; // or just crossOriginIsolated -</pre> + var myCrossOriginIsolated = self.crossOriginIsolated; // or just crossOriginIsolated -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Une valeur booléenne</p> +Une valeur booléenne -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">if(crossOriginIsolated) { +```js +if(crossOriginIsolated) { // Post SharedArrayBuffer } else { // Do something else } -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG")}}</td> - <td></td> - <td>Pas encore ajouté à la spécification</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------ | ------ | ------------------------------------ | +| {{SpecName("HTML WHATWG")}} | | Pas encore ajouté à la spécification | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.WindowOrWorkerGlobalScope.crossOriginIsolated")}} +## Voir aussi -<p>{{Compat("api.WindowOrWorkerGlobalScope.crossOriginIsolated")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li> - <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li> -</ul> +- [Service Workers](/en-US/docs/Web/API/ServiceWorker_API) +- [Web Workers](/en-US/docs/Web/API/Web_Workers_API) diff --git a/files/fr/web/api/crypto/getrandomvalues/index.md b/files/fr/web/api/crypto/getrandomvalues/index.md index 7c0b91e5d7..57e9c02508 100644 --- a/files/fr/web/api/crypto/getrandomvalues/index.md +++ b/files/fr/web/api/crypto/getrandomvalues/index.md @@ -11,66 +11,50 @@ tags: translation_of: Web/API/Crypto/getRandomValues original_slug: Web/API/RandomSource/getRandomValues --- -<p>{{APIRef("Web Crypto API")}}</p> +{{APIRef("Web Crypto API")}} -<p>La méthode <code><strong>RandomSource.getRandomValues()</strong></code> permet d’obtenir des valeurs pseudo-aléatoires cryptographiquement satisfaisantes. Le tableau donné en paramètre est rempli avec des nombres pseudo-aléatoires.</p> +La méthode **`RandomSource.getRandomValues()`** permet d’obtenir des valeurs pseudo-aléatoires cryptographiquement satisfaisantes. Le tableau donné en paramètre est rempli avec des nombres pseudo-aléatoires. -<p>Pour garantir une performance suffisante, les implémentations n’utilisent pas un vrai générateur de nombres aléatoires, mais un générateur de nombres pseudo-aléatoires <em>semé </em>avec une valeur ayant suffisamment d'{{Glossary("entropie")}}. Les générateurs utilisés d’une implémentation à une autre seront différents mais toujours satisfaisants pour une utilisation en cryptographie. Les implémentations doivent également utiliser une graine ayant suffisamment d’entropie, comme une source d’entropie au niveau du système.</p> +Pour garantir une performance suffisante, les implémentations n’utilisent pas un vrai générateur de nombres aléatoires, mais un générateur de nombres pseudo-aléatoires _semé_ avec une valeur ayant suffisamment d'{{Glossary("entropie")}}. Les générateurs utilisés d’une implémentation à une autre seront différents mais toujours satisfaisants pour une utilisation en cryptographie. Les implémentations doivent également utiliser une graine ayant suffisamment d’entropie, comme une source d’entropie au niveau du système. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>cryptoObj</em>.getRandomValues(<em>typedArray</em>);</pre> + cryptoObj.getRandomValues(typedArray); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><em>typedArray</em></dt> - <dd>Un {{jsxref("TypedArray")}} de nombres entiers, qui est un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, ou encore un {{jsxref("Uint32Array")}}. Tous les éléments du tableau seront subsitués avec des nombres aléatoires.</dd> -</dl> +- _typedArray_ + - : Un {{jsxref("TypedArray")}} de nombres entiers, qui est un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, ou encore un {{jsxref("Uint32Array")}}. Tous les éléments du tableau seront subsitués avec des nombres aléatoires. -<h3 id="Exceptions">Exceptions</h3> +### Exceptions -<ul> - <li>Une {{exception("QuotaExceededError")}} {{domxref("DOMException")}} est levée si la taille de la requête est plus grand que 65 536 octets.</li> -</ul> +- Une {{exception("QuotaExceededError")}} {{domxref("DOMException")}} est levée si la taille de la requête est plus grand que 65 536 octets. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">/* on part du principe ici que window.crypto.getRandomValues est disponible */ +```js +/* on part du principe ici que window.crypto.getRandomValues est disponible */ var array = new Uint32Array(10); window.crypto.getRandomValues(array); console.log("Your lucky numbers:"); -for (var i = 0; i < array.length; i++) { +for (var i = 0; i < array.length; i++) { console.log(array[i]); } -</pre> - -<h2 id="Specification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}</td> - <td>{{Spec2('Web Crypto API')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div>{{Compat("api.Crypto.getRandomValues")}}</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{ domxref("Window.crypto") }} pour obtenir un objet {{domxref("Crypto")}}.</li> - <li>{{jsxref("Math.random")}}, une source non cryptographique de nombres aléatoires.</li> -</ul> +``` + +## Spécification + +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------ | +| {{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}} | {{Spec2('Web Crypto API')}} | Initial definition | + +## Compatibilité des navigateurs + +{{Compat("api.Crypto.getRandomValues")}} + +## Voir aussi + +- {{ domxref("Window.crypto") }} pour obtenir un objet {{domxref("Crypto")}}. +- {{jsxref("Math.random")}}, une source non cryptographique de nombres aléatoires. diff --git a/files/fr/web/api/crypto/index.md b/files/fr/web/api/crypto/index.md index f31a2ebaf6..bc9773c7ba 100644 --- a/files/fr/web/api/crypto/index.md +++ b/files/fr/web/api/crypto/index.md @@ -3,52 +3,32 @@ title: Crypto slug: Web/API/Crypto translation_of: Web/API/Crypto --- -<p>{{APIRef("Web Crypto API")}}</p> - -<p>L'interface <code><strong>Crypto</strong></code> représente les fonctions cryptographiques de base dans notre contexte actuel. Elle permet d'accéder à de solides générateur de nombres aléatoires dédiés à la cryptographie ainsi qu'aux principales primitives cryptographiques.</p> - -<p>Un objet avec cette interface est disponible dans le contexte web de la page via la propriété {{domxref("Window.crypto")}}.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<p><em>Cette interface implémente les propriétés définies dans {{domxref("RandomSource")}}.</em></p> - -<dl> - <dt>{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}</dt> - <dd>Retourne un objet {{domxref("SubtleCrypto")}} procurant un accès aux principales primitives cryptographiques, comme le hashage, les signatures, le chiffrement ou le déchiffrement.</dd> -</dl> - -<h2 id="Methodes">Methodes</h2> - -<p><em>Cette interface implémente les méthodes définies dans {{domxref("RandomSource")}}.</em></p> - -<dl> - <dt>{{domxref("RandomSource.getRandomValues()") }}</dt> - <dd>Rempli le {{ jsxref("TypedArray") }} passé avec des valeurs aléatoires utilisables pour la cryptographie.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> -<thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> -</thead> -<tbody> - <tr> - <td>{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}</td> - <td>{{Spec2("Web Crypto API")}}</td> - <td>Definition<br> - initiale</td> - </tr> -</tbody> -</table> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> -</ul>
\ No newline at end of file +{{APIRef("Web Crypto API")}} + +L'interface **`Crypto`** représente les fonctions cryptographiques de base dans notre contexte actuel. Elle permet d'accéder à de solides générateur de nombres aléatoires dédiés à la cryptographie ainsi qu'aux principales primitives cryptographiques. + +Un objet avec cette interface est disponible dans le contexte web de la page via la propriété {{domxref("Window.crypto")}}. + +## Propriétés + +_Cette interface implémente les propriétés définies dans {{domxref("RandomSource")}}._ + +- {{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}} + - : Retourne un objet {{domxref("SubtleCrypto")}} procurant un accès aux principales primitives cryptographiques, comme le hashage, les signatures, le chiffrement ou le déchiffrement. + +## Methodes + +_Cette interface implémente les méthodes définies dans {{domxref("RandomSource")}}._ + +- {{domxref("RandomSource.getRandomValues()") }} + - : Rempli le {{ jsxref("TypedArray") }} passé avec des valeurs aléatoires utilisables pour la cryptographie. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}} | {{Spec2("Web Crypto API")}} | Definition initiale | + +## Voir aussi + +- [Components.utils.importGlobalProperties](/en-US/docs/Components.utils.importGlobalProperties) diff --git a/files/fr/web/api/crypto/subtle/index.md b/files/fr/web/api/crypto/subtle/index.md index 5b0b24a70b..85b9fa4a84 100644 --- a/files/fr/web/api/crypto/subtle/index.md +++ b/files/fr/web/api/crypto/subtle/index.md @@ -3,40 +3,27 @@ title: Crypto.subtle slug: Web/API/Crypto/subtle translation_of: Web/API/Crypto/subtle --- -<p>{{APIRef("Web Crypto API")}}{{SecureContext_header}} </p> +{{APIRef("Web Crypto API")}}{{SecureContext_header}} -<p>{{APIRef("Web Crypto API")}}</p> +{{APIRef("Web Crypto API")}} -<p>La propriété <strong><code>Crypto.subtle</code></strong> en mode lecture seule retourne un objet {{domxref("SubtleCrypto")}} permettant de réaliser des opérations cryptographiques.</p> +La propriété **`Crypto.subtle`** en mode lecture seule retourne un objet {{domxref("SubtleCrypto")}} permettant de réaliser des opérations cryptographiques. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="notranslate">var <em>crypto</em> = crypto.subtle;</pre> + var crypto = crypto.subtle; -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}</td> - <td>{{ Spec2('Web Crypto API') }}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }} | {{ Spec2('Web Crypto API') }} | Définition initiale. | -<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2> +## Compatibilité navigateur -<p>{{Compat("api.Crypto.subtle")}}</p> +{{Compat("api.Crypto.subtle")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Crypto")}}.</li> - <li>{{domxref("SubtleCrypto")}}.</li> -</ul> +- {{domxref("Crypto")}}. +- {{domxref("SubtleCrypto")}}. diff --git a/files/fr/web/api/crypto_property/index.md b/files/fr/web/api/crypto_property/index.md index 80365515c5..2f968ce1ff 100644 --- a/files/fr/web/api/crypto_property/index.md +++ b/files/fr/web/api/crypto_property/index.md @@ -4,41 +4,25 @@ slug: Web/API/crypto_property translation_of: Web/API/Window/crypto original_slug: Web/API/Window/crypto --- -<p>{{APIRef}}</p> +{{APIRef}} -<p>La propriété, en lecture seule, {{domxref("Window.crypto")}} retourne l'objet {{domxref("Crypto")}} associé à l'objet global. Cet objet permet aux pages web d'avoir un accès à certains services liés à cryptographie.</p> +La propriété, en lecture seule, {{domxref("Window.crypto")}} retourne l'objet {{domxref("Crypto")}} associé à l'objet global. Cet objet permet aux pages web d'avoir un accès à certains services liés à cryptographie. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // pour IE 11 -</pre> + var cryptoObj = window.crypto || window.msCrypto; // pour IE 11 -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}</td> - <td>{{Spec2("Web Crypto API")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}} | {{Spec2("Web Crypto API")}} | Définition initiale | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.crypto")}}</p> +{{Compat("api.Window.crypto")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'objet global {{domxref("Window")}}</li> - <li>L'interface {{domxref("Crypto")}}</li> -</ul> +- L'objet global {{domxref("Window")}} +- L'interface {{domxref("Crypto")}} diff --git a/files/fr/web/api/cryptokey/index.md b/files/fr/web/api/cryptokey/index.md index e02b9889d6..fa771b7c25 100644 --- a/files/fr/web/api/cryptokey/index.md +++ b/files/fr/web/api/cryptokey/index.md @@ -8,57 +8,42 @@ tags: - Web Crypto API translation_of: Web/API/CryptoKey --- -<p>{{APIRef("Web Crypto API")}}</p> +{{APIRef("Web Crypto API")}} -<p>L'interface <strong><code>CryptoKey</code></strong> représente une {{glossary("clef")}} cryptographique dérivé d'un algorithme de clef spécifique.</p> +L'interface **`CryptoKey`** représente une {{glossary("clef")}} cryptographique dérivé d'un algorithme de clef spécifique. -<p>Un objet <code>CryptoKey</code> peut être obtenu en utilisant : {{domxref("SubtleCrypto.generateKey()")}}, {{domxref("SubtleCrypto.deriveKey()")}} ou {{domxref("SubtleCrypto.importKey()")}}</p> +Un objet `CryptoKey` peut être obtenu en utilisant : {{domxref("SubtleCrypto.generateKey()")}}, {{domxref("SubtleCrypto.deriveKey()")}} ou {{domxref("SubtleCrypto.importKey()")}} -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>Cette interface n'hérite d'aucune propriété.</em></p> +_Cette interface n'hérite d'aucune propriété._ -<dl> - <dt>{{domxref("CryptoKey.type")}}</dt> - <dd>Retourne une énumération de valeurs représentant un type de clef, une clef secrète (pour un algorithme symétriques), une clef publique ou privée (pour un algorithme asymétrique)</dd> - <dt>{{domxref("CryptoKey.extractable")}}</dt> - <dd>Retourne un {{jsxref("booléen")}} indiquant si l'information peut être extraite de l'application ou non.</dd> - <dt>{{domxref("CryptoKey.algorithm")}}</dt> - <dd>Retourne un objet opaque représentant un chiffre particulier avec lequel la clé doit être utilisée avec.</dd> - <dt>{{domxref("CryptoKey.usages")}}</dt> - <dd>Retourne un tableau contenant une énumération de valeurs indiquant quel est la clé qui peut être utilisée.</dd> -</dl> +- {{domxref("CryptoKey.type")}} + - : Retourne une énumération de valeurs représentant un type de clef, une clef secrète (pour un algorithme symétriques), une clef publique ou privée (pour un algorithme asymétrique) +- {{domxref("CryptoKey.extractable")}} + - : Retourne un {{jsxref("booléen")}} indiquant si l'information peut être extraite de l'application ou non. +- {{domxref("CryptoKey.algorithm")}} + - : Retourne un objet opaque représentant un chiffre particulier avec lequel la clé doit être utilisée avec. +- {{domxref("CryptoKey.usages")}} + - : Retourne un tableau contenant une énumération de valeurs indiquant quel est la clé qui peut être utilisée. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p><em>Cette interface n'hérite et n'implémente aucune méthode.</em></p> +_Cette interface n'hérite et n'implémente aucune méthode._ -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey', 'CryptoKey') }}</td> - <td>{{ Spec2('Web Crypto API') }}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{ SpecName('Web Crypto API', '#dfn-CryptoKey', 'CryptoKey') }} | {{ Spec2('Web Crypto API') }} | Définition initiale. | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CryptoKey")}}</p> +{{Compat("api.CryptoKey")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Web_Crypto_API">Web Crypto API</a></li> - <li><a href="/fr/docs/Web/Security">Sécurité du Web</a></li> - <li><a href="/fr/docs/Web/Privacy">Vie privée, autorisations et sécurité de l'information</a></li> - <li>{{domxref("Crypto")}} et {{domxref("Crypto.subtle")}}.</li> - </ul> +- [Web Crypto API](/fr/docs/Web/API/Web_Crypto_API) +- [Sécurité du Web](/fr/docs/Web/Security) +- [Vie privée, autorisations et sécurité de l'information](/fr/docs/Web/Privacy) +- {{domxref("Crypto")}} et {{domxref("Crypto.subtle")}}. diff --git a/files/fr/web/api/css/index.md b/files/fr/web/api/css/index.md index 93f55c6ad4..1f8bb44d20 100644 --- a/files/fr/web/api/css/index.md +++ b/files/fr/web/api/css/index.md @@ -3,62 +3,41 @@ title: CSS slug: Web/API/CSS translation_of: Web/API/CSS --- -<div>{{APIRef("CSSOM")}}</div> +{{APIRef("CSSOM")}} -<p>L'interface CSS possède les méthodes utiles au CSS. Aucun objet de cette interface ne sont implémentés : il ne contient que des méthodes statiques et est donc une interface abstraite.</p> +L'interface CSS possède les méthodes utiles au CSS. Aucun objet de cette interface ne sont implémentés : il ne contient que des méthodes statiques et est donc une interface abstraite. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p>L'interface CSS est une interface et aucun objet de ce type ne peut être créé: seules les méthodes statiques sont définies.</p> +L'interface CSS est une interface et aucun objet de ce type ne peut être créé: seules les méthodes statiques sont définies. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p>L'interface CSS est une interface et aucun objet de ce type ne peut être créé: seules les méthodes statiques sont définies.</p> +L'interface CSS est une interface et aucun objet de ce type ne peut être créé: seules les méthodes statiques sont définies. -<h2 id="Static_methods">Static methods</h2> +## Static methods -<p><em>Aucun héritage de méthode statique</em>.</p> +_Aucun héritage de méthode statique_. -<dl> - <dt>{{domxref("CSS.supports()")}}</dt> - <dd>Retourne un {{domxref("Boolean")}} qui indique si la paire <em>propriété/valeur</em>, ou si la condition, passée en paramètre est supportée.</dd> -</dl> +- {{domxref("CSS.supports()")}} + - : Retourne un {{domxref("Boolean")}} qui indique si la paire _propriété/valeur_, ou si la condition, passée en paramètre est supportée. -<dl> - <dt>{{domxref("CSS.escape()")}} {{experimental_inline}}</dt> - <dd>Utilisée pour protéger une chaine de caractère qui sera utiliser comme sélecteur CSS.</dd> -</dl> +<!----> -<h2 id="Spécifications">Spécifications</h2> +- {{domxref("CSS.escape()")}} {{experimental_inline}} + - : Utilisée pour protéger une chaine de caractère qui sera utiliser comme sélecteur CSS. -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSSOM', '#the-css.escape%28%29-method', 'CSS')}}</td> - <td>{{Spec2('CSSOM')}}</td> - <td>Ajoute la méthode statique escape()</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}</td> - <td>{{Spec2('CSS3 Conditional')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +## Spécifications -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +| Spécification | Status | Commentaire | +| -------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------- | +| {{SpecName('CSSOM', '#the-css.escape%28%29-method', 'CSS')}} | {{Spec2('CSSOM')}} | Ajoute la méthode statique escape() | +| {{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}} | {{Spec2('CSS3 Conditional')}} | Définition initiale | -<p>{{Compat("api.CSS")}}</p> +## Compatibilité des navigateurs -<h2 id="Voir_également">Voir également</h2> +{{Compat("api.CSS")}} -<ul> - <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> -</ul> +## Voir également + +- [Components.utils.importGlobalProperties](/en-US/docs/Components.utils.importGlobalProperties) diff --git a/files/fr/web/api/css_counter_styles/index.md b/files/fr/web/api/css_counter_styles/index.md index 09454dc3ac..193af4cae8 100644 --- a/files/fr/web/api/css_counter_styles/index.md +++ b/files/fr/web/api/css_counter_styles/index.md @@ -1,31 +1,27 @@ --- title: Module CSS Styles de compteurs (Counter Styles) slug: Web/API/CSS_Counter_Styles -translation_of: 'Web/API/CSS_Counter_Styles' +translation_of: Web/API/CSS_Counter_Styles --- -<div>{{DefaultAPISidebar("CSS Counter Styles")}}{{SeeCompatTable}}</div> +{{DefaultAPISidebar("CSS Counter Styles")}}{{SeeCompatTable}} -<p>Le module CSS Styles de compteurs (<i lang="en">Counter Styles</i>) permet de définir des styles de compteurs personnalisés qui peuvent être utilisés pour les marqueurs de listes CSS et les compteurs des contenus générés.</p> +Le module CSS Styles de compteurs (<i lang="en">Counter Styles</i>) permet de définir des styles de compteurs personnalisés qui peuvent être utilisés pour les marqueurs de listes CSS et les compteurs des contenus générés. -<h2 id="interfaces">Interfaces</h2> +## Interfaces -<dl> - <dt>{{domxref("CSSCounterStyleRule")}}</dt> - <dd>Représente une règle {{cssxref("@counter-style")}}.</dd> -</dl> +- {{domxref("CSSCounterStyleRule")}} + - : Représente une règle {{cssxref("@counter-style")}}. -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications("api.CSSCounterStyleRule")}}</p> +{{Specifications("api.CSSCounterStyleRule")}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<h3 id="csscounterstylerule_interface">Interface <code>CSSCounterStyleRule</code></h3> +### Interface `CSSCounterStyleRule` -<p>{{Compat("api.CSSCounterStyleRule")}}</p> +{{Compat("api.CSSCounterStyleRule")}} -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Utiliser les compteurs CSS</a></li> -</ul> +- [Utiliser les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) diff --git a/files/fr/web/api/css_font_loading_api/index.md b/files/fr/web/api/css_font_loading_api/index.md index 664e4de90a..035c477efa 100644 --- a/files/fr/web/api/css_font_loading_api/index.md +++ b/files/fr/web/api/css_font_loading_api/index.md @@ -3,31 +3,27 @@ title: CSS Font Loading API slug: Web/API/CSS_Font_Loading_API translation_of: Web/API/CSS_Font_Loading_API --- -<div>{{DefaultAPISidebar("CSS Font Loading API")}}{{SeeCompatTable}}</div> +{{DefaultAPISidebar("CSS Font Loading API")}}{{SeeCompatTable}} -<p>L'API CSS Font Loading API fournit des évènements et interfaces pour le chargement dynamique des ressources associées aux polices.</p> +L'API CSS Font Loading API fournit des évènements et interfaces pour le chargement dynamique des ressources associées aux polices. -<div class="note"> -<p><strong>Note :</strong> cette fonctionnalité est disponible dans <a href="/fr/docs/Web/API/Web_Workers_API">l'API Web Workers</a> (<code>self.fonts</code> donne accès à {{domxref('FontFaceSet')}}).</p> -</div> +> **Note :** cette fonctionnalité est disponible dans [l'API Web Workers](/fr/docs/Web/API/Web_Workers_API) (`self.fonts` donne accès à {{domxref('FontFaceSet')}}). -<h2 id="Interfaces">Interfaces</h2> +## Interfaces -<dl> - <dt>{{domxref('FontFace')}}</dt> - <dd>Représente une police unique mise à disposition.</dd> - <dt>{{domxref('FontFaceSet')}}</dt> - <dd>Une interface chargeant les polices et vérifiant le statut de leur téléchargement.</dd> - <dt>{{domxref('FontFaceSource')}}</dt> - <dd>Un {{Glossary("mixin")}} fournissant toutes les polices utilisées dans les opérations liées aux polices, à moins qu'elles ne soient définies autrement. Cela définit la propriété {{domxref("FontFaceSources.fonts")}} disponible pour le {{domxref("Document")}} et le {{domxref("WorkerGlobalScope")}}.</dd> - <dt>{{domxref('FontFaceSetLoadEvent')}}</dt> - <dd>Déclenché lorsqu'un {{domxref("FontFaceSet")}} est chargé.</dd> -</dl> +- {{domxref('FontFace')}} + - : Représente une police unique mise à disposition. +- {{domxref('FontFaceSet')}} + - : Une interface chargeant les polices et vérifiant le statut de leur téléchargement. +- {{domxref('FontFaceSource')}} + - : Un {{Glossary("mixin")}} fournissant toutes les polices utilisées dans les opérations liées aux polices, à moins qu'elles ne soient définies autrement. Cela définit la propriété {{domxref("FontFaceSources.fonts")}} disponible pour le {{domxref("Document")}} et le {{domxref("WorkerGlobalScope")}}. +- {{domxref('FontFaceSetLoadEvent')}} + - : Déclenché lorsqu'un {{domxref("FontFaceSet")}} est chargé. -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications("api.FontFace")}}</p> +{{Specifications("api.FontFace")}} -<h2 id="Browser_compatibility">Compatibilité navigateur</h2> +## Compatibilité navigateur -<p>{{Compat("api.FontFace")}}</p>
\ No newline at end of file +{{Compat("api.FontFace")}} diff --git a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md index 4b0fc4ff56..a462fb28d2 100644 --- a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md +++ b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md @@ -3,41 +3,39 @@ title: Déterminer les dimensions des éléments slug: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements --- -<p>{{APIRef("CSSOM View")}}</p> +{{APIRef("CSSOM View")}} -<p>Il y a plusieurs propriétés que vous pouvez regarder dans le but de déterminer la largeur et la hauteur des éléments, et il peut être difficile de déterminer quelle est la bonne pour vos besoins.</p> +Il y a plusieurs propriétés que vous pouvez regarder dans le but de déterminer la largeur et la hauteur des éléments, et il peut être difficile de déterminer quelle est la bonne pour vos besoins. -<p>Cet article est conçu pour vous aider à prendre cette décision. Notez que toutes ces propriétés sont en lecture seule .</p> +Cet article est conçu pour vous aider à prendre cette décision. Notez que toutes ces propriétés sont en lecture seule . -<p>Si vous voulez définir la largeur et la hauteur d'un élément, utilisez <code><a href="/fr/docs/Web/CSS/width">width</a></code> et <code><a href="/fr/docs/Web/CSS/height">height</a></code>; ou les propriétés <a href="/fr/docs/Web/CSS/min-width"> <code>min-width</code></a>, <a href="/fr/docs/Web/CSS/max-width"> <code>max-width</code></a>, <a href="/fr/docs/Web/CSS/min-height"> <code>min-height</code></a> et <a href="/fr/docs/Web/CSS/max-height"> <code>max-height</code></a>.</p> +Si vous voulez définir la largeur et la hauteur d'un élément, utilisez [`width`](/fr/docs/Web/CSS/width) et [`height`](/fr/docs/Web/CSS/height); ou les propriétés [`min-width`](/fr/docs/Web/CSS/min-width), [`max-width`](/fr/docs/Web/CSS/max-width), [`min-height`](/fr/docs/Web/CSS/min-height) et [`max-height`](/fr/docs/Web/CSS/max-height). -<h2 id="How_much_room_does_it_use_up.3F">Que faut-il utiliser ?</h2> +## Que faut-il utiliser ? -<p>Si vous avez besoin de connaître les dimensions totales de l'espace occupé par un élément, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le rembourrage, et les frontières, vous pouvez utiliser les propriétés <code><a href="/fr/DOM/element.offsetWidth">offsetWidth</a></code> et <code><a href="/fr/DOM/element.offsetHeight">offsetHeight</a></code>.</p> +Si vous avez besoin de connaître les dimensions totales de l'espace occupé par un élément, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le rembourrage, et les frontières, vous pouvez utiliser les propriétés [`offsetWidth`](/fr/DOM/element.offsetWidth) et [`offsetHeight`](/fr/DOM/element.offsetHeight). -<p>La plupart du temps ce sont les mêmes que la largeur et la hauteur de <code><a href="/fr/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, quand il n'y a pas de transformations appliquées à l'élément. En cas de transformations, <code>offsetWidth</code> et <code>offsetHeight</code> renvoie la disposition de la largeur et la hauteur de l'élément, tandis que <code>getBoundingClientRect()</code> retourne le rendu de la largeur et de la hauteur.</p> +La plupart du temps ce sont les mêmes que la largeur et la hauteur de [`getBoundingClientRect()`](/fr/DOM/element.getBoundingClientRect), quand il n'y a pas de transformations appliquées à l'élément. En cas de transformations, `offsetWidth` et `offsetHeight` renvoie la disposition de la largeur et la hauteur de l'élément, tandis que `getBoundingClientRect()` retourne le rendu de la largeur et de la hauteur. -<p>A titre d'exemple, si l'élément a <code>width: 100px;</code> et <code>transform: scale(0.5);</code> <code>getBoundingClientRect()</code> retournera 50 comme largeur, tandis que <code>offsetWidth</code> retournera 100.</p> +A titre d'exemple, si l'élément a `width: 100px;` et `transform: scale(0.5);` `getBoundingClientRect()` retournera 50 comme largeur, tandis que `offsetWidth` retournera 100. -<p><img src="dimensions-offset.png"></p> + -<h2 id="What.27s_the_size_of_the_displayed_content.3F">Quelle est la taille du contenu affiché ?</h2> +## Quelle est la taille du contenu affiché ? -<p>Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés <code><a href="/fr/DOM/element.clientWidth">clientWidth</a></code> et <a href="/fr/DOM/element.clientHeight"><code> clientHeight</code></a> :</p> +Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés [`clientWidth`](/fr/DOM/element.clientWidth) et [`clientHeight`](/fr/DOM/element.clientHeight) : -<p><img src="dimensions-client.png"></p> + -<h2 id="How_big_is_the_content.3F">Grandeur totale</h2> +## Grandeur totale -<p>Si vous avez besoin de connaître la taille réelle d'un élement, peu importe sa visibilité, vous devez utiliser les propriétés <code><a href="/fr/DOM/element.scrollWidth">scrollWidth</a></code> et <code><a href="/fr/docs/Web/API/Element.scrollHeight">scrollHeight</a></code>.</p> +Si vous avez besoin de connaître la taille réelle d'un élement, peu importe sa visibilité, vous devez utiliser les propriétés [`scrollWidth`](/fr/DOM/element.scrollWidth) et [`scrollHeight`](/fr/docs/Web/API/Element.scrollHeight). -<p>Elles retournent la largeur et la hauteur de l'ensemble du contenu d'un élément, même si seulement une partie de celui-ci est actuellement visible en raison de l'utilisation des barres de défilement.</p> +Elles retournent la largeur et la hauteur de l'ensemble du contenu d'un élément, même si seulement une partie de celui-ci est actuellement visible en raison de l'utilisation des barres de défilement. -<p>Par exemple, si un élément de 600x400 pixels est affiché dans une boîte de défilement de 300x300 pixels, <code>scrollWidth</code> retourne 600 tandis que <code>scrollHeight</code> retourne 400.</p> +Par exemple, si un élément de 600x400 pixels est affiché dans une boîte de défilement de 300x300 pixels, `scrollWidth` retourne 600 tandis que `scrollHeight` retourne 400. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://www.w3.org/TR/cssom-view/">http://www.w3.org/TR/cssom-view/</a></li> - <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></li> -</ul> +- <http://www.w3.org/TR/cssom-view/> +- [MSDN: Measuring Element Dimension and Location](<https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)>) diff --git a/files/fr/web/api/css_object_model/index.md b/files/fr/web/api/css_object_model/index.md index ae59f591a9..e4d30ca91e 100644 --- a/files/fr/web/api/css_object_model/index.md +++ b/files/fr/web/api/css_object_model/index.md @@ -7,121 +7,70 @@ tags: - Reference translation_of: Web/API/CSS_Object_Model --- -<p>{{DefaultAPISidebar('CSSOM')}}</p> +{{DefaultAPISidebar('CSSOM')}} -<p>Le <strong>CSS Object Model</strong> est un ensemble d’API permettant de manipuler le CSS depuis JavaScript. C’est l’équivalent des API DOM et HTML, mais pour CSS. Il permet de lire et modifier des styles CSS dynamiquement.</p> +Le **CSS Object Model** est un ensemble d’API permettant de manipuler le CSS depuis JavaScript. C’est l’équivalent des API DOM et HTML, mais pour CSS. Il permet de lire et modifier des styles CSS dynamiquement. -<h2 id="Référence">Référence</h2> +## Référence -<ul> - <li>{{domxref("AnimationEvent")}}</li> - <li>{{domxref("CaretPosition")}}</li> - <li>{{domxref("CSS")}}</li> - <li>{{domxref("CSSCharsetRule")}}</li> - <li>{{domxref("CSSConditionRule")}}</li> - <li>{{domxref("CSSCounterStyleRule")}}</li> - <li>{{domxref("CSSFontFaceRule")}}</li> - <li>{{domxref("CSSFontFeatureValuesMap")}}</li> - <li>{{domxref("CSSFontFeatureValuesRule")}}</li> - <li>{{domxref("CSSGroupingRule")}}</li> - <li>{{domxref("CSSImportRule")}}</li> - <li>{{domxref("CSSKeyframeRule")}}</li> - <li>{{domxref("CSSKeyframesRule")}}</li> - <li>{{domxref("CSSMarginRule")}}</li> - <li>{{domxref("CSSMediaRule")}}</li> - <li>{{domxref("CSSNamespaceRule")}}</li> - <li>{{domxref("CSSPageRule")}}</li> - <li>{{domxref("CSSRule")}}</li> - <li>{{domxref("CSSRuleList")}}</li> - <li>{{domxref("CSSStylesheet")}}</li> - <li>{{domxref("CSSStyleDeclaration")}}</li> - <li>{{domxref("CSSSupportsRule")}}</li> - <li>{{domxref("CSSVariablesMap")}}</li> - <li>{{domxref("CSSViewportRule")}}</li> - <li>{{domxref("ElementCSSInlineStyle")}}</li> - <li>{{domxref("GeometryUtils")}}</li> - <li>{{domxref("GetStyleUtils")}}</li> - <li>{{domxref("LinkStyle")}}</li> - <li>{{domxref("MediaList")}}</li> - <li>{{domxref("MediaQueryList")}}</li> - <li>{{domxref("PseudoElement")}}</li> - <li>{{domxref("Screen")}}</li> - <li>{{domxref("Stylesheet")}}</li> - <li>{{domxref("StylesheetList")}}</li> - <li>{{domxref("TransitionEvent")}}</li> -</ul> +- {{domxref("AnimationEvent")}} +- {{domxref("CaretPosition")}} +- {{domxref("CSS")}} +- {{domxref("CSSCharsetRule")}} +- {{domxref("CSSConditionRule")}} +- {{domxref("CSSCounterStyleRule")}} +- {{domxref("CSSFontFaceRule")}} +- {{domxref("CSSFontFeatureValuesMap")}} +- {{domxref("CSSFontFeatureValuesRule")}} +- {{domxref("CSSGroupingRule")}} +- {{domxref("CSSImportRule")}} +- {{domxref("CSSKeyframeRule")}} +- {{domxref("CSSKeyframesRule")}} +- {{domxref("CSSMarginRule")}} +- {{domxref("CSSMediaRule")}} +- {{domxref("CSSNamespaceRule")}} +- {{domxref("CSSPageRule")}} +- {{domxref("CSSRule")}} +- {{domxref("CSSRuleList")}} +- {{domxref("CSSStylesheet")}} +- {{domxref("CSSStyleDeclaration")}} +- {{domxref("CSSSupportsRule")}} +- {{domxref("CSSVariablesMap")}} +- {{domxref("CSSViewportRule")}} +- {{domxref("ElementCSSInlineStyle")}} +- {{domxref("GeometryUtils")}} +- {{domxref("GetStyleUtils")}} +- {{domxref("LinkStyle")}} +- {{domxref("MediaList")}} +- {{domxref("MediaQueryList")}} +- {{domxref("PseudoElement")}} +- {{domxref("Screen")}} +- {{domxref("Stylesheet")}} +- {{domxref("StylesheetList")}} +- {{domxref("TransitionEvent")}} -<p>Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}.</p> +Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}. -<h2 id="Tutoriels">Tutoriels</h2> +## Tutoriels -<ul> - <li><a href="/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Déterminer les dimensions l’un élément</a> (nécéssite une mise à jour, car datant de l’époque DHTML/Ajax).</li> - <li><a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Gérer l’orientation de l’écran</a></li> -</ul> +- [Déterminer les dimensions l’un élément](/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements) (nécéssite une mise à jour, car datant de l’époque DHTML/Ajax). +- [Gérer l’orientation de l’écran](/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation) -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("CSSOM")}}</td> - <td>{{Spec2("CSSOM")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSSOM View")}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("Screen Orientation")}}</td> - <td>{{Spec2("Screen Orientation")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Fonts")}}</td> - <td>{{Spec2("CSS3 Fonts")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Animations")}}</td> - <td>{{Spec2("CSS3 Animations")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Transitions")}}</td> - <td>{{Spec2("CSS3 Transitions")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Variables")}}</td> - <td>{{Spec2("CSS3 Variables")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Conditional")}}</td> - <td>{{Spec2("CSS3 Conditional")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Device")}}</td> - <td>{{Spec2("CSS3 Device")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Counter Styles")}}</td> - <td>{{Spec2("CSS3 Counter Styles")}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------ | -------------------------------------------- | ----------- | +| {{SpecName("CSSOM")}} | {{Spec2("CSSOM")}} | | +| {{SpecName("CSSOM View")}} | {{Spec2("CSSOM View")}} | | +| {{SpecName("Screen Orientation")}} | {{Spec2("Screen Orientation")}} | | +| {{SpecName("CSS3 Fonts")}} | {{Spec2("CSS3 Fonts")}} | | +| {{SpecName("CSS3 Animations")}} | {{Spec2("CSS3 Animations")}} | | +| {{SpecName("CSS3 Transitions")}} | {{Spec2("CSS3 Transitions")}} | | +| {{SpecName("CSS3 Variables")}} | {{Spec2("CSS3 Variables")}} | | +| {{SpecName("CSS3 Conditional")}} | {{Spec2("CSS3 Conditional")}} | | +| {{SpecName("CSS3 Device")}} | {{Spec2("CSS3 Device")}} | | +| {{SpecName("CSS3 Counter Styles")}} | {{Spec2("CSS3 Counter Styles")}} | | -<h2 id="Notes_sur_la_compatibilité_des_navigateurs">Notes sur la compatibilité des navigateurs</h2> +## Notes sur la compatibilité des navigateurs -<p>Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités.</p> +Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités. diff --git a/files/fr/web/api/css_object_model/managing_screen_orientation/index.md b/files/fr/web/api/css_object_model/managing_screen_orientation/index.md index 73406a99b5..3af0577eb9 100644 --- a/files/fr/web/api/css_object_model/managing_screen_orientation/index.md +++ b/files/fr/web/api/css_object_model/managing_screen_orientation/index.md @@ -8,37 +8,37 @@ tags: - Screen Orientation translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation --- -<p>{{SeeCompatTable}}{{APIRef}}</p> +{{SeeCompatTable}}{{APIRef}} -<h2 id="Sommaire">Sommaire</h2> +## Sommaire -<p>L'orientation de l'écran est quelque chose de légèrement différent de <a href="/fr/docs/WebAPI/Detecting_device_orientation">l'orientation de l'appareil</a>. Même si un appareil n'a pas la capacité de détecter sa propre orientation, un écran en possède toujours une. Et si on est capable de connaître son orientation, il est bon d'avoir la possibilité de contrôler l'orientation de l'écran afin de préserver ou d'adapter l'interface d'une application web.</p> +L'orientation de l'écran est quelque chose de légèrement différent de [l'orientation de l'appareil](/fr/docs/WebAPI/Detecting_device_orientation). Même si un appareil n'a pas la capacité de détecter sa propre orientation, un écran en possède toujours une. Et si on est capable de connaître son orientation, il est bon d'avoir la possibilité de contrôler l'orientation de l'écran afin de préserver ou d'adapter l'interface d'une application web. -<p>Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript:</p> +Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript: -<ul> - <li>La première est la <a href="/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation">media query orientation</a>. Cela permet au contenu d'ajuster sa mise en forme à l'aide de CSS, selon que la fenêtre soit en mode paysage (c'est à dire que la largeur est plus grande que la hauteur) ou en mode portrait (que sa hauteur est plus grande que sa largeur).</li> - <li>La deuxième est l'API JavaScript d'orientation d'écran, qui peut être utilisée pour récupérer l'orientation en cours de l'écran et éventuellement de la verrouiller.</li> -</ul> +- La première est la [media query orientation](/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation). Cela permet au contenu d'ajuster sa mise en forme à l'aide de CSS, selon que la fenêtre soit en mode paysage (c'est à dire que la largeur est plus grande que la hauteur) ou en mode portrait (que sa hauteur est plus grande que sa largeur). +- La deuxième est l'API JavaScript d'orientation d'écran, qui peut être utilisée pour récupérer l'orientation en cours de l'écran et éventuellement de la verrouiller. -<h2 id="Ajuster_la_mise_en_page_selon_l'orientation">Ajuster la mise en page selon l'orientation</h2> +## Ajuster la mise en page selon l'orientation -<p>Un des cas d'utilisation les plus courants pour les changements d'orientation est quand vous souhaitez modifier la mise en page de votre contenu selon l'orientation de l'appareil. Par exemple, peut-être que vous voudriez qu'une barre d'outils s'étende le long de la dimension la plus longue de l'appareil. En utilisant une media query, vous pouvez le faire facilement et automatiquement.</p> +Un des cas d'utilisation les plus courants pour les changements d'orientation est quand vous souhaitez modifier la mise en page de votre contenu selon l'orientation de l'appareil. Par exemple, peut-être que vous voudriez qu'une barre d'outils s'étende le long de la dimension la plus longue de l'appareil. En utilisant une media query, vous pouvez le faire facilement et automatiquement. -<p>Prenons pour exemple le code HTML suivant:</p> +Prenons pour exemple le code HTML suivant: -<pre class="brush: html"><ul id="toolbar"> - <li>A</li> - <li>B</li> - <li>C</li> -</ul> +```html +<ul id="toolbar"> + <li>A</li> + <li>B</li> + <li>C</li> +</ul> -<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p> -</pre> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p> +``` -<p>Le CSS s'appuie sur une media query <code>orientation</code> pour gérer les styles spécifiques liés à l'orientation de l'écran.</p> +Le CSS s'appuie sur une media query `orientation` pour gérer les styles spécifiques liés à l'orientation de l'écran. -<pre class="brush: css">/* D'abord, on définit les styles communs */ +```css +/* D'abord, on définit les styles communs */ html, body { width : 100%; @@ -77,11 +77,12 @@ li { padding: 0.5em; background: white; } -</pre> +``` -<p>Une fois qu'on a définit les styles communs, on peut définir des cas spéciaux selon l'orientation.</p> +Une fois qu'on a définit les styles communs, on peut définir des cas spéciaux selon l'orientation. -<pre class="brush: css">/* En mode portrait, on veut la barre d'outils en haut */ +```css +/* En mode portrait, on veut la barre d'outils en haut */ @media screen and (orientation: portrait) { #toolbar { @@ -106,75 +107,61 @@ li { margin-top: .5em; } } -</pre> +``` -<p>Et voici le résultat:</p> +Et voici le résultat: -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Portrait</th> - <th scope="col">Landscape</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 180, 350) }}</td> - <td>{{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 350, 180) }}</td> - </tr> - </tbody> -</table> +| Portrait | Landscape | +| -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| {{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 180, 350) }} | {{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 350, 180) }} | -<div class="note"> -<p><strong>Note:</strong> La media query orientation s'applique en vérité selon l'orientation de la fenêtre du navigateur (ou iframe) et non l'orientation de l'appareil.</p> -</div> +> **Note :** La media query orientation s'applique en vérité selon l'orientation de la fenêtre du navigateur (ou iframe) et non l'orientation de l'appareil. -<h2 id="Verrouiller_l'orientation_de_l'écran">Verrouiller l'orientation de l'écran</h2> +## Verrouiller l'orientation de l'écran -<div class="warning"> -<p><strong>Attention :</strong> Cette API est expérimentale et est actuellement disponible sur <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> et <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox pour Android</a> avec le préfixe <code>moz</code>, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe <code>ms</code>.</p> -</div> +> **Attention :** Cette API est expérimentale et est actuellement disponible sur [Firefox OS](/en-US/docs/Mozilla/Firefox_OS) et [Firefox pour Android](/en-US/docs/Mozilla/Firefox_for_Android) avec le préfixe `moz`, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe `ms`. -<p>Certains appareils (principalement les appareils mobiles) peuvent changer dynamiquement d'orientation d'écran selon leur propre orientation, garantissant que l'utilisateur sera toujours capable de lire ce qu'il y a sur l'écran. Bien que ce comportement soit parfaitement adapté au contenu texte, certains contenus peuvent être affectés négativement par ce changement. Par exemple, les jeux basés sur l'orientation de l'appareil être gachés par un tel changement.</p> +Certains appareils (principalement les appareils mobiles) peuvent changer dynamiquement d'orientation d'écran selon leur propre orientation, garantissant que l'utilisateur sera toujours capable de lire ce qu'il y a sur l'écran. Bien que ce comportement soit parfaitement adapté au contenu texte, certains contenus peuvent être affectés négativement par ce changement. Par exemple, les jeux basés sur l'orientation de l'appareil être gachés par un tel changement. -<p>L'API Screen Orientation (orientation de l'écran) est faite pour empêcher ou gérer un tel changement.</p> +L'API Screen Orientation (orientation de l'écran) est faite pour empêcher ou gérer un tel changement. -<h3 id="Écouter_les_changements_d'orientation">Écouter les changements d'orientation</h3> +### Écouter les changements d'orientation -<p>L'événement {{event("orientationchange")}} est déclenché chaque fois que l'appareil change l'orientation de l'écran et l'orientation peut elle-même être lue avec la propriété {{domxref("Screen.orientation")}}.</p> +L'événement {{event("orientationchange")}} est déclenché chaque fois que l'appareil change l'orientation de l'écran et l'orientation peut elle-même être lue avec la propriété {{domxref("Screen.orientation")}}. -<pre class="brush: js">screen.addEventListener("orientationchange", function () { +```js +screen.addEventListener("orientationchange", function () { console.log("The orientation of the screen is: " + screen.orientation); }); -</pre> +``` -<h3 id="Empêcher_le_changement_d'orientation">Empêcher le changement d'orientation</h3> +### Empêcher le changement d'orientation -<p>Toute application web peut verrouiller l'écran dans une orientation pour répondre à ses besoins. L'écran est verrouillé en utilisant la méthode {{domxref("Screen.lockOrientation()")}} et dévérouillé en utilisant {{domxref("Screen.unlockOrientation()")}}.</p> +Toute application web peut verrouiller l'écran dans une orientation pour répondre à ses besoins. L'écran est verrouillé en utilisant la méthode {{domxref("Screen.lockOrientation()")}} et dévérouillé en utilisant {{domxref("Screen.unlockOrientation()")}}. -<p>{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, <code>landscape</code> (Voir {{domxref("Screen.lockOrientation")}} pour en savoir plus sur ces valeurs).</p> +{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: `portrait-primary`, `portrait-secondary`, `landscape-primary`, `landscape-secondary`, `portrait`, `landscape` (Voir {{domxref("Screen.lockOrientation")}} pour en savoir plus sur ces valeurs). -<pre class="brush: js">screen.lockOrientation('landscape');</pre> +```js +screen.lockOrientation('landscape'); +``` -<div class="note"> -<p><strong>Note:</strong> Un verrouillage d'écran est dépendant de l'application web. Si une a application A est verrouillée à <code>landscape</code> et l'application B est verrouillée à <code>portrait</code>, passer de l'application A à B ou à A ne va pas déclencher un événement {{event("orientationchange")}} parce que les deux applications gardent l'orientation qu'elles avaient.</p> +> **Note :** Un verrouillage d'écran est dépendant de l'application web. Si une a application A est verrouillée à `landscape` et l'application B est verrouillée à `portrait`, passer de l'application A à B ou à A ne va pas déclencher un événement {{event("orientationchange")}} parce que les deux applications gardent l'orientation qu'elles avaient. +> +> En revanche, verrouiller l'orientation peut décléncher l'événement {{event("orientationchange")}} si l'orientation a dû être changée pour satisfaire aux critères du verrouillage. -<p>En revanche, verrouiller l'orientation peut décléncher l'événement {{event("orientationchange")}} si l'orientation a dû être changée pour satisfaire aux critères du verrouillage.</p> -</div> +## Firefox OS et Android: Verrouiller l'orientation avec le manifeste -<h2 id="Firefox_OS_et_Android_Verrouiller_l'orientation_avec_le_manifeste">Firefox OS et Android: Verrouiller l'orientation avec le manifeste</h2> +Pour Firefox OS et Firefox Android (bientôt pour la version bureau de Firefox également), vous pouvez le champ [orientation](/en-US/Apps/Build/Manifest#orientation) dans le fichier manifeste de votre application, par exemple: -<p>Pour Firefox OS et Firefox Android (bientôt pour la version bureau de Firefox également), vous pouvez le champ <a href="/en-US/Apps/Build/Manifest#orientation">orientation</a> dans le fichier manifeste de votre application, par exemple:</p> +```json +"orientation": "portrait" +``` -<pre class="brush: json">"orientation": "portrait"</pre> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("Screen.orientation")}}</li> - <li>{{domxref("Screen.lockOrientation()")}}</li> - <li>{{domxref("Screen.unlockOrientation()")}}</li> - <li>{{domxref("Screen.onorientationchange")}}</li> - <li><a href="/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation">Media query orientation</a></li> - <li><a href="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li> -</ul> +- {{domxref("Screen.orientation")}} +- {{domxref("Screen.lockOrientation()")}} +- {{domxref("Screen.unlockOrientation()")}} +- {{domxref("Screen.onorientationchange")}} +- [Media query orientation](/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation) +- [A short introduction to media queries in Firefox 3.5](http://hacks.mozilla.org/2009/06/media-queries/) diff --git a/files/fr/web/api/css_properties_and_values_api/index.md b/files/fr/web/api/css_properties_and_values_api/index.md index 639f947c8c..eab131b831 100644 --- a/files/fr/web/api/css_properties_and_values_api/index.md +++ b/files/fr/web/api/css_properties_and_values_api/index.md @@ -1,52 +1,50 @@ --- title: CSS Properties and Values API (Propriétés et valeurs) slug: Web/API/CSS_Properties_and_Values_API -translation_of: 'Web/API/CSS_Properties_and_Values_API' +translation_of: Web/API/CSS_Properties_and_Values_API --- -<p>{{SeeCompatTable}} L'<strong>API Propriétés et valeurs CSS</strong> — qui fait partie de l'ensemble d'API <a href="/fr/docs/Web/Houdini">CSS Houdini</a> — sert à définir explicitement des <a href="/fr/docs/Web/CSS/--*">propriétés CSS personnalisées</a>, ce qui permet la vérification des types de propriétés, de leur donner des valeurs par défaut et de déterminer si une propriété peut hériter ses valeurs ou non.</p> +{{SeeCompatTable}} L'**API Propriétés et valeurs CSS** — qui fait partie de l'ensemble d'API [CSS Houdini](/fr/docs/Web/Houdini) — sert à définir explicitement des [propriétés CSS personnalisées](/fr/docs/Web/CSS/--*), ce qui permet la vérification des types de propriétés, de leur donner des valeurs par défaut et de déterminer si une propriété peut hériter ses valeurs ou non. -<h2 id="interfaces">Interfaces</h2> +## Interfaces -<dl> - <dt>{{domxref('CSS.registerProperty')}}</dt> - <dd>Définit la manière dont un navigateur devrait analyser une {{cssxref('--*', 'propriété CSS personnalisée')}}. L'accès à cette interface se fait en <a href="/fr/docs/Web/JavaScript">JavaScript</a> via {{domxref('CSS.registerProperty')}}.</dd> - <dt>{{cssxref('@property')}}</dt> - <dd>Définit la manière dont un navigateur devrait analyser une {{cssxref('--*', 'propriété CSS personnalisée')}}. L'accès à cette interface se fait à l'aide d'une règle <a href="/fr/docs/Web/CSS/At-rule">at-rule</a> {{cssxref('@property')}} en <a href="/fr/docs/Web/CSS">CSS</a>.</dd> -</dl> +- {{domxref('CSS.registerProperty')}} + - : Définit la manière dont un navigateur devrait analyser une {{cssxref('--*', 'propriété CSS personnalisée')}}. L'accès à cette interface se fait en [JavaScript](/fr/docs/Web/JavaScript) via {{domxref('CSS.registerProperty')}}. +- {{cssxref('@property')}} + - : Définit la manière dont un navigateur devrait analyser une {{cssxref('--*', 'propriété CSS personnalisée')}}. L'accès à cette interface se fait à l'aide d'une règle [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} en [CSS](/fr/docs/Web/CSS). -<h2 id="examples">Exemples</h2> +## Exemples -<p>L'exemple suivant utilise {{domxref('CSS.registerProperty')}} en <a href="/fr/docs/Web/JavaScript">JavaScript</a> pour typer une <a href="/fr/docs/Web/CSS/--*">propriété CSS personnalisée</a>, <code>--ma-couleur</code> en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur :</p> +L'exemple suivant utilise {{domxref('CSS.registerProperty')}} en [JavaScript](/fr/docs/Web/JavaScript) pour typer une [propriété CSS personnalisée](/fr/docs/Web/CSS/--*), `--ma-couleur` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur : -<pre class="brush: js">window.CSS.registerProperty({ +```js +window.CSS.registerProperty({ name: '--ma-couleur', - syntax: '<color>', + syntax: '<color>', inherits: false, initialValue: '#c0ffee', }); -</pre> +``` -<p>Le même enregistrement peut se faire en <a href="/fr/docs/Web/CSS">CSS</a> en utilisant la règle <a href="/fr/docs/Web/CSS/At-rule">at-rule</a> {{cssxref('@property')}} :</p> +Le même enregistrement peut se faire en [CSS](/fr/docs/Web/CSS) en utilisant la règle [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} : -<pre class="brush: css">@property --ma-couleur { - syntax: '<color>'; +```css +@property --ma-couleur { + syntax: '<color>'; inherits: false; initial-value: #c0ffee; } -</pre> +``` -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications("api.CSS.registerProperty")}}</p> +{{Specifications("api.CSS.registerProperty")}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>Voir les interfaces individuelles</p> +Voir les interfaces individuelles -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/CSS_Painting_API">API Peinture CSS</a></li> - <li><a href="/fr/docs/Web/API/CSS_Typed_OM_API">API Typage de modèle d'objet CSS</a></li> - <li><a href="/fr/docs/Web/Houdini">CSS Houdini</a></li> -</ul> +- [API Peinture CSS](/fr/docs/Web/API/CSS_Painting_API) +- [API Typage de modèle d'objet CSS](/fr/docs/Web/API/CSS_Typed_OM_API) +- [CSS Houdini](/fr/docs/Web/Houdini) diff --git a/files/fr/web/api/cssmediarule/index.md b/files/fr/web/api/cssmediarule/index.md index dfcbb83536..b16fdeb972 100644 --- a/files/fr/web/api/cssmediarule/index.md +++ b/files/fr/web/api/cssmediarule/index.md @@ -8,61 +8,37 @@ tags: - Reference translation_of: Web/API/CSSMediaRule --- -<div>{{APIRef("CSSOM")}}</div> +{{APIRef("CSSOM")}} -<p>L'interface <strong><code>CSSMediaRule</code></strong> représente une seule règle CSS {{cssxref("@media")}}. Elle met en œuvre l'interface {{domxref("CSSConditionRule")}}, et donc l'interface {{domxref("CSSGroupingRule")}} et l'interface {{domxref("CSSRule")}} avec une valeur de type <code>4</code> (<code>CSSRule.MEDIA_RULE</code>).</p> +L'interface **`CSSMediaRule`** représente une seule règle CSS {{cssxref("@media")}}. Elle met en œuvre l'interface {{domxref("CSSConditionRule")}}, et donc l'interface {{domxref("CSSGroupingRule")}} et l'interface {{domxref("CSSRule")}} avec une valeur de type `4` (`CSSRule.MEDIA_RULE`). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<p>La syntaxe est décrite en utilisant le format <a href="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a>.</p> +La syntaxe est décrite en utilisant le format [WebIDL](http://dev.w3.org/2006/webapi/WebIDL/). -<pre class="syntaxbox">interface CSSMediaRule : CSSConditionRule { - readonly attribute MediaList media; -} -</pre> + interface CSSMediaRule : CSSConditionRule { + readonly attribute MediaList media; + } -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p>En tant que {{domxref("CSSConditionRule")}}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, <code>CSSMediaRule</code> implémente également les propriétés de ces interfaces. Elle a la propriété spécifique suivante :</p> +En tant que {{domxref("CSSConditionRule")}}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, `CSSMediaRule` implémente également les propriétés de ces interfaces. Elle a la propriété spécifique suivante : -<dl> - <dt>{{domxref("CSSMediaRule.media")}} {{readonlyinline}}</dt> - <dd>Spécifie un {{domxref("MediaList")}} représentant le support de destination prévu pour les informations de style.</dd> -</dl> +- {{domxref("CSSMediaRule.media")}} {{readonlyinline}} + - : Spécifie un {{domxref("MediaList")}} représentant le support de destination prévu pour les informations de style. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p>En tant que {{domxref("CSSConditionRule") }}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, <code>CSSMediaRule</code> met également en œuvre les méthodes de cette interface. Elle n'a pas de méthodes spécifiques.</p> +En tant que {{domxref("CSSConditionRule") }}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, `CSSMediaRule` met également en œuvre les méthodes de cette interface. Elle n'a pas de méthodes spécifiques. -<h2 id="Specifications">Specifications</h2> +## Specifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }}</td> - <td>{{ Spec2('CSS3 Conditional')}}</td> - <td>Dérivé de la règle {{domxref("CSSConditionRule")}}.</td> - </tr> - <tr> - <td>{{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }}</td> - <td>{{ Spec2('CSSOM') }}</td> - <td>Aucun changement par rapport à {{SpecName('DOM2 Style')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }}</td> - <td>{{ Spec2('DOM2 Style') }}</td> - <td></td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------- | +| {{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }} | {{ Spec2('CSS3 Conditional')}} | Dérivé de la règle {{domxref("CSSConditionRule")}}. | +| {{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }} | {{ Spec2('CSSOM') }} | Aucun changement par rapport à {{SpecName('DOM2 Style')}} | +| {{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }} | {{ Spec2('DOM2 Style') }} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CSSMediaRule")}}</p> +{{Compat("api.CSSMediaRule")}} diff --git a/files/fr/web/api/cssrulelist/index.md b/files/fr/web/api/cssrulelist/index.md index 86f5f4cc8a..43a15df497 100644 --- a/files/fr/web/api/cssrulelist/index.md +++ b/files/fr/web/api/cssrulelist/index.md @@ -6,42 +6,37 @@ tags: - DOM translation_of: Web/API/CSSRuleList --- -<p>{{ APIRef("CSSOM") }}</p> +{{ APIRef("CSSOM") }} -<p>A <code>CSSRuleList</code> est un objet de type tableau contenant une collection ordonnée d'objects <code><a href="/en/DOM/cssRule">CSSRule</a></code>.</p> +A `CSSRuleList` est un objet de type tableau contenant une collection ordonnée d'objects [`CSSRule`](/en/DOM/cssRule). -<h2 id="Syntax">Description</h2> +## Description -<p>Chaque règle <code>CSSRule</code> peut être atteinte via <code><var>rules</var>.item(<var>index</var>),</code> ou simplement <code><var>rules</var>[<var>index</var>]</code>, où <code><var>rules</var></code> est un objet implementant l'interface <code>CSSRuleList</code>, et <code><var>index</var></code> est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est <code><var>rules</var>.length</code>.</p> +Chaque règle `CSSRule` peut être atteinte via `rules.item(index),` ou simplement `rules[index]`, où `rules` est un objet implementant l'interface `CSSRuleList`, et `index` est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est `rules.length`. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush: js">// récuperer la première règle de la première feuille de style +```js +// récuperer la première règle de la première feuille de style var firstRule = document.styleSheets[0].cssRules[0]; -</pre> +``` -<h2 id="Notes">Voir aussi</h2> +## Voir aussi -<ul> - <li><code><a href="/en/DOM/cssRule">CSSRule</a></code></li> -</ul> +- [`CSSRule`](/en/DOM/cssRule) -<h3 id="Implémentations_de_CSSRuleList">Implémentations de CSSRuleList</h3> +### Implémentations de CSSRuleList -<p>Il existe plusieurs propriétés dans le CSSOM qui retourne une <code>CSSRuleList</code> :</p> +Il existe plusieurs propriétés dans le CSSOM qui retourne une `CSSRuleList` : -<ul> - <li>{{ domxref("CSSStyleSheet") }} property {{ domxref("CSSStyleSheet/cssRules", "cssRules") }}</li> - <li>{{ domxref("CSSMediaRule") }} property {{ domxref("CSSMediaRule/cssRules", "cssRules") }}</li> - <li>{{ domxref("CSSKeyframesRule") }} property {{ domxref("CSSKeyframesRule/cssRules", "cssRules") }}</li> - <li>{{ domxref("CSSMozDocumentRule") }} property {{ domxref("CSSMozDocumentRule/cssRules", "cssRules") }}</li> -</ul> +- {{ domxref("CSSStyleSheet") }} property {{ domxref("CSSStyleSheet/cssRules", "cssRules") }} +- {{ domxref("CSSMediaRule") }} property {{ domxref("CSSMediaRule/cssRules", "cssRules") }} +- {{ domxref("CSSKeyframesRule") }} property {{ domxref("CSSKeyframesRule/cssRules", "cssRules") }} +- {{ domxref("CSSMozDocumentRule") }} property {{ domxref("CSSMozDocumentRule/cssRules", "cssRules") }} -<h2 id="Specification">Spécification</h2> +## Spécification -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList">DOM Level 2 Style: <code>CSSRuleList</code> interface</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet-cssRules">DOM Level 2 Style: <code>CSSStyleSheet</code> attribute <code>cssRules</code></a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules">DOM Level 2 Style: <code>CSSMediaRule</code> attribute </a><code><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules">cssRules</a></code></li> - <li><a href="http://dev.w3.org/csswg/css3-animations/#DOM-CSSKeyframesRule">CSS Animations: <code>CSSKeyframesRule</code> interface</a></li> -</ul> +- [DOM Level 2 Style: `CSSRuleList` interface](http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList) +- [DOM Level 2 Style: `CSSStyleSheet` attribute `cssRules`](http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet-cssRules) +- [DOM Level 2 Style: `CSSMediaRule` attribute ](http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules)[`cssRules`](http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules) +- [CSS Animations: `CSSKeyframesRule` interface](http://dev.w3.org/csswg/css3-animations/#DOM-CSSKeyframesRule) diff --git a/files/fr/web/api/cssstyledeclaration/csstext/index.md b/files/fr/web/api/cssstyledeclaration/csstext/index.md index e8b9d228ae..da6bbcc30d 100644 --- a/files/fr/web/api/cssstyledeclaration/csstext/index.md +++ b/files/fr/web/api/cssstyledeclaration/csstext/index.md @@ -3,31 +3,31 @@ title: CSSStyleDeclaration.cssText slug: Web/API/CSSStyleDeclaration/cssText translation_of: Web/API/CSSStyleDeclaration/cssText --- -<p>A ne pas confondre avec la règle de style de feuille de style {{domxref("CSSRule.cssText")}}.</p> +A ne pas confondre avec la règle de style de feuille de style {{domxref("CSSRule.cssText")}}. -<div>{{APIRef("CSSOM") }}</div> +{{APIRef("CSSOM") }} -<p><strong>cssText</strong> retourne ou définit seulement le texte de la déclaration de style <strong>inline</strong> de l'élément. Pour pouvoir définir dynamiquement une règle d'une <strong>stylesheet</strong>, voir <a href="/fr-FR/docs/DOM/Using_dynamic_styling_information">Utilisation d'informations de mise en forme dynamiques.</a></p> +**cssText** retourne ou définit seulement le texte de la déclaration de style **inline** de l'élément. Pour pouvoir définir dynamiquement une règle d'une **stylesheet**, voir [Utilisation d'informations de mise en forme dynamiques.](/fr-FR/docs/DOM/Using_dynamic_styling_information) -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"><em>chaine</em> = elem.style.cssText -</pre> +```js +chaine = elem.style.cssText +``` -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush: html"><code><span id="s1" style="</code>color: red;"<code>> +```html +<span id="s1" style="color: red;"> Du texte -</span></code> +</span> -<script> +<script> var elem = document.getElementById("s1"); alert(elem.style.cssText); // "color: red;" -</script> -</pre> +</script> +``` -<h2 id="Specification">Spécification</h2> +## Spécification -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration">DOM Level 2 Style CSS - Interface CSSStyleDeclaration (introduced in DOM Level 2)</a></li> -</ul> +- [DOM Level 2 Style CSS - Interface CSSStyleDeclaration (introduced in DOM Level 2)](http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration) diff --git a/files/fr/web/api/cssstyledeclaration/index.md b/files/fr/web/api/cssstyledeclaration/index.md index e9169825d9..56ddcfcab1 100644 --- a/files/fr/web/api/cssstyledeclaration/index.md +++ b/files/fr/web/api/cssstyledeclaration/index.md @@ -10,47 +10,42 @@ tags: - Reference translation_of: Web/API/CSSStyleDeclaration --- -<p>{{ APIRef("CSSOM") }}</p> - -<p><code>CSSStyleDeclaration</code> représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API :</p> - -<ul> - <li>{{domxref("HTMLElement.style")}} - pour manipuler le style d'un seul élément (<elem style="...">) ;</li> - <li>(AFAIRE : à reformuler) est une interface avec le <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block">declaration block</a> renvoyé par la propriété <code><a href="/en/DOM/cssRule.style">style</a></code> d'une <code>cssRule</code> dans une <a href="/fr/docs/Web/API/StyleSheet">feuille de style</a>, lorsque la règle est une <a href="/en/DOM/cssRule#CSSStyleRule">CSSStyleRule</a> ;</li> - <li><code>CSSStyleDeclaration</code> est également une interface en <strong>lecture seule</strong> pour le résultat de <a href="/fr/docs/Web/API/Window/getComputedStyle">window.getComputedStyle()</a>.</li> -</ul> - -<h2 id="Syntax">Attributs</h2> - -<dl> - <dt>{{domxref("CSSStyleDeclaration.cssText")}}</dt> - <dd>Représentation textuelle du bloc de déclaration. La définition de cet attribut modifie le style.</dd> - <dt>{{domxref("CSSStyleDeclaration.length")}} {{readonlyInline}}</dt> - <dd>Le nombre de propriétés. Voir la méthode {{domxref("CSSStyleDeclaration.item",'item()')}} ci-dessous.</dd> - <dt>{{domxref("CSSStyleDeclaration.parentRule")}} {{readonlyInline}}</dt> - <dd>Le contenant {{domxref("CSSRule")}}.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}</dt> - <dd>Retourne la priorité facultative "important".</dd> - <dt>{{domxref("CSSStyleDeclaration.getPropertyValue()")}}</dt> - <dd>Retourne la valeur de la propriété avec un nom de propriété.</dd> - <dt>{{domxref("CSSStyleDeclaration.item()")}}</dt> - <dd>Retourne un nom de propriété.</dd> - <dt>{{domxref("CSSStyleDeclaration.removeProperty()")}}</dt> - <dd>Supprime une propriété du bloc de déclaration CSS.</dd> - <dt>{{domxref("CSSStyleDeclaration.setProperty()")}}</dt> - <dd>Modifie une propriété CSS existante ou crée une nouvelle propriété CSS dans le bloc de déclaration.</dd> - <dt>{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}}</dt> - <dd>Uniquement supporté via getComputedStyle dans Firefox. Retourne la valeur de la propriété en tant que {{domxref("CSSPrimitiveValue")}} ou <code>null</code> pour les <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriétés raccourcies</a>.</dd> -</dl> - -<h2 id="Example">Exemple</h2> - -<pre class="brush: js">var objStyle = document.styleSheets[0].cssRules[0].style; +{{ APIRef("CSSOM") }} + +`CSSStyleDeclaration` représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API : + +- {{domxref("HTMLElement.style")}} - pour manipuler le style d'un seul élément (\<elem style="...">) ; +- (AFAIRE : à reformuler) est une interface avec le [declaration block](http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block) renvoyé par la propriété [`style`](/en/DOM/cssRule.style) d'une `cssRule` dans une [feuille de style](/fr/docs/Web/API/StyleSheet), lorsque la règle est une [CSSStyleRule](/en/DOM/cssRule#CSSStyleRule) ; +- `CSSStyleDeclaration` est également une interface en **lecture seule** pour le résultat de [window.getComputedStyle()](/fr/docs/Web/API/Window/getComputedStyle). + +## Attributs + +- {{domxref("CSSStyleDeclaration.cssText")}} + - : Représentation textuelle du bloc de déclaration. La définition de cet attribut modifie le style. +- {{domxref("CSSStyleDeclaration.length")}} {{readonlyInline}} + - : Le nombre de propriétés. Voir la méthode {{domxref("CSSStyleDeclaration.item",'item()')}} ci-dessous. +- {{domxref("CSSStyleDeclaration.parentRule")}} {{readonlyInline}} + - : Le contenant {{domxref("CSSRule")}}. + +## Méthodes + +- {{domxref("CSSStyleDeclaration.getPropertyPriority()")}} + - : Retourne la priorité facultative "important". +- {{domxref("CSSStyleDeclaration.getPropertyValue()")}} + - : Retourne la valeur de la propriété avec un nom de propriété. +- {{domxref("CSSStyleDeclaration.item()")}} + - : Retourne un nom de propriété. +- {{domxref("CSSStyleDeclaration.removeProperty()")}} + - : Supprime une propriété du bloc de déclaration CSS. +- {{domxref("CSSStyleDeclaration.setProperty()")}} + - : Modifie une propriété CSS existante ou crée une nouvelle propriété CSS dans le bloc de déclaration. +- {{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}} + - : Uniquement supporté via getComputedStyle dans Firefox. Retourne la valeur de la propriété en tant que {{domxref("CSSPrimitiveValue")}} ou `null` pour les [propriétés raccourcies](/fr/docs/Web/CSS/Propriétés_raccourcies). + +## Exemple + +```js +var objStyle = document.styleSheets[0].cssRules[0].style; console.log(objStyle.cssText); for (var i = objStyle.length; i--;) { @@ -58,38 +53,20 @@ for (var i = objStyle.length; i--;) { objStyle.removeProperty(chaineNom); } -console.log(objStyle.cssText);</pre> - -<h2 id="Notes">Notes</h2> - -<p>Le bloc de déclaration est la partie de la règle de mise en forme qui apparaît dans les accolades et qui fournit les définitions de mise en forme (pour le sélecteur, la partie qui précède les accolades).</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/CSS/CSS_Properties_Reference">Référence des propriétés CSS</a></li> -</ul> - -<h2 id="Specification">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}</td> - <td>{{Spec2('CSSOM')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}}</td> - <td>{{Spec2('DOM2 Style')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +console.log(objStyle.cssText); +``` + +## Notes + +Le bloc de déclaration est la partie de la règle de mise en forme qui apparaît dans les accolades et qui fournit les définitions de mise en forme (pour le sélecteur, la partie qui précède les accolades). + +## Voir aussi + +- [Référence des propriétés CSS](/fr/docs/Web/CSS/CSS_Properties_Reference) + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}} | {{Spec2('CSSOM')}} | | +| {{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}} | {{Spec2('DOM2 Style')}} | Définition initiale. | diff --git a/files/fr/web/api/cssstylerule/index.md b/files/fr/web/api/cssstylerule/index.md index 01f85ea178..4e7b4c9cd0 100644 --- a/files/fr/web/api/cssstylerule/index.md +++ b/files/fr/web/api/cssstylerule/index.md @@ -3,52 +3,33 @@ title: CSSStyleRule slug: Web/API/CSSStyleRule translation_of: Web/API/CSSStyleRule --- -<p>{{ APIRef("CSSOM") }}</p> - -<p>CSSStyleRule représente une règle de style CSS unique. Il implémente l'interface {{domxref ("CSSRule")}} avec une valeur de type 1 (CSSRule STYLE_RULE).</p> - -<h2 id="Syntax">Syntax</h2> - -<p>La syntaxe est décrite à l'aide du format WebIDL.</p> - -<pre>interface CSSStyleRule : CSSRule { - attribute DOMString selectorText; - readonly attribute CSSStyleDeclaration style; -};</pre> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("CSSStyleRule.selectorText")}}</dt> - <dd>Obtient la représentation textuelle du sélecteur pour cette règle, par exemple "H1, H2".</dd> - <dt>{{domxref("CSSStyleRule.style")}}</dt> - <dd>Retourne l'objet {{domxref("CSSStyleDeclaration")}} pour cette règle.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }}</td> - <td>{{ Spec2('CSSOM') }}</td> - <td>pas de changement</td> - </tr> - <tr> - <td>{{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }}</td> - <td>{{ Spec2('DOM2 Style') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CSSStyleRule")}}</p> +{{ APIRef("CSSOM") }} + +CSSStyleRule représente une règle de style CSS unique. Il implémente l'interface {{domxref ("CSSRule")}} avec une valeur de type 1 (CSSRule STYLE_RULE). + +## Syntax + +La syntaxe est décrite à l'aide du format WebIDL. + + interface CSSStyleRule : CSSRule { + attribute DOMString selectorText; + readonly attribute CSSStyleDeclaration style; + }; + +## Properties + +- {{domxref("CSSStyleRule.selectorText")}} + - : Obtient la représentation textuelle du sélecteur pour cette règle, par exemple "H1, H2". +- {{domxref("CSSStyleRule.style")}} + - : Retourne l'objet {{domxref("CSSStyleDeclaration")}} pour cette règle. + +## Specifications + +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ----------------- | +| {{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }} | {{ Spec2('CSSOM') }} | pas de changement | +| {{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }} | {{ Spec2('DOM2 Style') }} | | + +## Compatibilité des navigateurs + +{{Compat("api.CSSStyleRule")}} diff --git a/files/fr/web/api/cssvalue/index.md b/files/fr/web/api/cssvalue/index.md index 871a2b70ce..fce1a579a6 100644 --- a/files/fr/web/api/cssvalue/index.md +++ b/files/fr/web/api/cssvalue/index.md @@ -8,78 +8,62 @@ tags: - Reference translation_of: Web/API/CSSValue --- -<div>{{APIRef ("DOM")}}</div> +{{APIRef ("DOM")}}L'interface **CSSValue** représente la valeur calculée actuelle d'une propriété CSS. -<div>L'interface <strong>CSSValue</strong> représente la valeur calculée actuelle d'une propriété CSS.</div> +## Propriétés -<h2 id="Propriétés">Propriétés</h2> +- {{domxref("CSSValue.cssText")}} + - : Une {{domxref ("DOMString")}} représentant la valeur actuelle. +- {{domxref("CSSValue.cssValueType")}} {{readonlyInline}} -<dl> - <dt>{{domxref("CSSValue.cssText")}}</dt> - <dd> - <p>Une {{domxref ("DOMString")}} représentant la valeur actuelle.</p> - </dd> - <dt>{{domxref("CSSValue.cssValueType")}} {{readonlyInline}}</dt> - <dd>Un raccourci non signé ( <code>unsigned short</code> ) représentant un code définissant le type de valeur. Les valeurs possibles sont: - <table class="standard-table"> - <tbody> - <tr> - <td class="header">Constant</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>CSS_CUSTOM</code></td> - <td> - <p>La valeur est une valeur personnalisée.</p> - </td> - </tr> - <tr> - <td><code>CSS_INHERIT</code></td> - <td>La valeur est héritée et cssText contient "inherit".</td> - </tr> - <tr> - <td><code>CSS_PRIMITIVE_VALUE</code></td> - <td>La valeur est une valeur primitive et une instance de l'interface {{domxref ("CSSPrimitiveValue")}} peut être obtenue en utilisant des méthodes de casting spécifiques à la liaison sur cette instance de l'interface CSSValue.</td> - </tr> - <tr> - <td><code>CSS_VALUE_LIST</code></td> - <td>La valeur est une liste CSSValue et une instance de l'interface {{domxref ("CSSValueList")}} peut être obtenue en utilisant des méthodes de casting spécifiques à la liaison sur cette instance de l'interface CSSValue.</td> - </tr> - </tbody> - </table> - </dd> -</dl> + - : Un raccourci non signé ( `unsigned short` ) représentant un code définissant le type de valeur. Les valeurs possibles sont: -<h2 id="Spécifications">Spécifications</h2> + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Constant</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>CSS_CUSTOM</code></td> + <td><p>La valeur est une valeur personnalisée.</p></td> + </tr> + <tr> + <td><code>CSS_INHERIT</code></td> + <td>La valeur est héritée et cssText contient "inherit".</td> + </tr> + <tr> + <td><code>CSS_PRIMITIVE_VALUE</code></td> + <td> + La valeur est une valeur primitive et une instance de l'interface + {{domxref ("CSSPrimitiveValue")}} peut être obtenue en + utilisant des méthodes de casting spécifiques à la liaison sur cette + instance de l'interface CSSValue. + </td> + </tr> + <tr> + <td><code>CSS_VALUE_LIST</code></td> + <td> + La valeur est une liste CSSValue et une instance de l'interface + {{domxref ("CSSValueList")}} peut être obtenue en utilisant des + méthodes de casting spécifiques à la liaison sur cette instance de + l'interface CSSValue. + </td> + </tr> + </tbody> + </table> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSValue', 'CSSValue')}}</td> - <td>{{Spec2('DOM2 Style')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +## Spécifications -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('DOM2 Style', 'css.html#CSS-CSSValue', 'CSSValue')}} | {{Spec2('DOM2 Style')}} | Définition initiale | -<div> -<div> +## Compatibilité des navigateurs +{{Compat("api.CSSValue")}} -<p>{{Compat("api.CSSValue")}}</p> -</div> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> -</div> - -<ul> - <li>{{domxref("CSSPrimitiveValue")}}</li> - <li>{{domxref("CSSValueList")}}</li> -</ul> +- {{domxref("CSSPrimitiveValue")}} +- {{domxref("CSSValueList")}} diff --git a/files/fr/web/api/cssvaluelist/index.md b/files/fr/web/api/cssvaluelist/index.md index cb78129d96..678068ac0d 100644 --- a/files/fr/web/api/cssvaluelist/index.md +++ b/files/fr/web/api/cssvaluelist/index.md @@ -9,62 +9,39 @@ tags: - Reference translation_of: Web/API/CSSValueList --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>L'interface <code><strong>CSSValueList</strong></code> dérive de l'interface {{domxref("CSSValue")}} et fournit l'abstraction d'une collection ordonnée de valeurs CSS.</p> +L'interface **`CSSValueList`** dérive de l'interface {{domxref("CSSValue")}} et fournit l'abstraction d'une collection ordonnée de valeurs CSS. -<p>Certaines propriétés autorisent une liste vide dans leur syntaxe. Dans ce cas, ces propriétés prennent l'identifiant <code>none</code>. Ainsi, une liste vide signifie que la propriété a une valeur <code>none</code> (<em>aucune valeur</em>).</p> +Certaines propriétés autorisent une liste vide dans leur syntaxe. Dans ce cas, ces propriétés prennent l'identifiant `none`. Ainsi, une liste vide signifie que la propriété a une valeur `none` (_aucune valeur_). -<p>Les éléments dans <code>CSSValueList</code> sont accessibles par un index integral commençant à 0.</p> +Les éléments dans `CSSValueList` sont accessibles par un index integral commençant à 0. -<p>{{InheritanceDiagram}}</p> +{{InheritanceDiagram}} -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>Hérite des propriétés de son parent {{domxref("CSSValue")}}</em>.</p> +_Hérite des propriétés de son parent {{domxref("CSSValue")}}_. -<dl> - <dt>{{domxref("CSSValueList.length")}} {{readonlyInline}}</dt> - <dd>Un <code>unsigned long</code> représentant le nombre de <code>CSSValues</code> (<em>valeurs CSS</em>) dans la liste.</dd> -</dl> +- {{domxref("CSSValueList.length")}} {{readonlyInline}} + - : Un `unsigned long` représentant le nombre de `CSSValues` (_valeurs CSS_) dans la liste. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<dl> - <dt>{{domxref("CSSValueList.item()")}}</dt> - <dd>Cette méthode est utilisée pour récupérer une {{domxref("CSSValue")}} <em>(valeur CSS</em>) par index ordinal. L'ordre dans cette collection représente l'ordre des valeurs dans la propriété de style CSS. Si index est supérieur ou égal au nombre de valeurs de la liste, elle renvoie <code>null</code>.</dd> -</dl> +- {{domxref("CSSValueList.item()")}} + - : Cette méthode est utilisée pour récupérer une {{domxref("CSSValue")}} _(valeur CSS_) par index ordinal. L'ordre dans cette collection représente l'ordre des valeurs dans la propriété de style CSS. Si index est supérieur ou égal au nombre de valeurs de la liste, elle renvoie `null`. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSValuesList', 'CSSValuesList')}}</td> - <td>{{Spec2('DOM2 Style')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('DOM2 Style', 'css.html#CSS-CSSValuesList', 'CSSValuesList')}} | {{Spec2('DOM2 Style')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div> -<div> +{{Compat("api.CSSValueList")}} +## Voir aussi -<p>{{Compat("api.CSSValueList")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> -</div> - -<ul> - <li>{{domxref("CSSPrimitiveValue")}}</li> - <li>{{domxref("CSSValue")}}</li> -</ul> +- {{domxref("CSSPrimitiveValue")}} +- {{domxref("CSSValue")}} diff --git a/files/fr/web/api/customevent/detail/index.md b/files/fr/web/api/customevent/detail/index.md index 17b2453a60..60969648ea 100644 --- a/files/fr/web/api/customevent/detail/index.md +++ b/files/fr/web/api/customevent/detail/index.md @@ -8,23 +8,24 @@ tags: - Évènement personnalisé translation_of: Web/API/CustomEvent/detail --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>Le <code><strong>detail</strong></code> de la propriété en lecture seule de l'interface {{domxref("CustomEvent")}} renvoie toutes les données transmises lors de l'initialisation de l'évènement.</p> +Le **`detail`** de la propriété en lecture seule de l'interface {{domxref("CustomEvent")}} renvoie toutes les données transmises lors de l'initialisation de l'évènement. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"> let myDetail = <em>customEventInstance.detail</em>;</pre> + let myDetail = customEventInstance.detail; -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Toute donnée initialisée avec l'évènement.</p> +Toute donnée initialisée avec l'évènement. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">// ajoute un écouteur d'évènement approprié +```js +// ajoute un écouteur d'évènement approprié obj.addEventListener("cat", function(e) { process(e.detail) }); // crée et distribue l'évènement @@ -36,38 +37,19 @@ let event = new CustomEvent("cat", { obj.dispatchEvent(event); // Retournera un objet contenant la propriété hazcheeseburger -let myDetail = <em>event.detail</em>; -</pre> +let myDetail = event.detail; +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-customeventinit-detail','detail')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG','#dom-customeventinit-detail','detail')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.CustomEvent.detail")}} +## Voir aussi -<p>{{Compat("api.CustomEvent.detail")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("CustomEvent")}}</li> -</ul> - -<p> </p> +- {{domxref("CustomEvent")}} diff --git a/files/fr/web/api/customevent/index.md b/files/fr/web/api/customevent/index.md index 5fcc5dc9a1..e99ca8a535 100644 --- a/files/fr/web/api/customevent/index.md +++ b/files/fr/web/api/customevent/index.md @@ -9,83 +9,64 @@ tags: - évènements translation_of: Web/API/CustomEvent --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>Les interfaces <code>CustomEvent</code> DOM sont des évènements initialisés par une application pour n'importe quel usage.</p> +Les interfaces `CustomEvent` DOM sont des évènements initialisés par une application pour n'importe quel usage. -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="Method_overview">Constructeur</h2> +## Constructeur -<dl> - <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt> - <dd>Crée un <code>CustomEvent.</code></dd> -</dl> +- {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}} + - : Crée un `CustomEvent.` -<h2 id="Attributes">Propriétés</h2> +## Propriétés -<dl> - <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt> - <dd>Toute donnée transmise lors de l'initialisation de l'événement.</dd> -</dl> +- {{domxref("CustomEvent.detail")}} {{readonlyinline}} + - : Toute donnée transmise lors de l'initialisation de l'événement. -<p>Cette interface hérite des propriétés de son parent {{domxref("Event")}}:</p> +Cette interface hérite des propriétés de son parent {{domxref("Event")}}: -<p>{{Page("/fr/docs/Web/API/Event", "Propriétés")}}</p> +{{Page("/fr/docs/Web/API/Event", "Propriétés")}} -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<dl> - <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt> - <dd>Initialise un objet CustomEvent. Si l'événement a déjà été distribué, cette méthode ne fait rien.</dd> -</dl> +- {{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}} + - : Initialise un objet CustomEvent. Si l'événement a déjà été distribué, cette méthode ne fait rien. -<p>Cette interface hérite les méthodes de son parent {{domxref("Event")}}:</p> +Cette interface hérite les méthodes de son parent {{domxref("Event")}}: -<p>{{Page("/fr/docs/Web/API/Event", "Méthodes")}}</p> +{{Page("/fr/docs/Web/API/Event", "Méthodes")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initial</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | +| {{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}} | {{Spec2('DOM WHATWG')}} | Définition initial | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CustomEvent")}}</p> +{{Compat("api.CustomEvent")}} -<h2 id="Déclenchement_à_partir_de_code_privilégié_vers_du_code_non-privilégié">Déclenchement à partir de code privilégié vers du code non-privilégié</h2> +## Déclenchement à partir de code privilégié vers du code non-privilégié -<p>Lors du déclenchement d'un CustomEvent depuis du code privilégié (une extension, par exemple) vers du code non-privilégié (une page web par exemple), vous devez prendre en considération la sécurité. Firefox et les autres applications Gecko empêchent qu'un objet créé dans un contexte soit utilisé dans un autre, ce qui empêchera généralement les failles de sécurité, mais ces restrictions peuvent aussi empêcher votre code de s'executer comme prévu.</p> +Lors du déclenchement d'un CustomEvent depuis du code privilégié (une extension, par exemple) vers du code non-privilégié (une page web par exemple), vous devez prendre en considération la sécurité. Firefox et les autres applications Gecko empêchent qu'un objet créé dans un contexte soit utilisé dans un autre, ce qui empêchera généralement les failles de sécurité, mais ces restrictions peuvent aussi empêcher votre code de s'executer comme prévu. -<p>Lors de la création d'un objet CustomEvent, vous devez créer l'objet à partir de la même <a href="/fr/docs/Mozilla/Tech/XUL/window">fenêtre</a> que celle où vous déclencherez l'évenement.</p> +Lors de la création d'un objet CustomEvent, vous devez créer l'objet à partir de la même [fenêtre](/fr/docs/Mozilla/Tech/XUL/window) que celle où vous déclencherez l'évenement. -<pre class="brush: js">// doc est une référence au contenu du document +```js +// doc est une référence au contenu du document function dispatchCustomEvent(doc) { var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView); var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail); doc.dispatchEvent(myEvent); -}</pre> +} +``` -<p>Notez qu'exposer une fonction permettra au script de l'exécuter avec les privilèges qu'accorde Chrome ce qui peut ouvrir une faille de sécurité.</p> +Notez qu'exposer une fonction permettra au script de l'exécuter avec les privilèges qu'accorde Chrome ce qui peut ouvrir une faille de sécurité. -<h2 id="Specification">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Extraits_de_code/Interaction_entre_des_pages_%C3%A0_privil%C3%A8ges_et_sans_privil%C3%A8ges">Interaction entre pages privilégiées et non-privilégiées</a></li> - <li><a href="/fr/docs/Web/API/Window/postMessage">Window.postMessage</a></li> - <li><a href="/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'événements</a></li> -</ul> +- [Interaction entre pages privilégiées et non-privilégiées](/fr/docs/Extraits_de_code/Interaction_entre_des_pages_%C3%A0_privil%C3%A8ges_et_sans_privil%C3%A8ges) +- [Window.postMessage](/fr/docs/Web/API/Window/postMessage) +- [Création et déclenchement d'événements](/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events) diff --git a/files/fr/web/api/customevent/initcustomevent/index.md b/files/fr/web/api/customevent/initcustomevent/index.md index 29dfb281d8..c95afa7d3d 100644 --- a/files/fr/web/api/customevent/initcustomevent/index.md +++ b/files/fr/web/api/customevent/initcustomevent/index.md @@ -7,64 +7,42 @@ tags: - Méthodes translation_of: Web/API/CustomEvent/initCustomEvent --- -<p>{{APIRef("DOM")}}{{deprecated_header}}</p> +{{APIRef("DOM")}}{{deprecated_header}} -<p>La méthode <code><strong>CustomEvent.initCustomEvent()</strong></code> initialise un objet <code>CustomEvent</code>. Si l'évènement a déjà été distribué, cette méthode ne change rien.</p> +La méthode **`CustomEvent.initCustomEvent()`** initialise un objet `CustomEvent`. Si l'évènement a déjà été distribué, cette méthode ne change rien. -<p>Les évènements initialisés par ce moyen doivent être créés avec la méthode {{domxref("Document.createEvent()")}}. Cette méthode doit être appelée pour définir l'évènement avant son envoi en utilisant {{domxref("EventTarget.dispatchEvent()") }}. Une fois l'évènement envoyé, la méthode ne fait rien.</p> +Les évènements initialisés par ce moyen doivent être créés avec la méthode {{domxref("Document.createEvent()")}}. Cette méthode doit être appelée pour définir l'évènement avant son envoi en utilisant {{domxref("EventTarget.dispatchEvent()") }}. Une fois l'évènement envoyé, la méthode ne fait rien. -<div class="warning"> -<p><strong>Attention :</strong> N'utilisez plus cette méthode car elle est dépréciée.</p> +> **Attention :** N'utilisez plus cette méthode car elle est dépréciée. +> +> À la place, utilisez les constructeurs d'évènements spécifiques comme {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. La page [Création et déclenchement d'évènements](/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events) donne plus d'informations sur la façon de les utiliser. -<p>À la place, utilisez les constructeurs d'évènements spécifiques comme {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. La page <a href="/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a> donne plus d'informations sur la façon de les utiliser.</p> -</div> +## Syntaxe -<h2 id="Syntaxe">Syntaxe</h2> + event.initCustomEvent(type, canBubble, cancelable, detail); -<pre class="syntaxbox"><em>event</em>.initCustomEvent(<em>type</em>, <em>canBubble</em>, <em>cancelable</em>, <em>detail</em>); -</pre> +### Paramètres -<h3 id="Paramètres">Paramètres</h3> +- `type` + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom de l'évènement. +- _`canBubble`_ + - : est un {{jsxref("Boolean")}} (_booléen_) indiquant si l'événement passe à travers le DOM ou non. +- `cancelable` + - : est un {{jsxref("Boolean")}} indiquant si l'événement est annulable. +- _`deta`\*\*`il`_ + - : Les données transmises lors de l'initialisation de l'évènement. -<dl> - <dt><code><em>type</em></code></dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom de l'évènement.</dd> - <dt><em><code>canBubble</code></em></dt> - <dd>est un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si l'événement passe à travers le DOM ou non.</dd> - <dt><code><em>cancelable</em></code></dt> - <dd>est un {{jsxref("Boolean")}} indiquant si l'événement est annulable.</dd> - <dt><em><code>deta</code></em><em><code>il</code></em></dt> - <dd>Les données transmises lors de l'initialisation de l'évènement.</dd> -</dl> +## Spécifications -<h2 id="Spécifications">Spécifications</h2> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG','#dom-customevent-initcustomevent','CustomEvent')}} | {{Spec2('DOM WHATWG')}} | Définition initiale, mais déjà dépréciée au profit de l'utilisation d'un constructeur,{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}} | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-customevent-initcustomevent','CustomEvent')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale, mais déjà dépréciée au profit de l'utilisation d'un constructeur,{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</td> - </tr> - </tbody> -</table> +## Compatibilité des navigateurs -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +{{Compat("api.CustomEvent.initCustomEvent")}} +## Voir aussi - -<p>{{Compat("api.CustomEvent.initCustomEvent")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("CustomEvent")}}</li> - <li>Le constructeur à utiliser à la place de cette méthode obsolète : {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}.</li> -</ul> +- {{domxref("CustomEvent")}} +- Le constructeur à utiliser à la place de cette méthode obsolète : {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. diff --git a/files/fr/web/api/datatransfer/cleardata/index.md b/files/fr/web/api/datatransfer/cleardata/index.md index c594fa95e7..4c2246a9f8 100644 --- a/files/fr/web/api/datatransfer/cleardata/index.md +++ b/files/fr/web/api/datatransfer/cleardata/index.md @@ -9,47 +9,44 @@ tags: - drag and drop translation_of: Web/API/DataTransfer/clearData --- -<div>{{APIRef("HTML Drag and Drop API")}}</div> +{{APIRef("HTML Drag and Drop API")}} -<p>La méthode DataTransfer.clearData() retire l'opération de {{domxref("DataTransfer","glisser-déposer")}} pour le format donné. Si la donnée pour le format ciblé n'existe pas, cette méthode n'aura aucun effet.</p> +La méthode DataTransfer.clearData() retire l'opération de {{domxref("DataTransfer","glisser-déposer")}} pour le format donné. Si la donnée pour le format ciblé n'existe pas, cette méthode n'aura aucun effet. -<div class="note"> - <p><strong>Note :</strong> Si cette méthode est appelée sans argument, ou que le format donné est une {{domxref("DOMString","chaîne de caractères")}} vide, les données de tous les formats seront retirées.</p> -</div> +> **Note :** Si cette méthode est appelée sans argument, ou que le format donné est une {{domxref("DOMString","chaîne de caractères")}} vide, les données de tous les formats seront retirées. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var>dataTransfer</var>.clearData([format]); -</pre> + void dataTransfer.clearData([format]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>format{{optional_inline}}</dt> - <dd>Une {{domxref("DOMString","chaîne de caractères")}} représentant le format de donnée à retirer.</dd> -</dl> +- format{{optional_inline}} + - : Une {{domxref("DOMString","chaîne de caractères")}} représentant le format de donnée à retirer. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Void.</p> +Void. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Cette exemple illustre l'utilisation des méthodes {{domxref("DataTransfer.getData()","getData()")}}, {{domxref("DataTransfer.setData()","setData()")}} et {{domxref("DataTransfer.clearData()","clearData()")}} de l'objet {{domxref("DataTransfer")}}.</p> +Cette exemple illustre l'utilisation des méthodes {{domxref("DataTransfer.getData()","getData()")}}, {{domxref("DataTransfer.setData()","setData()")}} et {{domxref("DataTransfer.clearData()","clearData()")}} de l'objet {{domxref("DataTransfer")}}. -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><span class="tweaked" id="source" draggable="true"> +```html +<span class="tweaked" id="source" draggable="true"> Sélectionnez cet élément, glissez-le et déposez-le dans la Zone de Dépose pour le déplacer. -</span> -<span class="tweaked" id="target">Zone de Dépose</span> -<div>Status: <span id="status">Glissez pour démarrer</span></div> -<div>Data is: <span id="data">non initialisé</span></div> -</pre> +</span> +<span class="tweaked" id="target">Zone de Dépose</span> +<div>Status: <span id="status">Glissez pour démarrer</span></div> +<div>Data is: <span id="data">non initialisé</span></div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">span.tweaked { +```css +span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; @@ -63,11 +60,12 @@ translation_of: Web/API/DataTransfer/clearData #target { border: 1px solid black; } -</pre> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">window.addEventListener('DOMContentLoaded', function () { +```js +window.addEventListener('DOMContentLoaded', function () { // Séléctionner les éléments HTML var draggable = document.getElementById('source') var dropable = document.getElementById('target') @@ -148,36 +146,21 @@ translation_of: Web/API/DataTransfer/clearData event.dataTransfer.clearData() } }) -</pre> - -<p>{{EmbedLiveSample('Exemple', 300, 250)}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité">Compatibilité</h2> - -<p>{{Compat("api.DataTransfer.clearData")}}</p> - -<h2 id="À_voir_également">À voir également</h2> - -<p>{{page("/fr/docs/Web/API/DataTransfer", "See also")}}</p> +``` + +{{EmbedLiveSample('Exemple', 300, 250)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}} | {{Spec2('HTML5.1')}} | Définition initiale | + +## Compatibilité + +{{Compat("api.DataTransfer.clearData")}} + +## À voir également + +{{page("/fr/docs/Web/API/DataTransfer", "See also")}} diff --git a/files/fr/web/api/datatransfer/files/index.md b/files/fr/web/api/datatransfer/files/index.md index 122add4eae..3be3abd508 100644 --- a/files/fr/web/api/datatransfer/files/index.md +++ b/files/fr/web/api/datatransfer/files/index.md @@ -9,52 +9,34 @@ tags: - References translation_of: Web/API/DataTransfer/files --- -<div>{{APIRef("HTML Drag and Drop API")}}</div> +{{APIRef("HTML Drag and Drop API")}} -<p>La propriété <strong><code>DataTransfer.files</code></strong> est une {{domxref("FileList","liste de fichier")}} issue d'une manipulation de glisser-déposer. Si l'opération n'inclut pas de fichier, alors la liste est vide.</p> +La propriété **`DataTransfer.files`** est une {{domxref("FileList","liste de fichier")}} issue d'une manipulation de glisser-déposer. Si l'opération n'inclut pas de fichier, alors la liste est vide. -<p>Cette fonctionnalité peut être utilisée pour glisser des fichiers du bureau utilisateur au navigateur.</p> +Cette fonctionnalité peut être utilisée pour glisser des fichiers du bureau utilisateur au navigateur. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>dataTransfer</var>.files; -</pre> + dataTransfer.files; -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une {{domxref("FileList","liste")}} de fichiers associés au "glisser", un élément de liste pour chaque fichier dans l'opération. Si l'opération de "glisser" ne contient aucun fichier alors la liste est vide.</p> +Une {{domxref("FileList","liste")}} de fichiers associés au "glisser", un élément de liste pour chaque fichier dans l'opération. Si l'opération de "glisser" ne contient aucun fichier alors la liste est vide. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Voici deux exemples :</p> +Voici deux exemples : -<ul> - <li>Seulement Firefox : <a href="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></li> - <li>Tous les navigateurs : <a href="https://jsbin.com/hiqasek/edit?html,js,output">https://jsbin.com/hiqasek/</a></li> -</ul> +- Seulement Firefox : <http://jsfiddle.net/9C2EF/> +- Tous les navigateurs : [https://jsbin.com/hiqasek/](https://jsbin.com/hiqasek/edit?html,js,output) -<h2 id="Specifications">Specifications</h2> +## Specifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-files", "files")}}</td> - <td>{{Spec2("HTML5.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Specification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "editing.html#dom-datatransfer-files", "files")}} | {{Spec2("HTML5.1")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DataTransfer.files")}}</p> +{{Compat("api.DataTransfer.files")}} diff --git a/files/fr/web/api/datatransfer/index.md b/files/fr/web/api/datatransfer/index.md index 45608285ef..f47042706f 100644 --- a/files/fr/web/api/datatransfer/index.md +++ b/files/fr/web/api/datatransfer/index.md @@ -6,383 +6,433 @@ tags: - Glisser-deposer translation_of: Web/API/DataTransfer --- -<p>L'objet <code>DataTransfer</code> contient les données glissées au cours d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments, du même type ou de types différents. Pour plus d'informations sur le glisser-déposer, voir <a href="/fr/docs/Glisser_et_d%C3%A9poser">Glisser et déposer</a>.</p> +L'objet `DataTransfer` contient les données glissées au cours d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments, du même type ou de types différents. Pour plus d'informations sur le glisser-déposer, voir [Glisser et déposer](/fr/docs/Glisser_et_d%C3%A9poser). -<p>Cet objet est disponible depuis la propriété <code>dataTransfer</code> de tous les événements de glisser. Il ne peut pas être créé séparément.</p> +Cet objet est disponible depuis la propriété `dataTransfer` de tous les événements de glisser. Il ne peut pas être créé séparément. -<h2 id="Properties">Aperçu des proprietés</h2> +## Aperçu des proprietés <table class="standard-table"> - <tbody> - <tr> - <td class="header">Propriété</td> - <td class="header">Type</td> - </tr> - <tr> - <td><code><a href="/En/DragDrop/DataTransfer#dropEffect">dropEffect</a></code></td> - <td><code><a href="/en/String">String</a></code></td> - </tr> - <tr> - <td><code><a href="/En/DragDrop/DataTransfer#effectAllowed">effectAllowed</a></code></td> - <td><code><a href="/en/String">String</a></code></td> - </tr> - <tr> - <td><a href="/En/DragDrop/DataTransfer#files"><code>files</code></a></td> - <td>{{ domxref("FileList") }}</td> - </tr> - <tr> - <td><code><a href="/En/DragDrop/DataTransfer#mozCursor">mozCursor</a></code> {{ non-standard_inline() }}</td> - <td><code><a href="/en/String">String</a></code></td> - </tr> - <tr> - <td><code><a href="/En/DragDrop/DataTransfer#mozItemCount">mozItemCount</a></code> {{ non-standard_inline() }}</td> - <td><code>unsigned long</code></td> - </tr> - <tr> - <td><a href="/En/DragDrop/DataTransfer#mozSourceNode"><code>mozSourceNode</code></a> {{ non-standard_inline() }}</td> - <td>{{ domxref("Node") }}</td> - </tr> - <tr> - <td><a href="/En/DragDrop/DataTransfer#mozUserCancelled"><code>mozUserCancelled</code></a></td> - <td><a href="/en/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a></td> - </tr> - <tr> - <td><code><a href="/En/DragDrop/DataTransfer#types">types</a></code></td> - <td><code><a href="/en/DOMStringList">StringList</a></code></td> - </tr> - </tbody> + <tbody> + <tr> + <td class="header">Propriété</td> + <td class="header">Type</td> + </tr> + <tr> + <td> + <code + ><a href="/En/DragDrop/DataTransfer#dropEffect">dropEffect</a></code + > + </td> + <td> + <code><a href="/en/String">String</a></code> + </td> + </tr> + <tr> + <td> + <code + ><a href="/En/DragDrop/DataTransfer#effectAllowed" + >effectAllowed</a + ></code + > + </td> + <td> + <code><a href="/en/String">String</a></code> + </td> + </tr> + <tr> + <td> + <a href="/En/DragDrop/DataTransfer#files"><code>files</code></a> + </td> + <td>{{ domxref("FileList") }}</td> + </tr> + <tr> + <td> + <code><a href="/En/DragDrop/DataTransfer#mozCursor">mozCursor</a></code> + {{ non-standard_inline() }} + </td> + <td> + <code><a href="/en/String">String</a></code> + </td> + </tr> + <tr> + <td> + <code + ><a href="/En/DragDrop/DataTransfer#mozItemCount" + >mozItemCount</a + ></code + > + {{ non-standard_inline() }} + </td> + <td><code>unsigned long</code></td> + </tr> + <tr> + <td> + <a href="/En/DragDrop/DataTransfer#mozSourceNode" + ><code>mozSourceNode</code></a + > + {{ non-standard_inline() }} + </td> + <td>{{ domxref("Node") }}</td> + </tr> + <tr> + <td> + <a href="/En/DragDrop/DataTransfer#mozUserCancelled" + ><code>mozUserCancelled</code></a + > + </td> + <td> + <a href="/en/JavaScript/Reference/Global_Objects/Boolean" + ><code>Boolean</code></a + > + </td> + </tr> + <tr> + <td> + <code><a href="/En/DragDrop/DataTransfer#types">types</a></code> + </td> + <td> + <code><a href="/en/DOMStringList">StringList</a></code> + </td> + </tr> + </tbody> </table> -<h2 id="Method_overview">Aperçu des méthodes</h2> +## Aperçu des méthodes <table class="standard-table"> - <tbody> - <tr> - <td><code>void <a href="#addElement.28.29">addElement</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement">Element</a> image)</code></td> - </tr> - <tr> - <td><code>void <a href="#clearData.28.29">clearData</a>([in <a href="/en/String">String</a> type])</code></td> - </tr> - <tr> - <td><code><a href="/en/String">String</a> <a href="#getData.28.29">getData</a>(in <a href="/en/String">String</a> type)</code></td> - </tr> - <tr> - <td><code>void <a href="#setData.28.29">setData</a>(in <a href="/en/String">String</a> type, in <a href="/en/String">String</a> data)</code></td> - </tr> - <tr> - <td><code>void <a href="#setDragImage.28.29">setDragImage</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement">nsIDOMElement</a> image, in long x, in long y)</code></td> - </tr> - <tr> - <td><code>void <a href="#mozClearDataAt.28.29">mozClearDataAt</a>([in <a href="/en/String">String</a> type, in unsigned long index])</code></td> - </tr> - <tr> - <td><code><a href="/en/XPCOM_Interface_Reference/NsIVariant">nsIVariant</a> <a href="#mozGetDataAt.28.29">mozGetDataAt</a>(in <a href="/en/String">String</a> type, in unsigned long index)</code></td> - </tr> - <tr> - <td><code>void <a href="#mozSetDataAt.28.29">mozSetDataAt</a>(in <a href="/en/String">String</a> type, in <a href="/en/XPCOM_Interface_Reference/NsIVariant">nsIVariant</a> data, in unsigned long index)</code></td> - </tr> - <tr> - <td><code><a href="/en/StringList">StringList</a> <a href="#mozTypesAt.28.29">mozTypesAt</a>([in unsigned long index])</code></td> - </tr> - </tbody> + <tbody> + <tr> + <td> + <code + >void <a href="#addElement.28.29">addElement</a>(in + <a href="/en/XPCOM_Interface_Reference/nsIDOMElement">Element</a> + image)</code + > + </td> + </tr> + <tr> + <td> + <code + >void <a href="#clearData.28.29">clearData</a>([in + <a href="/en/String">String</a> type])</code + > + </td> + </tr> + <tr> + <td> + <code + ><a href="/en/String">String</a> + <a href="#getData.28.29">getData</a>(in + <a href="/en/String">String</a> type)</code + > + </td> + </tr> + <tr> + <td> + <code + >void <a href="#setData.28.29">setData</a>(in + <a href="/en/String">String</a> type, in + <a href="/en/String">String</a> data)</code + > + </td> + </tr> + <tr> + <td> + <code + >void <a href="#setDragImage.28.29">setDragImage</a>(in + <a href="/en/XPCOM_Interface_Reference/nsIDOMElement" + >nsIDOMElement</a + > + image, in long x, in long y)</code + > + </td> + </tr> + <tr> + <td> + <code + >void <a href="#mozClearDataAt.28.29">mozClearDataAt</a>([in + <a href="/en/String">String</a> type, in unsigned long index])</code + > + </td> + </tr> + <tr> + <td> + <code + ><a href="/en/XPCOM_Interface_Reference/NsIVariant">nsIVariant</a> + <a href="#mozGetDataAt.28.29">mozGetDataAt</a>(in + <a href="/en/String">String</a> type, in unsigned long index)</code + > + </td> + </tr> + <tr> + <td> + <code + >void <a href="#mozSetDataAt.28.29">mozSetDataAt</a>(in + <a href="/en/String">String</a> type, in + <a href="/en/XPCOM_Interface_Reference/NsIVariant">nsIVariant</a> + data, in unsigned long index)</code + > + </td> + </tr> + <tr> + <td> + <code + ><a href="/en/StringList">StringList</a> + <a href="#mozTypesAt.28.29">mozTypesAt</a>([in unsigned long + index])</code + > + </td> + </tr> + </tbody> </table> -<h2 id="Properties">Propriétés</h2> +## Propriétés -<h3 id="dropEffect.28.29">dropEffect</h3> +### dropEffect -<p>L'effet utilisé, qui doit toujours être l'une des valeurs possibles de <code>effectAllowed</code>.</p> +L'effet utilisé, qui doit toujours être l'une des valeurs possibles de `effectAllowed`. -<p>Pour les événements <code>d</code><code>ragenter</code> et <code>dragover</code>, la propriété <code>dropEffect</code> est initialisée en fonction des actions initiées par l'utilisateur. Ceci est spécifique à la plateforme, mais en général, l'utilisateur peut appuyer sur les touches de modification pour ajuster l'action souhaitée. Dans un gestionnaire d'événement <code>d</code><code>ragenter</code> et <code>dragover</code>, la propriété <code>dropEffect</code> peut être modifiée si l'action de l'utilisateur demandée n'est pas celle souhaitée.</p> +Pour les événements ` d``ragenter ` et `dragover`, la propriété `dropEffect` est initialisée en fonction des actions initiées par l'utilisateur. Ceci est spécifique à la plateforme, mais en général, l'utilisateur peut appuyer sur les touches de modification pour ajuster l'action souhaitée. Dans un gestionnaire d'événement ` d``ragenter ` et `dragover`, la propriété `dropEffect` peut être modifiée si l'action de l'utilisateur demandée n'est pas celle souhaitée. -<p>Pour les évènements <code>dragstart</code>, <code>drag</code>, and <code>dragleave</code> events, <code>dropEffect</code> est initialisé à "none". Toute valeur peut être assignée à <code>dropEffect</code>, mais elle sera ignorée.</p> +Pour les évènements `dragstart`, `drag`, and `dragleave` events, `dropEffect` est initialisé à "none". Toute valeur peut être assignée à `dropEffect`, mais elle sera ignorée. -<p>Pour les évènements <code>drop</code> et <code>dragend</code> , <code>dropEffect</code> est initialisé en fonction de l'action initiée, et correspond à la dernière valeur de <code>dropEffect</code> après le dernier événement <code>dragenter</code> ou <code>dragover</code>.</p> +Pour les évènements `drop` et `dragend` , `dropEffect` est initialisé en fonction de l'action initiée, et correspond à la dernière valeur de `dropEffect` après le dernier événement `dragenter` ou `dragover`. -<p>Valeurs possibles:</p> +Valeurs possibles: -<ul> - <li><strong>copy</strong>: Une copie de l'élément source est faite au nouvel emplacement.</li> - <li><strong>move</strong>: Un élément est déplacé vers un nouvel emplacement.</li> - <li><strong>link</strong>: Un lien est établi depuis la source vers le nouvel emplacement.</li> - <li><strong>none</strong>: L'élément ne peut pas être déposé.</li> -</ul> +- **copy**: Une copie de l'élément source est faite au nouvel emplacement. +- **move**: Un élément est déplacé vers un nouvel emplacement. +- **link**: Un lien est établi depuis la source vers le nouvel emplacement. +- **none**: L'élément ne peut pas être déposé. -<p>Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.</p> +Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur. -<h3 id="effectAllowed.28.29">effectAllowed</h3> +### effectAllowed -<p>Indique les effets qui sont autorisés pour ce déplacer. Il peut être spécifié dans l'évènement <code>dragstart</code> pour définir les effets souhaités pour la source, et dans les événements <code>dragenter</code> et <code>dragover</code> pour définir les effets souhaités pour la cible. La valeur n'est pas utilisée pour d'autres événements.</p> +Indique les effets qui sont autorisés pour ce déplacer. Il peut être spécifié dans l'évènement `dragstart` pour définir les effets souhaités pour la source, et dans les événements `dragenter` et `dragover` pour définir les effets souhaités pour la cible. La valeur n'est pas utilisée pour d'autres événements. -<p>Valeurs possibles:</p> +Valeurs possibles: -<ul> - <li><strong>copy</strong>: Une copie de l'élément source peut être faite à son nouvel emplacement.</li> - <li><strong>move</strong>: Un élément peut être déplacé vers un nouvel emplacement.</li> - <li><strong>link</strong>: Un lien peut être établi vers la source depuis le nouvel emplacement.</li> - <li><strong>copyLink</strong>: Une opération copy ou link est autorisée.</li> - <li><strong>copyMove</strong>: Une opération copy ou move est autorisée.</li> - <li><strong>linkMove</strong>: Une opération link ou move est autorisée.</li> - <li><strong>all</strong>: Toutes les opérations sont autorisées.</li> - <li><strong>none</strong>: l'élément ne peut être déposé.</li> - <li><strong>uninitialized</strong>: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all.</li> -</ul> +- **copy**: Une copie de l'élément source peut être faite à son nouvel emplacement. +- **move**: Un élément peut être déplacé vers un nouvel emplacement. +- **link**: Un lien peut être établi vers la source depuis le nouvel emplacement. +- **copyLink**: Une opération copy ou link est autorisée. +- **copyMove**: Une opération copy ou move est autorisée. +- **linkMove**: Une opération link ou move est autorisée. +- **all**: Toutes les opérations sont autorisées. +- **none**: l'élément ne peut être déposé. +- **uninitialized**: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all. -<p>Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.</p> +Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur. -<h3 id="files.28.29">files</h3> +### files -<p>Contient une liste de tous les fichiers locaux disponibles sur le transfert de données. Si le glisser n'implique pas de fichiers, cette propriété est une liste vide. Un accès à un index invalide sur le {{ domxref("FileList") }} spécifié par cette propriété renvoie <code>null</code>.</p> +Contient une liste de tous les fichiers locaux disponibles sur le transfert de données. Si le glisser n'implique pas de fichiers, cette propriété est une liste vide. Un accès à un index invalide sur le {{ domxref("FileList") }} spécifié par cette propriété renvoie `null`. -<h4 id="Exemple">Exemple</h4> +#### Exemple -<p>Cet exemple retourne la liste des fichiers traînée dans la fenêtre du navigateur: <a href="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></p> +Cet exemple retourne la liste des fichiers traînée dans la fenêtre du navigateur: <http://jsfiddle.net/9C2EF/> -<h3 id="types.28.29">types</h3> +### types -<p>Contient une liste des types de format des données stockées pour le premier élément, dans le même ordre oú les données ont été ajoutées. Une liste vide sera retournée si aucune donnée n'a été ajoutée.</p> +Contient une liste des types de format des données stockées pour le premier élément, dans le même ordre oú les données ont été ajoutées. Une liste vide sera retournée si aucune donnée n'a été ajoutée. -<p>L'état du curseur au cours d'un glisser. Cette propriété est surtout utilisée pour contrôler le curseur au cours d'un glisser d'onglet.</p> +L'état du curseur au cours d'un glisser. Cette propriété est surtout utilisée pour contrôler le curseur au cours d'un glisser d'onglet. -<div class="note"> - <p><strong>Note :</strong> Cette méthode n'est actuellement implémentée que sur Windows.</p> -</div> +> **Note :** Cette méthode n'est actuellement implémentée que sur Windows. -<h4 id="Valeurs_possibles">Valeurs possibles</h4> +#### Valeurs possibles -<dl> - <dt><code>auto</code></dt> - <dd>Utilise le comportement par défaut du système.</dd> - <dt><code>default</code></dt> - <dd>Utilise le comportement par défaut de Gecko, qui consiste à utiliser une flèche pour curseur au cours d'un glisser.</dd> -</dl> +- `auto` + - : Utilise le comportement par défaut du système. +- `default` + - : Utilise le comportement par défaut de Gecko, qui consiste à utiliser une flèche pour curseur au cours d'un glisser. -<div class="note"> - <p><strong>Note :</strong> Si vous spécifiez une valeur autre que "default", "auto" est supposé.</p> -</div> +> **Note :** Si vous spécifiez une valeur autre que "default", "auto" est supposé. -<h3 id="mozItemCount.28.29">mozItemCount</h3> +### mozItemCount -<p>Le nombre d'éléments glissés.</p> +Le nombre d'éléments glissés. -<div class="note"> - <p><strong>Note :</strong> Cette propriété est spécifique a Gecko.</p> -</div> +> **Note :** Cette propriété est spécifique a Gecko. -<h3 id="mozSourceNode">mozSourceNode</h3> +### mozSourceNode -<p>le {{ domxref("Node") }} au dessus duquel le curseur de la souris se trouvait lorsque le bouton a été pressé pour initialiser le glisser. Cette valeur est nulle pour un glisser externe, ou si l'appelant ne peut pas accéder au nœud.</p> +le {{ domxref("Node") }} au dessus duquel le curseur de la souris se trouvait lorsque le bouton a été pressé pour initialiser le glisser. Cette valeur est nulle pour un glisser externe, ou si l'appelant ne peut pas accéder au nœud. -<div class="note"> - <p><strong>Note :</strong> Cette propriété est spécifique a Gecko.</p> -</div> +> **Note :** Cette propriété est spécifique a Gecko. -<h3 id="mozItemCount.28.29">mozUserCancelled</h3> +### mozUserCancelled -<p>Cette propriété s'applique uniquement à l'événement <code>dragend</code>, et est positionnée à <code>true</code> si l'utilisateur a annulé le glisser en appuyant sur la touche échappe. Elle est positionnée à <code>false</code> dans les autres cas, y compris si le glisser a échoué pour toute autre raison, par exemple en raison d'un déposer sur un emplacement non valide. Cette propriété n'est pas encore implémenté sous Linux.</p> +Cette propriété s'applique uniquement à l'événement `dragend`, et est positionnée à `true` si l'utilisateur a annulé le glisser en appuyant sur la touche échappe. Elle est positionnée à `false` dans les autres cas, y compris si le glisser a échoué pour toute autre raison, par exemple en raison d'un déposer sur un emplacement non valide. Cette propriété n'est pas encore implémenté sous Linux. -<div class="note"> - <p><strong>Note :</strong> Cette propriété est spécifique a Gecko.</p> -</div> +> **Note :** Cette propriété est spécifique a Gecko. -<h2 id="Methods">Methods</h2> +## Methods -<h3 id="addElement.28.29">addElement()</h3> +### addElement() -<p>Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet de modifier la cible des événements <code>drag</code> et <code>dragend</code>. La cible par défaut est le nœud qui est glissé.</p> +Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet de modifier la cible des événements `drag` et `dragend`. La cible par défaut est le nœud qui est glissé. -<pre class="eval"> void addElement( - in Element element - ); -</pre> + void addElement( + in Element element + ); -<h4 id="Parameters_addElement">Parametres</h4> +#### Parametres -<dl> - <dt><code>element </code></dt> - <dd>L'élément à ajouter.</dd> -</dl> +- `element` + - : L'élément à ajouter. -<h3 id="clearData.28.29">clearData()</h3> +### clearData() -<p>Supprime les données associées au type spécifié. L'argument type est facultatif. Si le type est vide ou non spécifié, les données associées à tous les types sont supprimées. Si les données pour le type spécifié n'existent pas, ou le transfert de données ne contient pas de données, cette méthode n'aura aucun effet.</p> +Supprime les données associées au type spécifié. L'argument type est facultatif. Si le type est vide ou non spécifié, les données associées à tous les types sont supprimées. Si les données pour le type spécifié n'existent pas, ou le transfert de données ne contient pas de données, cette méthode n'aura aucun effet. -<pre class="eval"> void clearData( - [optional] in String type - ); -</pre> + void clearData( + [optional] in String type + ); -<h4 id="Parameters_clearData">Parametres</h4> +#### Parametres -<dl> - <dt><code>type </code></dt> - <dd>The type of data to remove.</dd> -</dl> +- `type` + - : The type of data to remove. -<h3 id="getData.28.29">getData()</h3> +### getData() -<p>Récupère les données du type spécifié, ou une chaîne vide si les données de ce type n'existe pas ou le transfert de données ne contient aucune donnée.</p> +Récupère les données du type spécifié, ou une chaîne vide si les données de ce type n'existe pas ou le transfert de données ne contient aucune donnée. -<p>Une erreur de sécurité se produira si vous tentez de récupérer des données lors d'un glisser qui a été spécifié à partir d'un domaine différent ou auquel l'appelant n'a pas accès. Ces données ne seront disponibles qu'à l'issue du déposer au cours d'un événement drop.</p> +Une erreur de sécurité se produira si vous tentez de récupérer des données lors d'un glisser qui a été spécifié à partir d'un domaine différent ou auquel l'appelant n'a pas accès. Ces données ne seront disponibles qu'à l'issue du déposer au cours d'un événement drop. -<pre class="eval"> void getData( - in String type - ); -</pre> + void getData( + in String type + ); -<h4 id="Parameters_getData">Parametres</h4> +#### Parametres -<dl> - <dt><code>type </code></dt> - <dd>Le type de donnée à récupérer.</dd> -</dl> +- `type` + - : Le type de donnée à récupérer. -<h3 id="setData.28.29">setData()</h3> +### setData() -<p>Définit une donnée pour le type spécifié. Si des données pour le type n'existe pas, elle est ajoutée à la fin, de telle sorte que le dernier élément dans la liste des types sera le nouveau format. Si une donnée pour le type existe déjà, la donnée existante est remplacée à la même position. C'est-à-dire que l'ordre de la liste des types ne change pas lors du remplacement de la donnée d'un même type.</p> +Définit une donnée pour le type spécifié. Si des données pour le type n'existe pas, elle est ajoutée à la fin, de telle sorte que le dernier élément dans la liste des types sera le nouveau format. Si une donnée pour le type existe déjà, la donnée existante est remplacée à la même position. C'est-à-dire que l'ordre de la liste des types ne change pas lors du remplacement de la donnée d'un même type. -<pre class="eval"> void setData( - in String type, - in String data - ); -</pre> + void setData( + in String type, + in String data + ); -<h4 id="Parameters_setData">Parametres</h4> +#### Parametres -<dl> - <dt><code>type </code></dt> - <dd>Le type de la donnée à ajouter.</dd> - <dt><code>data </code></dt> - <dd>La donnée à ajouter.</dd> -</dl> +- `type` + - : Le type de la donnée à ajouter. +- `data` + - : La donnée à ajouter. -<h3 id="setDragImage.28.29">setDragImage()</h3> +### setDragImage() -<p>Définit l'image à utiliser pour un glisser, si une image personnalisée est souhaitée. Cette méthode est rarement utilisée, dans la mesure oú une image par défaut est créée à partir du nœud glissé.<br> - <br> - Si le nœud est un élément HTML img, un élément canvas HTML ou un élément d'image XUL, la donnée image est utilisée. Sinon, l'image doit être un nœud visible et l'image utilisée pendant le glisser est créée à partir de ce noeud. Si l'image est null, toute image personnalisé est effacée et la valeur par défaut est utilisée à la place.<br> - <br> - Les coordonnées spécifient le décalage à l'intérieur de l'image spécifiant la position du curseur de la souris. Pour centrer l'image, par exemple, utiliser des valeurs qui sont la moitié de la largeur et de la hauteur de l'image.</p> +Définit l'image à utiliser pour un glisser, si une image personnalisée est souhaitée. Cette méthode est rarement utilisée, dans la mesure oú une image par défaut est créée à partir du nœud glissé. -<pre class="eval"> void setDragImage( - in Element image, - in long x, - in long y - ); -</pre> +Si le nœud est un élément HTML img, un élément canvas HTML ou un élément d'image XUL, la donnée image est utilisée. Sinon, l'image doit être un nœud visible et l'image utilisée pendant le glisser est créée à partir de ce noeud. Si l'image est null, toute image personnalisé est effacée et la valeur par défaut est utilisée à la place. -<h4 id="Parameters_setDragImage">Parametres</h4> +Les coordonnées spécifient le décalage à l'intérieur de l'image spécifiant la position du curseur de la souris. Pour centrer l'image, par exemple, utiliser des valeurs qui sont la moitié de la largeur et de la hauteur de l'image. -<dl> - <dt><code>image </code></dt> - <dd>Un élément à utiliser comme image pendant le glisser</dd> - <dt><code>x </code></dt> - <dd>Décalage horizontal à l'intérieur de l'image.</dd> - <dt><code>y </code></dt> - <dd>Décalage vertical à l'intérieur de l'image.</dd> -</dl> + void setDragImage( + in Element image, + in long x, + in long y + ); -<h3 id="mozClearDataAt.28.29">mozClearDataAt()</h3> +#### Parametres -<p>Supprime les données associées au format pour un élément à l'index spécifié. L'index est compris entre zéro et le nombre d'éléments moins un.<br> - <br> - Si le dernier format de l'élément est supprimé, l'élément entier est retiré, réduisant <code>mozItemCount</code> par un.<br> - <br> - Si la liste <code>format</code> est vide, alors les données associées à tous les formats sont supprimées. Si le format n'est pas trouvé, alors cette méthode n'a aucun effet.<br> - </p> +- `image` + - : Un élément à utiliser comme image pendant le glisser +- `x` + - : Décalage horizontal à l'intérieur de l'image. +- `y` + - : Décalage vertical à l'intérieur de l'image. -<div class="note"> - <p><strong>Note :</strong> Cette méthode est spécifique à Gecko.</p> -</div> +### mozClearDataAt() -<pre class="eval"> void mozClearDataAt( - [optional] in String type, - in unsigned long index - ); -</pre> +Supprime les données associées au format pour un élément à l'index spécifié. L'index est compris entre zéro et le nombre d'éléments moins un. -<h4 id="Parameters_mozClearDataAt">Parametres</h4> +Si le dernier format de l'élément est supprimé, l'élément entier est retiré, réduisant `mozItemCount` par un. -<dl> - <dt><code>type </code></dt> - <dd>Le type de la donnée à supprimer.</dd> - <dt><code>index </code></dt> - <dd>L'index de la donnée à supprimer.</dd> -</dl> +Si la liste `format` est vide, alors les données associées à tous les formats sont supprimées. Si le format n'est pas trouvé, alors cette méthode n'a aucun effet. -<h3 id="mozGetDataAt.28.29">mozGetDataAt()</h3> -<p>Récupère les données associées au format donné pour un élément à l'index spécifié, ou null si elle n'existe pas. L'indice devrait être compris entre zéro et le nombre d'éléments moins un.</p> -<div class="note"> - <p><strong>Note :</strong> Cette méthode est spécifique à Gecko.</p> -</div> +> **Note :** Cette méthode est spécifique à Gecko. -<pre class="eval"> nsIVariant mozGetDataAt( - [optional] in String type, - in unsigned long index - ); -</pre> - -<h4 id="Parameters_mozClearDataAt">Parametres</h4> - -<dl> - <dt><code>type </code></dt> - <dd>Le type de donnée à récupérer.</dd> - <dt><code>index </code></dt> - <dd>L'indice de la donnée à récupérer.</dd> -</dl> - -<h3 id="mozSetDataAt.28.29">mozSetDataAt()</h3> - -<p>Un transfert de données peut stocker plusieurs éléments, chacun à un index commençant à zéro. <code>mozSetDataAt(</code><code>)</code> ne peut être appelé qu'avec un index inférieur à <code>mozItemCount,</code> auquel cas un élément existant est modifié, ou égal à <code>mozItemCount,</code> auquel cas un nouvel élément est ajouté, et <code>mozItemCount</code> est incrémenté de un.<br> - <br> - Les données doivent être ajoutées par ordre de préférence, avec le format le plus spécifique ajouté en premier et le format moins spécifique ajouté en dernier. Si la donnée du format spécifié existe déjà, elle est remplacée dans la même position que la donnée précédente.<br> - <br> - La donnée doit être une chaîne, ou un type primitif booléen, ou un type numérique (qui sera converti en une chaîne), ou une <a href="/fr/docs/XPCOM_Interface_Reference/nsISupports">nsISupports</a>.</p> - -<div class="note"> - <p><strong>Note :</strong> Cette méthode est spécifique à Gecko.</p> -</div> - -<pre class="eval"> void mozSetDataAt( - [optional] in String type, - in nsIVariant data, - in unsigned long index - ); -</pre> - -<h4 id="Parameters_mozSetDataAt">Parametres</h4> - -<dl> - <dt><code>type </code></dt> - <dd>Le type de donnée à ajouter.</dd> - <dt><code>data </code></dt> - <dd>La donnée à ajouter.</dd> - <dt><code>index </code></dt> - <dd>L'index de la donnée à ajouter.</dd> -</dl> - -<h3 id="mozTypesAt.28.29">mozTypesAt()</h3> - -<p>Contient une liste des types de format des données qui sont stockées pour un élément à l'index spécifié. Si l'index n'est pas dans compris entre 0 et le nombre d'éléments moins un, une liste de chaîne vide est retournée.</p> - -<div class="note"> - <p><strong>Note :</strong> Cette méthode est spécifique à Gecko.</p> -</div> - -<pre class="eval"> nsIVariant mozTypesAt( - in unsigned long index - ); -</pre> - -<h4 id="Parameters_mozTypesAt">Parameters</h4> - -<dl> - <dt><code>index </code></dt> - <dd>L'index de la donnée pour laquelle récupérer les types.</dd> -</dl> - -<h2 id="See_also">Voir Aussi</h2> - -<p><a href="/En/DragDrop/Drag_and_Drop">Drag and Drop</a></p> + void mozClearDataAt( + [optional] in String type, + in unsigned long index + ); + +#### Parametres + +- `type` + - : Le type de la donnée à supprimer. +- `index` + - : L'index de la donnée à supprimer. + +### mozGetDataAt() + +Récupère les données associées au format donné pour un élément à l'index spécifié, ou null si elle n'existe pas. L'indice devrait être compris entre zéro et le nombre d'éléments moins un. + +> **Note :** Cette méthode est spécifique à Gecko. + + nsIVariant mozGetDataAt( + [optional] in String type, + in unsigned long index + ); + +#### Parametres + +- `type` + - : Le type de donnée à récupérer. +- `index` + - : L'indice de la donnée à récupérer. + +### mozSetDataAt() + +Un transfert de données peut stocker plusieurs éléments, chacun à un index commençant à zéro. ` mozSetDataAt(``) ` ne peut être appelé qu'avec un index inférieur à `mozItemCount,` auquel cas un élément existant est modifié, ou égal à `mozItemCount,` auquel cas un nouvel élément est ajouté, et `mozItemCount` est incrémenté de un. + +Les données doivent être ajoutées par ordre de préférence, avec le format le plus spécifique ajouté en premier et le format moins spécifique ajouté en dernier. Si la donnée du format spécifié existe déjà, elle est remplacée dans la même position que la donnée précédente. + +La donnée doit être une chaîne, ou un type primitif booléen, ou un type numérique (qui sera converti en une chaîne), ou une [nsISupports](/fr/docs/XPCOM_Interface_Reference/nsISupports). + +> **Note :** Cette méthode est spécifique à Gecko. + + void mozSetDataAt( + [optional] in String type, + in nsIVariant data, + in unsigned long index + ); + +#### Parametres + +- `type` + - : Le type de donnée à ajouter. +- `data` + - : La donnée à ajouter. +- `index` + - : L'index de la donnée à ajouter. + +### mozTypesAt() + +Contient une liste des types de format des données qui sont stockées pour un élément à l'index spécifié. Si l'index n'est pas dans compris entre 0 et le nombre d'éléments moins un, une liste de chaîne vide est retournée. + +> **Note :** Cette méthode est spécifique à Gecko. + + nsIVariant mozTypesAt( + in unsigned long index + ); + +#### Parameters + +- `index` + - : L'index de la donnée pour laquelle récupérer les types. + +## Voir Aussi + +[Drag and Drop](/En/DragDrop/Drag_and_Drop) diff --git a/files/fr/web/api/dedicatedworkerglobalscope/close/index.md b/files/fr/web/api/dedicatedworkerglobalscope/close/index.md index 919907cd8f..784451dfea 100644 --- a/files/fr/web/api/dedicatedworkerglobalscope/close/index.md +++ b/files/fr/web/api/dedicatedworkerglobalscope/close/index.md @@ -9,47 +9,38 @@ tags: - Worker translation_of: Web/API/DedicatedWorkerGlobalScope/close --- -<p>{{APIRef("Web Workers API")}}</p> +{{APIRef("Web Workers API")}} -<p>La méthode <code><strong>close()</strong></code> de l'interface {{domxref("DedicatedWorkerGlobalScope")}} ferme toutes les tâches placées dans la boucle de l'évènement <code>DedicatedWorkerGlobalScope</code>, fermant effectivement cette portée particulière.</p> +La méthode **`close()`** de l'interface {{domxref("DedicatedWorkerGlobalScope")}} ferme toutes les tâches placées dans la boucle de l'évènement `DedicatedWorkerGlobalScope`, fermant effectivement cette portée particulière. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">self.close();</pre> +```js +self.close(); +``` -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Si vous souhaitez fermer votre instance de travail depuis l'intérieur du worker, vous pouvez appeler ce qui suit :</p> +Si vous souhaitez fermer votre instance de travail depuis l'intérieur du worker, vous pouvez appeler ce qui suit : -<pre class="brush: js">close();</pre> +```js +close(); +``` -<p><code>close()</code> et <code>self.close()</code> sont effectivement équivalents — les deux représentent une instruction <code>close()</code> qui est appelée de l'intérieur de la portée interne du worker.</p> +`close()` et `self.close()` sont effectivement équivalents — les deux représentent une instruction `close()` qui est appelée de l'intérieur de la portée interne du worker. -<div class="note"> -<p><strong>Note :</strong> Il y a une autre façon d'arrêter le worker depuis le fil principal : la méthode {{domxref("Worker.terminate")}}.</p> -</div> +> **Note :** Il y a une autre façon d'arrêter le worker depuis le fil principal : la méthode {{domxref("Worker.terminate")}}. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-close', 'close()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-close', 'close()')}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DedicatedWorkerGlobalScope.close")}}</p> +{{Compat("api.DedicatedWorkerGlobalScope.close")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<p>{{domxref("DedicatedWorkerGlobalScope")}}</p> +{{domxref("DedicatedWorkerGlobalScope")}} diff --git a/files/fr/web/api/dedicatedworkerglobalscope/index.md b/files/fr/web/api/dedicatedworkerglobalscope/index.md index 20417cc38e..6f8edf15bd 100644 --- a/files/fr/web/api/dedicatedworkerglobalscope/index.md +++ b/files/fr/web/api/dedicatedworkerglobalscope/index.md @@ -3,112 +3,83 @@ title: DedicatedWorkerGlobalScope slug: Web/API/DedicatedWorkerGlobalScope translation_of: Web/API/DedicatedWorkerGlobalScope --- -<p>{{APIRef("Web Workers API")}}</p> - -<p>L'objet <strong><code>DedicatedWorkerGlobalScope</code></strong> (le contexte global du {{domxref("Worker")}}) est accessible au moyen du mot clé {{domxref("window.self","self")}}. Certaines fonctions globales additionnelles, des espaces de nom d'objets, et des constructeurs, non associés typiquement au contexte global d'un worker, et néanmoins disponibles, sont listés dans la <a href="/fr/docs/Web/JavaScript/Reference">Référence JavaScript</a>. Consultez aussi : <a href="/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a>.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<p><em>Cette interface hérite des propriétés de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p> - -<dl> - <dt>{{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}}</dt> - <dd>Le nom du {{domxref("Worker")}} optionnellement donné lors de la création du worker avec le constructeur {{domxref("Worker.Worker", "Worker()")}}. Il est souvent utilisé pour du débogage.</dd> -</dl> - -<h3 id="Propriétés_héritées_de_WorkerGlobalScope">Propriétés héritées de WorkerGlobalScope</h3> - -<dl> - <dt>{{domxref("WorkerGlobalScope.self")}}</dt> - <dd>Retourne une référence d'objet à l'objet <code>DedicatedWorkerGlobalScope</code> lui-même.</dd> - <dt>{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}</dt> - <dd>Retourne la {{domxref("Console")}} associée au worker.</dd> - <dt>{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}</dt> - <dd>Retourne la {{domxref("WorkerLocation")}} associée au worker. <code>WorkerLocation</code> est un objet location spécifique, essentiellement un sous-ensemble de {{domxref("Location")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers.</dd> - <dt>{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}</dt> - <dd>Retourne le {{domxref("WorkerNavigator")}} associé au worker. <code>WorkerNavigator</code> est un objet navigator spécifique, essentiellement un sous-ensemble de {{domxref("Navigator")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers.</dd> - <dt>{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}</dt> - <dd>Retourne l'objet {{domxref("Performance")}} associé au worker, qui correspond à l'objet performance normal, avec seulement à disposition un sous-ensemble de ses propriétés et méthodes.</dd> -</dl> - -<h3 id="Gestionnaires_dévénement">Gestionnaires d'événement</h3> - -<p><em>Cette interface hérite des gestionnaires d'événement de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les gestionnaires d'événement de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p> - -<dl> - <dt>{{domxref("DedicatedWorkerGlobalScope.onmessage")}}</dt> - <dd>C'est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsqu'un événement {{event("message")}} est déclenché. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le worker reçoit un message du document qui l'a initialisé (i.e. à partir de la méthode {{domxref("Worker.postMessage")}}.)</dd> - <dt>{{domxref("DedicatedWorkerGlobalScope.onmessageerror")}}</dt> - <dd>C'est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsqu'un événement {{event("messageerror")}} est déclenché.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p><em>Cette interface hérite des méthodes de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les méthodes de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p> - -<dl> - <dt>{{domxref("WorkerGlobalScope.close()")}}</dt> - <dd>Annule toute tâche en attente dans la boucle d'événement du <code>WorkerGlobalScope</code>, mettant alors fin à ce contexte précis.</dd> - <dt>{{domxref("DedicatedWorkerGlobalScope.postMessage")}}</dt> - <dd>Envoie un message — qui peut comprendre <code>n'importe quel</code> objet JavaScript — au document parent qui a préalablement engendré le worker.</dd> -</dl> - -<h3 id="Héritées_de_WorkerGlobalScope">Héritées de WorkerGlobalScope</h3> - -<dl> - <dt>{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}</dt> - <dd>Écrit un message dans la console.</dd> - <dt>{{domxref("WorkerGlobalScope.importScripts()")}}</dt> - <dd>Importe un ou plusieurs scripts dans le contexte du worker. Vous pouvez spécifier autant de fichiers que souhaité, en les séparant par des virgules. Par exemple: <code>importScripts('foo.js', 'bar.js');</code></dd> -</dl> - -<h3 id="Implémentées_à_partir_dautres_endroits">Implémentées à partir d'autres endroits</h3> - -<dl> - <dt>{{domxref("WindowBase64.atob()")}}</dt> - <dd>Décode une chaîne de données qui a été encodée en base-64.</dd> - <dt>{{domxref("WindowBase64.btoa()")}}</dt> - <dd>Crée une chaîne ASCII en base-64 à partir d'une chaîne de données binaires.</dd> - <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> - <dd>Annule l'exécution répétée initiée par {{domxref("WindowTimers.setInterval()")}}.</dd> - <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> - <dd>Annule l'exécution répété initiée par {{domxref("WindowTimers.setTimeout()")}}.</dd> - <dt>{{domxref("WindowTimers.setInterval()")}}</dt> - <dd>Planifie l'exécution d'une fonction toutes les X millisecondes.</dd> - <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> - <dd>Fixe un délai pour l'exécution d'une fonction.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#dedicatedworkerglobalscope', 'DedicatedWorkerGlobalScope')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> - - -<p>{{Compat("api.DedicatedWorkerGlobalScope")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("Worker")}}</li> - <li>{{domxref("WorkerGlobalScope")}}</li> - <li><a href="/fr/docs/Web/Guide/Performance/Using_web_workers">Utilisation des web workers</a></li> - <li><a href="/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a></li> -</ul> +{{APIRef("Web Workers API")}} + +L'objet **`DedicatedWorkerGlobalScope`** (le contexte global du {{domxref("Worker")}}) est accessible au moyen du mot clé {{domxref("window.self","self")}}. Certaines fonctions globales additionnelles, des espaces de nom d'objets, et des constructeurs, non associés typiquement au contexte global d'un worker, et néanmoins disponibles, sont listés dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). Consultez aussi : [Fonctions et classes disponibles dans les Web Workers](/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers). + +## Propriétés + +_Cette interface hérite des propriétés de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}._ + +- {{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}} + - : Le nom du {{domxref("Worker")}} optionnellement donné lors de la création du worker avec le constructeur {{domxref("Worker.Worker", "Worker()")}}. Il est souvent utilisé pour du débogage. + +### Propriétés héritées de WorkerGlobalScope + +- {{domxref("WorkerGlobalScope.self")}} + - : Retourne une référence d'objet à l'objet `DedicatedWorkerGlobalScope` lui-même. +- {{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}} + - : Retourne la {{domxref("Console")}} associée au worker. +- {{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}} + - : Retourne la {{domxref("WorkerLocation")}} associée au worker. `WorkerLocation` est un objet location spécifique, essentiellement un sous-ensemble de {{domxref("Location")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers. +- {{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}} + - : Retourne le {{domxref("WorkerNavigator")}} associé au worker. `WorkerNavigator` est un objet navigator spécifique, essentiellement un sous-ensemble de {{domxref("Navigator")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers. +- {{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}} + - : Retourne l'objet {{domxref("Performance")}} associé au worker, qui correspond à l'objet performance normal, avec seulement à disposition un sous-ensemble de ses propriétés et méthodes. + +### Gestionnaires d'événement + +_Cette interface hérite des gestionnaires d'événement de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les gestionnaires d'événement de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}._ + +- {{domxref("DedicatedWorkerGlobalScope.onmessage")}} + - : C'est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsqu'un événement {{event("message")}} est déclenché. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le worker reçoit un message du document qui l'a initialisé (i.e. à partir de la méthode {{domxref("Worker.postMessage")}}.) +- {{domxref("DedicatedWorkerGlobalScope.onmessageerror")}} + - : C'est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsqu'un événement {{event("messageerror")}} est déclenché. + +## Méthodes + +_Cette interface hérite des méthodes de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les méthodes de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}._ + +- {{domxref("WorkerGlobalScope.close()")}} + - : Annule toute tâche en attente dans la boucle d'événement du `WorkerGlobalScope`, mettant alors fin à ce contexte précis. +- {{domxref("DedicatedWorkerGlobalScope.postMessage")}} + - : Envoie un message — qui peut comprendre `n'importe quel` objet JavaScript — au document parent qui a préalablement engendré le worker. + +### Héritées de WorkerGlobalScope + +- {{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}} + - : Écrit un message dans la console. +- {{domxref("WorkerGlobalScope.importScripts()")}} + - : Importe un ou plusieurs scripts dans le contexte du worker. Vous pouvez spécifier autant de fichiers que souhaité, en les séparant par des virgules. Par exemple: `importScripts('foo.js', 'bar.js');` + +### Implémentées à partir d'autres endroits + +- {{domxref("WindowBase64.atob()")}} + - : Décode une chaîne de données qui a été encodée en base-64. +- {{domxref("WindowBase64.btoa()")}} + - : Crée une chaîne ASCII en base-64 à partir d'une chaîne de données binaires. +- {{domxref("WindowTimers.clearInterval()")}} + - : Annule l'exécution répétée initiée par {{domxref("WindowTimers.setInterval()")}}. +- {{domxref("WindowTimers.clearTimeout()")}} + - : Annule l'exécution répété initiée par {{domxref("WindowTimers.setTimeout()")}}. +- {{domxref("WindowTimers.setInterval()")}} + - : Planifie l'exécution d'une fonction toutes les X millisecondes. +- {{domxref("WindowTimers.setTimeout()")}} + - : Fixe un délai pour l'exécution d'une fonction. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', '#dedicatedworkerglobalscope', 'DedicatedWorkerGlobalScope')}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.DedicatedWorkerGlobalScope")}} + +## Voir aussi + +- {{domxref("Worker")}} +- {{domxref("WorkerGlobalScope")}} +- [Utilisation des web workers](/fr/docs/Web/Guide/Performance/Using_web_workers) +- [Fonctions et classes disponibles dans les Web Workers](/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers) diff --git a/files/fr/web/api/dedicatedworkerglobalscope/name/index.md b/files/fr/web/api/dedicatedworkerglobalscope/name/index.md index fb63f1cc74..1082fed843 100644 --- a/files/fr/web/api/dedicatedworkerglobalscope/name/index.md +++ b/files/fr/web/api/dedicatedworkerglobalscope/name/index.md @@ -9,53 +9,44 @@ tags: - Worker translation_of: Web/API/DedicatedWorkerGlobalScope/name --- -<div>{{APIRef("Web Workers API")}}</div> +{{APIRef("Web Workers API")}} -<p>La propriété en lecture seule <code><strong>name</strong></code> de l'interface {{domxref("DedicatedWorkerGlobalScope")}} renvoie le nom qui a été (facultativement) donné au {{domxref("Worker")}} lors de sa création. C'est le nom que le constructeur {{domxref("Worker.Worker", "Worker()")}} peut transmettre pour obtenir une référence à {{domxref("DedicatedWorkerGlobalScope")}}.</p> +La propriété en lecture seule **`name`** de l'interface {{domxref("DedicatedWorkerGlobalScope")}} renvoie le nom qui a été (facultativement) donné au {{domxref("Worker")}} lors de sa création. C'est le nom que le constructeur {{domxref("Worker.Worker", "Worker()")}} peut transmettre pour obtenir une référence à {{domxref("DedicatedWorkerGlobalScope")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var nameObj = self.name;</pre> + var nameObj = self.name; -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</p> +Une {{domxref("DOMString")}} (_chaîne de caractères_). -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Un worker est créé en utilisant un constructeur avec une option de <code>name</code> :</p> +Un worker est créé en utilisant un constructeur avec une option de `name` : -<pre class="brush: js">var myWorker = new Worker("worker.js", { name : "myWorker" });</pre> +```js +var myWorker = new Worker("worker.js", { name : "myWorker" }); +``` -<p>le {{domxref("DedicatedWorkerGlobalScope")}} aura désormais le nom de "myWorker", qui peut être renvoyé pendant l'exécution</p> +le {{domxref("DedicatedWorkerGlobalScope")}} aura désormais le nom de "myWorker", qui peut être renvoyé pendant l'exécution -<pre class="brush: js">self.name</pre> +```js +self.name +``` -<p>à l'intérieur du worker.</p> +à l'intérieur du worker. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-name', 'name')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-name', 'name')}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DedicatedWorkerGlobalScope.name")}}</p> +{{Compat("api.DedicatedWorkerGlobalScope.name")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DedicatedWorkerGlobalScope")}}</li> -</ul> +- {{domxref("DedicatedWorkerGlobalScope")}} diff --git a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md index 64ab8dff1d..b2ac98e787 100644 --- a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md +++ b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md @@ -11,61 +11,43 @@ tags: - axes translation_of: Web/API/DeviceMotionEvent/accelerationIncludingGravity --- -<p>{{ ApiRef("Device Orientation Events") }}</p> +{{ ApiRef("Device Orientation Events") }} -<p>La propriété <strong><code>accelerationIncludingGravity</code></strong> renvoie la valeur d'accélération enregistrée par l'appareil, en <a href="https://fr.wikipedia.org/wiki/M%C3%A8tre_par_seconde_carr%C3%A9e">mètres par seconde au carré (m/s<sup>2</sup>)</a>. Contrairement à {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération de l'appareil induite par l'utilisateur et de celle provoquée par la gravité.</p> +La propriété **`accelerationIncludingGravity`** renvoie la valeur d'accélération enregistrée par l'appareil, en [mètres par seconde au carré (m/s<sup>2</sup>)](https://fr.wikipedia.org/wiki/M%C3%A8tre_par_seconde_carr%C3%A9e). Contrairement à {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération de l'appareil induite par l'utilisateur et de celle provoquée par la gravité. -<p>Cette valeur n'est pas aussi utile que {{domxref("DeviceMotionEvent.acceleration")}}, mais elle peut être la seule disponible, par exemple pour un appareil qui ne peut supprimer la gravité des données d'accélération puisqu'il ne l'utilise pas, comme les périphériques sans gyroscope.</p> +Cette valeur n'est pas aussi utile que {{domxref("DeviceMotionEvent.acceleration")}}, mais elle peut être la seule disponible, par exemple pour un appareil qui ne peut supprimer la gravité des données d'accélération puisqu'il ne l'utilise pas, comme les périphériques sans gyroscope. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval">var acceleration = <em>instanceOfDeviceMotionEvent</em>.accelerationIncludingGravity; -</pre> + var acceleration = instanceOfDeviceMotionEvent.accelerationIncludingGravity; -<h2 id="Example">Valeur</h2> +## Valeur -<p>La propriété <code>accelerationIncludingGravity</code> est un objet fournissant une information sur l'accélération des 3 axes. Pour chacun d'eux, elle est représentée par leur propre propriété :</p> +La propriété `accelerationIncludingGravity` est un objet fournissant une information sur l'accélération des 3 axes. Pour chacun d'eux, elle est représentée par leur propre propriété : -<dl> - <dt><code>x</code></dt> - <dd>Représente l'accélération sur l'axe x qui est l'axe est-ouest.</dd> - <dt><code>y</code></dt> - <dd>Représente l'accélération sur l'axe y qui est l'axe nord-sud</dd> - <dt><code>z</code></dt> - <dd>Représente l'accélération sur l'axe z qui est l'axe haut-bas</dd> -</dl> +- `x` + - : Représente l'accélération sur l'axe x qui est l'axe est-ouest. +- `y` + - : Représente l'accélération sur l'axe y qui est l'axe nord-sud +- `z` + - : Représente l'accélération sur l'axe z qui est l'axe haut-bas -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DeviceMotionEvent.accelerationIncludingGravity")}}</p> +{{Compat("api.DeviceMotionEvent.accelerationIncludingGravity")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li> - <li>{{ event("devicemotion") }}</li> - <li>{{ domxref("window.ondevicemotion") }}</li> - <li>{{ event("deviceorientation") }}</li> - <li>{{ domxref("DeviceOrientationEvent") }}</li> - <li><a href="/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained">Détecter l'orientation de l'appareil</a></li> - <li><a href="/fr/docs/Web/Guide/DOM/Events/Les_donn%C3%A9es_d_orientation_et_de_mouvement_expliqu%C3%A9es">Les données d'orientation et de mouvement expliquées</a></li> -</ul> +- {{ domxref("DeviceMotionEvent.acceleration") }} +- {{ event("devicemotion") }} +- {{ domxref("window.ondevicemotion") }} +- {{ event("deviceorientation") }} +- {{ domxref("DeviceOrientationEvent") }} +- [Détecter l'orientation de l'appareil](/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained) +- [Les données d'orientation et de mouvement expliquées](/fr/docs/Web/Guide/DOM/Events/Les_donn%C3%A9es_d_orientation_et_de_mouvement_expliqu%C3%A9es) diff --git a/files/fr/web/api/devicemotionevent/devicemotionevent/index.md b/files/fr/web/api/devicemotionevent/devicemotionevent/index.md index c8fa453f7e..b72ca21c2d 100644 --- a/files/fr/web/api/devicemotionevent/devicemotionevent/index.md +++ b/files/fr/web/api/devicemotionevent/devicemotionevent/index.md @@ -10,47 +10,43 @@ tags: - axes translation_of: Web/API/DeviceMotionEvent/DeviceMotionEvent --- -<p>{{APIRef("Device Orientation Events")}}{{Non-standard_header}}</p> - -<p>Le constructeur <strong><code>DeviceMotionEvent</code></strong> crée un nouveau {{domxref("DeviceMotionEvent")}}.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">var deviceMotionEvent = new DeviceMotionEvent(type[, options])</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><em>type</em></dt> - <dd>Doit être <code>"devicemotion"</code>.</dd> - <dt><em>options</em> {{optional_inline}}</dt> - <dd><p>Les options sont les suivantes :</p> - <ul> - <li><code>acceleration</code> : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</li> - <li><code>accelerationIncludingGravity</code> : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</li> - <li><code>rotationRate</code> : un objet donnant la vitesse de rotation du changement d'orientation de l'appareil sur les axes alpha, beta et gamma. La vitesse de rotation est exprimée en degrés par seconde.</li> - <li><code>interval</code> : Un nombre représentant l'intervalle de temps, en millisecondes, avant d'obtenir des données à partir de l'appareil.</li> - </ul> - </dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.DeviceMotionEvent.DeviceMotionEvent")}}</p> +{{APIRef("Device Orientation Events")}}{{Non-standard_header}} + +Le constructeur **`DeviceMotionEvent`** crée un nouveau {{domxref("DeviceMotionEvent")}}. + +## Syntaxe + + var deviceMotionEvent = new DeviceMotionEvent(type[, options]) + +### Paramètres + +- _type_ + - : Doit être `"devicemotion"`. +- _options_ {{optional_inline}} + + - : Les options sont les suivantes : + + - `acceleration` : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en [m/s<sup>2</sup>](https://en.wikipedia.org/wiki/Meter_per_second_squared) + + <sup>2</sup> + + . + + - `accelerationIncludingGravity` : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en [m/s<sup>2</sup>](https://en.wikipedia.org/wiki/Meter_per_second_squared) + + <sup>2</sup> + + . + + - `rotationRate` : un objet donnant la vitesse de rotation du changement d'orientation de l'appareil sur les axes alpha, beta et gamma. La vitesse de rotation est exprimée en degrés par seconde. + - `interval` : Un nombre représentant l'intervalle de temps, en millisecondes, avant d'obtenir des données à partir de l'appareil. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.DeviceMotionEvent.DeviceMotionEvent")}} diff --git a/files/fr/web/api/devicemotionevent/index.md b/files/fr/web/api/devicemotionevent/index.md index 259f1c68b0..f23131a75f 100644 --- a/files/fr/web/api/devicemotionevent/index.md +++ b/files/fr/web/api/devicemotionevent/index.md @@ -12,71 +12,52 @@ tags: - TopicStub translation_of: Web/API/DeviceMotionEvent --- -<p>{{apiref("Device Orientation Events")}}{{SeeCompatTable}}</p> +{{apiref("Device Orientation Events")}}{{SeeCompatTable}} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p><code>DeviceMotionEvent</code> fournit aux développeurs Web des informations sur la vitesse des changements de position et d'orientation de l'appareil.</p> +`DeviceMotionEvent` fournit aux développeurs Web des informations sur la vitesse des changements de position et d'orientation de l'appareil. -<div class="warning"> -<p><strong>Attention :</strong> Actuellement, Firefox et Chrome ne gèrent pas les coordonnées de la même manière. Faites attention à cela lorsque vous les utilisez.</p> -</div> +> **Attention :** Actuellement, Firefox et Chrome ne gèrent pas les coordonnées de la même manière. Faites attention à cela lorsque vous les utilisez. -<h2 id="Constructeur">Constructeur</h2> +## Constructeur -<dl> - <dt>{{domxref("DeviceMotionEvent.DeviceMotionEvent","DeviceMotionEvent.DeviceMotionEvent()")}}</dt> - <dd><p>Crée un nouvel <code>DeviceMotionEvent</code>.</p></dd> -</dl> +- {{domxref("DeviceMotionEvent.DeviceMotionEvent","DeviceMotionEvent.DeviceMotionEvent()")}} + - : Crée un nouvel `DeviceMotionEvent`. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt>{{domxref("DeviceMotionEvent.acceleration")}} {{readonlyinline}}</dt> - <dd>Un objet donnant l'accélération du dispositif sur les trois axes X, Y et Z. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</dd> - <dt>{{domxref("DeviceMotionEvent.accelerationIncludingGravity")}} {{readonlyinline}}</dt> - <dd>Un objet donnant l'accélération de l'appareil sur les trois axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</dd> - <dt>{{domxref("DeviceMotionEvent.rotationRate")}} {{readonlyinline}}</dt> - <dd>Un objet donnant le taux de changement d'orientation de l'appareil sur les trois axes d'orientation alpha, bêta et gamma. Le taux de rotation est exprimé en degrés par seconde.</dd> - <dt>{{domxref("DeviceMotionEvent.interval")}} {{readonlyinline}}</dt> - <dd>Nombre représentant l'intervalle de temps, en millisecondes, auquel les données sont obtenues à partir de l'appareil.</dd> -</dl> +- {{domxref("DeviceMotionEvent.acceleration")}} {{readonlyinline}} + - : Un objet donnant l'accélération du dispositif sur les trois axes X, Y et Z. L'accélération est exprimée en [m/s<sup>2</sup>](https://en.wikipedia.org/wiki/Meter_per_second_squared). +- {{domxref("DeviceMotionEvent.accelerationIncludingGravity")}} {{readonlyinline}} + - : Un objet donnant l'accélération de l'appareil sur les trois axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en [m/s<sup>2</sup>](https://en.wikipedia.org/wiki/Meter_per_second_squared). +- {{domxref("DeviceMotionEvent.rotationRate")}} {{readonlyinline}} + - : Un objet donnant le taux de changement d'orientation de l'appareil sur les trois axes d'orientation alpha, bêta et gamma. Le taux de rotation est exprimé en degrés par seconde. +- {{domxref("DeviceMotionEvent.interval")}} {{readonlyinline}} + - : Nombre représentant l'intervalle de temps, en millisecondes, auquel les données sont obtenues à partir de l'appareil. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">window.addEventListener('devicemotion', function(event) { +```js +window.addEventListener('devicemotion', function(event) { console.log(event.acceleration.x + ' m/s2'); -});</pre> +}); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DeviceMotionEvent")}}</p> +{{Compat("api.DeviceMotionEvent")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{ event("deviceorientation") }}</li> - <li>{{ domxref("DeviceMotionEvent") }}</li> - <li>{{ event("devicemotion") }}</li> - <li><a href="/fr/docs/WebAPI/Detecting_device_orientation">Détection de l'orientation de l'appareil</a></li> - <li><a href="/fr/docs/Web/Guide/Events/Orientation_and_motion_data_explained">Explication des données d'orientation et de mouvement</a></li> -</ul> +- {{ event("deviceorientation") }} +- {{ domxref("DeviceMotionEvent") }} +- {{ event("devicemotion") }} +- [Détection de l'orientation de l'appareil](/fr/docs/WebAPI/Detecting_device_orientation) +- [Explication des données d'orientation et de mouvement](/fr/docs/Web/Guide/Events/Orientation_and_motion_data_explained) diff --git a/files/fr/web/api/devicemotionevent/interval/index.md b/files/fr/web/api/devicemotionevent/interval/index.md index 65ff85c399..80f4374fac 100644 --- a/files/fr/web/api/devicemotionevent/interval/index.md +++ b/files/fr/web/api/devicemotionevent/interval/index.md @@ -7,45 +7,29 @@ tags: - Reference translation_of: Web/API/DeviceMotionEvent/interval --- -<p>{{apiref("Device Orientation Events")}}</p> - -<p>La propriété <strong><code>interval</code></strong> renvoie la granularité temporelle, exprimée en millisecondes, avec laquelle les données relatives aux mouvements sont obtenues du matériel.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">var interval = <em>instanceOfDeviceMotionEvent</em>.interval; -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.DeviceMotionEvent.interval")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{ domxref("DeviceMotionEvent") }}</li> - <li>{{ event("devicemotion") }}</li> - <li>{{ domxref("window.ondevicemotion") }}</li> - <li>{{ event("deviceorientation") }}</li> - <li>{{ domxref("DeviceOrientationEvent") }}</li> - <li><a href="/fr/docs/WebAPI/Detecting_device_orientation">Detecting device orientation</a></li> -</ul> +{{apiref("Device Orientation Events")}} + +La propriété **`interval`** renvoie la granularité temporelle, exprimée en millisecondes, avec laquelle les données relatives aux mouvements sont obtenues du matériel. + +## Syntaxe + + var interval = instanceOfDeviceMotionEvent.interval; + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------- | ---------------------------------------- | ------------ | +| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.DeviceMotionEvent.interval")}} + +## Voir aussi + +- {{ domxref("DeviceMotionEvent") }} +- {{ event("devicemotion") }} +- {{ domxref("window.ondevicemotion") }} +- {{ event("deviceorientation") }} +- {{ domxref("DeviceOrientationEvent") }} +- [Detecting device orientation](/fr/docs/WebAPI/Detecting_device_orientation) diff --git a/files/fr/web/api/devicemotionevent/rotationrate/index.md b/files/fr/web/api/devicemotionevent/rotationrate/index.md index d12e2c76d7..8b29800840 100644 --- a/files/fr/web/api/devicemotionevent/rotationrate/index.md +++ b/files/fr/web/api/devicemotionevent/rotationrate/index.md @@ -10,63 +10,43 @@ tags: - Vitesse translation_of: Web/API/DeviceMotionEvent/rotationRate --- -<p>{{ ApiRef("Device Orientation Events") }}</p> +{{ ApiRef("Device Orientation Events") }} -<p>La propriété <code><strong>rotationRate</strong></code> renvoie la vitesse de rotation de l'appareil autour de chacun de ses axes en degrés par seconde.</p> +La propriété **`rotationRate`** renvoie la vitesse de rotation de l'appareil autour de chacun de ses axes en degrés par seconde. -<div class="note"> - <p><strong>Note :</strong> Si le matériel n'est pas capable de fournir cette information, la propriété renvoie <code>null</code>.</p> -</div> +> **Note :** Si le matériel n'est pas capable de fournir cette information, la propriété renvoie `null`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var rates = <em>instanceOfDeviceMotionEvent</em>.rotationRate; -</pre> + var rates = instanceOfDeviceMotionEvent.rotationRate; -<h2 id="Valeurs">Valeurs</h2> +## Valeurs -<p>La propriété <code>rotationRates</code> est un objet en lecture seule décrivant la vitesse de rotation d'un appareil autour de chacun de ses axes :</p> +La propriété `rotationRates` est un objet en lecture seule décrivant la vitesse de rotation d'un appareil autour de chacun de ses axes : -<dl> - <dt><code>alpha</code></dt> - <dd>La vitesse de rotation de l'appareil sur son axe Z ; c'est-à-dire déplacé autour d'une ligne perpendiculaire à l'écran.</dd> - <dt><code>beta</code></dt> - <dd>La vitesse de rotation de l'appareil sur son axe X ; c'est-à-dire de l'avant vers l'arrière.</dd> - <dt><code>gamma</code></dt> - <dd>La vitesse de rotation de l'appareil sur son axe Y ; c'est-à-dire d'un côté à l'autre.</dd> -</dl> +- `alpha` + - : La vitesse de rotation de l'appareil sur son axe Z ; c'est-à-dire déplacé autour d'une ligne perpendiculaire à l'écran. +- `beta` + - : La vitesse de rotation de l'appareil sur son axe X ; c'est-à-dire de l'avant vers l'arrière. +- `gamma` + - : La vitesse de rotation de l'appareil sur son axe Y ; c'est-à-dire d'un côté à l'autre. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| -------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DeviceMotionEvent.rotationRate")}}</p> +{{Compat("api.DeviceMotionEvent.rotationRate")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{ domxref("DeviceMotionEvent") }}</li> - <li>{{ event("devicemotion") }}</li> - <li>{{ domxref("window.ondevicemotion") }}</li> - <li>{{ event("deviceorientation") }}</li> - <li>{{ domxref("DeviceOrientationEvent") }}</li> - <li><a href="/fr/docs/WebAPI/Detecting_device_orientation">Détecter l'orientation de l'appareil</a></li> - <li><a href="/fr/docs/Web/Guide/DOM/Events/Les_donn%C3%A9es_d_orientation_et_de_mouvement_expliqu%C3%A9es">Les données d'orientation et de mouvement expliquées</a></li> -</ul> +- {{ domxref("DeviceMotionEvent") }} +- {{ event("devicemotion") }} +- {{ domxref("window.ondevicemotion") }} +- {{ event("deviceorientation") }} +- {{ domxref("DeviceOrientationEvent") }} +- [Détecter l'orientation de l'appareil](/fr/docs/WebAPI/Detecting_device_orientation) +- [Les données d'orientation et de mouvement expliquées](/fr/docs/Web/Guide/DOM/Events/Les_donn%C3%A9es_d_orientation_et_de_mouvement_expliqu%C3%A9es) diff --git a/files/fr/web/api/devicemotioneventrotationrate/alpha/index.md b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.md index 219e4cc1e9..f6028bb6fc 100644 --- a/files/fr/web/api/devicemotioneventrotationrate/alpha/index.md +++ b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.md @@ -14,43 +14,27 @@ translation_of: Web/API/DeviceMotionEventRotationRate/alpha translation_of_original: Web/API/DeviceRotationRate/alpha original_slug: Web/API/DeviceRotationRate/alpha --- -<p>{{ ApiRef("Device Orientation Events") }}</p> +{{ ApiRef("Device Orientation Events") }} -<p>Cette propriété indique la vitesse de rotation autour de l'axe Z -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.</p> +Cette propriété indique la vitesse de rotation autour de l'axe Z -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>alpha</em> = <em>deviceRotationRate</em>.alpha; -</pre> + var alpha = deviceRotationRate.alpha; -<p>Cette propriété est en lecture seule.</p> +Cette propriété est en lecture seule. -<h3 id="Return_Value">Valeur retournée</h3> +### Valeur retournée -<dl> - <dt><code>alpha</code></dt> - <dd>Un <code>double</code> indiquant la vitesse de rotation autour de l'axe Z, en degrés par seconde. Voir <a href="/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained">Détecter l'orientation de l'appareil</a> pour plus de détails.</dd> -</dl> +- `alpha` + - : Un `double` indiquant la vitesse de rotation autour de l'axe Z, en degrés par seconde. Voir [Détecter l'orientation de l'appareil](/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained) pour plus de détails. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DeviceMotionEventRotationRate.alpha")}}</p> +{{Compat("api.DeviceMotionEventRotationRate.alpha")}} diff --git a/files/fr/web/api/devicemotioneventrotationrate/beta/index.md b/files/fr/web/api/devicemotioneventrotationrate/beta/index.md index a5868c5ca1..ba8e241fa6 100644 --- a/files/fr/web/api/devicemotioneventrotationrate/beta/index.md +++ b/files/fr/web/api/devicemotioneventrotationrate/beta/index.md @@ -14,43 +14,27 @@ translation_of: Web/API/DeviceMotionEventRotationRate/beta translation_of_original: Web/API/DeviceRotationRate/beta original_slug: Web/API/DeviceRotationRate/beta --- -<p>{{ ApiRef("Device Orientation Events") }}</p> +{{ ApiRef("Device Orientation Events") }} -<p>Cette propriété indique la vitesse de rotation autour de l'axe X -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.</p> +Cette propriété indique la vitesse de rotation autour de l'axe X -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>beta</em> = <em>deviceRotationRate</em>.beta; -</pre> + var beta = deviceRotationRate.beta; -<p>Cette propriété est en lecture seule.</p> +Cette propriété est en lecture seule. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<dl> - <dt><code>beta</code></dt> - <dd>Un <code>double</code> indiquant la vitesse de rotation autour de l'axe X, en degrés par seconde. Voir <a href="/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained">Détecter l'orientation de l'appareil</a> pour plus de détails.</dd> -</dl> +- `beta` + - : Un `double` indiquant la vitesse de rotation autour de l'axe X, en degrés par seconde. Voir [Détecter l'orientation de l'appareil](/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained) pour plus de détails. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DeviceMotionEventRotationRate.beta")}}</p> +{{Compat("api.DeviceMotionEventRotationRate.beta")}} diff --git a/files/fr/web/api/devicemotioneventrotationrate/gamma/index.md b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.md index 09b40183ba..53c7922124 100644 --- a/files/fr/web/api/devicemotioneventrotationrate/gamma/index.md +++ b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.md @@ -14,43 +14,27 @@ translation_of: Web/API/DeviceMotionEventRotationRate/gamma translation_of_original: Web/API/DeviceRotationRate/gamma original_slug: Web/API/DeviceRotationRate/gamma --- -<p>{{ ApiRef("Device Orientation Events") }}</p> +{{ ApiRef("Device Orientation Events") }} -<p>Cette propriété indique la vitesse de rotation autour de l'axe Y -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.</p> +Cette propriété indique la vitesse de rotation autour de l'axe Y -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>gamma</em> = <em>deviceRotationRate</em>.gamma; -</pre> + var gamma = deviceRotationRate.gamma; -<p>Cette propriété est en lecture seule.</p> +Cette propriété est en lecture seule. -<h3 id="Return_Value">Valeur retournée</h3> +### Valeur retournée -<dl> - <dt><code>gamma</code></dt> - <dd>Un <code>double</code> indiquant la vitesse de rotation autour de l'axe Y, en degrés par seconde. Voir <a href="/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained">Détecter l'orientation d'un appareil</a> pour plus de détails.</dd> -</dl> +- `gamma` + - : Un `double` indiquant la vitesse de rotation autour de l'axe Y, en degrés par seconde. Voir [Détecter l'orientation d'un appareil](/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained) pour plus de détails. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DeviceMotionEventRotationRate.gamma")}}</p> +{{Compat("api.DeviceMotionEventRotationRate.gamma")}} diff --git a/files/fr/web/api/devicemotioneventrotationrate/index.md b/files/fr/web/api/devicemotioneventrotationrate/index.md index fb363b6c54..a1a2ea317f 100644 --- a/files/fr/web/api/devicemotioneventrotationrate/index.md +++ b/files/fr/web/api/devicemotioneventrotationrate/index.md @@ -12,40 +12,25 @@ translation_of: Web/API/DeviceMotionEventRotationRate translation_of_original: Web/API/DeviceRotationRate original_slug: Web/API/DeviceRotationRate --- -<p>{{ ApiRef("Device Orientation Events") }} {{SeeCompatTable}}</p> +{{ ApiRef("Device Orientation Events") }} {{SeeCompatTable}} -<p>Un objet <code>DeviceRotationRate</code> fournit une information sur la vitesse avec laquelle un appareil est en rotation autour des 3 axes.</p> +Un objet `DeviceRotationRate` fournit une information sur la vitesse avec laquelle un appareil est en rotation autour des 3 axes. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt>{{ domxref("DeviceRotationRate.alpha") }} {{readonlyInline}}</dt> - <dd>La vitesse de rotation autour de l'axe Z, en degrés par seconde.</dd> - <dt>{{ domxref("DeviceRotationRate.beta") }} {{readonlyInline}}</dt> - <dd>La vitesse de rotation autour de l'axe X, en degrés par seconde.</dd> - <dt>{{ domxref("DeviceRotationRate.gamma") }} {{readonlyInline}}</dt> - <dd>La vitesse de rotation autour de l'axe Y, en degrés par seconde.</dd> -</dl> +- {{ domxref("DeviceRotationRate.alpha") }} {{readonlyInline}} + - : La vitesse de rotation autour de l'axe Z, en degrés par seconde. +- {{ domxref("DeviceRotationRate.beta") }} {{readonlyInline}} + - : La vitesse de rotation autour de l'axe X, en degrés par seconde. +- {{ domxref("DeviceRotationRate.gamma") }} {{readonlyInline}} + - : La vitesse de rotation autour de l'axe Y, en degrés par seconde. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DeviceMotionEventRotationRate")}}</p> +{{Compat("api.DeviceMotionEventRotationRate")}} diff --git a/files/fr/web/api/deviceorientationevent/absolute/index.md b/files/fr/web/api/deviceorientationevent/absolute/index.md index 9feaac1fdd..6fead5a4c6 100644 --- a/files/fr/web/api/deviceorientationevent/absolute/index.md +++ b/files/fr/web/api/deviceorientationevent/absolute/index.md @@ -4,52 +4,34 @@ slug: Web/API/DeviceOrientationEvent/absolute translation_of: Web/API/DeviceOrientationEvent/absolute original_slug: Web/API/DeviceOrientationEvent.absolute --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<p>Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir <a href="/en/DOM/Orientation_and_motion_data_explained">Orientation et mouvement expliqué</a> pour plus de détails.</p> +Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir [Orientation et mouvement expliqué](/en/DOM/Orientation_and_motion_data_explained) pour plus de détails. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval">var absolute = <em>instanceOfDeviceOrientationEvent</em>.absolute; -</pre> + var absolute = instanceOfDeviceOrientationEvent.absolute; -<p><code>DeviceOrientationEvent.absolute</code> retourne un booléen :</p> +`DeviceOrientationEvent.absolute` retourne un booléen : -<ul> - <li><code>true</code> : si les données d'orientation dans <code>instanceOfDeviceOrientationEvent</code> est proposer dans un référentiel terrestre.</li> - <li><code>false</code> : si les données d'orientation utilisent un référentiel arbitraire.</li> -</ul> +- `true` : si les données d'orientation dans `instanceOfDeviceOrientationEvent` est proposer dans un référentiel terrestre. +- `false` : si les données d'orientation utilisent un référentiel arbitraire. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statuts</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> +| Spécification | Statuts | Commentaires | +| -------------------------------------------- | ---------------------------------------- | ---------------------- | +| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Initial specification. | -<h2 id="Compatibilité_entre_les_navigateurs">Compatibilité entre les navigateurs</h2> +## Compatibilité entre les navigateurs -<p>{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}</p> +{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{ domxref("DeviceOrientationEvent") }}</li> - <li><a href="/en/Detecting_device_orientation">Detecting device orientation</a></li> - <li><a href="/en/DOM/Orientation_and_motion_data_explained">Orientation and motion data explained</a></li> - <li>{{ domxref("window.ondeviceorientation") }}</li> -</ul> +- {{ domxref("DeviceOrientationEvent") }} +- [Detecting device orientation](/en/Detecting_device_orientation) +- [Orientation and motion data explained](/en/DOM/Orientation_and_motion_data_explained) +- {{ domxref("window.ondeviceorientation") }} -<p>{{ event("deviceorientation") }}</p> +{{ event("deviceorientation") }} diff --git a/files/fr/web/api/deviceorientationevent/index.md b/files/fr/web/api/deviceorientationevent/index.md index fed84dfd6d..4c0b77dcab 100644 --- a/files/fr/web/api/deviceorientationevent/index.md +++ b/files/fr/web/api/deviceorientationevent/index.md @@ -13,65 +13,47 @@ tags: - évènements translation_of: Web/API/DeviceOrientationEvent --- -<p>{{ApiRef}}{{SeeCompatTable}}</p> -<h2 id="Sommaire">Sommaire</h2> -<p>L'évènement <code>DeviceOrientationEvent</code> met à la disposition du développeur des informations sur l'orientation de l'appareil visitant une page Web</p> -<div class="warning"> - <p><strong>Attention :</strong> à l'heure actuelle, Firefox et Chrome ne gèrent pas les cordonnées de la même façon. Tenez-en compte lors de l'utilisation de cette API.</p> -</div> -<h2 id="Propriétés">Propriétés</h2> -<dl> - <dt> - {{domxref("DeviceOrientationEvent.absolute")}} {{readonlyinline}}</dt> - <dd> - Un booléen, indiquant si l'appareil partage les informations sur son orientation absolue.</dd> - <dt> - {{domxref("DeviceOrientationEvent.alpha")}} {{readonlyinline}}</dt> - <dd> - Un nombre, représentant le mouvement de l'appareil sur l'axe « z » exprimé en degrés sur une échelle de 0° à 360°.</dd> - <dt> - {{domxref("DeviceOrientationEvent.beta")}} {{readonlyinline}}</dt> - <dd> - Un Nombre représentant le déplacement de l'appareil sur l'axe « x », exprimé en degrés sur une échelle de -180° à 180°.</dd> - <dt> - {{domxref("DeviceOrientationEvent.gamma")}} {{readonlyinline}}</dt> - <dd> - Un nombre représentant le déplacement de l'appareil sur l'axe « y », exprimé en degrés sur une échelle de -90° à 90°.</dd> -</dl> -<h2 id="Exemple">Exemple</h2> -<pre class="brush: js">window.addEventListener('deviceorientation', function(event) { +{{ApiRef}}{{SeeCompatTable}} + +## Sommaire + +L'évènement `DeviceOrientationEvent` met à la disposition du développeur des informations sur l'orientation de l'appareil visitant une page Web + +> **Attention :** à l'heure actuelle, Firefox et Chrome ne gèrent pas les cordonnées de la même façon. Tenez-en compte lors de l'utilisation de cette API. + +## Propriétés + +- {{domxref("DeviceOrientationEvent.absolute")}} {{readonlyinline}} + - : Un booléen, indiquant si l'appareil partage les informations sur son orientation absolue. +- {{domxref("DeviceOrientationEvent.alpha")}} {{readonlyinline}} + - : Un nombre, représentant le mouvement de l'appareil sur l'axe « z » exprimé en degrés sur une échelle de 0° à 360°. +- {{domxref("DeviceOrientationEvent.beta")}} {{readonlyinline}} + - : Un Nombre représentant le déplacement de l'appareil sur l'axe « x », exprimé en degrés sur une échelle de -180° à 180°. +- {{domxref("DeviceOrientationEvent.gamma")}} {{readonlyinline}} + - : Un nombre représentant le déplacement de l'appareil sur l'axe « y », exprimé en degrés sur une échelle de -90° à 90°. + +## Exemple + +```js +window.addEventListener('deviceorientation', function(event) { console.log("z : " + event.alpha + "\n x : " + event.beta + "\n y : " + event.gamma); -});</pre> +}); +``` -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaires | +| -------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DeviceMotionEvent")}}</p> +{{Compat("api.DeviceMotionEvent")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{ event("deviceorientation") }}</li> - <li>{{ domxref("DeviceMotionEvent") }}</li> - <li>{{ event("devicemotion") }}</li> - <li><a href="/en-US/docs/WebAPI/Detecting_device_orientation">Detecting device orientation</a></li> - <li><a href="/en/DOM/Orientation_and_motion_data_explained">Orientation and motion data explained</a></li> -</ul> +- {{ event("deviceorientation") }} +- {{ domxref("DeviceMotionEvent") }} +- {{ event("devicemotion") }} +- [Detecting device orientation](/en-US/docs/WebAPI/Detecting_device_orientation) +- [Orientation and motion data explained](/en/DOM/Orientation_and_motion_data_explained) diff --git a/files/fr/web/api/document/activeelement/index.md b/files/fr/web/api/document/activeelement/index.md index 2b09fac218..89a9f037c9 100644 --- a/files/fr/web/api/document/activeelement/index.md +++ b/files/fr/web/api/document/activeelement/index.md @@ -7,15 +7,20 @@ translation_of: Web/API/DocumentOrShadowRoot/activeElement translation_of_original: Web/API/Document/activeElement original_slug: Web/API/DocumentOrShadowRoot/activeElement --- -<p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> -<p>Renvoie l'élément qui dispose actuellement du focus.</p> -<p>{{ Note("Cet attribut fait partie de la spécification HTML 5 encore en développement.") }}</p> -<h3 id="Syntaxe">Syntaxe</h3> -<pre class="eval">var elemCourant = document.activeElement; -</pre> -<h3 id="Exemple">Exemple</h3> -<h3 id="Sp.C3.A9cification">Spécification</h3> -<ul> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management</a> (brouillon de travail HTML 5)</li> -</ul>
\ No newline at end of file +{{ ApiRef() }} + +### Résumé + +Renvoie l'élément qui dispose actuellement du focus. + +{{ Note("Cet attribut fait partie de la spécification HTML 5 encore en développement.") }} + +### Syntaxe + + var elemCourant = document.activeElement; + +### Exemple + +### Spécification + +- [Focus management](http://www.whatwg.org/specs/web-apps/current-work/#focus-management) (brouillon de travail HTML 5) diff --git a/files/fr/web/api/document/adoptnode/index.md b/files/fr/web/api/document/adoptnode/index.md index 3c5270aa80..e4070ea67c 100644 --- a/files/fr/web/api/document/adoptnode/index.md +++ b/files/fr/web/api/document/adoptnode/index.md @@ -10,59 +10,50 @@ tags: - Propriétaire translation_of: Web/API/Document/adoptNode --- -<div>{{ ApiRef("DOM") }}</div> +{{ ApiRef("DOM") }} -<div> </div> +Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son [`ownerDocument`](/fr/docs/Web/API/Node/ownerDocument) (_document propriétaire_) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours. -<p>Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son <code><a href="/fr/docs/Web/API/Node/ownerDocument">ownerDocument</a></code> (<em>document propriétaire</em>) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours.</p> +**Pris en charge depuis Gecko 1.9 (Firefox 3)** -<p><strong>Pris en charge depuis Gecko 1.9 (Firefox 3)</strong></p> +## Syntaxe -<h2 id="Syntax">Syntaxe</h2> + node = document.adoptNode(externalNode); -<pre><var>node</var> = <em>document</em>.adoptNode(<var>externalNode</var>); -</pre> +- ` node` + - : est le noeud adopté qui a maintenant ce document en tant que son [`ownerDocument`](/en-US/docs/DOM/Node.ownerDocument) (_document propriétaire_). Le [`parentNode`](/en-US/docs/DOM/Node.parentNode) du noeud est `null`, car il n'a pas encore été inséré dans l'arborescence du document. Notez que `node` et `externalNode` sont le même objet après cet appel. +- `externalNode` + - : est le noeud à adopter existant dans un autre document. -<dl> - <dt><code> node</code></dt> - <dd>est le noeud adopté qui a maintenant ce document en tant que son <code><a href="/en-US/docs/DOM/Node.ownerDocument">ownerDocument</a></code> (<em>document propriétaire</em>). Le <a href="/en-US/docs/DOM/Node.parentNode"><code>parentNode</code></a> du noeud est <code>null</code>, car il n'a pas encore été inséré dans l'arborescence du document. Notez que <code>node</code> et <code>externalNode</code> sont le même objet après cet appel. </dd> - <dt><code>externalNode</code></dt> - <dd>est le noeud à adopter existant dans un autre document.</dd> -</dl> +## Exemple -<h2 id="Example">Exemple</h2> - -<pre class="brush: js">var iframe = document.getElementById('my-iframe'); +```js +var iframe = document.getElementById('my-iframe'); var iframeImages = iframe.contentDocument.getElementsByTagName('img'); var newParent = document.getElementByTagName('images'); -for (var i = 0; i < iframeImages.length; i++) { +for (var i = 0; i < iframeImages.length; i++) { newParent.appendChild(document.adoptNode(iframeImages[i])); } -</pre> - -<h2 id="Notes">Notes</h2> +``` -<p>En général l'appel de <code>adoptNode</code> peut échouer en raison du nœud source provenant d'une implémentation différente, mais cela ne devrait pas poser de problème avec les implémentations du navigateur.</p> +## Notes -<p></p><p>Les nœuds provenant de documents externes doivent être clonés à l'aide de <a href="/fr/docs/Web/API/Document/importNode"><code>document.importNode()</code></a> (ou adoptés avec - <a href="/fr/docs/Web/API/Document/adoptNode"><code>document.adoptNode()</code></a>) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes - de <a href="/fr/docs/Web/API/Node/ownerDocument"><code>Node.ownerDocument</code></a>, consultez la <a href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">FAQ DOM du W3C</a> (en anglais).</p> +En général l'appel de `adoptNode` peut échouer en raison du nœud source provenant d'une implémentation différente, mais cela ne devrait pas poser de problème avec les implémentations du navigateur. - <p>Gecko n'obligeait pas à utiliser <a href="/fr/docs/Web/API/Document/importNode"><code>document.importNode()</code></a> et <a href="/fr/docs/Web/API/Document/adoptNode"><code>document.adoptNode()</code></a> avant sa version 1.9. Depuis les versions 1.9 - alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception - <code>WRONG_DOCUMENT_ERR</code> est déclenchée (<code>NS_ERROR_DOM_WRONG_DOCUMENT_ERR</code>). implémentation dans le <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=47903" rel="noopener">bug 47903</a>.</p><p></p> +Les nœuds provenant de documents externes doivent être clonés à l'aide de [`document.importNode()`](/fr/docs/Web/API/Document/importNode) (ou adoptés avec +[`document.adoptNode()`](/fr/docs/Web/API/Document/adoptNode)) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes +de [`Node.ownerDocument`](/fr/docs/Web/API/Node/ownerDocument), consultez la [FAQ DOM du W3C](http://www.w3.org/DOM/faq.html#ownerdoc) (en anglais). +Gecko n'obligeait pas à utiliser [`document.importNode()`](/fr/docs/Web/API/Document/importNode) et [`document.adoptNode()`](/fr/docs/Web/API/Document/adoptNode) avant sa version 1.9. Depuis les versions 1.9 +alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception +`WRONG_DOCUMENT_ERR` est déclenchée (`NS_ERROR_DOM_WRONG_DOCUMENT_ERR`). implémentation dans le [bug 47903](https://bugzilla.mozilla.org/show_bug.cgi?id=47903). -<h2 id="Specification">Spécification</h2> +## Spécification -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode">DOM Level 3 Core: Document.adoptNode</a></li> -</ul> +- [DOM Level 3 Core: Document.adoptNode](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/en-US/docs/DOM/document.importNode">document.importNode</a></li> -</ul> +- [document.importNode](/en-US/docs/DOM/document.importNode) diff --git a/files/fr/web/api/document/alinkcolor/index.md b/files/fr/web/api/document/alinkcolor/index.md index 5f8b845548..fcec44ba01 100644 --- a/files/fr/web/api/document/alinkcolor/index.md +++ b/files/fr/web/api/document/alinkcolor/index.md @@ -9,28 +9,27 @@ tags: - Reference translation_of: Web/API/Document/alinkColor --- -<div>{{APIRef("DOM")}}{{Deprecated_header}}</div> +{{APIRef("DOM")}}{{Deprecated_header}} -<p>Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements <code>mousedown</code> et <code>mouseup</code>.</p> +Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements `mousedown` et `mouseup`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <var>color</var> = <var>document</var>.alinkColor; -<var>document</var>.alinkColor = <var>color</var>; -</pre> + var color = document.alinkColor; + document.alinkColor = color; -<p><var>color</var> est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., <code>blue</code> pour bleu, <code>darkblue</code> pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, <code>#0000FF</code>)</p> +*color* est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., `blue` pour bleu, `darkblue` pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, `#0000FF`) -<h2 id="Notes">Notes</h2> +## Notes -<p>La valeur par défaut pour cette propriété est rouge (<code>#ee000</code> en hexadécimal) sur Mozilla Firefox.</p> +La valeur par défaut pour cette propriété est rouge (`#ee000` en hexadécimal) sur Mozilla Firefox. -<p><code>document.alinkColor</code> est obsolète dans <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a> (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}.</p> +`document.alinkColor` est obsolète dans [DOM Level 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268) (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}. -<p>Une autre alternative est <code>document.body.aLink</code>, même si elle est <a href="http://www.w3.org/TR/html401/struct/global.html#adef-alink">obsolète dans HTML 4.01</a> (lien en anglais) en faveur de l'alternative CSS ci-dessus.</p> +Une autre alternative est `document.body.aLink`, même si elle est [obsolète dans HTML 4.01](http://www.w3.org/TR/html401/struct/global.html#adef-alink) (lien en anglais) en faveur de l'alternative CSS ci-dessus. -<p><a href="/fr/docs/Mozilla/Gecko">Gecko </a>supporte <code>alinkColor</code>/<code>:active</code> et {{Cssxref(":focus")}}. Internet Explorer 6 et 7 supportent <code>alinkColor</code>/<code>:active</code> seulement pour la <a href="/fr/docs/Web/HTML/Element/a">balise HTML des liens (<a>)</a> et le comportement est le même que <code>:focus</code> sur Gecko. Il n'y a pas de support pour <code>:focus</code> sur IE.</p> +[Gecko ](/fr/docs/Mozilla/Gecko)supporte `alinkColor`/`:active` et {{Cssxref(":focus")}}. Internet Explorer 6 et 7 supportent `alinkColor`/`:active` seulement pour la [balise HTML des liens (\<a>)](/fr/docs/Web/HTML/Element/a) et le comportement est le même que `:focus` sur Gecko. Il n'y a pas de support pour `:focus` sur IE. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.alinkColor")}}</p> +{{Compat("api.Document.alinkColor")}} diff --git a/files/fr/web/api/document/anchors/index.md b/files/fr/web/api/document/anchors/index.md index ea16e0f96f..dca923de8e 100644 --- a/files/fr/web/api/document/anchors/index.md +++ b/files/fr/web/api/document/anchors/index.md @@ -4,35 +4,36 @@ slug: Web/API/Document/anchors translation_of: Web/API/Document/anchors original_slug: Web/API/Document/Document.anchors --- -<div>{{APIRef("DOM")}} {{deprecated_header()}}</div> +{{APIRef("DOM")}} {{deprecated_header()}} -<p><code>anchors</code> retourne une liste de toutes les ancres du document.</p> +`anchors` retourne une liste de toutes les ancres du document. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>nodeList</var> = document.anchors; -</pre> + nodeList = document.anchors; -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush:js">if ( document.anchors.length >= 5 ) { +```js +if ( document.anchors.length >= 5 ) { dump("Trop d'ancres trouvées !"); window.location = "http://www.google.com"; } -</pre> +``` -<p>L'exemple suivant remplit un tableau avec chaque ancre présente sur la page :</p> +L'exemple suivant remplit un tableau avec chaque ancre présente sur la page : -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<meta charset="UTF-8" /> -<title>Test</title> -<script> +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="UTF-8" /> +<title>Test</title> +<script> function init() { var toc = document.getElementById("toc"); var i, li, newAnchor; - for (i = 0; i < document.anchors.length; i++) { + for (i = 0; i < document.anchors.length; i++) { li = document.createElement("li"); newAnchor = document.createElement('a'); newAnchor.href = "#" + document.anchors[i].name; @@ -41,41 +42,39 @@ function init() { toc.appendChild(li); } } -</script> +</script> -</head> -<body onload="init()"> +</head> +<body onload="init()"> -<h1>Title</h1> -<h2><a name="contents">Contents</a></h2> -<ul id="toc"></ul> +<h1>Title</h1> +<h2><a name="contents">Contents</a></h2> +<ul id="toc"></ul> -<h2><a name="plants">Plants</a></h2> -<ol> - <li>Apples</li> - <li>Oranges</li> - <li>Pears</li> -</ol> +<h2><a name="plants">Plants</a></h2> +<ol> + <li>Apples</li> + <li>Oranges</li> + <li>Pears</li> +</ol> -<h2><a name="veggies">Veggies</a></h2> -<ol> - <li>Carrots</li> - <li>Celery</li> - <li>Beats</li> -</ol> +<h2><a name="veggies">Veggies</a></h2> +<ol> + <li>Carrots</li> + <li>Celery</li> + <li>Beats</li> +</ol> -</body> -</html> -</pre> +</body> +</html> +``` -<p><a href="https://jsfiddle.net/S4yNp">Voir dans JSFiddle</a></p> +[Voir dans JSFiddle](https://jsfiddle.net/S4yNp) -<h2 id="Notes">Notes</h2> +## Notes -<p>Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut <code>name</code>, pas celles créées avec l'attribut <code>id</code>.</p> +Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut `name`, pas celles créées avec l'attribut `id`. -<h2 id="Specification">Spécification</h2> +## Spécification -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272">DOM Level 2 HTML: anchors</a></li> -</ul> +- [DOM Level 2 HTML: anchors](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272) diff --git a/files/fr/web/api/document/applets/index.md b/files/fr/web/api/document/applets/index.md index ea763af9a4..5fbbb3d003 100644 --- a/files/fr/web/api/document/applets/index.md +++ b/files/fr/web/api/document/applets/index.md @@ -3,15 +3,19 @@ title: Document.applets slug: Web/API/Document/applets translation_of: Web/API/Document/applets --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<p><code>applets</code> retourne une liste ordonnée des applets contenus dans un document.</p> -<h3 id="Syntax">Syntaxe</h3> -<pre class="eval"><em>nodeList</em> = document.applets -</pre> -<h3 id="Example">Exemple</h3> -<pre class="eval">// ( Si vous savez que le second applet est celui que vous voulez ) -my_java_app = document.applets[1]; -</pre> -<h3 id="Specification">Spécification</h3> -<p><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862">DOM Level 2 HTML: applets</a></p> +`applets` retourne une liste ordonnée des applets contenus dans un document. + +### Syntaxe + + nodeList = document.applets + +### Exemple + + // ( Si vous savez que le second applet est celui que vous voulez ) + my_java_app = document.applets[1]; + +### Spécification + +[DOM Level 2 HTML: applets](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862) diff --git a/files/fr/web/api/document/bgcolor/index.md b/files/fr/web/api/document/bgcolor/index.md index b379774259..2969fbf7ed 100644 --- a/files/fr/web/api/document/bgcolor/index.md +++ b/files/fr/web/api/document/bgcolor/index.md @@ -3,33 +3,29 @@ title: Document.bgColor slug: Web/API/Document/bgColor translation_of: Web/API/Document/bgColor --- -<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p> +{{APIRef("DOM")}} {{ Deprecated_header() }} -<p>La propriété obsolète <code>bgColor</code> renvoie ou déinit la couleur de fond (background-color) du document courant.</p> +La propriété obsolète `bgColor` renvoie ou déinit la couleur de fond (background-color) du document courant. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>color</em> = document.bgColor -document.bgColor =<em>color</em> -</pre> + color = document.bgColor + document.bgColor =color -<h3 id="Parametres">Parametres</h3> +### Parametres -<ul> - <li><code>color</code> est une chaîne de caractères représentant la couleur comme un mot (e.g., "red") ou une valeur hexadécimale (e.g., "<code>#ff0000</code>").</li> -</ul> +- `color` est une chaîne de caractères représentant la couleur comme un mot (e.g., "red") ou une valeur hexadécimale (e.g., "`#ff0000`"). -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="eval">document.bgColor = "darkblue"; -</pre> + document.bgColor = "darkblue"; -<h2 id="Notes">Notes</h2> +## Notes -<p>La valeur par défaut pour cette propriété sur Firefox est le blanc (<code>#ffffff</code> en hexadécimal).</p> +La valeur par défaut pour cette propriété sur Firefox est le blanc (`#ffffff` en hexadécimal). -<p><code>document.bgColor</code> est obsolète dans le <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Niveau 2 HTML</a>. L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec <code>document.body.style.backgroundColor</code>. Une autre alternative est <code>document.body.bgColor</code>, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS.</p> +`document.bgColor` est obsolète dans le [DOM Niveau 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268). L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec `document.body.style.backgroundColor`. Une autre alternative est `document.body.bgColor`, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.bgColor")}}</p> +{{Compat("api.Document.bgColor")}} diff --git a/files/fr/web/api/document/body/index.md b/files/fr/web/api/document/body/index.md index 57a6cdfe79..572e90d1ea 100644 --- a/files/fr/web/api/document/body/index.md +++ b/files/fr/web/api/document/body/index.md @@ -6,14 +6,19 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/Document/body --- -<div> - {{ApiRef}}</div> -<p>Retourne l'élément <code><body></code> ou <code><frameset></code> du document courant.</p> -<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox"><em>var objRef</em> = document.body; -document.body = <em>objRef;</em></pre> -<h2 id="Example">Exemple</h2> -<pre class="brush:js">// dans le HTML: <body id="ancienElementBody"></body> +{{ApiRef}} + +Retourne l'élément `<body>` ou `<frameset>` du document courant. + +## Syntaxe + + var objRef = document.body; + document.body = objRef; + +## Exemple + +```js +// dans le HTML: <body id="ancienElementBody"></body> alert(document.body.id); // "ancienElementBody" var unNouvelElementBody = document.createElement("body"); @@ -21,11 +26,14 @@ var unNouvelElementBody = document.createElement("body"); unNouvelElementBody .id = "nouvelElementBody"; document.body = unNouvelElementBody ; alert(document.body.id); // "nouvelElementBody" -</pre> -<h2 id="Notes">Notes</h2> -<p><code>document.body</code> est l'élément dans lequel le contenu du document est situé. Dans les documents avec un élément <code><body></code> celui-ci est retourné, et dans les documents de type frameset l'élément <code><frameset></code> le plus extérieur est retourné.</p> -<p>Même si body est modifiable, lui affecter une nouvelle valeur retire tous les éléments enfants du <code><body></code> existant.</p> -<h2 id="Specification">Spécification</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201">DOM Level 2 HTML: HTMLDocument.body</a></li> -</ul> +``` + +## Notes + +`document.body` est l'élément dans lequel le contenu du document est situé. Dans les documents avec un élément `<body>` celui-ci est retourné, et dans les documents de type frameset l'élément `<frameset>` le plus extérieur est retourné. + +Même si body est modifiable, lui affecter une nouvelle valeur retire tous les éléments enfants du `<body>` existant. + +## Spécification + +- [DOM Level 2 HTML: HTMLDocument.body](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201) diff --git a/files/fr/web/api/document/caretrangefrompoint/index.md b/files/fr/web/api/document/caretrangefrompoint/index.md index ed72fe6bd7..a0e0d2282c 100644 --- a/files/fr/web/api/document/caretrangefrompoint/index.md +++ b/files/fr/web/api/document/caretrangefrompoint/index.md @@ -9,47 +9,47 @@ tags: - Méthode translation_of: Web/API/Document/caretRangeFromPoint --- -<p>{{APIRef("DOM")}}{{Non-standard_header}} </p> +{{APIRef("DOM")}}{{Non-standard_header}} -<p>La méthode <code><strong>caretRangeFromPoint()</strong></code> de l'interface {{domxref("Document")}} renvoie un objet "Range" (<em>chaîne</em>) pour le fragment de document aux coordonnées spécifiées.</p> +La méthode **`caretRangeFromPoint()`** de l'interface {{domxref("Document")}} renvoie un objet "Range" (_chaîne_) pour le fragment de document aux coordonnées spécifiées. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var <em>range</em> = <em>document</em>.caretRangeFromPoint(float <em>x</em>, float <em>y</em>); -</pre> +```js +var range = document.caretRangeFromPoint(float x, float y); +``` -<h3 id="Retourne">Retourne</h3> +### Retourne -<p>Une des réponses suivantes :</p> +Une des réponses suivantes : -<ul> - <li>Un {{domxref("Range")}}.</li> - <li><code>Null</code> si <strong>x</strong> ou <strong>y</strong> sont négatifs, hors de la fenêtre, ou s'il n'y a pas de noeud d'entrée de texte.</li> -</ul> +- Un {{domxref("Range")}}. +- `Null` si **x** ou **y** sont négatifs, hors de la fenêtre, ou s'il n'y a pas de noeud d'entrée de texte. -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>x</dt> - <dd>Une position horizontale dans la fenêtre courante.</dd> - <dt>y</dt> - <dd>Une position verticale dans la fenêtre courante.</dd> -</dl> +- x + - : Une position horizontale dans la fenêtre courante. +- y + - : Une position verticale dans la fenêtre courante. -<h2 id="Example">Exemple</h2> +## Exemple -<p>Démonstration de base : lorsque vous cliquez dans un paragraphe, insérez un saut de ligne à la position du curseur :</p> +Démonstration de base : lorsque vous cliquez dans un paragraphe, insérez un saut de ligne à la position du curseur : -<h3 id="Contenu_HTML">Contenu HTML</h3> +### Contenu HTML -<pre class="brush: html"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, +```html +<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. -Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></pre> +Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> +``` -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> +### Contenu JavaScript -<pre class="brush: js">function insertBreakAtPoint(e) { +```js +function insertBreakAtPoint(e) { var range; var textNode; @@ -66,8 +66,8 @@ Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame offset = range.startOffset; } - // divise seulement les TEXT_NODE (<em>noeuds texte</em>) - if (textNode && textNode.nodeType == 3) { + // divise seulement les TEXT_NODE (noeuds texte) + if (textNode && textNode.nodeType == 3) { var replacement = textNode.splitText(offset); var br = document.createElement('br'); textNode.parentNode.insertBefore(br, replacement); @@ -75,12 +75,13 @@ Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame } var paragraphs = document.getElementsByTagName("p"); -for (i=0 ; i < paragraphs.length; i++) { +for (i=0 ; i < paragraphs.length; i++) { paragraphs[i].addEventListener("click", insertBreakAtPoint, false); -}</pre> +} +``` -<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }}</p> +{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.caretRangeFromPoint")}}</p> +{{Compat("api.Document.caretRangeFromPoint")}} diff --git a/files/fr/web/api/document/characterset/index.md b/files/fr/web/api/document/characterset/index.md index d43772b7fb..c5d756cac1 100644 --- a/files/fr/web/api/document/characterset/index.md +++ b/files/fr/web/api/document/characterset/index.md @@ -10,45 +10,33 @@ tags: - Reference translation_of: Web/API/Document/characterSet --- -<p>{{ApiRef("DOM")}}</p> +{{ApiRef("DOM")}} -<p><code><strong>Document.characterSet</strong></code> propriété en lecture seule, renvoie l'encodage du document en cours. Un encodage décrit l'ensemble des caractères possibles et la façon de décoder les octets en ces caractères.</p> +**`Document.characterSet`** propriété en lecture seule, renvoie l'encodage du document en cours. Un encodage décrit l'ensemble des caractères possibles et la façon de décoder les octets en ces caractères. -<div class="note"> -<p><strong>Note :</strong> La propriété <code>document.charset</code> et <code>document.inputEncoding</code> sont les alias de <code>document.characterSet</code>. Ne plus les utiliser.</p> -</div> +> **Note :** La propriété `document.charset` et `document.inputEncoding` sont les alias de `document.characterSet`. Ne plus les utiliser. -<p>Les utilisateurs peuvent surcharger l'encodage indiqué pour le document (transmis par l'en-tête {{HTTPHeader("Content-Type")}} ou via le {{HTMLElement("meta")}} : <code><meta charset="utf-8"></code>) grâce au menu <kbd>Affichage → Encodage du texte</kbd>. Cela peut notamment permettre de corriger le comportement d'un document dont l'encodage indiqué est incorrect.</p> +Les utilisateurs peuvent surcharger l'encodage indiqué pour le document (transmis par l'en-tête {{HTTPHeader("Content-Type")}} ou via le {{HTMLElement("meta")}} : `<meta charset="utf-8">`) grâce au menu <kbd>Affichage → Encodage du texte</kbd>. Cela peut notamment permettre de corriger le comportement d'un document dont l'encodage indiqué est incorrect. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>string</em> = document.characterSet</pre> + var string = document.characterSet -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: html"><button onclick="console.log(document.characterSet);"> +```html +<button onclick="console.log(document.characterSet);"> Affiche le jeu de caractère -</button> -<!-- logs document's character set, such as "ISO-8859-1" or "UTF-8" --> -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Etat</th> - <th>Commentaires</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Document.characterSet")}}</p> +</button> +<!-- logs document's character set, such as "ISO-8859-1" or "UTF-8" --> +``` + +## Spécifications + +| Specification | Etat | Commentaires | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Document.characterSet")}} diff --git a/files/fr/web/api/document/clear/index.md b/files/fr/web/api/document/clear/index.md index 24fab67361..e2ccc567e9 100644 --- a/files/fr/web/api/document/clear/index.md +++ b/files/fr/web/api/document/clear/index.md @@ -13,25 +13,20 @@ tags: - Reference translation_of: Web/API/Document/clear --- -<p>{{APIRef("DOM")}}{{ Deprecated_header() }}</p> +{{APIRef("DOM")}}{{ Deprecated_header() }} -<p>Cette méthode est utilisée pour effacer entièrement le document visé dans les anciennes versions (pre-1.0) de Mozilla.</p> +Cette méthode est utilisée pour effacer entièrement le document visé dans les anciennes versions (pre-1.0) de Mozilla. -<p>Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien.</p> +Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="eval">document.clear() -</pre> + document.clear() -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<ul> - <li><a href="http://www.whatwg.org/html/#dom-document-clear">HTML5</a></li> -</ul> +- [HTML5](http://www.whatwg.org/html/#dom-document-clear) -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs - - -<p>{{Compat("api.Document.clear")}}</p> +{{Compat("api.Document.clear")}} diff --git a/files/fr/web/api/document/compatmode/index.md b/files/fr/web/api/document/compatmode/index.md index fd984565fe..e0a238c8fd 100644 --- a/files/fr/web/api/document/compatmode/index.md +++ b/files/fr/web/api/document/compatmode/index.md @@ -8,46 +8,37 @@ tags: - Reference translation_of: Web/API/Document/compatMode --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>Indique si le document est affiché en mode dégradé (<a href="/fr/docs/Mode_quirks_de_Mozilla">Quirks mode</a>) ou dans le respect des standards.</p> +Indique si le document est affiché en mode dégradé ([Quirks mode](/fr/docs/Mode_quirks_de_Mozilla)) ou dans le respect des standards. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>mode</em> = document.compatMode -</pre> + mode = document.compatMode -<h2 id="Valeurs">Valeurs</h2> +## Valeurs -<ul> - <li><code>"BackCompat"</code> si le document est a ffiché en mode "quirks" ; </li> -</ul> +- `"BackCompat"` si le document est a ffiché en mode "quirks" ; -<dl> - <dt>mode</dt> - <dd>est une valeur énumérée qui peut être :</dd> -</dl> +<!----> -<ul> - <li><code>"CSS1Compat"</code> si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo de "proche du standard").</li> -</ul> +- mode + - : est une valeur énumérée qui peut être : -<dl> -</dl> +<!----> -<div class="note"> -<p><strong>Note :</strong> tous ces modes sont maintenant définis dans les normes, de sorte que les anciens «standards» et «presque standards» sont absurdes et ne sont plus utilisés dans les normes.</p> -</div> +- `"CSS1Compat"` si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo de "proche du standard"). -<h2 id="Example">Exemple</h2> +<!----> -<pre class="eval">if (document.compatMode == "BackCompat") { - // en mode Quirks -} -</pre> +> **Note :** tous ces modes sont maintenant définis dans les normes, de sorte que les anciens «standards» et «presque standards» sont absurdes et ne sont plus utilisés dans les normes. -<h2 id="Specification">Spécifications</h2> +## Exemple -<ul> - <li><a href="http://dom.spec.whatwg.org/#dom-document-compatmode">DOM: Document.compatMode</a></li> -</ul> + if (document.compatMode == "BackCompat") { + // en mode Quirks + } + +## Spécifications + +- [DOM: Document.compatMode](http://dom.spec.whatwg.org/#dom-document-compatmode) diff --git a/files/fr/web/api/document/contenttype/index.md b/files/fr/web/api/document/contenttype/index.md index 32d072bbae..21309bbf71 100644 --- a/files/fr/web/api/document/contenttype/index.md +++ b/files/fr/web/api/document/contenttype/index.md @@ -10,21 +10,20 @@ tags: - Rendu translation_of: Web/API/Document/contentType --- -<p>{{ ApiRef("DOM") }}{{Non-standard_header}}</p> +{{ ApiRef("DOM") }}{{Non-standard_header}} -<p>Renvoie le type MIME dans lequel le document est rendu. Il peut provenir d'en-têtes HTTP ou d'autres sources d'informations MIME et peut être affecté par les conversions automatiques de type effectuées par le navigateur ou les extensions.</p> +Renvoie le type MIME dans lequel le document est rendu. Il peut provenir d'en-têtes HTTP ou d'autres sources d'informations MIME et peut être affecté par les conversions automatiques de type effectuées par le navigateur ou les extensions. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval"><var>contentType</var> = <var>document</var>.contentType; -</pre> + contentType = document.contentType; -<p><code>contentType</code> est une propriété en lecture seule.</p> +`contentType` est une propriété en lecture seule. -<h2 id="Notes">Notes</h2> +## Notes -<p>La propriété n'est pas affectée par les balises META.</p> +La propriété n'est pas affectée par les balises META. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<p>{{SpecName('DOM WHATWG','#dom-document-contenttype','Document.contenttype')}}</p> +{{SpecName('DOM WHATWG','#dom-document-contenttype','Document.contenttype')}} diff --git a/files/fr/web/api/document/createattribute/index.md b/files/fr/web/api/document/createattribute/index.md index bfec33bfa2..42bd4f5991 100644 --- a/files/fr/web/api/document/createattribute/index.md +++ b/files/fr/web/api/document/createattribute/index.md @@ -8,84 +8,51 @@ tags: - Reference translation_of: Web/API/Document/createAttribute --- -<p>{{ApiRef("DOM")}}</p> +{{ApiRef("DOM")}} -<p>La méthode <code><strong>Document.createAttribute()</strong></code> crée un nouveau nœud d'attribut et le renvoie. L'objet a créé un noeud implémentant l'interface {{domxref("Attr")}}. Le DOM n'impose pas le type d'attribut à ajouter à un élément particulier de cette manière. </p> +La méthode **`Document.createAttribute()`** crée un nouveau nœud d'attribut et le renvoie. L'objet a créé un noeud implémentant l'interface {{domxref("Attr")}}. Le DOM n'impose pas le type d'attribut à ajouter à un élément particulier de cette manière. -<div class="note"> -<p><strong>Note :</strong> La chaîne de caractères donnée dans le paramètre est convertie en minuscules.</p> -</div> +> **Note :** La chaîne de caractères donnée dans le paramètre est convertie en minuscules. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>attribut</em> = document.createAttribute(nom) -</pre> + attribut = document.createAttribute(nom) -<h3 id="Param.C3.A8tres">Paramètres</h3> +### Paramètres -<ul> - <li><code>nom</code> est une chaîne de caractères contenant le nom de l'attribut.</li> -</ul> +- `nom` est une chaîne de caractères contenant le nom de l'attribut. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Un nœud {{domxref("Attr")}}.</p> +Un nœud {{domxref("Attr")}}. -<h3 id="Exceptions_levées">Exceptions levées</h3> +### Exceptions levées -<ul> - <li><code>INVALID_CHARACTER_ERR</code> si le paramètre contient un caractère invalide pour un attribut XML.</li> -</ul> +- `INVALID_CHARACTER_ERR` si le paramètre contient un caractère invalide pour un attribut XML. -<h2 id="Exemples">Exemples</h2> +## Exemples - -<pre class="brush:js">var node = document.getElementById("div1"); +```js +var node = document.getElementById("div1"); var a = document.createAttribute("my_attrib"); a.value = "newVal"; node.setAttributeNode(a); console.log(node.getAttribute("my_attrib")); // "newVal" -</pre> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td> Comportement précis avec des caractères majuscules. </td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Pas de modification.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Pas de modification.</td> - </tr> - <tr> - <td>{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Document.createAttribute")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("Document.createElement()")}}</li> -</ul> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------- | +| {{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}} | {{Spec2("DOM WHATWG")}} | Comportement précis avec des caractères majuscules. | +| {{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}} | {{Spec2('DOM3 Core')}} | Pas de modification. | +| {{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}} | {{Spec2('DOM2 Core')}} | Pas de modification. | +| {{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}} | {{Spec2('DOM1')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Document.createAttribute")}} + +## Voir aussi + +- {{domxref("Document.createElement()")}} diff --git a/files/fr/web/api/document/createcdatasection/index.md b/files/fr/web/api/document/createcdatasection/index.md index f1a44c9a07..3ee0e113a7 100644 --- a/files/fr/web/api/document/createcdatasection/index.md +++ b/files/fr/web/api/document/createcdatasection/index.md @@ -12,41 +12,35 @@ tags: - données translation_of: Web/API/Document/createCDATASection --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p><code>createCDATASection()</code> crée un nouveau noeud de section CDATA et le renvoie.</p> +`createCDATASection()` crée un nouveau noeud de section CDATA et le renvoie. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>CDATASectionNode</var> = document.createCDATASection(data) -</pre> + CDATASectionNode = document.createCDATASection(data) -<ul> - <li><code>CDATASectionNode</code> est un noeud de <a href="/fr/docs/Web/API/CDATASection">Section CDATA</a>.</li> - <li><code>data</code> est une string (<em>chaîne de caractères</em>) contenant les données à ajouter à la section CDATA.</li> -</ul> +- `CDATASectionNode` est un noeud de [Section CDATA](/fr/docs/Web/API/CDATASection). +- `data` est une string (_chaîne de caractères_) contenant les données à ajouter à la section CDATA. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush:js">var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml") +```js +var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml") -var cdata = docu.createCDATASection('Some <CDATA> data & then some'); +var cdata = docu.createCDATASection('Some <CDATA> data & then some'); docu.getElementsByTagName('xml')[0].appendChild(cdata); alert(new XMLSerializer().serializeToString(docu)); -// Affiche : <xml><![CDATA[Some <CDATA> data & then some]]></xml> -</pre> +// Affiche : <xml><![CDATA[Some <CDATA> data & then some]]></xml> +``` -<h2 id="Notes">Notes</h2> +## Notes -<ul> - <li>Cela fonctionnera uniquement avec XML, pas avec les documents HTML (car les documents HTML ne supportent pas les sections CDATA) ; le tenter sur un document HTML va lancer une exception <code>NOT_SUPPORTED_ERR</code>.</li> - <li>Va lancer une exception <code>NS_ERROR_DOM_INVALID_CHARACTER_ERR</code> si on essaye de soumettre la séquence CDATA de fermeture ("]]>") en tant que partie des données ; les données fournies par l'utilisateur non échappées, ne peuvent pas être utilisées en toute sécurité sans qu'avec cette méthode on obtienne cette exception (<code><a href="/en-US/docs/DOM/document.createTextNode">createTextNode()</a></code> peut souvent être utilisé à sa place).</li> -</ul> +- Cela fonctionnera uniquement avec XML, pas avec les documents HTML (car les documents HTML ne supportent pas les sections CDATA) ; le tenter sur un document HTML va lancer une exception `NOT_SUPPORTED_ERR`. +- Va lancer une exception `NS_ERROR_DOM_INVALID_CHARACTER_ERR` si on essaye de soumettre la séquence CDATA de fermeture ("]]>") en tant que partie des données ; les données fournies par l'utilisateur non échappées, ne peuvent pas être utilisées en toute sécurité sans qu'avec cette méthode on obtienne cette exception ([`createTextNode()`](/en-US/docs/DOM/document.createTextNode) peut souvent être utilisé à sa place). -<h2 id="Specification">Spécification</h2> +## Spécification -<ul> - <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createCDATASection">createCDATASection</a></li> -</ul> +- [createCDATASection](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createCDATASection) diff --git a/files/fr/web/api/document/createcomment/index.md b/files/fr/web/api/document/createcomment/index.md index 5e16be2ecb..d2553c1327 100644 --- a/files/fr/web/api/document/createcomment/index.md +++ b/files/fr/web/api/document/createcomment/index.md @@ -8,34 +8,31 @@ tags: - Reference translation_of: Web/API/Document/createComment --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p><code>createComment()</code> crée et retourne un nouveau noeud de type commentaire.</p> +`createComment()` crée et retourne un nouveau noeud de type commentaire. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>CommentNode</em> = document.createComment(data) -</pre> + CommentNode = document.createComment(data) -<h3 id="Parameters">Paramètres</h3> +### Paramètres -<dl> - <dt><code>data</code></dt> - <dd>Une chaîne de caractères représentant le contenu du commentaire.</dd> -</dl> +- `data` + - : Une chaîne de caractères représentant le contenu du commentaire. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush:js">var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml"); +```js +var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml"); var comment = docu.createComment('Voici un commentaire pas très bien caché'); docu.getElementsByTagName('xml')[0].appendChild(comment); alert(new XMLSerializer().serializeToString(docu)); -// Affiche: <xml><!--Voici un commentaire pas très bien caché--></xml></pre> +// Affiche: <xml><!--Voici un commentaire pas très bien caché--></xml> +``` -<h2 id="Spécification">Spécification</h2> +## Spécification -<ul> - <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createComment">createComment</a></li> -</ul> +- [createComment](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createComment) diff --git a/files/fr/web/api/document/createdocumentfragment/index.md b/files/fr/web/api/document/createdocumentfragment/index.md index 629d26ed27..d4bf794671 100644 --- a/files/fr/web/api/document/createdocumentfragment/index.md +++ b/files/fr/web/api/document/createdocumentfragment/index.md @@ -10,35 +10,37 @@ tags: - Reference translation_of: Web/API/Document/createDocumentFragment --- -<div>{{ApiRef("DOM")}}</div> +{{ApiRef("DOM")}} -<p>Crée un nouvel objet vide de type {{domxref("DocumentFragment")}}.</p> +Crée un nouvel objet vide de type {{domxref("DocumentFragment")}}. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment(); -</pre> + var fragment = document.createDocumentFragment(); -<p><code>fragment</code> est une référence vers un objet vide de type {{domxref("DocumentFragment")}} .</p> +`fragment` est une référence vers un objet vide de type {{domxref("DocumentFragment")}} . -<h2 id="Description">Description</h2> +## Description -<p>Les objets <code>DocumentFragments</code> sont analogues à des nœuds du DOM, mais ne font jamais partie de l'arbre DOM. Le cas d'usage le plus courant consiste à créer un fragment pour y stocker des éléments, puis à ajouter en une seule opération le fragment à l'arbre DOM, ce qui a pour effet de le remplacer par tous ses éléments enfants.</p> +Les objets `DocumentFragments` sont analogues à des nœuds du DOM, mais ne font jamais partie de l'arbre DOM. Le cas d'usage le plus courant consiste à créer un fragment pour y stocker des éléments, puis à ajouter en une seule opération le fragment à l'arbre DOM, ce qui a pour effet de le remplacer par tous ses éléments enfants. -<p>Le principal avantage de cette méthode de mise à jour du DOM vient du fait que le fragment est stocké en mémoire, et pas dans l'arbre DOM lui-même, de sorte que le modifier ne déclenche pas de <a href="http://code.google.com/speed/articles/reflow.html">reflow</a> (le calcul des positions et de la géométrie de chacun des éléments de la page affichée). Par conséquent, l´utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une <a href="http://ejohn.org/blog/dom-documentfragments/">amélioration des performance</a>s.</p> +Le principal avantage de cette méthode de mise à jour du DOM vient du fait que le fragment est stocké en mémoire, et pas dans l'arbre DOM lui-même, de sorte que le modifier ne déclenche pas de [reflow](http://code.google.com/speed/articles/reflow.html) (le calcul des positions et de la géométrie de chacun des éléments de la page affichée). Par conséquent, l´utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une [amélioration des performance](http://ejohn.org/blog/dom-documentfragments/)s. -<h2 id="Example">Exemple</h2> +## Exemple -<p>Cet exemple crée une liste des principaux navigateurs du web.</p> +Cet exemple crée une liste des principaux navigateurs du web. -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><ul id="ul"> -</ul></pre> +```html +<ul id="ul"> +</ul> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">var element = document.getElementById('ul'); // en supposant qu'ul existe +```js +var element = document.getElementById('ul'); // en supposant qu'ul existe var fragment = document.createDocumentFragment(); var browsers = ['Firefox', 'Chrome', 'Opera', 'Safari', 'Internet Explorer']; @@ -49,39 +51,24 @@ browsers.forEach(function(browser) { fragment.appendChild(li); }); -element.appendChild(fragment);</pre> +element.appendChild(fragment); +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Example", 600, 140)}}</p> +{{EmbedLiveSample("Example", 600, 140)}} -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale dans la spécification DOM 1.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ | +| {{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale dans la spécification DOM 1. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.createDocumentFragment")}}</p> +{{Compat("api.Document.createDocumentFragment")}} -<h2 id="Voir_aussi">Voir aussi</h2> -</div> +## Voir aussi -<ul> - <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li> - <li>{{domxref("documentFragment")}}</li> -</ul> +- {{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}} +- {{domxref("documentFragment")}} diff --git a/files/fr/web/api/document/createelement/index.md b/files/fr/web/api/document/createelement/index.md index aaf9bf831b..e68fb79530 100644 --- a/files/fr/web/api/document/createelement/index.md +++ b/files/fr/web/api/document/createelement/index.md @@ -10,50 +10,49 @@ tags: - Méthodes translation_of: Web/API/Document/createElement --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>Dans un document <a href="/fr/docs/Web/HTML">HTML</a>, la méthode <strong><code>document.createElement()</code></strong> crée un élément HTML du type spécifié par <code>tagName</code> ou un {{domxref("HTMLUnknownElement")}} si <code>tagName</code> n’est pas reconnu.</p> +Dans un document [HTML](/fr/docs/Web/HTML), la méthode **`document.createElement()`** crée un élément HTML du type spécifié par `tagName` ou un {{domxref("HTMLUnknownElement")}} si `tagName` n’est pas reconnu. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var element = document.createElement(tagName[, options]);</pre> + var element = document.createElement(tagName[, options]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>tagName</dt> - <dd>Une chaîne de caractères ({{domxref("DOMString")}}) spécifiant le type d’élément à créer. Le {{domxref("Node.nodeName", "nodeName")}} (<em>nom du noeud</em>) de l’élément créé est initialisé avec la valeur de <code>tagName</code>. N’utilisez pas le nom qualifié (comme <code>"html:a"</code>) avec cette méthode. Quand elle est appelée sur un document HTML, <code>createElement()</code> convertit <code>tagName</code> en minuscules avant de créer l’élément. Dans Firefox, Opera et Chrome, <code>createElement(null)</code> fonctionne comme <code>createElement("null")</code>.</dd> - <dt>options{{optional_inline}}</dt> - <dd> - <p>Un objet <code>ElementCreationOptions</code> facultatif contenant une seule propriété nommée <code>is</code> dont la valeur est le nom de balise d’un élément personnalisé précédemment défini avec <code>customElements.define()</code>. Voir {{anch("Web component example")}} pour plus de détails.</p> - </dd> -</dl> +- tagName + - : Une chaîne de caractères ({{domxref("DOMString")}}) spécifiant le type d’élément à créer. Le {{domxref("Node.nodeName", "nodeName")}} (_nom du noeud_) de l’élément créé est initialisé avec la valeur de `tagName`. N’utilisez pas le nom qualifié (comme `"html:a"`) avec cette méthode. Quand elle est appelée sur un document HTML, `createElement()` convertit `tagName` en minuscules avant de créer l’élément. Dans Firefox, Opera et Chrome, `createElement(null)` fonctionne comme `createElement("null")`. +- options{{optional_inline}} + - : Un objet `ElementCreationOptions` facultatif contenant une seule propriété nommée `is` dont la valeur est le nom de balise d’un élément personnalisé précédemment défini avec `customElements.define()`. Voir {{anch("Web component example")}} pour plus de détails. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>L’objet {{domxref("Element")}} créé.</p> +L’objet {{domxref("Element")}} créé. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Exemple_de_base">Exemple de base</h3> +### Exemple de base -<p>Ici est créé un nouveau <code><div></code> qui est inséré avant l’élément avec l’identifiant <code>"div1"</code>.</p> +Ici est créé un nouveau `<div>` qui est inséré avant l’élément avec l’identifiant `"div1"`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>||Working with elements||</title> -</head> -<body> - <div id="div1">The text above has been created dynamically.</div> -</body> -</html></pre> +```html +<!DOCTYPE html> +<html> +<head> + <title>||Working with elements||</title> +</head> +<body> + <div id="div1">The text above has been created dynamically.</div> +</body> +</html> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">document.body.onload = addElement; +```js +document.body.onload = addElement; function addElement () { // crée un nouvel élément div @@ -66,15 +65,17 @@ function addElement () { // ajoute le nouvel élément créé et son contenu dans le DOM var currentDiv = document.getElementById('div1'); document.body.insertBefore(newDiv, currentDiv); -}</pre> +} +``` -<p>{{EmbedLiveSample("Basic_example", 500, 50)}}</p> +{{EmbedLiveSample("Basic_example", 500, 50)}} -<h3 id="Exemple_de_composant_web">Exemple de composant web</h3> +### Exemple de composant web -<p>L’exemple de fragment suivant est extrait de notre exemple expanding-list-web-component (voir aussi en direct). Dans ce cas, notre élément personnalisé étend la {{domxref("HTMLUListElement")}} qui représente l’élément {{htmlelement("ul")}}.</p> +L’exemple de fragment suivant est extrait de notre exemple expanding-list-web-component (voir aussi en direct). Dans ce cas, notre élément personnalisé étend la {{domxref("HTMLUListElement")}} qui représente l’élément {{htmlelement("ul")}}. -<pre class="brush: js">// Crée une classe pour l’élément +```js +// Crée une classe pour l’élément class ExpandingList extends HTMLUListElement { constructor() { // Toujours appeler « super » en premier dans le constructeur @@ -86,52 +87,38 @@ class ExpandingList extends HTMLUListElement { } // Définit le nouvel élément -customElements.define('expanding-list', ExpandingList, { extends: 'ul' });</pre> +customElements.define('expanding-list', ExpandingList, { extends: 'ul' }); +``` -<p>Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante :</p> +Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante : -<pre class="brush: js">let expandingList = document.createElement('ul', { is : 'expanding-list' })</pre> +```js +let expandingList = document.createElement('ul', { is : 'expanding-list' }) +``` -<p>Le nouvel élément donnera un attribut <code><a href="/docs/Web/HTML/Global_attributes/is">is</a></code> dont la valeur est la balise de nom de l’élément personnalisé.</p> +Le nouvel élément donnera un attribut [`is`](/docs/Web/HTML/Global_attributes/is) dont la valeur est la balise de nom de l’élément personnalisé. -<div class="note"> -<p><strong>Note :</strong> Pour la rétrocompatibilité avec les versions précédentes de la <a href="https://www.w3.org/TR/custom-elements/">spécification des éléments personnalisés</a>, quelques navigateurs permettent de passer une chaîne de caractères ici, à la place d’un objet, dont la valeur est la balise de nom de l’élément personnalisé.</p> -</div> +> **Note :** Pour la rétrocompatibilité avec les versions précédentes de la [spécification des éléments personnalisés](https://www.w3.org/TR/custom-elements/), quelques navigateurs permettent de passer une chaîne de caractères ici, à la place d’un objet, dont la valeur est la balise de nom de l’élément personnalisé. -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.createElement")}}</p> +{{Compat("api.Document.createElement")}} -<h3 id="Notes_CSS_Quantum">Notes CSS Quantum</h3> +### Notes CSS Quantum -<ul> - <li>Dans Gecko, quand vous voulez créer un sous-arbre détaché (par exemple, un {{htmlelement("div")}} créé avec <code>createElement()</code> qui n’est pas encore inséré dans le DOM), l’élément racine du sous-arbre est défini comme un élément de niveau bloc. Dans le nouveau moteur CSS parallèle de Firefox (aussi connu comme <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> ou <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour être publié dans Firefox 57), il est défini comme "inline", ({{bug(1374994)}}) selon la spécification.</li> -</ul> +- Dans Gecko, quand vous voulez créer un sous-arbre détaché (par exemple, un {{htmlelement("div")}} créé avec `createElement()` qui n’est pas encore inséré dans le DOM), l’élément racine du sous-arbre est défini comme un élément de niveau bloc. Dans le nouveau moteur CSS parallèle de Firefox (aussi connu comme [Quantum CSS](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo), prévu pour être publié dans Firefox 57), il est défini comme "inline", ({{bug(1374994)}}) selon la spécification. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Node.removeChild()")}}</li> - <li>{{domxref("Node.replaceChild()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("Node.hasChildNodes()")}}</li> - <li>{{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément.</li> -</ul> +- {{domxref("Node.removeChild()")}} +- {{domxref("Node.replaceChild()")}} +- {{domxref("Node.appendChild()")}} +- {{domxref("Node.insertBefore()")}} +- {{domxref("Node.hasChildNodes()")}} +- {{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément. diff --git a/files/fr/web/api/document/createelementns/index.md b/files/fr/web/api/document/createelementns/index.md index 4949f5203e..7957b59245 100644 --- a/files/fr/web/api/document/createelementns/index.md +++ b/files/fr/web/api/document/createelementns/index.md @@ -11,51 +11,50 @@ tags: - URI translation_of: Web/API/Document/createElementNS --- -<div>{{ApiRef("DOM")}}</div> +{{ApiRef("DOM")}} -<p>Crée un élément avec l'URI de l'espace de noms spécifié et un nom qualifié.</p> +Crée un élément avec l'URI de l'espace de noms spécifié et un nom qualifié. -<p>Pour créer un élément sans spécifier d'URI d'espace de noms, utilisez la méthode <a href="/fr/docs/Web/API/Document/createElement">createElement </a><a href="/fr/docs/Web/API/Document/createElement"> </a>.</p> +Pour créer un élément sans spécifier d'URI d'espace de noms, utilisez la méthode [createElement ](/fr/docs/Web/API/Document/createElement)[](/fr/docs/Web/API/Document/createElement). -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var element = document.createElementNS(namespaceURI, qualifiedName[, options]);</pre> +```js +var element = document.createElementNS(namespaceURI, qualifiedName[, options]); +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>namespaceURI</code></dt> - <dd>est une chaîne de caractères qui spécifie <a href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">l'URI de l'espace de noms</a> à associer à l'élément. La propriété <a href="/fr/docs/Web/API/Node/namespaceURI">namespaceURI</a> de l'élément créé est initialisée avec la valeur de <code>namespaceURI</code>. voir <a href="#URI_d'espaces_de_nom_valides">URI d'espaces de nom valides</a></dd> - <dt><code>qualifiedName</code></dt> - <dd>est une chaîne de caractères qui spécifie le type de l'élément à créer. La propriété <a href="/fr/docs/Web/API/Node/nodeName">nodeName</a> de l'élément créé est initialisée avec la valeur de <code>qualifiedName</code></dd> - <dt><code>Options </code>Facultatif</dt> - <dd><p>Un objet facultatif <code>ElementCreationOptions</code> contient une propriété unique nommée <code>is</code>, dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de <code>customElements.define()</code> . Pour la rétro-compatibilité avec les versions précédentes de la <a href="https://www.w3.org/TR/custom-elements/">spécification des éléments personnalisés</a>, quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir <a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> pour plus d'informations sur la façon d'utiliser ce paramètre. Le nouvel élément recevra un attribut <code>is</code> dont la valeur est le nom de la balise de l'élément personnalisé. Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs.</p></dd> -</dl> +- `namespaceURI` + - : est une chaîne de caractères qui spécifie [l'URI de l'espace de noms](http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI) à associer à l'élément. La propriété [namespaceURI](/fr/docs/Web/API/Node/namespaceURI) de l'élément créé est initialisée avec la valeur de `namespaceURI`. voir [URI d'espaces de nom valides](#URI_d'espaces_de_nom_valides) +- `qualifiedName` + - : est une chaîne de caractères qui spécifie le type de l'élément à créer. La propriété [nodeName](/fr/docs/Web/API/Node/nodeName) de l'élément créé est initialisée avec la valeur de `qualifiedName` +- `Options `Facultatif + - : Un objet facultatif `ElementCreationOptions` contient une propriété unique nommée `is`, dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de `customElements.define()` . Pour la rétro-compatibilité avec les versions précédentes de la [spécification des éléments personnalisés](https://www.w3.org/TR/custom-elements/), quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir [Extending native HTML elements](https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml) pour plus d'informations sur la façon d'utiliser ce paramètre. Le nouvel élément recevra un attribut `is` dont la valeur est le nom de la balise de l'élément personnalisé. Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Le nouvel <code><a href="/fr/docs/Web/API/Element">element</a></code>.</p> +Le nouvel [`element`](/fr/docs/Web/API/Element). -<h2 id="Example">URI d'espaces de nom valides</h2> +## URI d'espaces de nom valides -<ul> - <li>HTML - Utiliser <code>http://www.w3.org/1999/xhtml</code></li> - <li>SVG - Utiliser <code>http://www.w3.org/2000/svg</code></li> - <li>XBL - Utiliser <code>http://www.mozilla.org/xbl</code></li> - <li>XUL - Utiliser <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li> -</ul> +- HTML - Utiliser `http://www.w3.org/1999/xhtml` +- SVG - Utiliser `http://www.w3.org/2000/svg` +- XBL - Utiliser `http://www.mozilla.org/xbl` +- XUL - Utiliser `http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul` -<h2 id="Example">Exemple</h2> +## Exemple -<p>Cet exemple crée un nouvel élément <div> dans l'espace de noms <a href="/fr/docs/XHTML">XHTML</a> et l'ajoute à l'élément vbox. Bien que ce ne soit pas un document <a href="/fr/docs/Mozilla/Tech/XUL">XUL</a> très utile, cela montre l'utilisation d'éléments de deux espaces de noms différents au sein d'un même document :</p> +Cet exemple crée un nouvel élément \<div> dans l'espace de noms [XHTML](/fr/docs/XHTML) et l'ajoute à l'élément vbox. Bien que ce ne soit pas un document [XUL](/fr/docs/Mozilla/Tech/XUL) très utile, cela montre l'utilisation d'éléments de deux espaces de noms différents au sein d'un même document : -<pre class="brush:xml"><?xml version="1.0"?> -<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" +```xml +<?xml version="1.0"?> +<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" title="||Working with elements||" - onload="init()"> + onload="init()"> -<script type="text/javascript"><![CDATA[ +<script type="text/javascript"><![CDATA[ var container; var newdiv; var txtnode; @@ -68,46 +67,32 @@ translation_of: Web/API/Document/createElementNS container.appendChild(newdiv); } -]]></script> +]]></script> - <vbox id='ContainerBox' flex='1'> - <html:div> + <vbox id='ContainerBox' flex='1'> + <html:div> Le script sur cette page ajoutera du contenu dynamique ci-dessous : - </html:div> - </vbox> - -</page></pre> - -<div class="note"> -<p><strong>Note :</strong> Cet exemple utilise un script interne, ce qui n'est pas recommandé dans les documents XHTML. Cet exemple particulier est en fait un document XUL intégrant du XHTML. Cependant, la recommandation s'applique quand même.</p> -</div> - -<h2 id="Specification">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Document.createElementNS")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="document.createElement">document.createElement</a></li> - <li><a href="document.createTextNode">document.createTextNode</a></li> - <li><a href="/fr/docs/Web/API/Node/namespaceURI">Node.namespaceURI</a></li> - <li><a href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li> -</ul> + </html:div> + </vbox> + +</page> +``` + +> **Note :** Cet exemple utilise un script interne, ce qui n'est pas recommandé dans les documents XHTML. Cet exemple particulier est en fait un document XUL intégrant du XHTML. Cependant, la recommandation s'applique quand même. + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.Document.createElementNS")}} + +## Voir aussi + +- [document.createElement](document.createElement) +- [document.createTextNode](document.createTextNode) +- [Node.namespaceURI](/fr/docs/Web/API/Node/namespaceURI) +- [Namespaces in XML](http://www.w3.org/TR/1999/REC-xml-names-19990114) diff --git a/files/fr/web/api/document/createentityreference/index.md b/files/fr/web/api/document/createentityreference/index.md index 46269f94bc..3dfdecf2dc 100644 --- a/files/fr/web/api/document/createentityreference/index.md +++ b/files/fr/web/api/document/createentityreference/index.md @@ -3,12 +3,12 @@ title: Document.createEntityReference() slug: Web/API/Document/createEntityReference translation_of: Web/API/Document/createEntityReference --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>{{ obsolete_header("7.0") }}</p> +{{ obsolete_header("7.0") }} -<p>Avant {{ gecko("7.0") }} cette méthode apparaissait présente mais en raison du bogue {{bug("9850")}}, elle renvoyait toujours uniquement "null". La seule solution consiste à créer un noeud de texte, une section CDATA, une valeur de noeud d'attribut, etc., qui ont la valeur référencée par l'entité, en utilisant <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caract%C3%A8res_d%27%C3%A9chappement">Les caractères d'échappement</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode">fromCharCode()</a> si nécessaire.</p> +Avant {{ gecko("7.0") }} cette méthode apparaissait présente mais en raison du bogue {{bug("9850")}}, elle renvoyait toujours uniquement "null". La seule solution consiste à créer un noeud de texte, une section CDATA, une valeur de noeud d'attribut, etc., qui ont la valeur référencée par l'entité, en utilisant [Les caractères d'échappement](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caract%C3%A8res_d%27%C3%A9chappement) ou [fromCharCode()](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode) si nécessaire. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<p><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE">createEntityReference</a></p> +[createEntityReference](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE) diff --git a/files/fr/web/api/document/createevent/index.md b/files/fr/web/api/document/createevent/index.md index 3cccde91e3..8696602672 100644 --- a/files/fr/web/api/document/createevent/index.md +++ b/files/fr/web/api/document/createevent/index.md @@ -8,81 +8,71 @@ tags: - Reference translation_of: Web/API/Document/createEvent --- -<div class="warning"> -<p><strong>Attention :</strong> De nombreuses méthodes utilisées avec <code>createEvent</code>, tels que <code>initCustomEvent</code>, sont obsolètes. Utilisez le <a href="/fr/docs/Web/API/CustomEvent">constructeur d'événement </a><a href="/fr/docs/Web/API/CustomEvent"> </a>à la place.</p> -</div> +> **Attention :** De nombreuses méthodes utilisées avec `createEvent`, tels que `initCustomEvent`, sont obsolètes. Utilisez le [constructeur d'événement ](/fr/docs/Web/API/CustomEvent)[](/fr/docs/Web/API/CustomEvent)à la place. -<div>{{ ApiRef("DOM") }}</div> +{{ ApiRef("DOM") }} -<p>Crée un <a href="/en-US/docs/DOM/event">event</a> du type spécifié. L'objet retourné doit être intialisé et peut être passé ensuite à <a href="/en-US/docs/DOM/element.dispatchEvent">element.dispatchEvent</a>.</p> +Crée un [event](/en-US/docs/DOM/event) du type spécifié. L'objet retourné doit être intialisé et peut être passé ensuite à [element.dispatchEvent](/en-US/docs/DOM/element.dispatchEvent). -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>event</em> = <em>document</em>.createEvent(<em>type</em>); -</pre> + var event = document.createEvent(type); -<ul> - <li><code>event</code> est l'objet <a href="/en-US/docs/DOM/event">Event</a> créé.</li> - <li><code>type</code> est une chaîne de caractères qui représente le type d'événement à créer. Les types possibles d'événement incluent <code>"UIEvents"</code>, <code>"MouseEvents"</code>, <code>"MutationEvents"</code> et <code>"HTMLEvents"</code>. Voir la section {{Anch("Notes")}} pour plus de détails.</li> -</ul> +- `event` est l'objet [Event](/en-US/docs/DOM/event) créé. +- `type` est une chaîne de caractères qui représente le type d'événement à créer. Les types possibles d'événement incluent `"UIEvents"`, `"MouseEvents"`, `"MutationEvents"` et `"HTMLEvents"`. Voir la section {{Anch("Notes")}} pour plus de détails. -<h2 id="Example">Exemple</h2> +## Exemple -<pre>// Crée l'événement. -var event = document.createEvent('Event'); + // Crée l'événement. + var event = document.createEvent('Event'); -// Nomme l'événement 'build'. -event.initEvent('build', true, true); + // Nomme l'événement 'build'. + event.initEvent('build', true, true); -// Écoute l'événement. -elem.addEventListener('build', function (e) { - // e.target correspond à elem -}, false); + // Écoute l'événement. + elem.addEventListener('build', function (e) { + // e.target correspond à elem + }, false); -// target peut être tout Element ou autre EventTarget. -elem.dispatchEvent(event); -</pre> + // target peut être tout Element ou autre EventTarget. + elem.dispatchEvent(event); -<h3 id="Notes">Notes</h3> +### Notes -<p>Les chaînes de type d'événement appropriées pour passer à <code>createEvent ()</code> sont répertoriées dans la norme DOM - voir le tableau à l'étape 2. Gardez à l'esprit que la plupart des objets événement ont maintenant des constructeurs, qui sont la méthode recommandée pour créer des occurrences d'objet événement.</p> +Les chaînes de type d'événement appropriées pour passer à `createEvent ()` sont répertoriées dans la norme DOM - voir le tableau à l'étape 2. Gardez à l'esprit que la plupart des objets événement ont maintenant des constructeurs, qui sont la méthode recommandée pour créer des occurrences d'objet événement. -<p>Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous :</p> +Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous : <table class="fullwidth-table"> - <tbody> - <tr> - <th>Event Module</th> - <th>Standard event object</th> - <th>Gecko also supports</th> - </tr> - <tr> - <td>Text event module</td> - <td><code>TextEvent</code></td> - <td><code>TextEvents</code></td> - </tr> - <tr> - <td>Keyboard event module</td> - <td><code>KeyboardEvent</code></td> - <td><code>KeyEvents</code></td> - </tr> - <tr> - <td>Basic events module</td> - <td><code>Event</code></td> - <td><code>Events</code></td> - </tr> - </tbody> + <tbody> + <tr> + <th>Event Module</th> + <th>Standard event object</th> + <th>Gecko also supports</th> + </tr> + <tr> + <td>Text event module</td> + <td><code>TextEvent</code></td> + <td><code>TextEvents</code></td> + </tr> + <tr> + <td>Keyboard event module</td> + <td><code>KeyboardEvent</code></td> + <td><code>KeyEvents</code></td> + </tr> + <tr> + <td>Basic events module</td> + <td><code>Event</code></td> + <td><code>Events</code></td> + </tr> + </tbody> </table> -<h2 id="Spécification">Spécification</h2> +## Spécification -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent-createEvent">DOM Level 2 Events: createEvent</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent">DOM Level 3 Events: createEvent</a></li> -</ul> +- [DOM Level 2 Events: createEvent](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent-createEvent) +- [DOM Level 3 Events: createEvent](http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'événements</a></li> -</ul> +- [Création et déclenchement d'événements](/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events) diff --git a/files/fr/web/api/document/createexpression/index.md b/files/fr/web/api/document/createexpression/index.md index 778ef4bdd4..ecef9fd21d 100644 --- a/files/fr/web/api/document/createexpression/index.md +++ b/files/fr/web/api/document/createexpression/index.md @@ -8,24 +8,21 @@ tags: - XPath translation_of: Web/API/Document/createExpression --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>Cette méthode compile une <code><a href="/fr/docs/Web/API/XPathExpression">XPathExpression</a></code> qui peut ensuite être utilisée pour des évaluations (répétées).</p> +Cette méthode compile une [`XPathExpression`](/fr/docs/Web/API/XPathExpression) qui peut ensuite être utilisée pour des évaluations (répétées). -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>xpathExpr</em> = <em>document</em>.createExpression(<em>xpathText</em>, <em>namespaceURLMapper</em>); -</pre> + xpathExpr = document.createExpression(xpathText, namespaceURLMapper); -<h3 id="Arguments">Paramètres</h3> +### Paramètres -<ul> - <li>String (<em>chaîne de caractères</em>) <code>xpathText</code> (l'expression XPath à compiler)</li> - <li>Fonction <code>namespaceURLMapper</code> (mappe un préfixe d'espace de noms à une URL d'espace de noms (ou null si aucun n'est nécessaire)).</li> -</ul> +- String (_chaîne de caractères_) `xpathText` (l'expression XPath à compiler) +- Fonction `namespaceURLMapper` (mappe un préfixe d'espace de noms à une URL d'espace de noms (ou null si aucun n'est nécessaire)). -<p>{{ Fx_minversion_note(3, "Avant Firefox 3, vous pouviez appeler cette méthode sur des documents autres que celui que vous aviez prévu d'exécuter avec XPath. Sous Firefox 3, vous devez l'appeler sur le même document.") }}</p> +{{ Fx_minversion_note(3, "Avant Firefox 3, vous pouviez appeler cette méthode sur des documents autres que celui que vous aviez prévu d'exécuter avec XPath. Sous Firefox 3, vous devez l'appeler sur le même document.") }} -<h3 id="Return">Valeur retournée</h3> +### Valeur retournée -<p><a href="/fr/docs/Web/API/XPathExpression">XPathExpression</a></p> +[XPathExpression](/fr/docs/Web/API/XPathExpression) diff --git a/files/fr/web/api/document/createnodeiterator/index.md b/files/fr/web/api/document/createnodeiterator/index.md index 7183969144..c89db358cf 100644 --- a/files/fr/web/api/document/createnodeiterator/index.md +++ b/files/fr/web/api/document/createnodeiterator/index.md @@ -7,108 +7,146 @@ tags: - Méthodes translation_of: Web/API/Document/createNodeIterator --- -<p>{{APIRef("DOM")}}</p> - -<p>Renvoie un nouvel objet <a href="/fr/docs/Web/API/NodeIterator"><code>NodeIterator</code></a>.</p> - -<h2 id="Syntax">Syntaxe</h2> - -<pre class="brush: js">var nodeIterator = document.createNodeIterator(root, whatToShow, filter); -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>root</code></dt> - <dd>Le noeud racine à partir duquel commencer la traversée de {{domxref("NodeIterator")}}.</dd> - <dt><code>whatToShow</code> {{ optional_inline() }}</dt> - <dd>Est un <code>unsigned long</code> (<em>long non signé</em>) facultatif représentant un masque de bits créé par la combinaison des constantes de la propriété <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. C'est un moyen pratique de filtrage pour certains types de noeuds. Il est par défaut <code>0xFFFFFFFF</code> représentant la constante <code>SHOW_ALL</code>. - <table class="standard-table"> - <tbody> - <tr> - <td class="header">Constante</td> - <td class="header">Valeur numérique</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_ALL</code></td> - <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td> - <td>Affiche tous les noeuds.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td> - <td><code>2</code></td> - <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td> - <td><code>8</code></td> - <td>Affiche les noeuds {{domxref("CDATASection")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_COMMENT</code></td> - <td><code>128</code></td> - <td>Affiche les noeuds {{domxref("Comment")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_DOCUMENT</code></td> - <td><code>256</code></td> - <td>Affiche les noeuds {{domxref("Document")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td> - <td><code>1024</code></td> - <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td> - <td><code>512</code></td> - <td>Affiche les noeuds {{domxref("DocumentType")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_ELEMENT</code></td> - <td><code>1</code></td> - <td>Affiche les noeuds {{domxref("Element")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td> - <td><code>32</code></td> - <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td> - <td><code>16</code></td> - <td>Affiche les noeuds {{domxref("EntityReference")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td> - <td><code>2048</code></td> - <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td> - <td><code>64</code></td> - <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_TEXT</code></td> - <td><code>4</code></td> - <td>Affiche les noeuds {{domxref("Text")}}.</td> - </tr> - </tbody> - </table> - </dd> - <dt><code>filter</code> {{ optional_inline() }}</dt> - <dd>Un objet implémentant l'interface {{ domxref("NodeFilter") }} ; sa méthode <code>acceptNode()</code> sera appelée pour chaque nœud du sous-arbre basé à la racine qui est accepté comme inclus par l'indicateur whatToShow pour déterminer s'il faut ou non l'inclure dans la liste des nœuds iterables (une simple fonction de rappel peut également être utilisée à la place). La méthode devrait retourner l'un des <code>NodeFilter.FILTER_ACCEPT</code>, <code>NodeFilter.FILTER_REJECT</code> ou <code>NodeFilter.FILTER_SKIP</code>. Voir l'{{anch("Exemple")}}.</dd> -</dl> - -<div class="note"> - <p><strong>Note :</strong> Avant Gecko 12.0 {{geckoRelease("12.0")}}, cette méthode acceptait un quatrième paramètre facultatif (<code>entityReferenceExpansion</code>). Cela ne faisait pas partie de la spécification DOM4 et a donc été supprimé. Ce paramètre indiquait si les enfants des nœuds de référence d'entité étaient visibles ou non par l'itérateur. Puisque de tels noeuds n'ont jamais été créés dans les navigateurs, ce paramètre n'a eu aucun effet.</p> -</div> - -<h2>Exemple</h2> - -<pre class="brush: js">var nodeIterator = document.createNodeIterator( +{{APIRef("DOM")}} + +Renvoie un nouvel objet [`NodeIterator`](/fr/docs/Web/API/NodeIterator). + +## Syntaxe + +```js +var nodeIterator = document.createNodeIterator(root, whatToShow, filter); +``` + +### Valeurs + +- `root` + - : Le noeud racine à partir duquel commencer la traversée de {{domxref("NodeIterator")}}. +- `whatToShow` {{ optional_inline() }} + + - : Est un `unsigned long` (_long non signé_) facultatif représentant un masque de bits créé par la combinaison des constantes de la propriété [`NodeFilter`](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter). C'est un moyen pratique de filtrage pour certains types de noeuds. Il est par défaut `0xFFFFFFFF` représentant la constante `SHOW_ALL`. + + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Constante</td> + <td class="header">Valeur numérique</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ALL</code></td> + <td> + <code>-1</code> (c'est la valeur numérique maximale du + <code>unsigned long</code> (<em>non signé long</em>)) + </td> + <td>Affiche tous les noeuds.</td> + </tr> + <tr> + <td> + <code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}} + </td> + <td><code>2</code></td> + <td> + Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens + que lors de la création d'un {{domxref("TreeWalker")}} avec un + noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie + que le nœud d'attribut apparaîtra dans la première position de + l'itération ou de la traversée. Comme les attributs ne sont jamais des + enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de + l'arbre du document. + </td> + </tr> + <tr> + <td> + <code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}} + </td> + <td><code>8</code></td> + <td>Affiche les noeuds {{domxref("CDATASection")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_COMMENT</code></td> + <td><code>128</code></td> + <td>Affiche les noeuds {{domxref("Comment")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT</code></td> + <td><code>256</code></td> + <td>Affiche les noeuds {{domxref("Document")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td> + <td><code>1024</code></td> + <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td> + <td><code>512</code></td> + <td>Affiche les noeuds {{domxref("DocumentType")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ELEMENT</code></td> + <td><code>1</code></td> + <td>Affiche les noeuds {{domxref("Element")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td> + <td><code>32</code></td> + <td> + Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que + lors de la création d'un {{domxref("TreeWalker")}} avec un noeud + {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie + que le noeud d'entité {{domxref("Entity") }} apparaîtra à la + première position de la traversée. Étant donné que les entités ne font + pas partie de l'arborescence du document, elles n'apparaissent pas lors + de la traversée de l'arborescence du document. + </td> + </tr> + <tr> + <td> + <code>NodeFilter.SHOW_ENTITY_REFERENCE</code> + {{deprecated_inline}} + </td> + <td><code>16</code></td> + <td>Affiche les noeuds {{domxref("EntityReference")}}.</td> + </tr> + <tr> + <td> + <code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}} + </td> + <td><code>2048</code></td> + <td> + Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens + que lors de la création d'un {{domxref("TreeWalker")}} avec un + noeud {{domxref("Notation")}} comme racine ; dans ce cas, il + signifie que le noeud {{domxref("Notation")}} apparaîtra à la + première position de la traversée. Étant donné que les entités ne font + pas partie de l'arborescence du document, elles n'apparaissent pas lors + de la traversée de l'arborescence du document. + </td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td> + <td><code>64</code></td> + <td> + Affiche les noeuds {{domxref("ProcessingInstruction")}}. + </td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_TEXT</code></td> + <td><code>4</code></td> + <td>Affiche les noeuds {{domxref("Text")}}.</td> + </tr> + </tbody> + </table> + +- `filter` {{ optional_inline() }} + - : Un objet implémentant l'interface {{ domxref("NodeFilter") }} ; sa méthode `acceptNode()` sera appelée pour chaque nœud du sous-arbre basé à la racine qui est accepté comme inclus par l'indicateur whatToShow pour déterminer s'il faut ou non l'inclure dans la liste des nœuds iterables (une simple fonction de rappel peut également être utilisée à la place). La méthode devrait retourner l'un des `NodeFilter.FILTER_ACCEPT`, `NodeFilter.FILTER_REJECT` ou `NodeFilter.FILTER_SKIP`. Voir l'{{anch("Exemple")}}. + +> **Note :** Avant Gecko 12.0 {{geckoRelease("12.0")}}, cette méthode acceptait un quatrième paramètre facultatif (`entityReferenceExpansion`). Cela ne faisait pas partie de la spécification DOM4 et a donc été supprimé. Ce paramètre indiquait si les enfants des nœuds de référence d'entité étaient visibles ou non par l'itérateur. Puisque de tels noeuds n'ont jamais été créés dans les navigateurs, ce paramètre n'a eu aucun effet. + +## Exemple + +```js +var nodeIterator = document.createNodeIterator( document.body, NodeFilter.SHOW_ELEMENT, function(node) { @@ -121,19 +159,16 @@ var currentNode; while (currentNode = nodeIterator.nextNode()) { pars.push(currentNode); } +``` -</pre> +### Compatibilité des navigateurs -<h3 id="Specification">Compatibilité des navigateurs</h3> +Pris en charge dans FF 3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge -<p>Pris en charge dans FF 3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge</p> +## Voir aussi -<h2 id="Specification">Voir aussi</h2> +- [createNodeIterator sur MDN](/fr/docs/Web/API/Document/createNodeIterator) -<ul> - <li><a href="/fr/docs/Web/API/Document/createNodeIterator">createNodeIterator sur MDN</a></li> -</ul> +## Spécifications -<h2 id="Specification">Spécifications</h2> - -<p><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeIterator">DOM Level 2 Traversal : NodeIterator</a></p> +[DOM Level 2 Traversal : NodeIterator](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeIterator) diff --git a/files/fr/web/api/document/creatensresolver/index.md b/files/fr/web/api/document/creatensresolver/index.md index 1311c87a86..b4284bf5c7 100644 --- a/files/fr/web/api/document/creatensresolver/index.md +++ b/files/fr/web/api/document/creatensresolver/index.md @@ -8,42 +8,35 @@ tags: - XPath translation_of: Web/API/Document/createNSResolver --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>Crée un <code>XPathNSResolver</code> qui résout les espaces de noms en respectant les définitions dans la portée pour un noeud spécifié.</p> +Crée un `XPathNSResolver` qui résout les espaces de noms en respectant les définitions dans la portée pour un noeud spécifié. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>nsResolver</em> = document.createNSResolver(<em>node</em>); -</pre> + nsResolver = document.createNSResolver(node); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<ul> - <li><code>node</code> est un noeud à utiliser comme contexte pour la résolution de l'espace de noms.</li> -</ul> +- `node` est un noeud à utiliser comme contexte pour la résolution de l'espace de noms. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<ul> - <li><code>nsResolver</code> est un objet XPathNSResolver.</li> -</ul> +- `nsResolver` est un objet XPathNSResolver. -<h2 id="Notes">Notes</h2> +## Notes -<p>Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression <a href="/fr/docs/XPath">XPath</a> puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode <code>lookupNamespaceURI</code> du DOM de niveau 3 sur les noeuds lors de la résolution de <code>namespaceURI</code> à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de <code>lookupNamespaceURI</code>. Résout aussi correctement le préfixe implicite <code>xml</code>.</p> +Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression [XPath](/fr/docs/XPath) puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode `lookupNamespaceURI` du DOM de niveau 3 sur les noeuds lors de la résolution de `namespaceURI` à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de `lookupNamespaceURI`. Résout aussi correctement le préfixe implicite `xml`. -<p>Notez que XPath définit QNames sans préfixe pour correspondre uniquement aux éléments d'un espace de noms null. XPath n'a aucun moyen de récupérer l'espace de noms par défaut tel qu'il est appliqué à une référence d'élément régulier (par exemple, <code>p[@id='_myid'</code>] pour <code>xmlns='http://www.w3.org/1999/xhtml'</code>). Pour faire correspondre les éléments par défaut dans un espace de noms non nul, vous devez soit faire référence à un élément particulier en utilisant un format tel que <code>*namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid']</code> (<a href="/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace">cette approche</a> fonctionne bien pour les expressions XPath dynamiques dans lesquelles les espaces de noms pourraient ne pas être connus), soit utiliser des tests de noms préfixés et créer un résolveur d'espace de nom mappant le préfixe à l'espace de nom. Pour en savoir plus sur <a href="/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Impl%C3%A9mentation_d%27un_r%C3%A9solveur">comment créer un résolveur d'espace de nom défini par l'utilisateur</a> si vous souhaitez adopter cette dernière approche.</p> +Notez que XPath définit QNames sans préfixe pour correspondre uniquement aux éléments d'un espace de noms null. XPath n'a aucun moyen de récupérer l'espace de noms par défaut tel qu'il est appliqué à une référence d'élément régulier (par exemple, `p[@id='_myid'`] pour `xmlns='http://www.w3.org/1999/xhtml'`). Pour faire correspondre les éléments par défaut dans un espace de noms non nul, vous devez soit faire référence à un élément particulier en utilisant un format tel que `*namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid']` ([cette approche](/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace) fonctionne bien pour les expressions XPath dynamiques dans lesquelles les espaces de noms pourraient ne pas être connus), soit utiliser des tests de noms préfixés et créer un résolveur d'espace de nom mappant le préfixe à l'espace de nom. Pour en savoir plus sur [comment créer un résolveur d'espace de nom défini par l'utilisateur](/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Impl%C3%A9mentation_d%27un_r%C3%A9solveur) si vous souhaitez adopter cette dernière approche. -<p><code>createNSResolver</code> a été introduit dans DOM Niveau 3.</p> +`createNSResolver` a été introduit dans DOM Niveau 3. -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/en/DOM/document.evaluate">document.evaluate</a></li> - <li><a href="/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a></li> -</ul> +- [document.evaluate](/en/DOM/document.evaluate) +- [Introduction à l'utilisation de XPath avec JavaScript](/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript) -<h2 id="Specification">Spécifications</h2> +## Spécifications -<p><a href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html#XPathEvaluator-createNSResolver">DOM Level 3 XPath Specification : createNSResolver</a></p> +[DOM Level 3 XPath Specification : createNSResolver](http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html#XPathEvaluator-createNSResolver) diff --git a/files/fr/web/api/document/createprocessinginstruction/index.md b/files/fr/web/api/document/createprocessinginstruction/index.md index 0bdd5ee83f..48fd8b5010 100644 --- a/files/fr/web/api/document/createprocessinginstruction/index.md +++ b/files/fr/web/api/document/createprocessinginstruction/index.md @@ -12,44 +12,38 @@ tags: - instructions translation_of: Web/API/Document/createProcessingInstruction --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p><code>createProcessingInstruction()</code> crée un nouveau noeud d'instruction de traitement et le renvoie.</p> +`createProcessingInstruction()` crée un nouveau noeud d'instruction de traitement et le renvoie. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>Processing instruction node</em> = document.createProcessingInstruction(target, data) -</pre> + Processing instruction node = document.createProcessingInstruction(target, data) -<h3 id="Parameters">Paramètres</h3> +### Paramètres -<ul> - <li><code>Processing Instruction node</code> est un noeud {{domxref("ProcessingInstruction")}}.</li> - <li><code>target</code> fait référence à la partie cible du noeud d'instructions de traitement (par exemple, <?<em>target</em> ... ?>).</li> - <li><code>data</code> est une string (<em>chaîne de caractères</em>) contenant les données à ajouter aux données du noeud.</li> -</ul> +- `Processing Instruction node` est un noeud {{domxref("ProcessingInstruction")}}. +- `target` fait référence à la partie cible du noeud d'instructions de traitement (par exemple, \<?_target_ ... ?>). +- `data` est une string (_chaîne de caractères_) contenant les données à ajouter aux données du noeud. -<h3 id="Notes">Exceptions</h3> +### Exceptions -<dl> - <dt><code>NOT_SUPPORTED_ERR</code></dt> - <dd>Lancée si vous tentez de créer un noeud d'instructions de traitement sur un document HTML dans Gecko 9 {{ geckoRelease("9.0") }} ou antérieurs. Dans Gecko 10.0 {{ geckoRelease("10.0") }} et ultérieurs, vous pouvez utiliser cette méthode sur des documents HTML.</dd> - <dt><code>DOM_INVALID_CHARACTER</code></dt> - <dd>Lancée si vous essayez d'ajouter une cible d'instruction de traitement invalide (ce devrait être le cas avec le nom XML et toutes les combinaisons des lettres "xml"), ou si la séquence d'instructions de traitement de fermeture ("?>") est ajoutée aux données. Les données fournies par l'utilisateur ne peuvent donc pas être utilisées en toute sécurité sans échappement ou autres moyens de faire face à de telles situations.</dd> -</dl> +- `NOT_SUPPORTED_ERR` + - : Lancée si vous tentez de créer un noeud d'instructions de traitement sur un document HTML dans Gecko 9 {{ geckoRelease("9.0") }} ou antérieurs. Dans Gecko 10.0 {{ geckoRelease("10.0") }} et ultérieurs, vous pouvez utiliser cette méthode sur des documents HTML. +- `DOM_INVALID_CHARACTER` + - : Lancée si vous essayez d'ajouter une cible d'instruction de traitement invalide (ce devrait être le cas avec le nom XML et toutes les combinaisons des lettres "xml"), ou si la séquence d'instructions de traitement de fermeture ("?>") est ajoutée aux données. Les données fournies par l'utilisateur ne peuvent donc pas être utilisées en toute sécurité sans échappement ou autres moyens de faire face à de telles situations. -<h2 id="Example">Exemple</h2> +## Exemple -<pre>var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml") + var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml") -var pi = docu.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"'); + var pi = docu.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"'); -docu.insertBefore(pi, docu.firstChild); + docu.insertBefore(pi, docu.firstChild); -alert(new XMLSerializer().serializeToString(docu)); -// Affiche: <?xml-stylesheet href="mycss.css" type="text/css"?><xml/> -</pre> + alert(new XMLSerializer().serializeToString(docu)); + // Affiche: <?xml-stylesheet href="mycss.css" type="text/css"?><xml/> -<h2 id="Specification">Spécifications</h2> +## Spécifications -<p><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createprocessinginstruction">DOM 4: createProcessingInstruction</a></p> +[DOM 4: createProcessingInstruction](http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createprocessinginstruction) diff --git a/files/fr/web/api/document/createrange/index.md b/files/fr/web/api/document/createrange/index.md index 9ef3bffc27..c40f105f7f 100644 --- a/files/fr/web/api/document/createrange/index.md +++ b/files/fr/web/api/document/createrange/index.md @@ -8,31 +8,29 @@ tags: - Méthodes translation_of: Web/API/Document/createRange --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>Retourne un objet {{domxref("Range")}}.</p> +Retourne un objet {{domxref("Range")}}. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">range = document.createRange(); -</pre> + range = document.createRange(); -<p><code>range</code> devient un objet {{domxref("Range")}}.</p> +`range` devient un objet {{domxref("Range")}}. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush:js">var range = document.createRange(); +```js +var range = document.createRange(); range.setStart(startNode, startOffset); range.setEnd(endNode, endOffset); -</pre> +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>Une fois un objet <code>Range</code> créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes.</p> +Une fois un objet `Range` créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes. -<h2 id="Specification">Spécification</h2> +## Spécification -<ul> - <li><a href="https://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level-2-DocumentRange-idl">DOM Level 2 Range: DocumentRange.createRange</a></li> -</ul> +- [DOM Level 2 Range: DocumentRange.createRange](https://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level-2-DocumentRange-idl) diff --git a/files/fr/web/api/document/createtextnode/index.md b/files/fr/web/api/document/createtextnode/index.md index 7fc4bfe701..805d83081f 100644 --- a/files/fr/web/api/document/createtextnode/index.md +++ b/files/fr/web/api/document/createtextnode/index.md @@ -8,71 +8,53 @@ tags: - Reference translation_of: Web/API/Document/createTextNode --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>Crée un nouveau nœud de texte.</p> +Crée un nouveau nœud de texte. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>données</var>); -</pre> + var text = document.createTextNode(données); -<ul> - <li><code>texte</code> est un nœud de texte.</li> - <li><code>donnees</code> est une chaîne contenant les données à placer dans le nœud de texte.</li> -</ul> +- `texte` est un nœud de texte. +- `donnees` est une chaîne contenant les données à placer dans le nœud de texte. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: html"><!DOCTYPE html> -<html lang="en"> -<head> -<title>createTextNode example</title> -<script> +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<title>createTextNode example</title> +<script> function addTextNode(text) { var newtext = document.createTextNode(text), p1 = document.getElementById("p1"); p1.appendChild(newtext); } -</script> -</head> +</script> +</head> -<body> - <button onclick="addTextNode('YES! ');">YES!</button> - <button onclick="addTextNode('NO! ');">NO!</button> - <button onclick="addTextNode('WE CAN! ');">WE CAN!</button> +<body> + <button onclick="addTextNode('YES! ');">YES!</button> + <button onclick="addTextNode('NO! ');">NO!</button> + <button onclick="addTextNode('WE CAN! ');">WE CAN!</button> - <hr /> + <hr /> - <p id="p1">First line of paragraph.</p> -</body> -</html></pre> + <p id="p1">First line of paragraph.</p> +</body> +</html> +``` -<h2 id="Sp.C3.A9cification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Pas de changement</td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | +| {{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}} | {{Spec2("DOM3 Core")}} | Pas de changement | +| {{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}} | {{Spec2("DOM2 Core")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.createTextNode")}}</p> +{{Compat("api.Document.createTextNode")}} diff --git a/files/fr/web/api/document/createtreewalker/index.md b/files/fr/web/api/document/createtreewalker/index.md index 66c736285f..d3380d78bb 100644 --- a/files/fr/web/api/document/createtreewalker/index.md +++ b/files/fr/web/api/document/createtreewalker/index.md @@ -11,108 +11,146 @@ tags: - Noeuds translation_of: Web/API/Document/createTreeWalker --- -<div>{{ApiRef("Document")}}</div> - -<p>La méthode de création <strong><code>Document.createTreeWalker()</code></strong> renvoie un nouvel objet {{domxref("TreeWalker")}}.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox"><em>treeWalker</em> = <em>document</em>.createTreeWalker(<em>root</em>, <em>whatToShow</em>, <em>filter</em>, <em>entityReferenceExpansion</em>); -</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><em>root </em></dt> - <dd>est le {{domxref("Node")}} (<em>noeud</em>) racine du {{domxref("TreeWalker")}} à traverser. Généralement, ce sera un élément appartenant au document.</dd> - <dt><em>whatToShow {{optional_inline}}</em></dt> - <dd>est un <code>unsigned long</code> (<em>long non signé</em>) facultatif représentant un masque de bits créé par combinaison des propriétés de constante de <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. C'est un moyen pratique de filtrage pour certains types de nœuds. Par défaut <code>0xFFFFFFFF</code> représentant la constante <code>SHOW_ALL</code>. - <table class="standard-table"> - <tbody> - <tr> - <td class="header">Constante</td> - <td class="header">Valeur numérique</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_ALL</code></td> - <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td> - <td>Affiche tous les noeuds.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td> - <td><code>2</code></td> - <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td> - <td><code>8</code></td> - <td>Affiche les noeuds {{domxref("CDATASection")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_COMMENT</code></td> - <td><code>128</code></td> - <td>Affiche les noeuds {{domxref("Comment")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_DOCUMENT</code></td> - <td><code>256</code></td> - <td>Affiche les noeuds {{domxref("Document")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td> - <td><code>1024</code></td> - <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td> - <td><code>512</code></td> - <td>Affiche les noeuds {{domxref("DocumentType")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_ELEMENT</code></td> - <td><code>1</code></td> - <td>Affiche les noeuds {{domxref("Element")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td> - <td><code>32</code></td> - <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td> - <td><code>16</code></td> - <td>Affiche les noeuds {{domxref("EntityReference")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td> - <td><code>2048</code></td> - <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td> - <td><code>64</code></td> - <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td> - </tr> - <tr> - <td><code>NodeFilter.SHOW_TEXT</code></td> - <td><code>4</code></td> - <td>Affiche les noeuds {{domxref("Text")}}.</td> - </tr> - </tbody> - </table> - </dd> - <dt><em>filter <em>{{optional_inline}}</em></em></dt> - <dd>est un {{domxref("NodeFilter")}} (<em>filtre de noeud</em>) facultatif, c'est à dire un objet avec une méthode <code>acceptNode</code> appelé par {{domxref("TreeWalker")}} pour déterminer s'il doit accepter ou non un nœud qui a passé le test <code>whatToShow</code>.</dd> - <dt><em>entityReferenceExpansion<em> {{optional_inline}}</em></em> <em>{{obsolete_inline}}</em></dt> - <dd>est un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, son sous-arbre doit être supprimé en même temps.</dd> -</dl> - -<h2 id="Exemple">Exemple</h2> - -<p>L'exemple suivant passe à travers tous les noeuds du "body" (<em>corps du document</em>), réduit l'ensemble des noeuds aux éléments, passe simplement à travers chaque noeud acceptable (à la place, il pourrait réduire l'ensemble dans la méthode <code>acceptNode()</code>), puis utilise l'itérateur de traversée de l'arbre créé pour avancer à travers les nœuds (maintenant tous les éléments) et les écrire dans un tableau.</p> - -<pre class="brush: js">var treeWalker = document.createTreeWalker( +{{ApiRef("Document")}} + +La méthode de création **`Document.createTreeWalker()`** renvoie un nouvel objet {{domxref("TreeWalker")}}. + +## Syntaxe + + treeWalker = document.createTreeWalker(root, whatToShow, filter, entityReferenceExpansion); + +### Paramètres + +- _root_ + - : est le {{domxref("Node")}} (_noeud_) racine du {{domxref("TreeWalker")}} à traverser. Généralement, ce sera un élément appartenant au document. +- _whatToShow {{optional_inline}}_ + + - : est un `unsigned long` (_long non signé_) facultatif représentant un masque de bits créé par combinaison des propriétés de constante de [`NodeFilter`](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter). C'est un moyen pratique de filtrage pour certains types de nœuds. Par défaut `0xFFFFFFFF` représentant la constante `SHOW_ALL`. + + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Constante</td> + <td class="header">Valeur numérique</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ALL</code></td> + <td> + <code>-1</code> (c'est la valeur numérique maximale du + <code>unsigned long</code> (<em>non signé long</em>)) + </td> + <td>Affiche tous les noeuds.</td> + </tr> + <tr> + <td> + <code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}} + </td> + <td><code>2</code></td> + <td> + Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens + que lors de la création d'un {{domxref("TreeWalker")}} avec un + noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie + que le nœud d'attribut apparaîtra dans la première position de + l'itération ou de la traversée. Comme les attributs ne sont jamais des + enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de + l'arbre du document. + </td> + </tr> + <tr> + <td> + <code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}} + </td> + <td><code>8</code></td> + <td>Affiche les noeuds {{domxref("CDATASection")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_COMMENT</code></td> + <td><code>128</code></td> + <td>Affiche les noeuds {{domxref("Comment")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT</code></td> + <td><code>256</code></td> + <td>Affiche les noeuds {{domxref("Document")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td> + <td><code>1024</code></td> + <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td> + <td><code>512</code></td> + <td>Affiche les noeuds {{domxref("DocumentType")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ELEMENT</code></td> + <td><code>1</code></td> + <td>Affiche les noeuds {{domxref("Element")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td> + <td><code>32</code></td> + <td> + Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que + lors de la création d'un {{domxref("TreeWalker")}} avec un noeud + {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie + que le noeud d'entité {{domxref("Entity") }} apparaîtra à la + première position de la traversée. Étant donné que les entités ne font + pas partie de l'arborescence du document, elles n'apparaissent pas lors + de la traversée de l'arborescence du document. + </td> + </tr> + <tr> + <td> + <code>NodeFilter.SHOW_ENTITY_REFERENCE</code> + {{deprecated_inline}} + </td> + <td><code>16</code></td> + <td>Affiche les noeuds {{domxref("EntityReference")}}.</td> + </tr> + <tr> + <td> + <code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}} + </td> + <td><code>2048</code></td> + <td> + Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens + que lors de la création d'un {{domxref("TreeWalker")}} avec un + noeud {{domxref("Notation")}} comme racine ; dans ce cas, il + signifie que le noeud {{domxref("Notation")}} apparaîtra à la + première position de la traversée. Étant donné que les entités ne font + pas partie de l'arborescence du document, elles n'apparaissent pas lors + de la traversée de l'arborescence du document. + </td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td> + <td><code>64</code></td> + <td> + Affiche les noeuds {{domxref("ProcessingInstruction")}}. + </td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_TEXT</code></td> + <td><code>4</code></td> + <td>Affiche les noeuds {{domxref("Text")}}.</td> + </tr> + </tbody> + </table> + +- _filter _{{optional_inline}}\*\* + - : est un {{domxref("NodeFilter")}} (_filtre de noeud_) facultatif, c'est à dire un objet avec une méthode `acceptNode` appelé par {{domxref("TreeWalker")}} pour déterminer s'il doit accepter ou non un nœud qui a passé le test `whatToShow`. +- _entityReferenceExpansion _{{optional_inline}}\*\* _{{obsolete_inline}}_ + - : est un {{domxref("Boolean")}} (_booléen_) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, son sous-arbre doit être supprimé en même temps. + +## Exemple + +L'exemple suivant passe à travers tous les noeuds du "body" (_corps du document_), réduit l'ensemble des noeuds aux éléments, passe simplement à travers chaque noeud acceptable (à la place, il pourrait réduire l'ensemble dans la méthode `acceptNode()`), puis utilise l'itérateur de traversée de l'arbre créé pour avancer à travers les nœuds (maintenant tous les éléments) et les écrire dans un tableau. + +```js +var treeWalker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT, { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } }, @@ -122,36 +160,19 @@ translation_of: Web/API/Document/createTreeWalker var nodeList = []; while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode); -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Suppression du paramètre <code>expandEntityReferences</code>. Les paramètres facultatifs <code>whatToShow</code> et <code>filter</code> .</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td> - <td>{{Spec2('DOM2 Traversal_Range')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Document.createTreeWalker")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface de l'objet qu'il crée : {{domxref("TreeWalker")}}.</li> -</ul> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}} | {{Spec2('DOM WHATWG')}} | Suppression du paramètre `expandEntityReferences`. Les paramètres facultatifs `whatToShow` et `filter` . | +| {{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Document.createTreeWalker")}} + +## Voir aussi + +- L'interface de l'objet qu'il crée : {{domxref("TreeWalker")}}. diff --git a/files/fr/web/api/document/currentscript/index.md b/files/fr/web/api/document/currentscript/index.md index d0758e6c1e..175c277f60 100644 --- a/files/fr/web/api/document/currentscript/index.md +++ b/files/fr/web/api/document/currentscript/index.md @@ -9,58 +9,44 @@ tags: - Script translation_of: Web/API/Document/currentScript --- -<div>{{ApiRef("DOM")}}</div> +{{ApiRef("DOM")}} -<p>Retourne l'élément {{HTMLElement("script")}} dont le script est en cours de traitement.</p> +Retourne l'élément {{HTMLElement("script")}} dont le script est en cours de traitement. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <var>curScriptElement</var> = document.currentScript; -</pre> + var curScriptElement = document.currentScript; -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Cet exemple vérifie si le script s'exécute de manière asynchrone :</p> +Cet exemple vérifie si le script s'exécute de manière asynchrone : -<pre class="brush:js">if (document.currentScript.async) { +```js +if (document.currentScript.async) { console.log("Exécution asynchrone"); } else { console.log("Exécution synchrone"); -}</pre> +} +``` -<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p> +[Voir l'exemple sur une page](/samples/html/currentScript.html) -<h2 id="Notes">Notes</h2> +## Notes -<p>Il est important de noter que l'élément {{HTMLElement("script")}} ne sera pas référencé si le code dans le script est appelé par une fonction de rappel ou par un gestionnaire d'événements ; seul sera référencé l'élément alors qu'il est initialement en cours d'exécution.</p> +Il est important de noter que l'élément {{HTMLElement("script")}} ne sera pas référencé si le code dans le script est appelé par une fonction de rappel ou par un gestionnaire d'événements ; seul sera référencé l'élément alors qu'il est initialement en cours d'exécution. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}} | {{Spec2("HTML WHATWG")}} | Définition initiale | -<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2> +## Compatibilité navigateur -<div>{{Compat("api.Document.currentScript")}}</div> +{{Compat("api.Document.currentScript")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{HTMLElement("script")}}</li> - <li>{{domxref("document.onafterscriptexecute")}}</li> - <li>{{domxref("document.onbeforescriptexecute")}}</li> -</ul> +- {{HTMLElement("script")}} +- {{domxref("document.onafterscriptexecute")}} +- {{domxref("document.onbeforescriptexecute")}} diff --git a/files/fr/web/api/document/defaultview/index.md b/files/fr/web/api/document/defaultview/index.md index fce4d88134..6816203fef 100644 --- a/files/fr/web/api/document/defaultview/index.md +++ b/files/fr/web/api/document/defaultview/index.md @@ -3,15 +3,20 @@ title: document.defaultView slug: Web/API/Document/defaultView translation_of: Web/API/Document/defaultView --- -<p>Dans les navigateurs, cette propriété renvoie l'objet <a href="/en-US/docs/DOM/window">window</a> associé au document ou <code>null</code> si non disponible.</p> -<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox">var win = document.defaultView;</pre> -<p>Cette propriété est en lecture seule.</p> -<h2 id="Notes">Notes</h2> -<p>D'après <a href="http://www.quirksmode.org/dom/w3c_html.html">quirksmode</a>, <code>defaultView</code> n'est pas supporté dans les versions d'IE inférieures à 9.</p> -<h2 id="Specification">Spécification</h2> -<ul> - <li><a href="/en-US/docs/HTML/HTML5">HTML5: defaultView</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView">DOM Level 2 Views: defaultView</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Views/">DOM Level 3 Views</a> (Seulement développé en Working Group Note mais pas implémenté)</li> -</ul> +Dans les navigateurs, cette propriété renvoie l'objet [window](/en-US/docs/DOM/window) associé au document ou `null` si non disponible. + +## Syntaxe + + var win = document.defaultView; + +Cette propriété est en lecture seule. + +## Notes + +D'après [quirksmode](http://www.quirksmode.org/dom/w3c_html.html), `defaultView` n'est pas supporté dans les versions d'IE inférieures à 9. + +## Spécification + +- [HTML5: defaultView](/en-US/docs/HTML/HTML5) +- [DOM Level 2 Views: defaultView](http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView) +- [DOM Level 3 Views](http://www.w3.org/TR/DOM-Level-3-Views/) (Seulement développé en Working Group Note mais pas implémenté) diff --git a/files/fr/web/api/document/designmode/index.md b/files/fr/web/api/document/designmode/index.md index 0a4edb5920..78cc51a2e2 100644 --- a/files/fr/web/api/document/designmode/index.md +++ b/files/fr/web/api/document/designmode/index.md @@ -3,49 +3,35 @@ title: Document.designMode slug: Web/API/Document/designMode translation_of: Web/API/Document/designMode --- -<div>{{ ApiRef() }}</div> +{{ ApiRef() }} -<p>document.designMode contrôle si l'ensemble du document est modifiable. Les valeurs valides sont "on" et "off". Conformément à la spécification, cette propriété est par défaut sur "off". Firefox suit cette norme. Les versions antérieures de Chrome et IE ont par défaut la valeur "<code>inherit</code>". Pour les versions entre IE6-10, la valeur est en majuscule.</p> +document.designMode contrôle si l'ensemble du document est modifiable. Les valeurs valides sont "on" et "off". Conformément à la spécification, cette propriété est par défaut sur "off". Firefox suit cette norme. Les versions antérieures de Chrome et IE ont par défaut la valeur "`inherit`". Pour les versions entre IE6-10, la valeur est en majuscule. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var mode = document.designMode; +```js +var mode = document.designMode; document.designMode = "on"; -document.designMode = "off";</pre> +document.designMode = "off"; +``` -<h2 id="Example">Exemple</h2> +## Exemple -<p>Rendre un document {{HTMLElement("iframe")}} éditable</p> +Rendre un document {{HTMLElement("iframe")}} éditable -<pre>iframe_node.contentDocument.designMode = "on"; -</pre> + iframe_node.contentDocument.designMode = "on"; -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.designMode")}}</p> +{{Compat("api.Document.designMode")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li> - <li>{{domxref("HTMLElement.contentEditable")}}</li> -</ul> +- [Rich-Text Editing in Mozilla](/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla) +- {{domxref("HTMLElement.contentEditable")}} diff --git a/files/fr/web/api/document/dir/index.md b/files/fr/web/api/document/dir/index.md index 03e94f3230..d7f32ff364 100644 --- a/files/fr/web/api/document/dir/index.md +++ b/files/fr/web/api/document/dir/index.md @@ -8,35 +8,21 @@ tags: - Reference translation_of: Web/API/Document/dir --- -<p>{{ApiRef("")}}</p> +{{ApiRef("")}} -<p>La propriété <code><strong>Document.dir</strong></code> est une chaîne de caractères {{domxref("DOMString")}} représentant la direction du texte du document : de gauche à droite (par défaut) ou de droite à gauche. Les valeurs possibles sont <code>'rtl'</code>, droite vers gauche, et <code>'ltr'</code>, gauche vers droite.</p> +La propriété **`Document.dir`** est une chaîne de caractères {{domxref("DOMString")}} représentant la direction du texte du document : de gauche à droite (par défaut) ou de droite à gauche. Les valeurs possibles sont `'rtl'`, droite vers gauche, et `'ltr'`, gauche vers droite. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>dirStr</em> = <em>document.</em>dir; -<em>document.dir</em> = <em>dirStr;</em> -</pre> + dirStr = document.dir; + document.dir = dirStr; -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "#dom-document-dir", "Document.dir")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName("HTML WHATWG", "#dom-document-dir", "Document.dir")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.dir")}}</p> +{{Compat("api.Document.dir")}} diff --git a/files/fr/web/api/document/doctype/index.md b/files/fr/web/api/document/doctype/index.md index 980447cc3c..15f950a836 100644 --- a/files/fr/web/api/document/doctype/index.md +++ b/files/fr/web/api/document/doctype/index.md @@ -10,56 +10,38 @@ tags: - Type translation_of: Web/API/Document/doctype --- -<div>{{ApiRef("DOM")}}</div> +{{ApiRef("DOM")}} -<p>Renvoie la "Document Type Declaration (DTD)" (<em>déclaration de type de document</em>) associée avec le document actuel. L'objet renvoyé implémente l'interface {{domxref("DocumentType")}}. Utilisez {{domxref("DOMImplementation.createDocumentType()")}} pour créer un <code>DocumentType</code>.</p> +Renvoie la "Document Type Declaration (DTD)" (_déclaration de type de document_) associée avec le document actuel. L'objet renvoyé implémente l'interface {{domxref("DocumentType")}}. Utilisez {{domxref("DOMImplementation.createDocumentType()")}} pour créer un `DocumentType`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype; -</pre> + doctype = document.doctype; -<ul> - <li><code>doctype</code> est une propriété en lecture seule.</li> -</ul> +- `doctype` est une propriété en lecture seule. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush:js">var doctypeObj = document.doctype; +```js +var doctypeObj = document.doctype; console.log( "doctypeObj.name: " + doctypeObj.name + "\n" + "doctypeObj.internalSubset: " + doctypeObj.internalSubset + "\n" + "doctypeObj.publicId: " + doctypeObj.publicId + "\n" + "doctypeObj.systemId: " + doctypeObj.systemId -);</pre> +); +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>La propriété renvoie <code>null</code> si aucune DTD n'est associée au document en cours.</p> +La propriété renvoie `null` si aucune DTD n'est associée au document en cours. -<p>DOM level 2 ne prend pas en charge l'édition de la déclaration de type de document (DTD).</p> +DOM level 2 ne prend pas en charge l'édition de la déclaration de type de document (DTD). -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Valeur de retour modifiée pour les documents HTML avec absence d'élément {{HTMLElement("html")}}. Définit que le type de document peut être modifié.</td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}} | {{Spec2("DOM3 Core")}} | Valeur de retour modifiée pour les documents HTML avec absence d'élément {{HTMLElement("html")}}. Définit que le type de document peut être modifié. | +| {{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}} | {{Spec2("DOM2 Core")}} | Définition initiale | diff --git a/files/fr/web/api/document/document/index.md b/files/fr/web/api/document/document/index.md index 7b0e3c2501..05f3e52b50 100644 --- a/files/fr/web/api/document/document/index.md +++ b/files/fr/web/api/document/document/index.md @@ -9,35 +9,24 @@ tags: - Reference translation_of: Web/API/Document/Document --- -<p>{{APIRef}}</p> +{{APIRef}} -<p>Le constructeur <code><strong>Document</strong></code> crée un nouvel objet de {{domxref("Document")}}, lequel c'est la référence de la page courante dans le navigateur et servant comme point d'entrer aux contenus de la page.</p> +Le constructeur **`Document`** crée un nouvel objet de {{domxref("Document")}}, lequel c'est la référence de la page courante dans le navigateur et servant comme point d'entrer aux contenus de la page. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>document</em> = new Document()</pre> + var document = new Document() -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<p>None.</p> +None. -<p>Spécifications</p> +Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| -------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG','#interface-document','Document')}} | {{Spec2('DOM WHATWG')}} | Initial definition. | -<h2 id="Compatibilité_Navigateurs">Compatibilité Navigateurs</h2> +## Compatibilité Navigateurs -<div>{{Compat("api.Document.Document")}}</div> +{{Compat("api.Document.Document")}} diff --git a/files/fr/web/api/document/documentelement/index.md b/files/fr/web/api/document/documentelement/index.md index 84e62d8bea..cd9cfbe64a 100644 --- a/files/fr/web/api/document/documentelement/index.md +++ b/files/fr/web/api/document/documentelement/index.md @@ -10,63 +10,37 @@ tags: - Reference translation_of: Web/API/Document/documentElement --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p><code><strong>Document.documentElement</strong></code>renvoie l'<code><a href="/fr/docs/Web/API/element">Element</a></code> qui est l'élément racine du <a href="/fr/docs/Web/API/document">document</a> (par exemple, l'élément <code><html></code> pour les documents HTML).</p> +**`Document.documentElement`**renvoie l'[`Element`](/fr/docs/Web/API/element) qui est l'élément racine du [document](/fr/docs/Web/API/document) (par exemple, l'élément `<html>` pour les documents HTML). -<h3 id="Syntaxe">Syntaxe</h3> +### Syntaxe -<pre class="eval">var<em> element</em> = document.documentElement; -</pre> + var element = document.documentElement; -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="eval">var racine = document.documentElement; -var premierNiveau = racine.childNodes; -// premierNiveau est une NodeList des enfants directs de l'élément racine -for (var i = 0; i < premierNiveau.length; i++) { - // fait quelque chose avec chaque enfant direct de l'élément racine - // en tant que premierNiveau[i] -} -</pre> + var racine = document.documentElement; + var premierNiveau = racine.childNodes; + // premierNiveau est une NodeList des enfants directs de l'élément racine + for (var i = 0; i < premierNiveau.length; i++) { + // fait quelque chose avec chaque enfant direct de l'élément racine + // en tant que premierNiveau[i] + } -<h2 id="Notes">Notes</h2> +## Notes -<p>Pour tout document HTML non vide, <code>document.documentElement</code> sera toujours un élément {{HTMLElement ("html")}}. Pour tout document XML non vide, <code>document.documentElement</code> sera toujours l'élément racine du document.</p> +Pour tout document HTML non vide, `document.documentElement` sera toujours un élément {{HTMLElement ("html")}}. Pour tout document XML non vide, `document.documentElement` sera toujours l'élément racine du document. -<h2 id="Sp.C3.A9cification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}</td> - <td>{{Spec2('DOM4')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}} | {{Spec2('DOM2 Core')}} | | +| {{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}} | {{Spec2('DOM3 Core')}} | | +| {{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}} | {{Spec2('DOM4')}} | | +| {{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}} | {{Spec2('DOM WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs - - -<p>{{Compat("api.Document.documentElement")}}</p> +{{Compat("api.Document.documentElement")}} diff --git a/files/fr/web/api/document/documenturi/index.md b/files/fr/web/api/document/documenturi/index.md index 31e15a16be..b3ee14255f 100644 --- a/files/fr/web/api/document/documenturi/index.md +++ b/files/fr/web/api/document/documenturi/index.md @@ -9,46 +9,27 @@ tags: - URI translation_of: Web/API/Document/documentURI --- -<div>{{ApiRef("DOM")}}</div> +{{ApiRef("DOM")}} -<p>La propriété <code><strong>documentURI</strong></code> de l'interface {{domxref("Document")}} renvoie l'emplacement du document sous forme "string" (<em>chaîne de caractères</em>).</p> +La propriété **`documentURI`** de l'interface {{domxref("Document")}} renvoie l'emplacement du document sous forme "string" (_chaîne de caractères_). -<p>Initialement, la spécification DOM3 définissait cet attribut en lecture/écriture. Dans la norme actuelle DOM, il est en lecture seule.</p> +Initialement, la spécification DOM3 définissait cet attribut en lecture/écriture. Dans la norme actuelle DOM, il est en lecture seule. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <var>string</var> = document.documentURI; -</pre> + var string = document.documentURI; -<h2 id="Notes">Notes</h2> +## Notes -<p>Les documents HTML ont une propriété {{domxref("document.URL")}} qui renvoie la même valeur. Contrairement à l'<code>URL</code>, <code>documentURI</code> est disponible pour tous les types de documents.</p> +Les documents HTML ont une propriété {{domxref("document.URL")}} qui renvoie la même valeur. Contrairement à l'`URL`, `documentURI` est disponible pour tous les types de documents. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}} | {{Spec2('DOM3 Core')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs - - - -<p>{{Compat("api.Document.documentURI")}}</p> +{{Compat("api.Document.documentURI")}} diff --git a/files/fr/web/api/document/documenturiobject/index.md b/files/fr/web/api/document/documenturiobject/index.md index cc5030a977..88c81d247b 100644 --- a/files/fr/web/api/document/documenturiobject/index.md +++ b/files/fr/web/api/document/documenturiobject/index.md @@ -8,31 +8,32 @@ tags: - Reference translation_of: Web/API/Document/documentURIObject --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>La propriété en lecture seule <code><strong>Document.documentURIObject</strong></code> renvoie un objet {{ Interface("nsIURI") }} représentant l'URI du <a href="/fr/docs/Web/API/document">document</a>.</p> +La propriété en lecture seule **`Document.documentURIObject`** renvoie un objet {{ Interface("nsIURI") }} représentant l'URI du [document](/fr/docs/Web/API/document). -<p>Cette propriété fonctionne uniquement pour les scripts privilégiés (UniversalXPConnect), comme le code des extensions. Pour le contenu Web, elle n'a aucune signification particulière et peut être utilisée comme n'importe quelle propriété personnalisée.</p> +Cette propriété fonctionne uniquement pour les scripts privilégiés (UniversalXPConnect), comme le code des extensions. Pour le contenu Web, elle n'a aucune signification particulière et peut être utilisée comme n'importe quelle propriété personnalisée. -<p>Dans le cas d'un code privilégié, il convient de faire attention à ne pas essayer d'obtenir ou modifier cette propriété sur un objet de contenu non enveloppé (par exemple sur l'objet <code>wrappedJSObject</code> d'un <code><a href="/fr/docs/Mozilla/Tech/Xray_vision">XPCNativeWrapper</a></code>). Consultez les commentaires du {{ Bug(324464) }} pour plus de détails.</p> +Dans le cas d'un code privilégié, il convient de faire attention à ne pas essayer d'obtenir ou modifier cette propriété sur un objet de contenu non enveloppé (par exemple sur l'objet `wrappedJSObject` d'un [`XPCNativeWrapper`](/fr/docs/Mozilla/Tech/Xray_vision)). Consultez les commentaires du {{ Bug(324464) }} pour plus de détails. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var uri = doc.documentURIObject;</pre> +```js +var uri = doc.documentURIObject; +``` -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="eval">// Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http », -// en supposant que ce code s'exécute dans le contexte de browser.xul + // Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http », + // en supposant que ce code s'exécute dans le contexte de browser.xul -var uriObj = content.document.documentURIObject; -var uriPort = uriObj.port; + var uriObj = content.document.documentURIObject; + var uriPort = uriObj.port; -if (uriObj.schemeIs('http')) { - ... -} -</pre> + if (uriObj.schemeIs('http')) { + ... + } -<h2 id="Sp.C3.A9cification">Spécifications</h2> +## Spécifications -<p>Ne fait partie d'aucune spécification.</p> +Ne fait partie d'aucune spécification. diff --git a/files/fr/web/api/document/domain/index.md b/files/fr/web/api/document/domain/index.md index 94575c1b4b..0f050e51e7 100644 --- a/files/fr/web/api/document/domain/index.md +++ b/files/fr/web/api/document/domain/index.md @@ -12,48 +12,46 @@ tags: - Reference translation_of: Web/API/Document/domain --- -<div>{{ApiRef}}</div> +{{ApiRef}} -<p>Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">politique d'origine identique</a>.</p> +Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la [politique d'origine identique](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript). -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <var>chaineDomaine</var> = document.domain; document.domain = <em>chaine</em>; -</pre> + var chaineDomaine = document.domain; document.domain = chaine; -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush:js">// Pour le document www.example.xxx/good.html, +```js +// Pour le document www.example.xxx/good.html, // ce script ferme la fenêtre var mauvaisDomaine = "www.example.xxx"; if (document.domain == mauvaisDomaine ) - window.close(); // juste un exemple - window.close() n'a parfois aucun effet.</pre> + window.close(); // juste un exemple - window.close() n'a parfois aucun effet. +``` -<pre class="brush:js">// Pour l'URI https://developer.mozilla.org/en-US/docs/Web, ce qui +```js +// Pour l'URI https://developer.mozilla.org/en-US/docs/Web, ce qui // suit définit le domaine comme étant la chaîne "developer.mozilla.org" var domaine = document.domain; -</pre> +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>Cette propriété retourne <code>null</code> si le domaine du document ne peut pas être identifié.</p> +Cette propriété retourne `null` si le domaine du document ne peut pas être identifié. -<p>Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son <a href="/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29">domaine de base</a>. Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org".</p> +Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son [domaine de base](/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29). Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org". -<p>Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null.</p> +Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null. -<p>Mozilla fait la distinction entre la propriété d'un <code>document.domain</code> qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini <code>document.domain</code> à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini <code>document.domain</code> et que les domaines dans les URLs sont les mêmes (<a href="https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&mark=199-215#199">implementation</a>). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS) depuis ses sous-domaines (par exemple, <a href="https://bugzilla.mozilla.org">https://bugzilla.mozilla.org</a> pourrait être attaqué par des pièces jointes de bugs sur <a href="https://bug*.bugzilla.mozilla.org">https://bug*.bugzilla.mozilla.org</a>).</p> +Mozilla fait la distinction entre la propriété d'un `document.domain` qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini `document.domain` à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini `document.domain` et que les domaines dans les URLs sont les mêmes ([implementation](https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&mark=199-215#199)). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS) depuis ses sous-domaines (par exemple, <https://bugzilla.mozilla.org> pourrait être attaqué par des pièces jointes de bugs sur <https://bug*.bugzilla.mozilla.org>). -<h2 id="Specification">Spécification</h2> +## Spécification -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2250147">DOM Level 2 HTML: document.domain</a> (le décrit comme étant en lecture-seule)</li> - <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#relaxing-the-same-origin-restriction">HTML5: document.domain</a> (décrit un comportement similaire à celui de Mozilla)</li> -</ul> +- [DOM Level 2 HTML: document.domain](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2250147) (le décrit comme étant en lecture-seule) +- [HTML5: document.domain](https://html.spec.whatwg.org/multipage/browsers.html#relaxing-the-same-origin-restriction) (décrit un comportement similaire à celui de Mozilla) -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">Politique de même origine pour JavaScriptHTML</a></li> -</ul> +- [Politique de même origine pour JavaScriptHTML](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript) diff --git a/files/fr/web/api/document/domcontentloaded_event/index.md b/files/fr/web/api/document/domcontentloaded_event/index.md index 516c713b20..5fa9889813 100644 --- a/files/fr/web/api/document/domcontentloaded_event/index.md +++ b/files/fr/web/api/document/domcontentloaded_event/index.md @@ -3,62 +3,65 @@ title: 'Document: DOMContentLoaded event' slug: Web/API/Document/DOMContentLoaded_event translation_of: Web/API/Document/DOMContentLoaded_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'évènement <strong><code>DOMContentLoaded</code></strong> est déclenché quand le document HTML initiale est complètement chargé et analysé, sans attendre la fin du chargement des feuilles de styles, images et sous-document.</p> +L'évènement **`DOMContentLoaded`** est déclenché quand le document HTML initiale est complètement chargé et analysé, sans attendre la fin du chargement des feuilles de styles, images et sous-document. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bouillonne</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Oui (bien que spécifié comme évènement simple non annulable)</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("Event")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestion de l’évènement</th> - <td>Aucune</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bouillonne</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Oui (bien que spécifié comme évènement simple non annulable)</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestion de l’évènement</th> + <td>Aucune</td> + </tr> + </tbody> </table> -<p>Un évènement différent, {{domxref("Window/load_event", "load")}} doit être utilisé pour détecter que la page entière est chargée. On utilise couramment à tord <code>load</code> là où <code>DOMContentLoaded</code> serait plus approprié.</p> +Un évènement différent, {{domxref("Window/load_event", "load")}} doit être utilisé pour détecter que la page entière est chargée. On utilise couramment à tord `load` là où `DOMContentLoaded` serait plus approprié. -<p>Du code JavaScript synchrone va mettre en pause la création du DOM. Si vous voulez charger le DOM le plus rapidement possible, vous pouvez faire votre code <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">(en) JavaScript asynchrone</a> et <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">(en) optimiser le chargement des feuilles de styles</a>. Si vous chargez comme d'habitude, les feuilles de styles vont ralentir la création du DOM comme si elles étaient chargées en parallèle, en «volant» le trafique du document principale HTML.</p> +Du code JavaScript synchrone va mettre en pause la création du DOM. Si vous voulez charger le DOM le plus rapidement possible, vous pouvez faire votre code [(en) JavaScript asynchrone](/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) et [(en) optimiser le chargement des feuilles de styles](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). Si vous chargez comme d'habitude, les feuilles de styles vont ralentir la création du DOM comme si elles étaient chargées en parallèle, en «volant» le trafique du document principale HTML. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Usage_simple">Usage simple</h3> +### Usage simple -<pre class="brush: js">document.addEventListener('DOMContentLoaded', (event) => { +```js +document.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed'); }); -</pre> +``` -<h3 id="Retarde_DOMContentLoaded">Retarde DOMContentLoaded</h3> +### Retarde DOMContentLoaded -<pre class="brush: html"><script> - document.addEventListener('DOMContentLoaded', (event) => { +```html +<script> + document.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed'); }); -for( let i = 0; i < 1000000000; i++) +for( let i = 0; i < 1000000000; i++) {} // This synchronous script is going to delay parsing of the DOM, // so the DOMContentLoaded event is going to launch later. -</script> -</pre> +</script> +``` -<h3 id="Vérifie_que_le_contenu_si_le_chargement_est_déjà_fini">Vérifie que le contenu si le chargement est déjà fini</h3> +### Vérifie que le contenu si le chargement est déjà fini -<p>L'évènement <code>DOMContentLoaded</code> peut-être déclenché avant que le script soit exécuté, donc il vaut mieux vérifier avant d'ajouter un écouteur d'évènement.</p> +L'évènement `DOMContentLoaded` peut-être déclenché avant que le script soit exécuté, donc il vaut mieux vérifier avant d'ajouter un écouteur d'évènement. -<pre class="brush: js">function doSomething() { +```js +function doSomething() { console.info('DOM loaded'); } @@ -67,22 +70,25 @@ if (document.readyState === 'loading') { // Loading hasn't finished yet } else { // `DOMContentLoaded` has already fired doSomething(); } -</pre> +``` -<h3 id="Démonstration">Démonstration</h3> +### Démonstration -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><div class="controls"> - <button id="reload" type="button">Reload</button> -</div> +```html +<div class="controls"> + <button id="reload" type="button">Reload</button> +</div> -<div class="event-log"> - <label>Event log:</label> - <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> -</div></pre> +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div> +``` -<pre class="brush: css hidden">body { +```css hidden +body { display: grid; grid-template-areas: "control log"; } @@ -109,72 +115,50 @@ label, button { #reload { height: 2rem; } +``` -</pre> +#### JS -<h4 id="JS">JS</h4> - -<pre class="brush: js">const log = document.querySelector('.event-log-contents'); +```js +const log = document.querySelector('.event-log-contents'); const reload = document.querySelector('#reload'); -reload.addEventListener('click', () => { +reload.addEventListener('click', () => { log.textContent =''; - window.setTimeout(() => { + window.setTimeout(() => { window.location.reload(true); }, 200); }); -window.addEventListener('load', (event) => { +window.addEventListener('load', (event) => { log.textContent = log.textContent + 'load\n'; }); -document.addEventListener('readystatechange', (event) => { +document.addEventListener('readystatechange', (event) => { log.textContent = log.textContent + `readystate: ${document.readyState}\n`; }); -document.addEventListener('DOMContentLoaded', (event) => { +document.addEventListener('DOMContentLoaded', (event) => { log.textContent = log.textContent + `DOMContentLoaded\n`; }); +``` -</pre> - -<h4 id="Résultat">Résultat</h4> - -<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML5 W3C', 'syntax.html#the-end', 'DOMContentLoaded')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +#### Résultat + +{{ EmbedLiveSample('Live_example', '100%', '160px') }} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Spécifications +| Spécification | Status | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'syntax.html#the-end', 'DOMContentLoaded')}} | {{Spec2('HTML5 W3C')}} | | +## Compatibilité des navigateurs -<p>{{Compat("api.Document.DOMContentLoaded_event")}}</p> +{{Compat("api.Document.DOMContentLoaded_event")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>Évènements similaires: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}} et {{domxref("Window/unload_event", "unload")}}</li> - <li>Cet évènement sur la cible {{domxref("Window")}}: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}</li> -</ul> +- Évènements similaires: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}} et {{domxref("Window/unload_event", "unload")}} +- Cet évènement sur la cible {{domxref("Window")}}: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}} diff --git a/files/fr/web/api/document/drag_event/index.md b/files/fr/web/api/document/drag_event/index.md index 18ffca7385..f285e0a7b1 100644 --- a/files/fr/web/api/document/drag_event/index.md +++ b/files/fr/web/api/document/drag_event/index.md @@ -3,151 +3,61 @@ title: drag slug: Web/API/Document/drag_event translation_of: Web/API/Document/drag_event --- -<div>{{APIRef}}</div> - -<p>L'événement drag est déclenché lorsqu'un élément ou une section de texte est glissé (toutes les quelques centaines de milisecondes)</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("DragEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Continuer l'opération drag & drop.</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td> - <td>The element that was underneath the element being dragged.</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event normally bubbles or not</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event is cancellable or not?</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - <tr> - <td><code>dataTransfer</code></td> - <td>DataTransfer</td> - <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> - </tr> - <tr> - <td><code>currentTarget</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>The node that had the event listener attached.</td> - </tr> - <tr> - <td><code>relatedTarget</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> - </tr> - <tr> - <td><code>screenX</code> {{readonlyInline}}</td> - <td>long</td> - <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> - </tr> - <tr> - <td><code>screenY</code> {{readonlyInline}}</td> - <td>long</td> - <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> - </tr> - <tr> - <td><code>clientX</code> {{readonlyInline}}</td> - <td>long</td> - <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> - </tr> - <tr> - <td><code>clientY</code> {{readonlyInline}}</td> - <td>long</td> - <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> - </tr> - <tr> - <td><code>button</code> {{readonlyInline}}</td> - <td>unsigned short</td> - <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> - </tr> - <tr> - <td><code>buttons</code> {{readonlyInline}}</td> - <td>unsigned short</td> - <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> - </tr> - <tr> - <td><code>mozPressure</code> {{readonlyInline}}</td> - <td>float</td> - <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> - </tr> - <tr> - <td><code>ctrlKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>shiftKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>altKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>metaKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - </tbody> -</table> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: html"><div class="dropzone"> - <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> +{{APIRef}} + +L'événement drag est déclenché lorsqu'un élément ou une section de texte est glissé (toutes les quelques centaines de milisecondes) + +## Informations générales + +- Interface + - : {{domxref("DragEvent")}} +- Propagation + - : Oui +- Annulable + - : Oui +- Cible + - : {{domxref("Document")}}, {{domxref("Element")}} +- Action par défaut + - : Continuer l'opération drag & drop. + +## Propriétés + +| Property | Type | Description | +| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` {{readonlyInline}} | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The element that was underneath the element being dragged. | +| `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | The type of event. | +| `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event normally bubbles or not | +| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event is cancellable or not? | +| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document) | +| `detail` {{readonlyInline}} | `long` (`float`) | 0. | +| `dataTransfer` | DataTransfer | The data that underlies a drag-and-drop operation, known as the [drag data store](/en-US/docs/Web/API/DataTransfer). Protected mode. | +| `currentTarget` {{readonlyInline}} | EventTarget | The node that had the event listener attached. | +| `relatedTarget` {{readonlyInline}} | EventTarget | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise. | +| `screenX` {{readonlyInline}} | long | The X coordinate of the mouse pointer in global (screen) coordinates. | +| `screenY` {{readonlyInline}} | long | The Y coordinate of the mouse pointer in global (screen) coordinates. | +| `clientX` {{readonlyInline}} | long | The X coordinate of the mouse pointer in local (DOM content) coordinates. | +| `clientY` {{readonlyInline}} | long | The Y coordinate of the mouse pointer in local (DOM content) coordinates. | +| `button` {{readonlyInline}} | unsigned short | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left. | +| `buttons` {{readonlyInline}} | unsigned short | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/en-US/docs/Web/API/MouseEvent). | +| `mozPressure` {{readonlyInline}} | float | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). | +| `ctrlKey` {{readonlyInline}} | boolean | `true` if the control key was down when the event was fired. `false` otherwise. | +| `shiftKey` {{readonlyInline}} | boolean | `true` if the shift key was down when the event was fired. `false` otherwise. | +| `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 + +```html +<div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> This div is draggable - </div> -</div> -<div class="dropzone"></div> -<div class="dropzone"></div> -<div class="dropzone"></div> + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> -<style> +<style> #draggable { width: 200px; height: 20px; @@ -162,9 +72,9 @@ translation_of: Web/API/Document/drag_event margin-bottom: 10px; padding: 10px; } -</style> +</style> -<script> +<script> var dragged; /* Les événements sont déclenchés sur les objets glissables */ @@ -217,45 +127,28 @@ translation_of: Web/API/Document/drag_event } }, false); -</script> -</pre> +</script> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}}</td> - <td>{{Spec2("HTML5.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}} | {{Spec2("HTML5.1")}} | Définition initiale | -<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> +## Compatibilités navigateur -<p>{{Compat("api.Document.drag_event")}}</p> +{{Compat("api.Document.drag_event")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{event("drag")}}</li> - <li>{{event("dragstart")}}</li> - <li>{{event("dragend")}}</li> - <li>{{event("dragover")}}</li> - <li>{{event("dragenter")}}</li> - <li>{{event("dragleave")}}</li> - <li>{{event("dragexit")}}</li> - <li>{{event("drop")}}</li> - <li><a href="http://jsfiddle.net/zfnj5rv4/">Demo</a></li> -</ul> +- {{event("drag")}} +- {{event("dragstart")}} +- {{event("dragend")}} +- {{event("dragover")}} +- {{event("dragenter")}} +- {{event("dragleave")}} +- {{event("dragexit")}} +- {{event("drop")}} +- [Demo](http://jsfiddle.net/zfnj5rv4/) diff --git a/files/fr/web/api/document/dragend_event/index.md b/files/fr/web/api/document/dragend_event/index.md index 8435a6c7e4..9c76951378 100644 --- a/files/fr/web/api/document/dragend_event/index.md +++ b/files/fr/web/api/document/dragend_event/index.md @@ -3,149 +3,59 @@ title: dragend slug: Web/API/Document/dragend_event translation_of: Web/API/Document/dragend_event --- -<p>L'événement <strong>dragend</strong> est déclenché lorsque une opération de glissement est terminée (en relâchant le bouton de la souris ou en appuyant sur la touche Echap).</p> - -<h2>Informations générales</h2> - -<dl> - <dt>Interface</dt> - <dd>{{domxref("DragEvent")}}</dd> - <dt>Propagation</dt> - <dd>Oui</dd> - <dt>Annulable</dt> - <dd>Non</dd> - <dt>Cible</dt> - <dd>{{domxref("Document")}}, {{domxref("Element")}}</dd> - <dt>Action par défaut</dt> - <dd>Varie</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td> - <td>The element that was underneath the element being dragged.</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event normally bubbles or not</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event is cancellable or not?</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - <tr> - <td><code>dataTransfer</code></td> - <td>DataTransfer</td> - <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> - </tr> - <tr> - <td><code>currentTarget</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>The node that had the event listener attached.</td> - </tr> - <tr> - <td><code>relatedTarget</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> - </tr> - <tr> - <td><code>screenX</code> {{readonlyInline}}</td> - <td>long</td> - <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> - </tr> - <tr> - <td><code>screenY</code> {{readonlyInline}}</td> - <td>long</td> - <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> - </tr> - <tr> - <td><code>clientX</code> {{readonlyInline}}</td> - <td>long</td> - <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> - </tr> - <tr> - <td><code>clientY</code> {{readonlyInline}}</td> - <td>long</td> - <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> - </tr> - <tr> - <td><code>button</code> {{readonlyInline}}</td> - <td>unsigned short</td> - <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> - </tr> - <tr> - <td><code>buttons</code> {{readonlyInline}}</td> - <td>unsigned short</td> - <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> - </tr> - <tr> - <td><code>mozPressure</code> {{readonlyInline}}</td> - <td>float</td> - <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> - </tr> - <tr> - <td><code>ctrlKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>shiftKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>altKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>metaKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - </tbody> -</table> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: html"><div class="dropzone"> - <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> +L'événement **dragend** est déclenché lorsque une opération de glissement est terminée (en relâchant le bouton de la souris ou en appuyant sur la touche Echap). + +## Informations générales + +- Interface + - : {{domxref("DragEvent")}} +- Propagation + - : Oui +- Annulable + - : Non +- Cible + - : {{domxref("Document")}}, {{domxref("Element")}} +- Action par défaut + - : Varie + +## Propriétés + +| Property | Type | Description | +| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` {{readonlyInline}} | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The element that was underneath the element being dragged. | +| `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | The type of event. | +| `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event normally bubbles or not | +| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event is cancellable or not? | +| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document) | +| `detail` {{readonlyInline}} | `long` (`float`) | 0. | +| `dataTransfer` | DataTransfer | The data that underlies a drag-and-drop operation, known as the [drag data store](/en-US/docs/Web/API/DataTransfer). Protected mode. | +| `currentTarget` {{readonlyInline}} | EventTarget | The node that had the event listener attached. | +| `relatedTarget` {{readonlyInline}} | EventTarget | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise. | +| `screenX` {{readonlyInline}} | long | The X coordinate of the mouse pointer in global (screen) coordinates. | +| `screenY` {{readonlyInline}} | long | The Y coordinate of the mouse pointer in global (screen) coordinates. | +| `clientX` {{readonlyInline}} | long | The X coordinate of the mouse pointer in local (DOM content) coordinates. | +| `clientY` {{readonlyInline}} | long | The Y coordinate of the mouse pointer in local (DOM content) coordinates. | +| `button` {{readonlyInline}} | unsigned short | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left. | +| `buttons` {{readonlyInline}} | unsigned short | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/en-US/docs/Web/API/MouseEvent). | +| `mozPressure` {{readonlyInline}} | float | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). | +| `ctrlKey` {{readonlyInline}} | boolean | `true` if the control key was down when the event was fired. `false` otherwise. | +| `shiftKey` {{readonlyInline}} | boolean | `true` if the shift key was down when the event was fired. `false` otherwise. | +| `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 + +```html +<div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> This div is draggable - </div> -</div> -<div class="dropzone"></div> -<div class="dropzone"></div> -<div class="dropzone"></div> + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> -<style> +<style> #draggable { width: 200px; height: 20px; @@ -160,9 +70,9 @@ translation_of: Web/API/Document/dragend_event margin-bottom: 10px; padding: 10px; } -</style> +</style> -<script> +<script> var dragged; /* Les événements sont déclenchés sur les objets glissables */ @@ -215,44 +125,27 @@ translation_of: Web/API/Document/dragend_event } }, false); -</script> -</pre> +</script> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragend")}}</td> - <td>{{Spec2("HTML5.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "editing.html#dndevents", "dragend")}} | {{Spec2("HTML5.1")}} | Définition initiale | -<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2> +## Compatibilités navigateurs -<p>{{Compat("api.Document.dragend_event")}}</p> +{{Compat("api.Document.dragend_event")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{event("drag")}}</li> - <li>{{event("dragstart")}}</li> - <li>{{event("dragend")}}</li> - <li>{{event("dragover")}}</li> - <li>{{event("dragenter")}}</li> - <li>{{event("dragleave")}}</li> - <li>{{event("dragexit")}}</li> - <li>{{event("drop")}}</li> -</ul> +- {{event("drag")}} +- {{event("dragstart")}} +- {{event("dragend")}} +- {{event("dragover")}} +- {{event("dragenter")}} +- {{event("dragleave")}} +- {{event("dragexit")}} +- {{event("drop")}} diff --git a/files/fr/web/api/document/dragenter_event/index.md b/files/fr/web/api/document/dragenter_event/index.md index 370d84b4d3..4aff1b3c8d 100644 --- a/files/fr/web/api/document/dragenter_event/index.md +++ b/files/fr/web/api/document/dragenter_event/index.md @@ -3,151 +3,61 @@ title: dragenter slug: Web/API/Document/dragenter_event translation_of: Web/API/Document/dragenter_event --- -<div>{{APIRef}}</div> - -<p>L'événement <strong>dragenter</strong> est déclenché lorsqu'un élément glissé ou une sélection de texte entre dans une cible de drop valide.</p> - -<h2>Informations générales</h2> - -<dl> - <dt>Interface</dt> - <dd>{{domxref("DragEvent")}}</dd> - <dt>Propagation</dt> - <dd>Oui</dd> - <dt>Annulable</dt> - <dd>Oui</dd> - <dt>Cible</dt> - <dd>La sélection immédiate de l'utilisateur (l'élément présentement indiqué par l'utilisateur comme cible pour le drop), ou l'élément {{HTMLElement("body")}}.</dd> - <dt>Action par défaut</dt> - <dd>Rejette la sélection immédiate de l'utilisateur comme élément cible potentiel</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td> - <td>The element that was underneath the element being dragged.</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event normally bubbles or not</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event is cancellable or not?</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - <tr> - <td><code>dataTransfer</code></td> - <td>DataTransfer</td> - <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> - </tr> - <tr> - <td><code>currentTarget</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>The node that had the event listener attached.</td> - </tr> - <tr> - <td><code>relatedTarget</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> - </tr> - <tr> - <td><code>screenX</code> {{readonlyInline}}</td> - <td>long</td> - <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> - </tr> - <tr> - <td><code>screenY</code> {{readonlyInline}}</td> - <td>long</td> - <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> - </tr> - <tr> - <td><code>clientX</code> {{readonlyInline}}</td> - <td>long</td> - <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> - </tr> - <tr> - <td><code>clientY</code> {{readonlyInline}}</td> - <td>long</td> - <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> - </tr> - <tr> - <td><code>button</code> {{readonlyInline}}</td> - <td>unsigned short</td> - <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> - </tr> - <tr> - <td><code>buttons</code> {{readonlyInline}}</td> - <td>unsigned short</td> - <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> - </tr> - <tr> - <td><code>mozPressure</code> {{readonlyInline}}</td> - <td>float</td> - <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> - </tr> - <tr> - <td><code>ctrlKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>shiftKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>altKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>metaKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - </tbody> -</table> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: html"><div class="dropzone"> - <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> +{{APIRef}} + +L'événement **dragenter** est déclenché lorsqu'un élément glissé ou une sélection de texte entre dans une cible de drop valide. + +## Informations générales + +- Interface + - : {{domxref("DragEvent")}} +- Propagation + - : Oui +- Annulable + - : Oui +- Cible + - : La sélection immédiate de l'utilisateur (l'élément présentement indiqué par l'utilisateur comme cible pour le drop), ou l'élément {{HTMLElement("body")}}. +- Action par défaut + - : Rejette la sélection immédiate de l'utilisateur comme élément cible potentiel + +## Properties + +| Property | Type | Description | +| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` {{readonlyInline}} | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The element that was underneath the element being dragged. | +| `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | The type of event. | +| `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event normally bubbles or not | +| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event is cancellable or not? | +| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document) | +| `detail` {{readonlyInline}} | `long` (`float`) | 0. | +| `dataTransfer` | DataTransfer | The data that underlies a drag-and-drop operation, known as the [drag data store](/en-US/docs/Web/API/DataTransfer). Protected mode. | +| `currentTarget` {{readonlyInline}} | EventTarget | The node that had the event listener attached. | +| `relatedTarget` {{readonlyInline}} | EventTarget | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise. | +| `screenX` {{readonlyInline}} | long | The X coordinate of the mouse pointer in global (screen) coordinates. | +| `screenY` {{readonlyInline}} | long | The Y coordinate of the mouse pointer in global (screen) coordinates. | +| `clientX` {{readonlyInline}} | long | The X coordinate of the mouse pointer in local (DOM content) coordinates. | +| `clientY` {{readonlyInline}} | long | The Y coordinate of the mouse pointer in local (DOM content) coordinates. | +| `button` {{readonlyInline}} | unsigned short | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left. | +| `buttons` {{readonlyInline}} | unsigned short | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/en-US/docs/Web/API/MouseEvent). | +| `mozPressure` {{readonlyInline}} | float | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). | +| `ctrlKey` {{readonlyInline}} | boolean | `true` if the control key was down when the event was fired. `false` otherwise. | +| `shiftKey` {{readonlyInline}} | boolean | `true` if the shift key was down when the event was fired. `false` otherwise. | +| `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 + +```html +<div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> This div is draggable - </div> -</div> -<div class="dropzone"></div> -<div class="dropzone"></div> -<div class="dropzone"></div> + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> -<style> +<style> #draggable { width: 200px; height: 20px; @@ -162,9 +72,9 @@ translation_of: Web/API/Document/dragenter_event margin-bottom: 10px; padding: 10px; } -</style> +</style> -<script> +<script> var dragged; /* Les événements sont déclenchés sur les objets glissables */ @@ -199,7 +109,7 @@ translation_of: Web/API/Document/dragenter_event }, false); document.addEventListener("dragleave", function( event ) { - // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent + // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent if ( event.target.className == "dropzone" ) { event.target.style.background = ""; } @@ -217,44 +127,27 @@ translation_of: Web/API/Document/dragenter_event } }, false); -</script> -</pre> +</script> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}}</td> - <td>{{Spec2("HTML5.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}} | {{Spec2("HTML5.1")}} | Définition initiale | -<h2 id="Compatiblités_navigateurs">Compatiblités navigateurs</h2> +## Compatiblités navigateurs -<p>{{Compat("api.Document.dragenter_event")}}</p> +{{Compat("api.Document.dragenter_event")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{event("drag")}}</li> - <li>{{event("dragstart")}}</li> - <li>{{event("dragend")}}</li> - <li>{{event("dragover")}}</li> - <li>{{event("dragenter")}}</li> - <li>{{event("dragleave")}}</li> - <li>{{event("dragexit")}}</li> - <li>{{event("drop")}}</li> -</ul> +- {{event("drag")}} +- {{event("dragstart")}} +- {{event("dragend")}} +- {{event("dragover")}} +- {{event("dragenter")}} +- {{event("dragleave")}} +- {{event("dragexit")}} +- {{event("drop")}} diff --git a/files/fr/web/api/document/dragleave_event/index.md b/files/fr/web/api/document/dragleave_event/index.md index b8624adb26..6c5b8849bd 100644 --- a/files/fr/web/api/document/dragleave_event/index.md +++ b/files/fr/web/api/document/dragleave_event/index.md @@ -3,149 +3,59 @@ title: dragleave slug: Web/API/Document/dragleave_event translation_of: Web/API/Document/dragleave_event --- -<p>L'événement <strong>dragleave </strong>est déclenché lorsqu'un élément glissé ou une sélection de texte quitte une cible de dépôt valide.</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;"><a href="/fr/docs/Web/API/DragEvent"><code>DragEvent</code></a></dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td> - <td>The element that was underneath the element being dragged.</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event normally bubbles or not</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event is cancellable or not?</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - <tr> - <td><code>dataTransfer</code></td> - <td>DataTransfer</td> - <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> - </tr> - <tr> - <td><code>currentTarget</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>The node that had the event listener attached.</td> - </tr> - <tr> - <td><code>relatedTarget</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> - </tr> - <tr> - <td><code>screenX</code> {{readonlyInline}}</td> - <td>long</td> - <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> - </tr> - <tr> - <td><code>screenY</code> {{readonlyInline}}</td> - <td>long</td> - <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> - </tr> - <tr> - <td><code>clientX</code> {{readonlyInline}}</td> - <td>long</td> - <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> - </tr> - <tr> - <td><code>clientY</code> {{readonlyInline}}</td> - <td>long</td> - <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> - </tr> - <tr> - <td><code>button</code> {{readonlyInline}}</td> - <td>unsigned short</td> - <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> - </tr> - <tr> - <td><code>buttons</code> {{readonlyInline}}</td> - <td>unsigned short</td> - <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> - </tr> - <tr> - <td><code>mozPressure</code> {{readonlyInline}}</td> - <td>float</td> - <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> - </tr> - <tr> - <td><code>ctrlKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>shiftKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>altKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>metaKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - </tbody> -</table> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: html"><div class="dropzone"> - <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> +L'événement **dragleave** est déclenché lorsqu'un élément glissé ou une sélection de texte quitte une cible de dépôt valide. + +## Informations générales + +- Interface + - : [`DragEvent`](/fr/docs/Web/API/DragEvent) +- Propagation + - : Oui +- Annulable + - : Non +- Cible + - : {{domxref("Document")}}, {{domxref("Element")}} +- Action par défaut + - : Aucune + +## Propriétés + +| Property | Type | Description | +| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` {{readonlyInline}} | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The element that was underneath the element being dragged. | +| `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | The type of event. | +| `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event normally bubbles or not | +| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event is cancellable or not? | +| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document) | +| `detail` {{readonlyInline}} | `long` (`float`) | 0. | +| `dataTransfer` | DataTransfer | The data that underlies a drag-and-drop operation, known as the [drag data store](/en-US/docs/Web/API/DataTransfer). Protected mode. | +| `currentTarget` {{readonlyInline}} | EventTarget | The node that had the event listener attached. | +| `relatedTarget` {{readonlyInline}} | EventTarget | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise. | +| `screenX` {{readonlyInline}} | long | The X coordinate of the mouse pointer in global (screen) coordinates. | +| `screenY` {{readonlyInline}} | long | The Y coordinate of the mouse pointer in global (screen) coordinates. | +| `clientX` {{readonlyInline}} | long | The X coordinate of the mouse pointer in local (DOM content) coordinates. | +| `clientY` {{readonlyInline}} | long | The Y coordinate of the mouse pointer in local (DOM content) coordinates. | +| `button` {{readonlyInline}} | unsigned short | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left. | +| `buttons` {{readonlyInline}} | unsigned short | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/en-US/docs/Web/API/MouseEvent). | +| `mozPressure` {{readonlyInline}} | float | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). | +| `ctrlKey` {{readonlyInline}} | boolean | `true` if the control key was down when the event was fired. `false` otherwise. | +| `shiftKey` {{readonlyInline}} | boolean | `true` if the shift key was down when the event was fired. `false` otherwise. | +| `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 + +```html +<div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> This div is draggable - </div> -</div> -<div class="dropzone"></div> -<div class="dropzone"></div> -<div class="dropzone"></div> + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> -<style> +<style> #draggable { width: 200px; height: 20px; @@ -160,9 +70,9 @@ translation_of: Web/API/Document/dragleave_event margin-bottom: 10px; padding: 10px; } -</style> +</style> -<script> +<script> var dragged; /* Les événements sont déclenchés sur les objets glissables */ @@ -197,7 +107,7 @@ translation_of: Web/API/Document/dragleave_event }, false); document.addEventListener("dragleave", function( event ) { - // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent + // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent if ( event.target.className == "dropzone" ) { event.target.style.background = ""; } @@ -215,44 +125,27 @@ translation_of: Web/API/Document/dragleave_event } }, false); -</script> -</pre> +</script> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragleave")}}</td> - <td>{{Spec2("HTML5.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "editing.html#dndevents", "dragleave")}} | {{Spec2("HTML5.1")}} | Définition initiale | -<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> +## Compatibilités navigateur -<p>{{Compat("api.Document.dragleave_event")}}</p> +{{Compat("api.Document.dragleave_event")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{event("drag")}}</li> - <li>{{event("dragstart")}}</li> - <li>{{event("dragend")}}</li> - <li>{{event("dragover")}}</li> - <li>{{event("dragenter")}}</li> - <li>{{event("dragleave")}}</li> - <li>{{event("dragexit")}}</li> - <li>{{event("drop")}}</li> -</ul> +- {{event("drag")}} +- {{event("dragstart")}} +- {{event("dragend")}} +- {{event("dragover")}} +- {{event("dragenter")}} +- {{event("dragleave")}} +- {{event("dragexit")}} +- {{event("drop")}} diff --git a/files/fr/web/api/document/dragover_event/index.md b/files/fr/web/api/document/dragover_event/index.md index eb7ab548fd..c189df61a0 100644 --- a/files/fr/web/api/document/dragover_event/index.md +++ b/files/fr/web/api/document/dragover_event/index.md @@ -3,151 +3,61 @@ title: dragover slug: Web/API/Document/dragover_event translation_of: Web/API/Document/dragover_event --- -<div>{{APIRef}}</div> - -<p>L'événement <strong>dragover </strong>est déclenché lorsqu'un élément ou une sélection de texte est glissé jusqu'à une cible de dépôt valide (toutes les 100ms)</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;"><a href="/fr/docs/Web/API/DragEvent"><code>DragEvent</code></a></dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Reset l'opération de glissement courante à "none"</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td> - <td>The element that was underneath the element being dragged.</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event normally bubbles or not</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event is cancellable or not?</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - <tr> - <td><code>dataTransfer</code></td> - <td>DataTransfer</td> - <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> - </tr> - <tr> - <td><code>currentTarget</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>The node that had the event listener attached.</td> - </tr> - <tr> - <td><code>relatedTarget</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> - </tr> - <tr> - <td><code>screenX</code> {{readonlyInline}}</td> - <td>long</td> - <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> - </tr> - <tr> - <td><code>screenY</code> {{readonlyInline}}</td> - <td>long</td> - <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> - </tr> - <tr> - <td><code>clientX</code> {{readonlyInline}}</td> - <td>long</td> - <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> - </tr> - <tr> - <td><code>clientY</code> {{readonlyInline}}</td> - <td>long</td> - <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> - </tr> - <tr> - <td><code>button</code> {{readonlyInline}}</td> - <td>unsigned short</td> - <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> - </tr> - <tr> - <td><code>buttons</code> {{readonlyInline}}</td> - <td>unsigned short</td> - <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> - </tr> - <tr> - <td><code>mozPressure</code> {{readonlyInline}}</td> - <td>float</td> - <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> - </tr> - <tr> - <td><code>ctrlKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>shiftKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>altKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>metaKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - </tbody> -</table> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: html"><div class="dropzone"> - <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> +{{APIRef}} + +L'événement **dragover** est déclenché lorsqu'un élément ou une sélection de texte est glissé jusqu'à une cible de dépôt valide (toutes les 100ms) + +## Informations générales + +- Interface + - : [`DragEvent`](/fr/docs/Web/API/DragEvent) +- Propagation + - : Oui +- Annulable + - : Oui +- Cible + - : {{domxref("Document")}}, {{domxref("Element")}} +- Action par défaut + - : Reset l'opération de glissement courante à "none" + +## Properties + +| Property | Type | Description | +| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` {{readonlyInline}} | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The element that was underneath the element being dragged. | +| `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | The type of event. | +| `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event normally bubbles or not | +| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event is cancellable or not? | +| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document) | +| `detail` {{readonlyInline}} | `long` (`float`) | 0. | +| `dataTransfer` | DataTransfer | The data that underlies a drag-and-drop operation, known as the [drag data store](/en-US/docs/Web/API/DataTransfer). Protected mode. | +| `currentTarget` {{readonlyInline}} | EventTarget | The node that had the event listener attached. | +| `relatedTarget` {{readonlyInline}} | EventTarget | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise. | +| `screenX` {{readonlyInline}} | long | The X coordinate of the mouse pointer in global (screen) coordinates. | +| `screenY` {{readonlyInline}} | long | The Y coordinate of the mouse pointer in global (screen) coordinates. | +| `clientX` {{readonlyInline}} | long | The X coordinate of the mouse pointer in local (DOM content) coordinates. | +| `clientY` {{readonlyInline}} | long | The Y coordinate of the mouse pointer in local (DOM content) coordinates. | +| `button` {{readonlyInline}} | unsigned short | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left. | +| `buttons` {{readonlyInline}} | unsigned short | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/en-US/docs/Web/API/MouseEvent). | +| `mozPressure` {{readonlyInline}} | float | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). | +| `ctrlKey` {{readonlyInline}} | boolean | `true` if the control key was down when the event was fired. `false` otherwise. | +| `shiftKey` {{readonlyInline}} | boolean | `true` if the shift key was down when the event was fired. `false` otherwise. | +| `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 + +```html +<div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> This div is draggable - </div> -</div> -<div class="dropzone"></div> -<div class="dropzone"></div> -<div class="dropzone"></div> + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> -<style> +<style> #draggable { width: 200px; height: 20px; @@ -162,9 +72,9 @@ translation_of: Web/API/Document/dragover_event margin-bottom: 10px; padding: 10px; } -</style> +</style> -<script> +<script> var dragged; /* Les événements sont déclenchés sur les objets glissables */ @@ -199,7 +109,7 @@ translation_of: Web/API/Document/dragover_event }, false); document.addEventListener("dragleave", function( event ) { - // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent + // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent if ( event.target.className == "dropzone" ) { event.target.style.background = ""; } @@ -217,43 +127,27 @@ translation_of: Web/API/Document/dragover_event } }, false); -</script></pre> +</script> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}}</td> - <td>{{Spec2("HTML5.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}} | {{Spec2("HTML5.1")}} | Définition initiale | -<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> +## Compatibilités navigateur -<p>{{Compat("api.Document.dragover_event")}}</p> +{{Compat("api.Document.dragover_event")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{event("drag")}}</li> - <li>{{event("dragstart")}}</li> - <li>{{event("dragend")}}</li> - <li>{{event("dragover")}}</li> - <li>{{event("dragenter")}}</li> - <li>{{event("dragleave")}}</li> - <li>{{event("dragexit")}}</li> - <li>{{event("drop")}}</li> -</ul> +- {{event("drag")}} +- {{event("dragstart")}} +- {{event("dragend")}} +- {{event("dragover")}} +- {{event("dragenter")}} +- {{event("dragleave")}} +- {{event("dragexit")}} +- {{event("drop")}} diff --git a/files/fr/web/api/document/dragstart_event/index.md b/files/fr/web/api/document/dragstart_event/index.md index f45827df5c..2e0cc56f99 100644 --- a/files/fr/web/api/document/dragstart_event/index.md +++ b/files/fr/web/api/document/dragstart_event/index.md @@ -3,154 +3,65 @@ title: dragstart slug: Web/API/Document/dragstart_event translation_of: Web/API/Document/dragstart_event --- -<p>L'événement <strong>dragstart </strong>est déclenché lorsque l'utilisateur glisse un élément ou une sélection de texte.</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;"><a href="/fr/docs/Web/API/DragEvent"><code>DragEvent</code></a></dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Initie l'opération de glisser-déposer</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td> - <td>The element that was underneath the element being dragged.</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event normally bubbles or not</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event is cancellable or not?</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - <tr> - <td><code>dataTransfer</code></td> - <td>DataTransfer</td> - <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> - </tr> - <tr> - <td><code>currentTarget</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>The node that had the event listener attached.</td> - </tr> - <tr> - <td><code>relatedTarget</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> - </tr> - <tr> - <td><code>screenX</code> {{readonlyInline}}</td> - <td>long</td> - <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> - </tr> - <tr> - <td><code>screenY</code> {{readonlyInline}}</td> - <td>long</td> - <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> - </tr> - <tr> - <td><code>clientX</code> {{readonlyInline}}</td> - <td>long</td> - <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> - </tr> - <tr> - <td><code>clientY</code> {{readonlyInline}}</td> - <td>long</td> - <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> - </tr> - <tr> - <td><code>button</code> {{readonlyInline}}</td> - <td>unsigned short</td> - <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> - </tr> - <tr> - <td><code>buttons</code> {{readonlyInline}}</td> - <td>unsigned short</td> - <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> - </tr> - <tr> - <td><code>mozPressure</code> {{readonlyInline}}</td> - <td>float</td> - <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> - </tr> - <tr> - <td><code>ctrlKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>shiftKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>altKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>metaKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - </tbody> -</table> - -<h2 id="Exemple：dropzone">Exemple：dropzone</h2> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><div class="dropzone"> - <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> +L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un élément ou une sélection de texte. + +## Informations générales + +- Interface + - : [`DragEvent`](/fr/docs/Web/API/DragEvent) +- Propagation + - : Oui +- Annulable + - : Oui +- Cible + - : {{domxref("Document")}}, {{domxref("Element")}} +- Action par défaut + - : Initie l'opération de glisser-déposer + +## Properties + +| Property | Type | Description | +| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` {{readonlyInline}} | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The element that was underneath the element being dragged. | +| `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | The type of event. | +| `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event normally bubbles or not | +| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event is cancellable or not? | +| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document) | +| `detail` {{readonlyInline}} | `long` (`float`) | 0. | +| `dataTransfer` | DataTransfer | The data that underlies a drag-and-drop operation, known as the [drag data store](/en-US/docs/Web/API/DataTransfer). Protected mode. | +| `currentTarget` {{readonlyInline}} | EventTarget | The node that had the event listener attached. | +| `relatedTarget` {{readonlyInline}} | EventTarget | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise. | +| `screenX` {{readonlyInline}} | long | The X coordinate of the mouse pointer in global (screen) coordinates. | +| `screenY` {{readonlyInline}} | long | The Y coordinate of the mouse pointer in global (screen) coordinates. | +| `clientX` {{readonlyInline}} | long | The X coordinate of the mouse pointer in local (DOM content) coordinates. | +| `clientY` {{readonlyInline}} | long | The Y coordinate of the mouse pointer in local (DOM content) coordinates. | +| `button` {{readonlyInline}} | unsigned short | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left. | +| `buttons` {{readonlyInline}} | unsigned short | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/en-US/docs/Web/API/MouseEvent). | +| `mozPressure` {{readonlyInline}} | float | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). | +| `ctrlKey` {{readonlyInline}} | boolean | `true` if the control key was down when the event was fired. `false` otherwise. | +| `shiftKey` {{readonlyInline}} | boolean | `true` if the shift key was down when the event was fired. `false` otherwise. | +| `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 + +### HTML Content + +```html +<div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> This div is draggable - </div> -</div> -<div class="dropzone"></div> -<div class="dropzone"></div> -<div class="dropzone"></div> -</pre> + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> +``` -<h3 id="CSS_Content">CSS Content</h3> +### CSS Content -<pre class="brush: css"> #draggable { +```css + #draggable { width: 200px; height: 20px; text-align: center; @@ -164,11 +75,12 @@ translation_of: Web/API/Document/dragstart_event margin-bottom: 10px; padding: 10px; } -</pre> +``` -<h3 id="JavaScript_Content">JavaScript Content</h3> +### JavaScript Content -<pre class="brush: js"> var dragged; +```js + var dragged; /* Les événements sont déclenchés sur les objets glissables */ document.addEventListener("drag", function( event ) { @@ -219,45 +131,29 @@ translation_of: Web/API/Document/dragstart_event event.target.appendChild( dragged ); } - }, false);</pre> + }, false); +``` -<p>{{ EmbedLiveSample('Example：dropzone') }}</p> +{{ EmbedLiveSample('Example：dropzone') }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragstart")}}</td> - <td>{{Spec2("HTML5.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "editing.html#dndevents", "dragstart")}} | {{Spec2("HTML5.1")}} | Définition initiale | -<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> +## Compatibilités navigateur -<p>{{Compat("api.Document.dragstart_event")}}</p> +{{Compat("api.Document.dragstart_event")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{event("drag")}}</li> - <li>{{event("dragstart")}}</li> - <li>{{event("dragend")}}</li> - <li>{{event("dragover")}}</li> - <li>{{event("dragenter")}}</li> - <li>{{event("dragleave")}}</li> - <li>{{event("dragexit")}}</li> - <li>{{event("drop")}}</li> -</ul> +- {{event("drag")}} +- {{event("dragstart")}} +- {{event("dragend")}} +- {{event("dragover")}} +- {{event("dragenter")}} +- {{event("dragleave")}} +- {{event("dragexit")}} +- {{event("drop")}} diff --git a/files/fr/web/api/document/drop_event/index.md b/files/fr/web/api/document/drop_event/index.md index 64453e9860..539c0d9ce2 100644 --- a/files/fr/web/api/document/drop_event/index.md +++ b/files/fr/web/api/document/drop_event/index.md @@ -3,151 +3,61 @@ title: drop slug: Web/API/Document/drop_event translation_of: Web/API/Document/drop_event --- -<div>{{APIRef}}</div> - -<p>L'événement <strong>drop </strong>est déclenché lorsqu'un élément ou une sélection de texte est déposé sur une cible de dépôt valide.</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;"><a href="/fr/docs/Web/API/DragEvent"><code>DragEvent</code></a></dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;"><a href="/fr/docs/Web/API/Document"><code>Document</code></a>, <a href="/fr/docs/Web/API/Element"><code>Element</code></a></dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Varie</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td> - <td>The element that was underneath the element being dragged.</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event normally bubbles or not</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event is cancellable or not?</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - <tr> - <td><code>dataTransfer</code></td> - <td>DataTransfer</td> - <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> - </tr> - <tr> - <td><code>currentTarget</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>The node that had the event listener attached.</td> - </tr> - <tr> - <td><code>relatedTarget</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> - </tr> - <tr> - <td><code>screenX</code> {{readonlyInline}}</td> - <td>long</td> - <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> - </tr> - <tr> - <td><code>screenY</code> {{readonlyInline}}</td> - <td>long</td> - <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> - </tr> - <tr> - <td><code>clientX</code> {{readonlyInline}}</td> - <td>long</td> - <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> - </tr> - <tr> - <td><code>clientY</code> {{readonlyInline}}</td> - <td>long</td> - <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> - </tr> - <tr> - <td><code>button</code> {{readonlyInline}}</td> - <td>unsigned short</td> - <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> - </tr> - <tr> - <td><code>buttons</code> {{readonlyInline}}</td> - <td>unsigned short</td> - <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> - </tr> - <tr> - <td><code>mozPressure</code> {{readonlyInline}}</td> - <td>float</td> - <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> - </tr> - <tr> - <td><code>ctrlKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>shiftKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>altKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>metaKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - </tbody> -</table> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: html"><div class="dropzone"> - <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> +{{APIRef}} + +L'événement **drop** est déclenché lorsqu'un élément ou une sélection de texte est déposé sur une cible de dépôt valide. + +## Informations générales + +- Interface + - : [`DragEvent`](/fr/docs/Web/API/DragEvent) +- Propagation + - : Oui +- Annulable + - : Oui +- Cible + - : [`Document`](/fr/docs/Web/API/Document), [`Element`](/fr/docs/Web/API/Element) +- Action par défaut + - : Varie + +## Properties + +| Property | Type | Description | +| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` {{readonlyInline}} | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The element that was underneath the element being dragged. | +| `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | The type of event. | +| `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event normally bubbles or not | +| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event is cancellable or not? | +| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document) | +| `detail` {{readonlyInline}} | `long` (`float`) | 0. | +| `dataTransfer` | DataTransfer | The data that underlies a drag-and-drop operation, known as the [drag data store](/en-US/docs/Web/API/DataTransfer). Protected mode. | +| `currentTarget` {{readonlyInline}} | EventTarget | The node that had the event listener attached. | +| `relatedTarget` {{readonlyInline}} | EventTarget | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise. | +| `screenX` {{readonlyInline}} | long | The X coordinate of the mouse pointer in global (screen) coordinates. | +| `screenY` {{readonlyInline}} | long | The Y coordinate of the mouse pointer in global (screen) coordinates. | +| `clientX` {{readonlyInline}} | long | The X coordinate of the mouse pointer in local (DOM content) coordinates. | +| `clientY` {{readonlyInline}} | long | The Y coordinate of the mouse pointer in local (DOM content) coordinates. | +| `button` {{readonlyInline}} | unsigned short | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left. | +| `buttons` {{readonlyInline}} | unsigned short | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/en-US/docs/Web/API/MouseEvent). | +| `mozPressure` {{readonlyInline}} | float | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). | +| `ctrlKey` {{readonlyInline}} | boolean | `true` if the control key was down when the event was fired. `false` otherwise. | +| `shiftKey` {{readonlyInline}} | boolean | `true` if the shift key was down when the event was fired. `false` otherwise. | +| `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 + +```html +<div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> Cette div peut être glissée - </div> -</div> -<div class="dropzone"></div> -<div class="dropzone"></div> -<div class="dropzone"></div> + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> -<style> +<style> #draggable { width: 200px; height: 20px; @@ -162,9 +72,9 @@ translation_of: Web/API/Document/drop_event margin-bottom: 10px; padding: 10px; } -</style> +</style> -<script> +<script> var dragged; /* Les événements sont déclenchés sur les objets glissables */ @@ -199,7 +109,7 @@ translation_of: Web/API/Document/drop_event }, false); document.addEventListener("dragleave", function( event ) { - // réinitialisation de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent + // réinitialisation de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent if ( event.target.className == "dropzone" ) { event.target.style.background = ""; } @@ -217,43 +127,27 @@ translation_of: Web/API/Document/drop_event } }, false); -</script></pre> +</script> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("HTML5.1", "editing.html#dndevents", "drop event")}}</td> - <td>{{Spec2("HTML5.1")}}</td> - <td>Première définition</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "editing.html#dndevents", "drop event")}} | {{Spec2("HTML5.1")}} | Première définition | -<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> +## Compatibilités navigateur -<p>{{Compat("api.Document.drop_event")}}</p> +{{Compat("api.Document.drop_event")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{event("drag")}}</li> - <li>{{event("dragstart")}}</li> - <li>{{event("dragend")}}</li> - <li>{{event("dragover")}}</li> - <li>{{event("dragenter")}}</li> - <li>{{event("dragleave")}}</li> - <li>{{event("dragexit")}}</li> - <li>{{event("drop")}}</li> -</ul> +- {{event("drag")}} +- {{event("dragstart")}} +- {{event("dragend")}} +- {{event("dragover")}} +- {{event("dragenter")}} +- {{event("dragleave")}} +- {{event("dragexit")}} +- {{event("drop")}} diff --git a/files/fr/web/api/document/elementfrompoint/index.md b/files/fr/web/api/document/elementfrompoint/index.md index 8028725d21..cbd5891099 100644 --- a/files/fr/web/api/document/elementfrompoint/index.md +++ b/files/fr/web/api/document/elementfrompoint/index.md @@ -7,44 +7,54 @@ translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint translation_of_original: Web/API/Document/elementFromPoint original_slug: Web/API/DocumentOrShadowRoot/elementFromPoint --- -<p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> -<p>Renvoie l'élément visible au point donné, spécifié relativement au point supérieur gauche visible dans le document.</p> -<h3 id="Syntaxe">Syntaxe</h3> -<pre class="eval"><i>element</i> = document.elementFromPoint(<i>x</i>,<i>y</i>); -</pre> -<p>where</p> -<ul> - <li><code>element</code> est un objet <a href="fr/DOM/element">element</a>.</li> - <li><code>x</code> et <code>y</code> spécifient les coordonnées à vérifier.</li> -</ul> -<h3 id="Exemple">Exemple</h3> -<pre class="brush: html"><html> -<head> -<title>Exemple d'utilisation d'elementFromPoint</title> - -<script type="text/javascript"> +{{ ApiRef() }} + +### Résumé + +Renvoie l'élément visible au point donné, spécifié relativement au point supérieur gauche visible dans le document. + +### Syntaxe + + element = document.elementFromPoint(x,y); + +where + +- `element` est un objet [element](fr/DOM/element). +- `x` et `y` spécifient les coordonnées à vérifier. + +### Exemple + +```html +<html> +<head> +<title>Exemple d'utilisation d'elementFromPoint</title> + +<script type="text/javascript"> function changeColor(newColor) { elem = document.elementFromPoint(2, 2); elem.style.color = newColor; } -</script> -</head> - -<body> -<p id="para1">Un peu de texte ici</p> -<button onclick="changeColor('blue');">bleu</button> -<button onclick="changeColor('red');">rouge</button> -</body> -</html> -</pre> -<h3 id="Notes">Notes</h3> -<p>Si l'élément au point spécifié appartient à un autre document (par exemple, les sous-document d'un iframe), l'élément dans le DOM du document appelant (l'iframe lui-même) est renvoyé. Si l'élément au point donné est anonyme ou du contenu généré par XBL, comme la barre de défilement d'une boîte de texte, le premier élément parent non anonyme (par exemple, la boîte de texte) est renvoyé.</p> -<p>Si le point spécifié est en dehors de la portion visible du document ou que l'une ou l'autre des coordonnées est négative, le résultat est <code>NULL</code>.</p> -<p>{{ Note("Les appelants qui sont des documents XUL devraient attendre que l\'évènement <code>onload</code> se soit déclenché avant d\'appeler cette méthode.") }}</p> -<h3 id="Sp.C3.A9cification">Spécification</h3> -<ul> - <li>Spécification préliminaire : <code><a href="http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint">elementFromPoint</a></code></li> -</ul>
\ No newline at end of file +</script> +</head> + +<body> +<p id="para1">Un peu de texte ici</p> +<button onclick="changeColor('blue');">bleu</button> +<button onclick="changeColor('red');">rouge</button> +</body> +</html> +``` + +### Notes + +Si l'élément au point spécifié appartient à un autre document (par exemple, les sous-document d'un iframe), l'élément dans le DOM du document appelant (l'iframe lui-même) est renvoyé. Si l'élément au point donné est anonyme ou du contenu généré par XBL, comme la barre de défilement d'une boîte de texte, le premier élément parent non anonyme (par exemple, la boîte de texte) est renvoyé. + +Si le point spécifié est en dehors de la portion visible du document ou que l'une ou l'autre des coordonnées est négative, le résultat est `NULL`. + +{{ Note("Les appelants qui sont des documents XUL devraient attendre que l\'évènement <code>onload</code> se soit déclenché avant d\'appeler cette méthode.") }} + +### Spécification + +- Spécification préliminaire : [`elementFromPoint`](http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint) diff --git a/files/fr/web/api/document/elementsfrompoint/index.md b/files/fr/web/api/document/elementsfrompoint/index.md index 259d9da6fc..e275e5780d 100644 --- a/files/fr/web/api/document/elementsfrompoint/index.md +++ b/files/fr/web/api/document/elementsfrompoint/index.md @@ -14,90 +14,72 @@ tags: translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint --- -<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> +{{APIRef("DOM")}}{{SeeCompatTable}} -<p>La propriété <strong><code>elementsFromPoint()</code></strong> de l'interface {{domxref("DocumentOrShadowRoot")}} renvoie un tableau (<em>array</em>) de tous les éléments présents sous le point fourni en paramètre (relatif au <em>viewport</em>).</p> +La propriété **`elementsFromPoint()`** de l'interface {{domxref("DocumentOrShadowRoot")}} renvoie un tableau (_array_) de tous les éléments présents sous le point fourni en paramètre (relatif au _viewport_). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var elements = document.elementsFromPoint(x, y);</pre> + var elements = document.elementsFromPoint(x, y); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>x</dt> - <dd>L'abscisse du point (coordonnée horizontale).</dd> - <dt>y</dt> - <dd>L'ordonnée du point (coordonnée verticale).</dd> -</dl> +- x + - : L'abscisse du point (coordonnée horizontale). +- y + - : L'ordonnée du point (coordonnée verticale). -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Un tableau (<em>array</em>) d'objets {{domxref('element')}} représentants les éléments du DOM concernés.</p> +Un tableau (_array_) d'objets {{domxref('element')}} représentants les éléments du DOM concernés. -<h2 id="Example">Exemples</h2> +## Exemples -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><div> - <p>Du texte</p> -</div> -<p>Éléments au point 30, 20:</p> -<div id="output"></div> -</pre> +```html +<div> + <p>Du texte</p> +</div> +<p>Éléments au point 30, 20:</p> +<div id="output"></div> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">var output = document.getElementById("output"); +```js +var output = document.getElementById("output"); if (document.elementsFromPoint) { var elements = document.elementsFromPoint(30, 20); - for(var i = 0; i < elements.length; i++) { + for(var i = 0; i < elements.length; i++) { output.textContent += elements[i].localName; - if (i < elements.length - 1) { - output.textContent += " < "; + if (i < elements.length - 1) { + output.textContent += " < "; } } } else { - output.innerHTML = "<span style=\"color: red;\">" + - "Votre navigateur ne prend pas en charge <code>document.elementsFromPoint()</code>" + - "</span>"; -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample('Example', '420', '120')}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td> - <td>{{Spec2('Shadow DOM')}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName('CSSOM View', '#dom-document-elementsfrompoint', 'Document')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Précise l'ordre selon lequel les éléments sont peints.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.DocumentOrShadowRoot.elementsFromPoint")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</li> - <li>{{DOMxRef("DocumentOrShadowRoot.msElementsFromRect()")}} {{Non-standard_Inline}}</li> -</ul> + output.innerHTML = "<span style=\"color: red;\">" + + "Votre navigateur ne prend pas en charge <code>document.elementsFromPoint()</code>" + + "</span>"; +} +``` + +### Résultat + +{{EmbedLiveSample('Example', '420', '120')}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------ | +| {{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}} | {{Spec2('Shadow DOM')}} | Définition initiale | +| {{SpecName('CSSOM View', '#dom-document-elementsfrompoint', 'Document')}} | {{Spec2('CSSOM View')}} | Précise l'ordre selon lequel les éléments sont peints. | + +## Compatibilité des navigateurs + +{{Compat("api.DocumentOrShadowRoot.elementsFromPoint")}} + +## Voir aussi + +- {{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}} +- {{DOMxRef("DocumentOrShadowRoot.msElementsFromRect()")}} {{Non-standard_Inline}} diff --git a/files/fr/web/api/document/enablestylesheetsforset/index.md b/files/fr/web/api/document/enablestylesheetsforset/index.md index f0aca39903..ac899fc8c4 100644 --- a/files/fr/web/api/document/enablestylesheetsforset/index.md +++ b/files/fr/web/api/document/enablestylesheetsforset/index.md @@ -10,50 +10,40 @@ tags: - Méthode translation_of: Web/API/Document/enableStyleSheetsForSet --- -<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p> +{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }} -<p>Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de feuilles de styles en cours et désactive toutes les autres (à l'exception de celles sans titre qui sont toujours activées).</p> +Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de feuilles de styles en cours et désactive toutes les autres (à l'exception de celles sans titre qui sont toujours activées). -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval">document.enableStyleSheetsForSet(<em>name</em>) -</pre> + document.enableStyleSheetsForSet(name) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>name</code></dt> - <dd>Le nom des feuilles de styles à activer. Toutes les feuilles de styles dont le titre correspond à ce nom seront activées, tandis que toutes celles possédant un autre titre seront désactivées. Spécifiez une chaîne vide dans le paramètre <code>name</code> pour supprimer toutes les feuilles de styles alternatives et préférées (mais pas les feuilles de styles persistantes, c'est-à-dire, celles sans attribut <code>title</code> (<em>titre</em>)).</dd> -</dl> +- `name` + - : Le nom des feuilles de styles à activer. Toutes les feuilles de styles dont le titre correspond à ce nom seront activées, tandis que toutes celles possédant un autre titre seront désactivées. Spécifiez une chaîne vide dans le paramètre `name` pour supprimer toutes les feuilles de styles alternatives et préférées (mais pas les feuilles de styles persistantes, c'est-à-dire, celles sans attribut `title` (_titre_)). -<h2 id="Notes">Notes</h2> +## Notes -<ul> - <li>Les correspondances de titre sont sensibles à la casse.</li> - <li>L'appel de cette méthode avec un <code>name</code> <code>null</code> n'a pas d'effet ; si vous voulez désactiver toutes les feuilles de styles alternatives et préférées, vous <strong>devez</strong> utiliser "", la chaîne vide.</li> - <li>Les feuilles de styles qui n'ont pas de titre ne sont jamais affectées par cette méthode.</li> - <li>Cette méthode n'affecte jamais les valeurs de {{ domxref("document.lastStyleSheetSet") }} ou {{ domxref("document.preferredStyleSheetSet") }}.</li> -</ul> +- Les correspondances de titre sont sensibles à la casse. +- L'appel de cette méthode avec un `name` `null` n'a pas d'effet ; si vous voulez désactiver toutes les feuilles de styles alternatives et préférées, vous **devez** utiliser "", la chaîne vide. +- Les feuilles de styles qui n'ont pas de titre ne sont jamais affectées par cette méthode. +- Cette méthode n'affecte jamais les valeurs de {{ domxref("document.lastStyleSheetSet") }} ou {{ domxref("document.preferredStyleSheetSet") }}. -<h2 id="Example">Exemple</h2> +## Exemple -<pre>document.enableStyleSheetsForSet("Some style sheet set name"); -</pre> + document.enableStyleSheetsForSet("Some style sheet set name"); -<h2 id="Specification">Spécifications</h2> +## Spécifications -<ul> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5 : Alternate Style Sheets</a></li> -</ul> +- [HTML5 : Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{ domxref("Stylesheet") }}</li> - <li>{{ domxref("document.styleSheets") }}</li> - <li>{{ domxref("document.lastStyleSheetSet") }}</li> - <li>{{ domxref("document.preferredStyleSheetSet") }}</li> - <li>{{ domxref("document.selectedStyleSheetSet") }}</li> - <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li> - <li><a href="/fr/docs/Archive/Standards_du_Web/Utiliser_des_titres_corrects_avec_des_feuilles_de_styles_externes">Utiliser des titres corrects avec des feuilles de styles externes</a></li> -</ul> +- {{ domxref("Stylesheet") }} +- {{ domxref("document.styleSheets") }} +- {{ domxref("document.lastStyleSheetSet") }} +- {{ domxref("document.preferredStyleSheetSet") }} +- {{ domxref("document.selectedStyleSheetSet") }} +- {{ domxref("document.enableStyleSheetsForSet()") }} +- [Utiliser des titres corrects avec des feuilles de styles externes](/fr/docs/Archive/Standards_du_Web/Utiliser_des_titres_corrects_avec_des_feuilles_de_styles_externes) diff --git a/files/fr/web/api/document/evaluate/index.md b/files/fr/web/api/document/evaluate/index.md index 03cc732e3e..44ea0ed1da 100644 --- a/files/fr/web/api/document/evaluate/index.md +++ b/files/fr/web/api/document/evaluate/index.md @@ -9,31 +9,30 @@ tags: - XPath translation_of: Web/API/Document/evaluate --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>La méthode <code><strong>evaluate()</strong></code> renvoie un {{domxref("XPathResult")}} basé sur une expression <a href="/fr/docs/XPath">XPath</a> et d'autres paramètres donnés.</p> +La méthode **`evaluate()`** renvoie un {{domxref("XPathResult")}} basé sur une expression [XPath](/fr/docs/XPath) et d'autres paramètres donnés. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var xpathResult = document.evaluate( - xpathExpression, - contextNode, - namespaceResolver, - resultType, - result -);</pre> + var xpathResult = document.evaluate( + xpathExpression, + contextNode, + namespaceResolver, + resultType, + result + ); -<ul> - <li><code>xpathExpression</code> est une chaîne de caractères représentant le XPath à évaluer.</li> - <li><code>contextNode</code> spécifie le noeud de contexte pour la requête (voir <a href="http://www.w3.org/TR/xpath">XPath specification</a>) . Il est courant de transmettre un document en tant que nœud de contexte.</li> - <li><code>namespaceResolver</code> est une fonction qui recevra tous les préfixes d'espace de noms et devrait renvoyer une chaîne représentant l'URI de l'espace de noms associé à ce préfixe. Il sera utilisé pour résoudre les préfixes dans le XPath lui-même, afin qu'ils puissent être mis en correspondance avec le document. <code>null</code> est commun pour les documents HTML ou lorsque aucun préfixe d'espace de noms n'est utilisé.</li> - <li><code>resultType</code> est un nombre entier qui correspond au type de résultat <code>XPathResult</code> à retourner. Utilisez des <a href="#Types_de_resultats">propriétés de constantes nommées</a>, comme <code>XPathResult.ANY_TYPE</code> du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9.</li> - <li><code>result</code> est un <code>XPathResult</code> existant à utiliser pour les résultats. <code>null</code> est le plus commun et va créer un nouveau XPathResult</li> -</ul> +- `xpathExpression` est une chaîne de caractères représentant le XPath à évaluer. +- `contextNode` spécifie le noeud de contexte pour la requête (voir [XPath specification](http://www.w3.org/TR/xpath)) . Il est courant de transmettre un document en tant que nœud de contexte. +- `namespaceResolver` est une fonction qui recevra tous les préfixes d'espace de noms et devrait renvoyer une chaîne représentant l'URI de l'espace de noms associé à ce préfixe. Il sera utilisé pour résoudre les préfixes dans le XPath lui-même, afin qu'ils puissent être mis en correspondance avec le document. `null` est commun pour les documents HTML ou lorsque aucun préfixe d'espace de noms n'est utilisé. +- `resultType` est un nombre entier qui correspond au type de résultat `XPathResult` à retourner. Utilisez des [propriétés de constantes nommées](#Types_de_resultats), comme `XPathResult.ANY_TYPE` du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9. +- `result` est un `XPathResult` existant à utiliser pour les résultats. `null` est le plus commun et va créer un nouveau XPathResult -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js "> var headings = document . evaluate ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null); +```js + var headings = document . evaluate ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null); /* Cherche le document pour tout élément h2. * Le résultat sera probablement un itérateur de noeuds non ordonné. */ var thisHeading = headings . iterateNext ( ) ; @@ -42,120 +41,140 @@ translation_of: Web/API/Document/evaluate alertText + = thisHeading . textContent + "\n" ; thisHeading = headings . iterateNext ( ) ; } - alert ( alertText ) ; // Alerte le texte de tout élément h2 </pre> + alert ( alertText ) ; // Alerte le texte de tout élément h2 +``` -<p>Note : dans l'exemple ci-dessus, un XPath plus verbeux est préféré aux raccourcis communs tels que <code>//h2</code>. Généralement, des sélecteurs XPath plus spécifiques, comme dans l'exemple ci-dessus, améliorent de façon significative les performances, en particulier pour les documents très volumineux. C'est parce que l'évaluation de la requête ne perd pas de temps à visiter des noeuds inutiles. L'utilisation de // est généralement lente car elle visite tous les nœuds de la racine et tous les sous-nœuds à la recherche de correspondances possibles.</p> +Note : dans l'exemple ci-dessus, un XPath plus verbeux est préféré aux raccourcis communs tels que `//h2`. Généralement, des sélecteurs XPath plus spécifiques, comme dans l'exemple ci-dessus, améliorent de façon significative les performances, en particulier pour les documents très volumineux. C'est parce que l'évaluation de la requête ne perd pas de temps à visiter des noeuds inutiles. L'utilisation de // est généralement lente car elle visite tous les nœuds de la racine et tous les sous-nœuds à la recherche de correspondances possibles. -<p>Une optimisation supplémentaire peut être obtenue en utilisant soigneusement le paramètre de contexte. Par exemple, si vous savez que le contenu que vous recherchez se trouve quelque part dans la balise body, vous pouvez utiliser ceci :</p> +Une optimisation supplémentaire peut être obtenue en utilisant soigneusement le paramètre de contexte. Par exemple, si vous savez que le contenu que vous recherchez se trouve quelque part dans la balise body, vous pouvez utiliser ceci : -<pre class="brush: js">document . evaluate ( " . //h2", document.body, null, XPathResult.ANY_TYPE, null); </pre> +```js +document . evaluate ( " . //h2", document.body, null, XPathResult.ANY_TYPE, null); +``` -<p>Remarquez ci-dessus, <code>document.body</code> a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le <code>"."</code> est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant <code>//h2</code>), la requête démarrera à partir du noeud racine ( <code>html</code>) ce qui serait plus inutile.)</p> +Remarquez ci-dessus, `document.body` a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le `"."` est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant `//h2`), la requête démarrera à partir du noeud racine ( `html`) ce qui serait plus inutile.) -<p>Voir <a href="/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a> pour plus d'informations.</p> +Voir [Introduction à l'utilisation de XPath avec JavaScript](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript) pour plus d'informations. -<h2 id="Notes">Notes</h2> +## Notes -<ul> - <li>Les expressions XPath peuvent être évaluées sur les documents HTML et XML.</li> - <li>Lors de l'utilisation de document.evaluate() dans FF2 ; dans FF3, il faut utiliser someXMLDoc.evaluate() si l'on évalue quelque chose d'autre que le document actuel.</li> -</ul> +- Les expressions XPath peuvent être évaluées sur les documents HTML et XML. +- Lors de l'utilisation de document.evaluate() dans FF2 ; dans FF3, il faut utiliser someXMLDoc.evaluate() si l'on évalue quelque chose d'autre que le document actuel. -<h2 id="Types_de_résultats">Types de résultats</h2> +## Types de résultats -<p>Ce sont des valeurs prises en charge pour le paramètre <code>resultType</code> de la méthode <code>evaluate</code> :</p> +Ce sont des valeurs prises en charge pour le paramètre `resultType` de la méthode `evaluate` : <table class="standard-table"> - <tbody> - <tr> - <td class="header">Type de résultat</td> - <td class="header">Valeur</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>ANY_TYPE</code></td> - <td>0</td> - <td>Quel que soit le type, résulte naturellement de l'expression donnée.</td> - </tr> - <tr> - <td><code>NUMBER_TYPE</code></td> - <td>1</td> - <td>Un ensemble de résultats contenant un seul nombre. Utile, par exemple, dans une expression XPath utilisant la fonction count().</td> - </tr> - <tr> - <td><code>STRING_TYPE</code></td> - <td>2</td> - <td>Un ensemble de résultats contenant une seule chaîne de caractères.</td> - </tr> - <tr> - <td><code>BOOLEAN_TYPE</code></td> - <td>3</td> - <td>Un ensemble de résultats contenant une seule valeur booléenne. Utile pour, par exemple, une expression XPath utilisant la fonction not().</td> - </tr> - <tr> - <td><code>UNORDERED_NODE_ITERATOR_TYPE</code></td> - <td>4</td> - <td>Un ensemble de résultats contenant tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document.</td> - </tr> - <tr> - <td><code>ORDERED_NODE_ITERATOR_TYPE</code></td> - <td>5</td> - <td>Un ensemble de résultats contenant tous les noeuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .</td> - </tr> - <tr> - <td><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></td> - <td>6</td> - <td>Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document .</td> - </tr> - <tr> - <td><code>ORDERED_NODE_SNAPSHOT_TYPE</code></td> - <td>7</td> - <td>Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .</td> - </tr> - <tr> - <td><code>ANY_UNORDERED_NODE_TYPE</code></td> - <td>8</td> - <td>Un ensemble de résultats contenant un seul nœud correspondant à l'expression. Le noeud n'est pas nécessairement le premier noeud du document qui correspond à l'expression.</td> - </tr> - <tr> - <td><code>FIRST_ORDERED_NODE_TYPE</code></td> - <td>9</td> - <td>Un ensemble de résultats contenant le premier nœud du document qui correspond à l'expression.</td> - </tr> - </tbody> + <tbody> + <tr> + <td class="header">Type de résultat</td> + <td class="header">Valeur</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>ANY_TYPE</code></td> + <td>0</td> + <td> + Quel que soit le type, résulte naturellement de l'expression donnée. + </td> + </tr> + <tr> + <td><code>NUMBER_TYPE</code></td> + <td>1</td> + <td> + Un ensemble de résultats contenant un seul nombre. Utile, par exemple, + dans une expression XPath utilisant la fonction count(). + </td> + </tr> + <tr> + <td><code>STRING_TYPE</code></td> + <td>2</td> + <td> + Un ensemble de résultats contenant une seule chaîne de caractères. + </td> + </tr> + <tr> + <td><code>BOOLEAN_TYPE</code></td> + <td>3</td> + <td> + Un ensemble de résultats contenant une seule valeur booléenne. Utile + pour, par exemple, une expression XPath utilisant la fonction not(). + </td> + </tr> + <tr> + <td><code>UNORDERED_NODE_ITERATOR_TYPE</code></td> + <td>4</td> + <td> + Un ensemble de résultats contenant tous les nœuds correspondant à + l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans + le même ordre que celui de leur apparition dans le document. + </td> + </tr> + <tr> + <td><code>ORDERED_NODE_ITERATOR_TYPE</code></td> + <td>5</td> + <td> + Un ensemble de résultats contenant tous les noeuds correspondant à + l'expression. Les nœuds de cet ensemble sont dans le même ordre que + celui de leur apparition dans le document . + </td> + </tr> + <tr> + <td><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></td> + <td>6</td> + <td> + Un ensemble de résultats contenant des instantanés de tous les nœuds + correspondant à l'expression. Les nœuds de cet ensemble ne sont pas + nécessairement dans le même ordre que celui de leur apparition dans le + document . + </td> + </tr> + <tr> + <td><code>ORDERED_NODE_SNAPSHOT_TYPE</code></td> + <td>7</td> + <td> + Un ensemble de résultats contenant des instantanés de tous les nœuds + correspondant à l'expression. Les nœuds de cet ensemble sont dans le + même ordre que celui de leur apparition dans le document . + </td> + </tr> + <tr> + <td><code>ANY_UNORDERED_NODE_TYPE</code></td> + <td>8</td> + <td> + Un ensemble de résultats contenant un seul nœud correspondant à + l'expression. Le noeud n'est pas nécessairement le premier noeud du + document qui correspond à l'expression. + </td> + </tr> + <tr> + <td><code>FIRST_ORDERED_NODE_TYPE</code></td> + <td>9</td> + <td> + Un ensemble de résultats contenant le premier nœud du document qui + correspond à l'expression. + </td> + </tr> + </tbody> </table> -<p>Les résultats des types <code>NODE_ITERATOR</code> contiennent des références aux noeuds du document. La modification d'un nœud invalidera l'itérateur. Après avoir modifié un nœud, tenter de parcourir les résultats entraînera une erreur.</p> +Les résultats des types `NODE_ITERATOR` contiennent des références aux noeuds du document. La modification d'un nœud invalidera l'itérateur. Après avoir modifié un nœud, tenter de parcourir les résultats entraînera une erreur. -<p>Les résultats des types <code>NODE_SNAPSHOT</code> sont des instantanés, qui sont essentiellement des listes de nœuds correspondants. Vous pouvez apporter des modifications au document en modifiant les nœuds de capture instantanée. La modification du document n'invalide pas l'instantané. Toutefois, si le document est modifié, l'instantané peut ne pas correspondre à l'état actuel du document, car les nœuds peuvent avoir été déplacés, modifiés, ajoutés ou supprimés.</p> +Les résultats des types `NODE_SNAPSHOT` sont des instantanés, qui sont essentiellement des listes de nœuds correspondants. Vous pouvez apporter des modifications au document en modifiant les nœuds de capture instantanée. La modification du document n'invalide pas l'instantané. Toutefois, si le document est modifié, l'instantané peut ne pas correspondre à l'état actuel du document, car les nœuds peuvent avoir été déplacés, modifiés, ajoutés ou supprimés. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}</td> - <td>{{Spec2("DOM3 XPath")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}} | {{Spec2("DOM3 XPath")}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.evaluate")}}</p> +{{Compat("api.Document.evaluate")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Document/createExpression">DOM : document.createExpression</a></li> - <li><a href="/fr/Add-ons/Code_snippets/XPath">XPath Code Snippets</a></li> - <li><a href="http://codepen.io/johan/full/ckFgn">Vérifier le support du navigateur</a></li> -</ul> +- [DOM : document.createExpression](/fr/docs/Web/API/Document/createExpression) +- [XPath Code Snippets](/fr/Add-ons/Code_snippets/XPath) +- [Vérifier le support du navigateur](http://codepen.io/johan/full/ckFgn) diff --git a/files/fr/web/api/document/execcommand/index.md b/files/fr/web/api/document/execcommand/index.md index c581db094d..dfd9812dcd 100644 --- a/files/fr/web/api/document/execcommand/index.md +++ b/files/fr/web/api/document/execcommand/index.md @@ -9,185 +9,163 @@ tags: - Reference translation_of: Web/API/Document/execCommand --- -<div>{{ApiRef("DOM")}}{{deprecated_header}}</div> - -<p>Lorsqu'un document HTML passe en <code><a href="/fr/docs/Web/API/Document/designMode">designMode</a></code>, l'objet <code>document</code> correspondant expose une méthode <strong><code>execCommand()</code></strong> permettant d'exécuter des commandes manipulant la région éditable courante tels que <a href="/fr/docs/Web/HTML/Element/input">les champs de formulaire</a> ou les éléments <code><a href="/fr/docs/Web/HTML/Global_attributes/contenteditable">contentEditable</a></code>.</p> - -<p>La plupart des commandes affectent la <a - href="/fr/docs/Web/API/Selection">sélection</a> du document (mise en gras, italique, etc.), tandis que - d'autres insèrent de nouveaux éléments (un lien) ou modifient toute une ligne (indentation). Lorsqu'on - utilise <code>contentEditable</code>, <code>execCommand()</code> affecte l'élément éditable - courant.</p> - -<h2 id="Syntax">Syntaxe</h2> - -<pre class="brush: js"><var>document</var>.execCommand(<var>aCommandName</var>, <var>aShowDefaultUI</var>, <var>aValueArgument</var>) -</pre> - -<h3 id="Return_value">Valeur de retour</h3> - -<p>Un booléen ({{jsxref('Boolean')}}) qui vaut <code>false</code> si la commande n'est pas - prise en charge ou si elle est désactivée.</p> - -<div class="note"> - <p><strong>Note :</strong> <code><var>document</var>.execCommand()</code> ne renvoie - <code>true</code> que s'il est appelé à partir d'une interaction utilisateur. On ne - peut pas l'invoquer dans un script afin de vérifier la prise en charge navigateur avant - d'appeler une commande. À partir de Firefox 82, les appels imbriqués à - <code>document.execCommand()</code> renverront toujours <code>false</code>.</p> -</div> - -<h3 id="Parameters">Paramètres</h3> - -<dl> - <dt><code><var>aCommandName</var></code></dt> - <dd>Une chaîne de caractères {{domxref("DOMString")}} indiquant le nom de la commande à - exécuter. Voir {{anch("Commands")}} pour une liste de commandes possibles.</dd> - <dt><code><var>aShowDefaultUI</var></code></dt> - <dd>Un booléen ({{jsxref("Boolean")}}) indiquant si l'interface utilisateur par défaut - devrait être affichée. Ce n'est pas implémenté par Mozilla.</dd> - <dt><code><var>aValueArgument</var></code></dt> - <dd>Pour les commandes utilisant un argument en entrée, il s'agit d'une chaîne {{domxref("DOMString")}} - qui fournit cette information. On pourra, par exemple, <code>insertImage</code> utilise - l'URL de l'image à insérer. On utilisera <code>null</code> si aucun argument n'est utilisé.</dd> -</dl> - -<h3 id="Commands">Commandes</h3> - -<dl> - <dt><code>backColor</code></dt> - <dd><p>Modifie la couleur d'arrière-plan du document. Avec le mode <code>styleWithCss</code> cela affecte la couleur d'arrière-plan du bloc englobant. Une chaîne de caractères décrivant une valeur {{cssxref("<color>")}} doit être passée en argument. On notera qu'Internet Explorer utilise ceci pour la couleur d'arrière-plan du texte.</p></dd> - <dt><code>bold</code></dt> - <dd><p>Active ou désactive la mise en gras pour la sélection ou à partir du point d'insertion Internet Explorer utilise la balise {{HTMLElement("strong")}} plutôt que {{HTMLElement("b")}}.</p></dd> - <dt><code>ClearAuthenticationCache</code></dt> - <dd><p>Supprime toutes les informations d'authentification <i>credentials</i>) du cache.</p></dd> - <dt><code>contentReadOnly</code></dt> - <dd><p>Rend le contenu du document en lecture seule ou éditable en fonction du booléen passé en argument (n'est pas pris en charge par Internet Explorer)</p></dd> - <dt><code>copy</code></dt> - <dd><p>Copie la sélection courante vers le presse-papier. Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de compatibilité ci-après.</p></dd> - <dt><code>createLink</code></dt> - <dd><p>Crée un hyperlien à partir de la sélection (sous réserve qu'il y en ait une). Une chaîne de caractères formant un URI est nécessaire comme argument afin de fournir la valeur de l'attribut <code>href</code>. L'URI doit contenir au moins un caractère (qui peut être un blanc). (Internet Explorer créera un lien avec une valeur <code>null</code>.)</p></dd> - <dt><code>cut</code></dt> - <dd><p>Coupe le contenu de la sélection courante et le copie dans le presse-papier. Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de compatibilité ci-après.</p></dd> - <dt><code>decreaseFontSize</code></dt> - <dd><p>Ajoute une balise {{HTMLElement("small")}} autour de la sélection ou au point d'insertion. (Non pris en charge par Internet Explorer.)</p></dd> - <dt><code>defaultParagraphSeparator</code></dt> - <dd><p>Modifie le séparateur de paragraphe utilisé lorsque de nouveaux paragraphes sont créés dans les zones de texte éditables. Voir <a href="/fr/docs/Web/Guide/HTML/Editable_content#differences_in_markup_generation"> Différences dans la génération du balisage</a> pour plus de détails.</p></dd> - <dt><code>delete</code></dt> - <dd><p>Supprimer la sélection courante.</p></dd> - <dt><code>enableAbsolutePositionEditor</code></dt> - <dd><p>Active ou désactive la poignée qui permet de déplacer les éléments positionnés de façon absolue. Celle-ci est désactivée par défaut depuis Firefox 64 ({{bug(1490641)}}).</p></dd> - <dt><code>enableInlineTableEditing</code></dt> - <dd><p>Active ou désactive les contrôles pour l'insertion ou la suppression des lignes ou colonnes de tableau. Les contrôles sont désactivés par défaut depuis Firefox 64 ({{bug(1490641)}}).</p></dd> - <dt><code>enableObjectResizing</code></dt> - <dd><p>Active ou désactive les contrôles permettant de redimensionner les images, tableaux ou les éléments positionnés de façon absolue. Les poignées sont désactivées par défaut depuis Firefox 64 ({{bug(1490641)}}).</p></dd> - <dt><code>fontName</code></dt> - <dd><p>Modifie le nom de la police pour la sélection ou à partir du point d'insertion. La valeur fournie en argument doit être un nom de police (ex. <code>"Arial"</code>).</p></dd> - <dt><code>fontSize</code></dt> - <dd><p>Modifie la taille de la police pour la sélection ou à partir du point d'insertion. La valeur fournie en argument doit être un entier compris entre 1 et 7.</p></dd> - <dt><code>foreColor</code></dt> - <dd><p>Modifie la couleur de la police pour la sélection ou à partir du point d'insertion. La valeur passée en argument doit être une chaîne de caractères décrivant une couleur exprimée en notation hexadécimale.</p></dd> - <dt><code>formatBlock</code></dt> - <dd><p>Ajoute un élément HTML de bloc autour de la ligne contenant la sélection courante et remplace l'éventuel élément de bloc englobant s'il en existe un (pour Firefox, {{HTMLElement("blockquote")}} fera exception et englobera n'importe quel bloc). L'argument passé doit être un nom de balise. Tous les éléments de bloc peuvent en théorie être utilisés. (Internet Explorer et Edge ne prennent en charge que les balises <code>H1</code><code>H6</code>, <code>ADDRESS</code>, et <code>PRE</code> qui doivent être passées entre chevrons : <code>"<H1>"</code>.)</p></dd> - <dt><code>forwardDelete</code></dt> - <dd><p>Supprime un caractère à la position du curseur. Le comportement obtenu est le même que lorsqu'on appuie sur la touche <kbd>Suppr</kbd> d'un clavier Windows.</p></dd> - <dt><code>heading</code></dt> - <dd><p>Ajoute un élément de titre autour de la sélection ou au niveau du point d'insertion. L'argument doit être le nom d'une balise de titre (<code>"H1"</code> à <code>"H6"</code>). (Non pris en charge par Internet Explorer et Safari.)</p></dd> - <dt><code>hiliteColor</code></dt> - <dd><p>Modifie la couleur d'arrière-plan pour la sélection ou à partir du point d'insertion. La valeur passée en argument doit être une chaîne de caractères définissant une couleur et <code>useCSS</code> doit valoir <code>true</code>. (Non pris en charge par Internet Explorer.)</p></dd> - <dt><code>increaseFontSize</code></dt> - <dd><p>Ajoute une balise {{HTMLElement("big")}} autour de la sélection ou à partir du point d'insertion. (Non pris en charge par Internet Explorer).</p></dd> - <dt><code>indent</code></dt> - <dd><p>Augmente l'indentation de la ligne contenant la sélection ou le point d'insertion. Pour Firefox, si la sélection s'étend sur plusieurs lignes ayant différents niveaux d'indentation, seules les lignes les moins indentées seront décalées.</p></dd> - <dt><code>insertBrOnReturn</code></dt> - <dd><p>Contrôle si la touche <kbd>Entrée</kbd> insère un élément {{HTMLElement("br")}} ou si le bloc courant est scindé en deux. (Non pris en charge par Internet Explorer.)</p></dd> - <dt><code>insertHorizontalRule</code></dt> - <dd><p>Insère un élément {{HTMLElement("hr")}} au point d'insertion ou remplace la sélection courante par cet élément.</p></dd> - <dt><code>insertHTML</code></dt> - <dd><p>Insère un élément au point d'insertion en supprimant la sélection. Une chaîne de caractères HTML valide doit être fournie en argument. (Non pris en charge par Internet Explorer.)</p></dd> - <dt><code>insertImage</code></dt> - <dd><p>Insère une image au point d'insertion en supprimant la sélection. L'argument doit être une chaîne de caractères indiquant l'URL à utiliser pour l'attribut <code>src</code> de l'image. Les prérequis de cette valeur sont les mêmes que pour <code>createLink</code>.</p></dd> - <dt><code>insertOrderedList</code></dt> - <dd><p>Crée une <a href="/fr/docs/Web/HTML/Element/ol">liste numérotée ordonnée</a> pour la sélection ou à partir du point d'insertion.</p></dd> - <dt><code>insertUnorderedList</code></dt> - <dd><p>Crée une <a href="/fr/docs/Web/HTML/Element/ul">liste non-ordonnée</a> pour la sélection ou à partir du point d'insertion.</p></dd> - <dt><code>insertParagraph</code></dt> - <dd><p>Insère un <a href="/fr/docs/Web/HTML/Element/p">paragraphe</a> autour de la sélection pour la ligne courante. (Internet Explorer insère un paragraphe au point d'insertion et supprime la sélection.)</p></dd> - <dt><code>insertText</code></dt> - <dd><p>Insère le texte indiqué au point d'insertion (quitte à supprimer l'éventuelle sélection courante).</p></dd> - <dt><code>italic</code></dt> - <dd><p>Active ou désactive la mise en italique pour la sélection ou à partir du point d'insertion. (Internet Explorer utilisera l'élément {{HTMLElement("em")}} plutôt que {{HTMLElement("i")}}.)</p></dd> - <dt><code>justifyCenter</code></dt> - <dd><p>Centre la sélection ou le point d'insertion.</p></dd> - <dt><code>justifyFull</code></dt> - <dd><p>Justifie la sélection ou le point d'insertion.</p></dd> - <dt><code>justifyLeft</code></dt> - <dd><p>Justifie à gauche la sélection ou le point d'insertion.</p></dd> - <dt><code>justifyRight</code></dt> - <dd><p>Justifie à droite la sélection ou le point d'insertion.</p></dd> - <dt><code>outdent</code></dt> - <dd><p>Effectue un retrait d'indentation pour la ligne courante.</p></dd> - <dt><code>paste</code></dt> - <dd><p>Colle le contenu du presse-papier au point d'insertion (et remplace éventuellement la sélection actuelle). Fonctionnalité désactivée pour le contenu web.</p></dd> - <dt><code>redo</code></dt> - <dd><p>Rejoue l'action annulée par la précédente commande <code>undo</code>.</p></dd> - <dt><code>removeFormat</code></dt> - <dd><p>Supprime toute mise en forme pour la sélection courante.</p></dd> - <dt><code>selectAll</code></dt> - <dd><p>Sélectionne l'ensemble du contenu de la région éditable.</p></dd> - <dt><code>strikeThrough</code></dt> - <dd><p>Active ou désactive la rayure de la sélection ou à partir d'un point d'insertion.</p></dd> - <dt><code>subscript</code></dt> - <dd><p>Active ou désactive <a href="/fr/docs/Web/HTML/Element/sub">la mise en indice</a> pour la sélection ou au point d'insertion</p></dd> - <dt><code>superscript</code></dt> - <dd><p>Active ou désactive <a href="/fr/docs/Web/HTML/Element/sup">la mise en exposant</a> pour la sélection ou au point d'insertion</p></dd> - <dt><code>underline</code></dt> - <dd><p>Active ou désactive <a href="/fr/docs/Web/HTML/Element/u">le soulignement</a> pour la sélection ou au point d'insertion.</p></dd> - <dt><code>undo</code></dt> - <dd><p>Annule la dernière commande exécutée.</p></dd> - <dt><code>unlink</code></dt> - <dd><p>Retire l'<a href="/fr/docs/Web/HTML/Element/a">ancre</a> de l'hyperlien sélectionné.</p></dd> - <dt><code>useCSS</code> {{Deprecated_inline}}</dt> - <dd><p>Active/désactive l'utilisation de balises HTML ou de CSS pour le balisage généré. La valeur de l'argument doit être un booléen. Note : cet argument possède une logique inversée (<code>false</code> permet d'utiliser CSS et <code>true</code> permet d'utiliser HTML). Cette valeur n'est pas prise en charge par Internet Explorer et a été dépréciée en faveur de <code>styleWithCSS</code>.</p></dd> <dt><code>styleWithCSS</code></dt> - <dd><p>Remplace la commande <code>useCSS</code>. <code>true</code> modifie/génère des attributs <code>style</code> dans le balisage tandis que <code>false</code> génère des éléments HTML de présentation.</p></dd> -</dl> - -<h2 id="Example">Exemple</h2> - -<p>Un exemple d'utilisation est disponible - <a href="https://codepen.io/chrisdavidmills/full/gzYjag/">sur CodePen</a>.</p> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://w3c.github.io/editing/docs/execCommand/">execCommand</a></td> - <td>Brouillon non officiel</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Document.execCommand")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>{{domxref("HTMLElement.contentEditable")}}</li> - <li>{{domxref("document.designMode")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla">L'édition HTML dans Firefox</a> - </li> - <li><a - href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Documentation des incohérences - navigateur dans Scribe</a> qui indique les bugs liés à <code>document.execCommand</code>.</li> -</ul> +{{ApiRef("DOM")}}{{deprecated_header}} + +Lorsqu'un document HTML passe en [`designMode`](/fr/docs/Web/API/Document/designMode), l'objet `document` correspondant expose une méthode **`execCommand()`** permettant d'exécuter des commandes manipulant la région éditable courante tels que [les champs de formulaire](/fr/docs/Web/HTML/Element/input) ou les éléments [`contentEditable`](/fr/docs/Web/HTML/Global_attributes/contenteditable). + +La plupart des commandes affectent la [sélection](/fr/docs/Web/API/Selection) du document (mise en gras, italique, etc.), tandis que +d'autres insèrent de nouveaux éléments (un lien) ou modifient toute une ligne (indentation). Lorsqu'on +utilise `contentEditable`, `execCommand()` affecte l'élément éditable +courant. + +## Syntaxe + +```js +document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) +``` + +### Valeur de retour + +Un booléen ({{jsxref('Boolean')}}) qui vaut `false` si la commande n'est pas +prise en charge ou si elle est désactivée. + +> **Note :** `document.execCommand()` ne renvoie +> `true` que s'il est appelé à partir d'une interaction utilisateur. On ne +> peut pas l'invoquer dans un script afin de vérifier la prise en charge navigateur avant +> d'appeler une commande. À partir de Firefox 82, les appels imbriqués à +> `document.execCommand()` renverront toujours `false`. + +### Paramètres + +- `aCommandName` + - : Une chaîne de caractères {{domxref("DOMString")}} indiquant le nom de la commande à + exécuter. Voir {{anch("Commands")}} pour une liste de commandes possibles. +- `aShowDefaultUI` + - : Un booléen ({{jsxref("Boolean")}}) indiquant si l'interface utilisateur par défaut + devrait être affichée. Ce n'est pas implémenté par Mozilla. +- `aValueArgument` + - : Pour les commandes utilisant un argument en entrée, il s'agit d'une chaîne {{domxref("DOMString")}} + qui fournit cette information. On pourra, par exemple, `insertImage` utilise + l'URL de l'image à insérer. On utilisera `null` si aucun argument n'est utilisé. + +### Commandes + +- `backColor` + - : Modifie la couleur d'arrière-plan du document. Avec le mode `styleWithCss` cela affecte la couleur d'arrière-plan du bloc englobant. Une chaîne de caractères décrivant une valeur {{cssxref("<color>")}} doit être passée en argument. On notera qu'Internet Explorer utilise ceci pour la couleur d'arrière-plan du texte. +- `bold` + - : Active ou désactive la mise en gras pour la sélection ou à partir du point d'insertion Internet Explorer utilise la balise {{HTMLElement("strong")}} plutôt que {{HTMLElement("b")}}. +- `ClearAuthenticationCache` + - : Supprime toutes les informations d'authentification _credentials_) du cache. +- `contentReadOnly` + - : Rend le contenu du document en lecture seule ou éditable en fonction du booléen passé en argument (n'est pas pris en charge par Internet Explorer) +- `copy` + - : Copie la sélection courante vers le presse-papier. Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de compatibilité ci-après. +- `createLink` + - : Crée un hyperlien à partir de la sélection (sous réserve qu'il y en ait une). Une chaîne de caractères formant un URI est nécessaire comme argument afin de fournir la valeur de l'attribut `href`. L'URI doit contenir au moins un caractère (qui peut être un blanc). (Internet Explorer créera un lien avec une valeur `null`.) +- `cut` + - : Coupe le contenu de la sélection courante et le copie dans le presse-papier. Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de compatibilité ci-après. +- `decreaseFontSize` + - : Ajoute une balise {{HTMLElement("small")}} autour de la sélection ou au point d'insertion. (Non pris en charge par Internet Explorer.) +- `defaultParagraphSeparator` + - : Modifie le séparateur de paragraphe utilisé lorsque de nouveaux paragraphes sont créés dans les zones de texte éditables. Voir [Différences dans la génération du balisage](/fr/docs/Web/Guide/HTML/Editable_content#differences_in_markup_generation) pour plus de détails. +- `delete` + - : Supprimer la sélection courante. +- `enableAbsolutePositionEditor` + - : Active ou désactive la poignée qui permet de déplacer les éléments positionnés de façon absolue. Celle-ci est désactivée par défaut depuis Firefox 64 ({{bug(1490641)}}). +- `enableInlineTableEditing` + - : Active ou désactive les contrôles pour l'insertion ou la suppression des lignes ou colonnes de tableau. Les contrôles sont désactivés par défaut depuis Firefox 64 ({{bug(1490641)}}). +- `enableObjectResizing` + - : Active ou désactive les contrôles permettant de redimensionner les images, tableaux ou les éléments positionnés de façon absolue. Les poignées sont désactivées par défaut depuis Firefox 64 ({{bug(1490641)}}). +- `fontName` + - : Modifie le nom de la police pour la sélection ou à partir du point d'insertion. La valeur fournie en argument doit être un nom de police (ex. `"Arial"`). +- `fontSize` + - : Modifie la taille de la police pour la sélection ou à partir du point d'insertion. La valeur fournie en argument doit être un entier compris entre 1 et 7. +- `foreColor` + - : Modifie la couleur de la police pour la sélection ou à partir du point d'insertion. La valeur passée en argument doit être une chaîne de caractères décrivant une couleur exprimée en notation hexadécimale. +- `formatBlock` + - : Ajoute un élément HTML de bloc autour de la ligne contenant la sélection courante et remplace l'éventuel élément de bloc englobant s'il en existe un (pour Firefox, {{HTMLElement("blockquote")}} fera exception et englobera n'importe quel bloc). L'argument passé doit être un nom de balise. Tous les éléments de bloc peuvent en théorie être utilisés. (Internet Explorer et Edge ne prennent en charge que les balises ` H1``H6 `, `ADDRESS`, et `PRE` qui doivent être passées entre chevrons : `"<H1>"`.) +- `forwardDelete` + - : Supprime un caractère à la position du curseur. Le comportement obtenu est le même que lorsqu'on appuie sur la touche <kbd>Suppr</kbd> d'un clavier Windows. +- `heading` + - : Ajoute un élément de titre autour de la sélection ou au niveau du point d'insertion. L'argument doit être le nom d'une balise de titre (`"H1"` à `"H6"`). (Non pris en charge par Internet Explorer et Safari.) +- `hiliteColor` + - : Modifie la couleur d'arrière-plan pour la sélection ou à partir du point d'insertion. La valeur passée en argument doit être une chaîne de caractères définissant une couleur et `useCSS` doit valoir `true`. (Non pris en charge par Internet Explorer.) +- `increaseFontSize` + - : Ajoute une balise {{HTMLElement("big")}} autour de la sélection ou à partir du point d'insertion. (Non pris en charge par Internet Explorer). +- `indent` + - : Augmente l'indentation de la ligne contenant la sélection ou le point d'insertion. Pour Firefox, si la sélection s'étend sur plusieurs lignes ayant différents niveaux d'indentation, seules les lignes les moins indentées seront décalées. +- `insertBrOnReturn` + - : Contrôle si la touche <kbd>Entrée</kbd> insère un élément {{HTMLElement("br")}} ou si le bloc courant est scindé en deux. (Non pris en charge par Internet Explorer.) +- `insertHorizontalRule` + - : Insère un élément {{HTMLElement("hr")}} au point d'insertion ou remplace la sélection courante par cet élément. +- `insertHTML` + - : Insère un élément au point d'insertion en supprimant la sélection. Une chaîne de caractères HTML valide doit être fournie en argument. (Non pris en charge par Internet Explorer.) +- `insertImage` + - : Insère une image au point d'insertion en supprimant la sélection. L'argument doit être une chaîne de caractères indiquant l'URL à utiliser pour l'attribut `src` de l'image. Les prérequis de cette valeur sont les mêmes que pour `createLink`. +- `insertOrderedList` + - : Crée une [liste numérotée ordonnée](/fr/docs/Web/HTML/Element/ol) pour la sélection ou à partir du point d'insertion. +- `insertUnorderedList` + - : Crée une [liste non-ordonnée](/fr/docs/Web/HTML/Element/ul) pour la sélection ou à partir du point d'insertion. +- `insertParagraph` + - : Insère un [paragraphe](/fr/docs/Web/HTML/Element/p) autour de la sélection pour la ligne courante. (Internet Explorer insère un paragraphe au point d'insertion et supprime la sélection.) +- `insertText` + - : Insère le texte indiqué au point d'insertion (quitte à supprimer l'éventuelle sélection courante). +- `italic` + - : Active ou désactive la mise en italique pour la sélection ou à partir du point d'insertion. (Internet Explorer utilisera l'élément {{HTMLElement("em")}} plutôt que {{HTMLElement("i")}}.) +- `justifyCenter` + - : Centre la sélection ou le point d'insertion. +- `justifyFull` + - : Justifie la sélection ou le point d'insertion. +- `justifyLeft` + - : Justifie à gauche la sélection ou le point d'insertion. +- `justifyRight` + - : Justifie à droite la sélection ou le point d'insertion. +- `outdent` + - : Effectue un retrait d'indentation pour la ligne courante. +- `paste` + - : Colle le contenu du presse-papier au point d'insertion (et remplace éventuellement la sélection actuelle). Fonctionnalité désactivée pour le contenu web. +- `redo` + - : Rejoue l'action annulée par la précédente commande `undo`. +- `removeFormat` + - : Supprime toute mise en forme pour la sélection courante. +- `selectAll` + - : Sélectionne l'ensemble du contenu de la région éditable. +- `strikeThrough` + - : Active ou désactive la rayure de la sélection ou à partir d'un point d'insertion. +- `subscript` + - : Active ou désactive [la mise en indice](/fr/docs/Web/HTML/Element/sub) pour la sélection ou au point d'insertion +- `superscript` + - : Active ou désactive [la mise en exposant](/fr/docs/Web/HTML/Element/sup) pour la sélection ou au point d'insertion +- `underline` + - : Active ou désactive [le soulignement](/fr/docs/Web/HTML/Element/u) pour la sélection ou au point d'insertion. +- `undo` + - : Annule la dernière commande exécutée. +- `unlink` + - : Retire l'[ancre](/fr/docs/Web/HTML/Element/a) de l'hyperlien sélectionné. +- `useCSS` {{Deprecated_inline}} + - : Active/désactive l'utilisation de balises HTML ou de CSS pour le balisage généré. La valeur de l'argument doit être un booléen. Note : cet argument possède une logique inversée (`false` permet d'utiliser CSS et `true` permet d'utiliser HTML). Cette valeur n'est pas prise en charge par Internet Explorer et a été dépréciée en faveur de `styleWithCSS`. +- `styleWithCSS` + - : Remplace la commande `useCSS`. `true` modifie/génère des attributs `style` dans le balisage tandis que `false` génère des éléments HTML de présentation. + +## Exemple + +Un exemple d'utilisation est disponible +[sur CodePen](https://codepen.io/chrisdavidmills/full/gzYjag/). + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------- | ---------------------- | ------------ | +| [execCommand](https://w3c.github.io/editing/docs/execCommand/) | Brouillon non officiel | | + +## Compatibilité des navigateurs + +{{Compat("api.Document.execCommand")}} + +## Voir aussi + +- {{domxref("HTMLElement.contentEditable")}} +- {{domxref("document.designMode")}} +- [L'édition HTML dans Firefox](/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla) +- [Documentation des incohérences + navigateur dans Scribe](https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md) qui indique les bugs liés à `document.execCommand`. diff --git a/files/fr/web/api/document/exitfullscreen/index.md b/files/fr/web/api/document/exitfullscreen/index.md index 5bff1f4f8c..6ba66c8671 100644 --- a/files/fr/web/api/document/exitfullscreen/index.md +++ b/files/fr/web/api/document/exitfullscreen/index.md @@ -9,59 +9,45 @@ tags: - Plein écran translation_of: Web/API/Document/exitFullscreen --- -<div>{{ApiRef("Fullscreen API")}}</div> +{{ApiRef("Fullscreen API")}} -<p>La méthode <code><strong>Document.exitFullscreen()</strong></code> extrait le document du mode plein écran ; elle est utilisée pour inverser les effets d'un appel au mode plein écran réalisé avec la méthode {{domxref("Element.requestFullscreen()")}}.</p> +La méthode **`Document.exitFullscreen()`** extrait le document du mode plein écran ; elle est utilisée pour inverser les effets d'un appel au mode plein écran réalisé avec la méthode {{domxref("Element.requestFullscreen()")}}. -<div class="note"> - <p><strong>Note :</strong> Si un autre élément était précédemment en mode plein écran lorsque l'élément en cours a été placé en mode plein écran, cet élément précédent reprend le mode plein écran. Une "pile" d'éléments en plein écran est maintenue par le navigateur à cette fin.</p> -</div> +> **Note :** Si un autre élément était précédemment en mode plein écran lorsque l'élément en cours a été placé en mode plein écran, cet élément précédent reprend le mode plein écran. Une "pile" d'éléments en plein écran est maintenue par le navigateur à cette fin. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">document.exitFullscreen(); -</pre> + document.exitFullscreen(); -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">// Click bascule en mode plein écran +```js +// Click bascule en mode plein écran document.onclick = function (event) { if (document.fullscreenElement) { document.exitFullscreen() } else { document.documentElement.requestFullscreen() } -};</pre> +}; +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}</td> - <td>{{Spec2("Fullscreen")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}} | {{Spec2("Fullscreen")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.exitFullscreen")}}</p> +{{Compat("api.Document.exitFullscreen")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Utiliser le mode plein écran</a></li> - <li>{{ domxref("Element.requestFullscreen()") }}</li> - <li>{{ domxref("Document.exitFullscreen()") }}</li> - <li>{{ domxref("Document.fullscreen") }}</li> - <li>{{ domxref("Document.fullscreenElement") }}</li> - <li>{{ cssxref(":fullscreen") }}</li> - <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li> -</ul> +- [Utiliser le mode plein écran](/fr/docs/Web/Guide/DOM/Using_full_screen_mode) +- {{ domxref("Element.requestFullscreen()") }} +- {{ domxref("Document.exitFullscreen()") }} +- {{ domxref("Document.fullscreen") }} +- {{ domxref("Document.fullscreenElement") }} +- {{ cssxref(":fullscreen") }} +- {{ HTMLAttrXRef("allowfullscreen", "iframe") }} diff --git a/files/fr/web/api/document/exitpointerlock/index.md b/files/fr/web/api/document/exitpointerlock/index.md index 72a24c5f2f..d7290e0749 100644 --- a/files/fr/web/api/document/exitpointerlock/index.md +++ b/files/fr/web/api/document/exitpointerlock/index.md @@ -9,42 +9,28 @@ tags: - Reference translation_of: Web/API/Document/exitPointerLock --- -<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> +{{APIRef("DOM")}}{{SeeCompatTable}} -<p>La méthode <strong><code>exitPointerLock()</code></strong> permet de relâcher un pointeur de façon asynchrone lorsque le pointeur était auparavant mobilisé par la méthode {{domxref("Element.requestPointerLock()")}}.</p> +La méthode **`exitPointerLock()`** permet de relâcher un pointeur de façon asynchrone lorsque le pointeur était auparavant mobilisé par la méthode {{domxref("Element.requestPointerLock()")}}. -<p>Pour connaître le succès ou l'échec de cette requête, il faut surveiller les évènements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}.</p> +Pour connaître le succès ou l'échec de cette requête, il faut surveiller les évènements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">document.exitPointerLock(); -</pre> + document.exitPointerLock(); -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('Pointer Lock','l#extensions-to-the-document-interface','Document')}}</td> - <td>{{Spec2('Pointer Lock')}}</td> - <td>Extension de l'interface <code>Document</code></td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------- | +| {{SpecName('Pointer Lock','l#extensions-to-the-document-interface','Document')}} | {{Spec2('Pointer Lock')}} | Extension de l'interface `Document` | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.exitPointerLock")}}</p> +{{Compat("api.Document.exitPointerLock")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Document.pointerLockElement")}}</li> - <li>{{domxref("Element.requestPointerLock()")}}</li> - <li><a href="/fr/docs/WebAPI/Pointer_Lock">L'API <em>Pointer Lock</em></a></li> -</ul> +- {{domxref("Document.pointerLockElement")}} +- {{domxref("Element.requestPointerLock()")}} +- [L'API _Pointer Lock_](/fr/docs/WebAPI/Pointer_Lock) diff --git a/files/fr/web/api/document/featurepolicy/index.md b/files/fr/web/api/document/featurepolicy/index.md index 4c2dbbe9ba..7c926f4c7e 100644 --- a/files/fr/web/api/document/featurepolicy/index.md +++ b/files/fr/web/api/document/featurepolicy/index.md @@ -9,39 +9,24 @@ tags: - Reference translation_of: Web/API/Document/featurePolicy --- -<p>{{APIRef("Feature Policy")}}</p> +{{APIRef("Feature Policy")}} -<p>La propriété en lecture seule <strong><code>featurePolicy</code></strong> de l'interface {{domxref("Document")}} retourne l'interface {{domxref("FeaturePolicy")}}, qui fournit une API permettant de consulter facilement les règles de fonctionnalités appliquées sur un document spécifique.</p> +La propriété en lecture seule **`featurePolicy`** de l'interface {{domxref("Document")}} retourne l'interface {{domxref("FeaturePolicy")}}, qui fournit une API permettant de consulter facilement les règles de fonctionnalités appliquées sur un document spécifique. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="notranslate">var <var>policy</var> = <var>iframeElement</var>.featurePolicy</pre> + var policy = iframeElement.featurePolicy -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un objet {{domxref("FeaturePolicy")}} pouvant être utilisé pour consulter les paramètres de Feature Policy appliqués au document.</p> +Un objet {{domxref("FeaturePolicy")}} pouvant être utilisé pour consulter les paramètres de Feature Policy appliqués au document. -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Feature Policy")}}</td> - <td>{{Spec2("Feature Policy")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName("Feature Policy")}} | {{Spec2("Feature Policy")}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs - - -<p>{{Compat("api.Document.featurePolicy")}}</p> +{{Compat("api.Document.featurePolicy")}} diff --git a/files/fr/web/api/document/forms/index.md b/files/fr/web/api/document/forms/index.md index 69a310feb2..9331ece590 100644 --- a/files/fr/web/api/document/forms/index.md +++ b/files/fr/web/api/document/forms/index.md @@ -9,108 +9,91 @@ tags: - Propriétés translation_of: Web/API/Document/forms --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>La propriété <code>forms</code> de {{domxref("Document")}} retourne une collection ({{domxref("HTMLCollection")}}) des éléments {{HTMLElement("form")}} présents dans le document actuel.</p> +La propriété `forms` de {{domxref("Document")}} retourne une collection ({{domxref("HTMLCollection")}}) des éléments {{HTMLElement("form")}} présents dans le document actuel. -<div class="note"> -<p><strong>Note :</strong> De même, vous pouvez accéder à une liste des éléments d'entrée utilisateur d'un formulaire à l'aide de la propriété {{domxref ("HTMLFormElement.elements")}}.</p> -</div> +> **Note :** De même, vous pouvez accéder à une liste des éléments d'entrée utilisateur d'un formulaire à l'aide de la propriété {{domxref ("HTMLFormElement.elements")}}. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>collection</var> = document.forms;</pre> + collection = document.forms; -<h3 id="Example">Valeur</h3> +### Valeur -<p>Un objet {{domxref("HTMLCollection")}} listant tous les formulaires du document. Chaque élément de la collection est un {{domxref("HTMLFormElement")}} représentant un seul élément <code><form></code>.</p> +Un objet {{domxref("HTMLCollection")}} listant tous les formulaires du document. Chaque élément de la collection est un {{domxref("HTMLFormElement")}} représentant un seul élément `<form>`. -<h2 id="Example">Exemples</h2> +## Exemples -<h3 id="Example">Récupérer les informations d'un formulaire</h3> +### Récupérer les informations d'un formulaire -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> +```html +<!DOCTYPE html> +<html lang="en"> -<head> -<title>document.forms example</title> -</head> +<head> +<title>document.forms example</title> +</head> -<body> +<body> -<form id="robby"> - <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /> -</form> +<form id="robby"> + <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /> +</form> -<form id="dave"> - <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /> -</form> +<form id="dave"> + <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /> +</form> -<form id="paul"> - <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /> -</form> +<form id="paul"> + <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /> +</form> -</body> -</html> -</pre> +</body> +</html> +``` -<h3 id="Accéder_à_un_élément_contenu_dans_un_formulaire">Accéder à un élément contenu dans un formulaire</h3> +### Accéder à un élément contenu dans un formulaire -<pre class="brush: js">var selectForm = document.forms[index]; +```js +var selectForm = document.forms[index]; var selectFormElement = document.forms[index].elements[index]; -</pre> +``` -<h3 id="Specification">Accéder aux formulaires nommés</h3> +### Accéder aux formulaires nommés -<pre class="brush: html"><!DOCTYPE html> -<html lang="en"> -<head> - <title>document.forms example</title> -</head> +```html +<!DOCTYPE html> +<html lang="en"> +<head> + <title>document.forms example</title> +</head> -<body> +<body> -<form name="login"> - <input name="email" type="email"> - <input name="password" type="password"> - <button type="submit">Log in</button> -</form> +<form name="login"> + <input name="email" type="email"> + <input name="password" type="password"> + <button type="submit">Log in</button> +</form> -<script> +<script> var loginForm = document.forms.login; // Ou document.forms['login'] loginForm.elements.email.placeholder = 'test@example.com'; loginForm.elements.password.placeholder = 'password'; -</script> -</body> -</html></pre> - -<h2 id="Specification">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td> - <td>{{ Spec2('DOM2 Events') }}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="See_Also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Formulaires HTML</a></li> - <li>{{HTMLElement("form")}} et l'interface {{domxref("HTMLFormElement")}}</li> -</ul> +</script> +</body> +</html> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}} | {{ Spec2('HTML WHATWG') }} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | + +## Voir aussi + +- [Formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) +- {{HTMLElement("form")}} et l'interface {{domxref("HTMLFormElement")}} diff --git a/files/fr/web/api/document/fullscreenchange_event/index.md b/files/fr/web/api/document/fullscreenchange_event/index.md index a2606c65b2..adcd354eb9 100644 --- a/files/fr/web/api/document/fullscreenchange_event/index.md +++ b/files/fr/web/api/document/fullscreenchange_event/index.md @@ -3,62 +3,36 @@ title: fullscreenchange slug: Web/API/Document/fullscreenchange_event translation_of: Web/API/Document/fullscreenchange_event --- -<p>L'événement <strong><code>onfullscreenchange</code></strong> est déclenché lorsque le navigateur alterne entre le mode fenêtré et plein écran.</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>L'élément recevant l'événement.</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Le type de l'événement.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Indique si l'événement bubble habituellement ou non.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Indique si l'événement est annulable ou non.</td> - </tr> - </tbody> -</table> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush:js;">// Noter que l'API est toujours vendor-prefixed dans les navigateurs l'implémentant +L'événement **`onfullscreenchange`** est déclenché lorsque le navigateur alterne entre le mode fenêtré et plein écran. + +## Informations générales + +- Spécification + - : [Fullscreen](https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api) +- Interface + - : {{domxref("Event")}} +- Propagation + - : Oui +- Annulable + - : Non +- Cible + - : {{domxref("Document")}} +- Action par défaut + - : Aucune + +## Propriétés + +| Property | Type | Description | +| ------------------------------------- | ------------------------------------ | ---------------------------------------------------- | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | L'élément recevant l'événement. | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | Le type de l'événement. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Indique si l'événement bubble habituellement ou non. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Indique si l'événement est annulable ou non. | + +## Exemple + +```js +// Noter que l'API est toujours vendor-prefixed dans les navigateurs l'implémentant document.addEventListener("fullscreenchange", function( event ) { // L'objet event ne porte pas l'information à propos du mode plein écran @@ -70,16 +44,13 @@ document.addEventListener("fullscreenchange", function( event ) { document.fullscreenElement; } -});</pre> +}); +``` -<h2 id="Evénements_liés">Evénements liés</h2> +## Evénements liés -<ul> - <li><a href="/fr/docs/Mozilla_event_reference/fullscreenerror"><code>fullscreenerror</code></a></li> -</ul> +- [`fullscreenerror`](/fr/docs/Mozilla_event_reference/fullscreenerror) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/DOM/Using_full-screen_mode">Utilisation du mode plein écran</a></li> -</ul> +- [Utilisation du mode plein écran](/fr/docs/DOM/Using_full-screen_mode) diff --git a/files/fr/web/api/document/fullscreenerror_event/index.md b/files/fr/web/api/document/fullscreenerror_event/index.md index dafb34cf85..93500c4c70 100644 --- a/files/fr/web/api/document/fullscreenerror_event/index.md +++ b/files/fr/web/api/document/fullscreenerror_event/index.md @@ -3,67 +3,36 @@ title: fullscreenerror slug: Web/API/Document/fullscreenerror_event translation_of: Web/API/Document/fullscreenerror_event --- -<p>L'événement <strong><code>fullscreenerror</code></strong><code> est déclenché lorsque le navigateur ne peut pas entrer en mode plein écran.</code></p> +L'événement **`fullscreenerror`**` est déclenché lorsque le navigateur ne peut pas entrer en mode plein écran.` -<h2 id="Informations_générales">Informations générales</h2> +## Informations générales -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> +- Spécification + - : [Fullscreen](https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api) +- Interface + - : {{domxref("Event")}} +- Propagation + - : Oui +- Annulable + - : Non +- Cible + - : {{domxref("Document")}} +- Action par défaut + - : Aucune -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> +| Property | Type | Description | +| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | -<h2 id="Evénements_liés">Evénements liés</h2> +## Evénements liés -<ul> - <li><a href="/fr/docs/Mozilla_event_reference/fullscreenchange"><code>fullscreenchange</code></a></li> -</ul> +- [`fullscreenchange`](/fr/docs/Mozilla_event_reference/fullscreenchange) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/DOM/Using_full-screen_mode">Utilisation du mode plein écran</a></li> -</ul> +- [Utilisation du mode plein écran](/fr/docs/DOM/Using_full-screen_mode) diff --git a/files/fr/web/api/document/getboxobjectfor/index.md b/files/fr/web/api/document/getboxobjectfor/index.md index 5160c98e2a..716afb6997 100644 --- a/files/fr/web/api/document/getboxobjectfor/index.md +++ b/files/fr/web/api/document/getboxobjectfor/index.md @@ -9,27 +9,23 @@ tags: - Objets translation_of: Web/API/Document/getBoxObjectFor --- -<p>{{ ApiRef("DOM") }} {{obsolete_header}}</p> +{{ ApiRef("DOM") }} {{obsolete_header}} -<p>Renvoie un <code>boxObject</code> (x, y, largeur, hauteur) pour un élément spécifié.</p> +Renvoie un `boxObject` (x, y, largeur, hauteur) pour un élément spécifié. -<div class="note"> - <p><strong>Note :</strong> Cette méthode est obsolète. Vous devez utiliser la méthode {{domxref("element.getBoundingClientRect()")}} à la place.</p> -</div> +> **Note :** Cette méthode est obsolète. Vous devez utiliser la méthode {{domxref("element.getBoundingClientRect()")}} à la place. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>boxObject</var> = <var>document</var>.getBoxObjectFor(<var>element</var>); -</pre> + boxObject = document.getBoxObjectFor(element); -<ul> - <li><code>boxObject</code> est un {{interface("nsIBoxObject")}}.</li> - <li><code>element</code> est un {{domxref("element","DOMElement")}}</li> -</ul> +- `boxObject` est un {{interface("nsIBoxObject")}}. +- `element` est un {{domxref("element","DOMElement")}} -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush:js">var myDiv = document.getElementById("myDiv"), +```js +var myDiv = document.getElementById("myDiv"), boxObj = document.getBoxObjectFor (myDiv); alert ( @@ -37,8 +33,9 @@ alert ( ", y:" + boxObj.y + ", Width:" + boxObj.width + ", Height:" + boxObj.height -);</pre> +); +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>Spécifié dans <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/xul/nsIDOMXULDocument.idl">nsIXULDocument.idl</a></p> +Spécifié dans [nsIXULDocument.idl](http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/xul/nsIDOMXULDocument.idl) diff --git a/files/fr/web/api/document/getelementbyid/index.md b/files/fr/web/api/document/getelementbyid/index.md index eacf9ef0a2..cc1a21f505 100644 --- a/files/fr/web/api/document/getelementbyid/index.md +++ b/files/fr/web/api/document/getelementbyid/index.md @@ -10,136 +10,118 @@ tags: - Méthodes translation_of: Web/API/Document/getElementById --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>La méthode <code><strong>getElementById()</strong></code> de {{domxref("Document")}} renvoie un objet {{domxref("Element")}} représentant l'élément dont la propriété {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique.</p> +La méthode **`getElementById()`** de {{domxref("Document")}} renvoie un objet {{domxref("Element")}} représentant l'élément dont la propriété {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique. -<p>Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser {{domxref("Document.querySelector","querySelector()")}} pour trouver l'élément en utilisant un {{Glossary("CSS selector","sélecteur")}}.</p> +Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser {{domxref("Document.querySelector","querySelector()")}} pour trouver l'élément en utilisant un {{Glossary("CSS selector","sélecteur")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"><em>var element</em> = document.getElementById(<em>id</em>); -</pre> +```js +var element = document.getElementById(id); +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>id</code></dt> - <dd><p>L'ID (<em>identifiant)</em> de l'élément à localiser. Il est une chaîne de caractères sensible à la casse qui est unique ; un seul élément peut avoir un ID donné.</p></dd> -</dl> +- `id` + - : L'ID (_identifiant)_ de l'élément à localiser. Il est une chaîne de caractères sensible à la casse qui est unique ; un seul élément peut avoir un ID donné. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Un objet {{domxref("Element")}} décrivant l'objet élément du DOM correspondant à l'ID spécifié ou <code>null</code> si aucun n'a été trouvé dans le document.</p> +Un objet {{domxref("Element")}} décrivant l'objet élément du DOM correspondant à l'ID spécifié ou `null` si aucun n'a été trouvé dans le document. -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="Contenu_HTML">Contenu HTML</h3> +### Contenu HTML -<pre class="brush: html"><html> -<head> - <title>getElementById example</title> -</head> -<body> - <p id="para">Some text here</p> - <button onclick="changeColor('blue');">blue</button> - <button onclick="changeColor('red');">red</button> -</body> -</html></pre> +```html +<html> +<head> + <title>getElementById example</title> +</head> +<body> + <p id="para">Some text here</p> + <button onclick="changeColor('blue');">blue</button> + <button onclick="changeColor('red');">red</button> +</body> +</html> +``` -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> +### Contenu JavaScript -<pre class="brush: js">function changeColor(newColor) { +```js +function changeColor(newColor) { var elem = document.getElementById('para'); elem.style.color = newColor; -}</pre> +} +``` -<h3 id="Notes">Résultat</h3> +### Résultat -<p>{{ EmbedLiveSample('Example1', 250, 100) }}</p> +{{ EmbedLiveSample('Example1', 250, 100) }} -<h2 id="Notes">Notes d'utilisation</h2> +## Notes d'utilisation -<p>L'écriture de la lettre capitale de « Id » dans le nom de cette méthode <em>doit</em> être respectée pour que le code fonctionne ; <code>getElementByID()</code> n'est pas valide et ne fonctionnera <em>pas</em>, même si elle semble naturelle.</p> +L'écriture de la lettre capitale de « Id » dans le nom de cette méthode _doit_ être respectée pour que le code fonctionne ; `getElementByID()` n'est pas valide et ne fonctionnera _pas_, même si elle semble naturelle. -<p>Contrairement à d'autres méthodes de recherche d'éléments, comme {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, <code>getElementById</code> est uniquement disponible comme méthode de l'objet global <code>document</code> et <em>n'est pas</em> 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.</p> +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. -<h2 id="Exemple_2">Exemple</h2> +## Exemple -<pre class="brush: html"><!doctype html> -<html> -<head> - <meta charset="UTF-8"> - <title>Document</title> -</head> -<body> - <div id="parent-id"> - <p>hello word1</p> - <p id="test1">hello word2</p> - <p>hello word3</p> - <p>hello word4</p> - </div> - <script> +```html +<!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <title>Document</title> +</head> +<body> + <div id="parent-id"> + <p>hello word1</p> + <p id="test1">hello word2</p> + <p>hello word3</p> + <p>hello word4</p> + </div> + <script> var parentDOM = document.getElementById('parent-id'); var test1=parentDOM.getElementById('test1'); - //erreur de lancement - //TypeError inattendu : parentDOM.getElementById n'est pas une fonction - </script> -</body> -</html></pre> + //erreur de lancement + //TypeError inattendu : parentDOM.getElementById n'est pas une fonction + </script> +</body> +</html> +``` -<p>S'il n'y a pas d'élément avec l'<code>id</code> fourni, cette fonction retourne <code>null</code>. A noter que le paramètre <code>id</code> est sensible à la casse, ainsi<code> document.getElementById("Main")</code> retournera <code>null</code> au lieu de l'élément <code><div id="main"></code> étant donné que "M" et "m" sont différents pour cette méthode.</p> +S'il n'y a pas d'élément avec l'`id` fourni, cette fonction retourne `null`. A noter que le paramètre `id` est sensible à la casse, ainsi` document.getElementById("Main")` retournera `null` au lieu de l'élément `<div id="main">` étant donné que "M" et "m" sont différents pour cette méthode. -<p><strong>Les éléments absents du document</strong> ne sont pas cherchés par <code>getElementById()</code>. Quand vous créez un élément et y assignez un ID, vous devez insérer l'élément dans l'arbre du document avec {{domxref("Node.insertBefore()")}} ou une méthode similaire avant de pouvoir y accéder avec <code>getElementById()</code> :</p> +**Les éléments absents du document** ne sont pas cherchés par `getElementById()`. Quand vous créez un élément et y assignez un ID, vous devez insérer l'élément dans l'arbre du document avec {{domxref("Node.insertBefore()")}} ou une méthode similaire avant de pouvoir y accéder avec `getElementById()` : -<pre class="brush: js">var element = document.createElement('div'); +```js +var element = document.createElement('div'); element.id = 'testqq'; -var el = document.getElementById('testqq'); // el vaudra null !</pre> - -<p><strong>Les documents non-HTML.</strong> Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut <code>id</code> est défini comme étant de type ID dans les langages courants comme <a href="/fr/XHTML">XHTML</a> ou <a href="/fr/XUL">XUL</a>. Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer <code>null</code>.</p> - -<h2 id="Sp.C3.A9cification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale de l'interface</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Remplace DOM 1</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Remplace DOM 2</td> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Remplacera DOM 3</td> - </tr> - </tbody> -</table> - -<p>Traduction en français (non normative) : <a href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId">getElementById</a></p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Document.getElementById")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("Document")}} référence pour d'autres méthodes et propriétés que vous pouvez utiliser pour obtenir la référence vers des éléments du document.</li> - <li>{{domxref("Document.querySelector()")}} pour utiliser des sélecteurs avec des requêtes comme <code>'div.myclass'</code></li> - <li><a href="/fr/xml/xml:id">xml:id</a> dispose d'une méthode utilitaire permettant à getElementById d'obtenir les valeur 'xml:id' dans les documents XML (comme ceux qui pourraient être renvoyés par des appels Ajax).</li> -</ul> +var el = document.getElementById('testqq'); // el vaudra null ! +``` + +**Les documents non-HTML.** Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut `id` est défini comme étant de type ID dans les langages courants comme [XHTML](/fr/XHTML) ou [XUL](/fr/XUL). Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer `null`. + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------- | +| {{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}} | {{Spec2('DOM1')}} | Définition initiale de l'interface | +| {{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}} | {{Spec2('DOM2 Core')}} | Remplace DOM 1 | +| {{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}} | {{Spec2('DOM3 Core')}} | Remplace DOM 2 | +| {{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}} | {{Spec2('DOM WHATWG')}} | Remplacera DOM 3 | + +Traduction en français (non normative) : [getElementById](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId) + +## Compatibilité des navigateurs + +{{Compat("api.Document.getElementById")}} + +## Voir aussi + +- {{domxref("Document")}} référence pour d'autres méthodes et propriétés que vous pouvez utiliser pour obtenir la référence vers des éléments du document. +- {{domxref("Document.querySelector()")}} pour utiliser des sélecteurs avec des requêtes comme `'div.myclass'` +- [xml:id](/fr/xml/xml:id) dispose d'une méthode utilitaire permettant à getElementById d'obtenir les valeur 'xml:id' dans les documents XML (comme ceux qui pourraient être renvoyés par des appels Ajax). diff --git a/files/fr/web/api/document/getelementsbyclassname/index.md b/files/fr/web/api/document/getelementsbyclassname/index.md index 43ff0fb18a..02659c2a50 100644 --- a/files/fr/web/api/document/getelementsbyclassname/index.md +++ b/files/fr/web/api/document/getelementsbyclassname/index.md @@ -8,85 +8,79 @@ tags: - Reference translation_of: Web/API/Document/getElementsByClassName --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine. Vous pouvez également appeler {{domxref ("Element.getElementsByClassName", "getElementsByClassName ()")}} sur n'importe quel élément; il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.</p> +Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine. Vous pouvez également appeler {{domxref ("Element.getElementsByClassName", "getElementsByClassName ()")}} sur n'importe quel élément; il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // or: -<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre> + var elements = document.getElementsByClassName(names); // or: + var elements = rootElement.getElementsByClassName(names); -<ul> - <li><var>elements</var> est une {{domxref ("HTMLCollection")}} des éléments trouvés.</li> - <li><var>names</var> est une chaîne représentant le nom de la classe des éléments à trouver.</li> - <li>getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document. L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.</li> -</ul> +- _elements_ est une {{domxref ("HTMLCollection")}} des éléments trouvés. +- _names_ est une chaîne représentant le nom de la classe des éléments à trouver. +- getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document. L'élément sur lequel il est appelé sera utilisé comme racine de la recherche. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Trouve tous les éléments ayant la classe « test » :</p> +Trouve tous les éléments ayant la classe « test » : -<pre class="eval"> document.getElementsByClassName('test') -</pre> + document.getElementsByClassName('test') -<p>Trouve tous les éléments ayant les classes « rouge » et « test » :</p> +Trouve tous les éléments ayant les classes « rouge » et « test » : -<pre class="eval"> document.getElementsByClassName('rouge test') -</pre> + document.getElementsByClassName('rouge test') -<p>Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :</p> +Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » : -<pre class="eval"> document.getElementById('main').getElementsByClassName('test') -</pre> + document.getElementById('main').getElementsByClassName('test') -<p>Nous pouvons également utiliser les méthodes de Array.prototype sur toute {{domxref ("HTMLCollection")}} en passant HTMLCollection comme valeur de la méthode. Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':</p> +Nous pouvons également utiliser les méthodes de Array.prototype sur toute {{domxref ("HTMLCollection")}} en passant HTMLCollection comme valeur de la méthode. Ici, nous allons trouver tous les éléments div qui ont une classe de 'test': -<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +```js +var testElements = document.getElementsByClassName('test'); var testDivs = Array.prototype.filter.call(testElements, function(testElement){ return testElement.nodeName === 'DIV'; -});</pre> - -<p>XXX writeme == Notes == Une méthode semblable existe pour <code>Element</code></p> - -<h2 id="Sp.C3.A9cification">Obtenir la classe des éléments test</h2> - -<p>C'est la méthode d'opération la plus couramment utilisée.</p> - -<pre class="brush: html"><!doctype html> -<html> -<head> - <meta charset="UTF-8"> - <title>Document</title> -</head> -<body> - <div id="parent-id"> - <p>hello word1</p> - <p class="test">hello word2</p> - <p >hello word3</p> - <p>hello word4</p> - </div> - <script> +}); +``` + +XXX writeme == Notes == Une méthode semblable existe pour \<code>Element\</code> + +## Obtenir la classe des éléments test + +C'est la méthode d'opération la plus couramment utilisée. + +```html +<!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <title>Document</title> +</head> +<body> + <div id="parent-id"> + <p>hello word1</p> + <p class="test">hello word2</p> + <p >hello word3</p> + <p>hello word4</p> + </div> + <script> var parentDOM = document.getElementById("parent-id"); var test=parentDOM.getElementsByClassName("test");//test is not target element console.log(test);//HTMLCollection[1] var testTarget=parentDOM.getElementsByClassName("test")[0];//here , this element is target - console.log(testTarget);//<p class="test">hello word2</p> - </script> -</body> -</html></pre> + console.log(testTarget);//<p class="test">hello word2</p> + </script> +</body> +</html> +``` -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.Document.getElementsByClassName")}} -<p>{{Compat("api.Document.getElementsByClassName")}}</p> +## Spécification - - -<h2 id="Specification">Spécification</h2> - -<ul> - <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname">W3C: getElementsByClassName</a></li> -</ul> +- [W3C: getElementsByClassName](https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname) diff --git a/files/fr/web/api/document/getelementsbyname/index.md b/files/fr/web/api/document/getelementsbyname/index.md index d2087a0d22..dd734d067d 100644 --- a/files/fr/web/api/document/getelementsbyname/index.md +++ b/files/fr/web/api/document/getelementsbyname/index.md @@ -9,78 +9,56 @@ tags: - Méthodes translation_of: Web/API/Document/getElementsByName --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>Renvoie une liste des éléments portant un {{domxref("element.name","name")}} donné dans le document (X)HTML.</p> +Renvoie une liste des éléments portant un {{domxref("element.name","name")}} donné dans le document (X)HTML. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>elements</em> = document.getElementsByName(<em>name</em>) -</pre> + elements = document.getElementsByName(name) -<ul> - <li><code>elements</code> est une collection de {{domxref("NodeList")}}</li> - <li><code>name</code> est la valeur de l'attribut <code>name</code> des éléments.</li> -</ul> +- `elements` est une collection de {{domxref("NodeList")}} +- `name` est la valeur de l'attribut `name` des éléments. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> +```html +<!DOCTYPE html> +<html lang="en"> +<head> ... -</head> +</head> -<body> -<form name="up"><input type="text"></form> -<div name="down"><input type="text"></div> +<body> +<form name="up"><input type="text"></form> +<div name="down"><input type="text"></div> -<script> +<script> var up_forms = document.getElementsByName("up"); console.log(up_forms[0].tagName); // retourne "FORM" -</script> -</body> -</html></pre> - -<h2 id="Notes">Notes</h2> - -<p>L'attribut <code><a href="/fr/docs/Web/API/Element/name">name</a></code> est uniquement applicable aux documents (X) HTML. La méthode renvoie une collection {{domxref("NodeList")}} en cours qui contient tous les éléments avec une valeur donnée pour l'attribut name, tels que {{htmlelement("meta")}} ou {{htmlelement("object")}} ou même si le nom est placé sur des éléments qui ne supportent pas du tout un attribut <code>name</code>.</p> - -<p>La méthode <strong>getElementsByName</strong> fonctionne différemment dans différents navigateurs. Dans IE <10, la méthode getElementsByName () renvoie également les éléments qui ont un attribut id avec la valeur spécifiée. Vous devriez donc faire attention à ne pas utiliser la même chaîne pour le nom et l'identifiant.</p> - -<h2 id="Sp.C3.A9cification">Spécifications</h2> - -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259">DOM Level 2 HTML : getElementsByName</a> — <a href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-71555259">traduction en français</a> (non normative)</li> - <li><a href="http://www.whatwg.org/html/#dom-document-getelementsbyname">HTML5 : getElementsByName</a></li> -</ul> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td> - <td>{{Spec2("DOM2 HTML")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>{{domxref("document.getElementById()")}} pour retourner une référence à un élément par son ID</li> - <li>{{domxref("document.getElementsByTagName()")}} pour renvoyer les références sur les éléments avec la balise de nom donnée</li> - <li>{{domxref("document.querySelector()")}} pour des sélecteurs par des requêtes comme <code>'div.myclass'</code></li> -</ul> - -<p> </p> +</script> +</body> +</html> +``` + +## Notes + +L'attribut [`name`](/fr/docs/Web/API/Element/name) est uniquement applicable aux documents (X) HTML. La méthode renvoie une collection {{domxref("NodeList")}} en cours qui contient tous les éléments avec une valeur donnée pour l'attribut name, tels que {{htmlelement("meta")}} ou {{htmlelement("object")}} ou même si le nom est placé sur des éléments qui ne supportent pas du tout un attribut `name`. + +La méthode **getElementsByName** fonctionne différemment dans différents navigateurs. Dans IE <10, la méthode getElementsByName () renvoie également les éléments qui ont un attribut id avec la valeur spécifiée. Vous devriez donc faire attention à ne pas utiliser la même chaîne pour le nom et l'identifiant. + +## Spécifications + +- [DOM Level 2 HTML : getElementsByName](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-71555259) (non normative) +- [HTML5 : getElementsByName](http://www.whatwg.org/html/#dom-document-getelementsbyname) + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}} | {{ Spec2('HTML WHATWG') }} | | +| {{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}} | {{Spec2("DOM2 HTML")}} | Définition initiale | + +## Voir aussi + +- {{domxref("document.getElementById()")}} pour retourner une référence à un élément par son ID +- {{domxref("document.getElementsByTagName()")}} pour renvoyer les références sur les éléments avec la balise de nom donnée +- {{domxref("document.querySelector()")}} pour des sélecteurs par des requêtes comme `'div.myclass'` diff --git a/files/fr/web/api/document/getelementsbytagname/index.md b/files/fr/web/api/document/getelementsbytagname/index.md index b90d19fbe0..5ba9a313ba 100644 --- a/files/fr/web/api/document/getelementsbytagname/index.md +++ b/files/fr/web/api/document/getelementsbytagname/index.md @@ -8,37 +8,32 @@ tags: - Méthodes translation_of: Web/API/Document/getElementsByTagName --- -<div>{{ ApiRef("DOM") }}</div> +{{ ApiRef("DOM") }} -<div> </div> +Renvoie une {{domxref ("HTMLCollection")}} des éléments avec le nom de balise donné. Le document complet est recherché, y compris le nœud racine. Le `HTMLCollection` renvoyée est en direct, ce qui signifie qu'elle se met à jour automatiquement pour rester synchronisée avec l'arborescence DOM sans avoir à rappeler document.getElementsByTagName (). -<p>Renvoie une {{domxref ("HTMLCollection")}} des éléments avec le nom de balise donné. Le document complet est recherché, y compris le nœud racine. Le <code>HTMLCollection</code> renvoyée est en direct, ce qui signifie qu'elle se met à jour automatiquement pour rester synchronisée avec l'arborescence DOM sans avoir à rappeler document.getElementsByTagName ().</p> +## Syntaxe -<h2 id="Syntaxe">Syntaxe</h2> + var elements = document.getElementsByTagName(name); -<pre class="syntaxbox">var <var>elements</var> = document.getElementsByTagName(<em>name</em>);</pre> +- `elements` est une liste de nœuds (`NodeList`) des éléments trouvés dans l'ordre dans lequel ils apparaissent dans l'arbre. +- `nom` est une chaîne représentant le nom des éléments. La chaîne spéciale `"*"` représente « tous les éléments ». -<ul> - <li><code>elements</code> est une liste de nœuds (<code>NodeList</code>) des éléments trouvés dans l'ordre dans lequel ils apparaissent dans l'arbre.</li> - <li><code>nom</code> est une chaîne représentant le nom des éléments. La chaîne spéciale <code>"*"</code> représente « tous les éléments ».</li> -</ul> +> **Note :** [La dernière spécification W3C](https://dom.spec.whatwg.org/) dit que `elements` est une `HTMLCollection` ; cependant cette méthode renvoie une {{domxref("NodeList")}} dans les navigateurs WebKit. Voir {{bug(14869)}} pour plus de détails. -<div class="note"> -<p><strong>Note :</strong> <a href="https://dom.spec.whatwg.org/">La dernière spécification W3C</a> dit que <code>elements</code> est une <code>HTMLCollection</code> ; cependant cette méthode renvoie une {{domxref("NodeList")}} dans les navigateurs WebKit. Voir {{bug(14869)}} pour plus de détails.</p> -</div> +## Exemple -<h2 id="Exemple">Exemple</h2> +Dans l'exemple suivant, `getElementsByTagName()` commence à partir d'un élément parent particulier et effectue une recherche descendante récursive dans le DOM à partir de cet élément parent, en créant une collection de tous les éléments descendants qui correspondent au paramètre de `name`. Cela démontre à la fois `document.getElementsByTagName()` et son homologue {{domxref ("Element.getElementsByTagName ()")}}, qui lance la recherche sur un élément spécifique dans l'arbre DOM. -<p>Dans l'exemple suivant, <code>getElementsByTagName()</code> commence à partir d'un élément parent particulier et effectue une recherche descendante récursive dans le DOM à partir de cet élément parent, en créant une collection de tous les éléments descendants qui correspondent au paramètre de <code>name</code>. Cela démontre à la fois <code>document.getElementsByTagName()</code> et son homologue {{domxref ("Element.getElementsByTagName ()")}}, qui lance la recherche sur un élément spécifique dans l'arbre DOM.</p> +Cliquer sur les boutons utilise `getElementsByTagName()` pour compter les éléments de paragraphe descendant d'un parent particulier (le document lui-même ou l'un des éléments {{HTMLElement ("div")}} imbriqués). -<p>Cliquer sur les boutons utilise <code>getElementsByTagName()</code> pour compter les éléments de paragraphe descendant d'un parent particulier (le document lui-même ou l'un des éléments {{HTMLElement ("div")}} imbriqués).</p> - -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>getElementsByTagName example</title> - <script> +```html +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>getElementsByTagName example</title> + <script> function getAllParaElems() { var allParas = document.getElementsByTagName('p'); var num = allParas.length; @@ -58,56 +53,53 @@ translation_of: Web/API/Document/getElementsByTagName var num = div2Paras.length; alert('There are ' + num + ' paragraph in #div2'); } - </script> -</head> -<body style="border: solid green 3px"> - <p>Some outer text</p> - <p>Some outer text</p> + </script> +</head> +<body style="border: solid green 3px"> + <p>Some outer text</p> + <p>Some outer text</p> + + <div id="div1" style="border: solid blue 3px"> + <p>Some div1 text</p> + <p>Some div1 text</p> + <p>Some div1 text</p> - <div id="div1" style="border: solid blue 3px"> - <p>Some div1 text</p> - <p>Some div1 text</p> - <p>Some div1 text</p> + <div id="div2" style="border: solid red 3px"> + <p>Some div2 text</p> + <p>Some div2 text</p> + </div> + </div> - <div id="div2" style="border: solid red 3px"> - <p>Some div2 text</p> - <p>Some div2 text</p> - </div> - </div> + <p>Some outer text</p> + <p>Some outer text</p> - <p>Some outer text</p> - <p>Some outer text</p> + <button onclick="getAllParaElems();"> + show all p elements in document</button><br /> - <button onclick="getAllParaElems();"> - show all p elements in document</button><br /> + <button onclick="div1ParaElems();"> + show all p elements in div1 element</button><br /> - <button onclick="div1ParaElems();"> - show all p elements in div1 element</button><br /> + <button onclick="div2ParaElems();"> + show all p elements in div2 element</button> - <button onclick="div2ParaElems();"> - show all p elements in div2 element</button> +</body> +</html> +``` -</body> -</html></pre> +## Notes -<h2 id="Sp.C3.A9cification">Notes</h2> +Lorsqu'elle est appelée sur un document HTML, `getElementsByTagName()` classe son argument avant de continuer. Cela n'est pas souhaitable lorsque vous essayez de faire correspondre des éléments camelCase SVG dans un sous-arbre dans un document HTML. {{Domxref ("document.getElementsByTagNameNS ()")}} est utile dans ce cas. Voir aussi {{Bug (499656)}}. -<p>Lorsqu'elle est appelée sur un document HTML, <code>getElementsByTagName()</code> classe son argument avant de continuer. Cela n'est pas souhaitable lorsque vous essayez de faire correspondre des éléments camelCase SVG dans un sous-arbre dans un document HTML. {{Domxref ("document.getElementsByTagNameNS ()")}} est utile dans ce cas. Voir aussi {{Bug (499656)}}.<br> - <br> - <code>document.getElementsByTagName()</code> est similaire à {{domxref ("element.getElementsByTagName ()")}}, sauf que sa recherche englobe tout le document.</p> +`document.getElementsByTagName()` est similaire à {{domxref ("element.getElementsByTagName ()")}}, sauf que sa recherche englobe tout le document. -<h2 id="Sp.C3.A9cification">Spécifications</h2> +## Spécifications -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core : getElementsByTagName</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-A6C9094">traduction</a> (non normative)</small></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> -</ul> +- [DOM Level 2 Core : getElementsByTagName](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094) — [traduction](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-A6C9094) (non normative) +- [HTML 5: APIs in HTML documents](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Element.getElementsByTagName()")}}</li> - <li>{{domxref("document.getElementById()")}} pour renvoyer une référence à un élément par son <code>id</code> (<em>identifiant</em>)</li> - <li>{{domxref("document.getElementsByName()")}} pour renvoyer une référence à un élément par son <code>name</code> (<em>nom</em>)</li> - <li>{{domxref("document.querySelector()")}} pour les sélecteurs puissants via des requêtes comme <code>'div.myclass'</code></li> -</ul> +- {{domxref("Element.getElementsByTagName()")}} +- {{domxref("document.getElementById()")}} pour renvoyer une référence à un élément par son `id` (_identifiant_) +- {{domxref("document.getElementsByName()")}} pour renvoyer une référence à un élément par son `name` (_nom_) +- {{domxref("document.querySelector()")}} pour les sélecteurs puissants via des requêtes comme `'div.myclass'` diff --git a/files/fr/web/api/document/getelementsbytagnamens/index.md b/files/fr/web/api/document/getelementsbytagnamens/index.md index a91fcc93bb..c508a93d8f 100644 --- a/files/fr/web/api/document/getelementsbytagnamens/index.md +++ b/files/fr/web/api/document/getelementsbytagnamens/index.md @@ -10,41 +10,37 @@ tags: - XPath translation_of: Web/API/Document/getElementsByTagNameNS --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>{{ fx_minversion_note("3.6","Voir la <a href='\"/en/DOM/element.getElementsByTagNameNS#Notes\"'>section Notes de element.getElementsByTagNameNS</a> pour les changements qui s'appliquent aussi à cet API dans Firefox 3.6.") }}</p> +{{ fx_minversion_note("3.6","Voir la <a href='\"/en/DOM/element.getElementsByTagNameNS#Notes\"'>section Notes de element.getElementsByTagNameNS</a> pour les changements qui s'appliquent aussi à cet API dans Firefox 3.6.") }} -<p>Renvoie une liste d'éléments avec la balise de nom donnée appartenant à l'espace de noms donné. Le document complet est recherché, y compris le noeud racine.</p> +Renvoie une liste d'éléments avec la balise de nom donnée appartenant à l'espace de noms donné. Le document complet est recherché, y compris le noeud racine. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>elements</em> = document.getElementsByTagNameNS(<em>namespace</em>,<em>name</em>) -</pre> + elements = document.getElementsByTagNameNS(namespace,name) -<ul> - <li><code>elements</code> est une {{domxref("NodeList")}} (<em>liste de noeud</em>) directe (mais voir le note ci-dessous) d'éléments trouvés dans l'ordre de leur apparition dans l'arbre.</li> - <li><code>namespace</code> l'URI d'espace de noms des éléments à rechercher (voir <code><a href="/en/DOM/Node.namespaceURI">element.namespaceURI</a></code>).</li> - <li><code>name</code> est, soit le nom local des éléments à rechercher, soit la valeur spéciale <code>"*"</code> pour tous les éléments (voir <code><a href="/en/DOM/Node.localName">element.localName</a></code>).</li> -</ul> +- `elements` est une {{domxref("NodeList")}} (_liste de noeud_) directe (mais voir le note ci-dessous) d'éléments trouvés dans l'ordre de leur apparition dans l'arbre. +- `namespace` l'URI d'espace de noms des éléments à rechercher (voir [`element.namespaceURI`](/en/DOM/Node.namespaceURI)). +- `name` est, soit le nom local des éléments à rechercher, soit la valeur spéciale `"*"` pour tous les éléments (voir [`element.localName`](/en/DOM/Node.localName)). -<div class="note"> - <p><strong>Note :</strong> Tandis que la spécification W3C indique que les <code>elements</code> sont des <code>NodeList</code>, cette méthode renvoie une {{domxref("HTMLCollection")}} dans Gecko et Internet Explorer. Opera retourne une <code>NodeList</code>, mais avec une méthode implémentée <code>namedItem</code>, ce qui la rend similaire à une <code>HTMLCollection</code>. À partir de Janvier 2012, dans les navigateurs WebKit seulement, la valeur retournée est une pure <code>NodeList</code>. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=14869">bug 14869</a> pour plus de détails.</p> -</div> +> **Note :** Tandis que la spécification W3C indique que les `elements` sont des `NodeList`, cette méthode renvoie une {{domxref("HTMLCollection")}} dans Gecko et Internet Explorer. Opera retourne une `NodeList`, mais avec une méthode implémentée `namedItem`, ce qui la rend similaire à une `HTMLCollection`. À partir de Janvier 2012, dans les navigateurs WebKit seulement, la valeur retournée est une pure `NodeList`. Voir [bug 14869](https://bugzilla.mozilla.org/show_bug.cgi?id=14869) pour plus de détails. -<h2 id="Example">Exemple</h2> +## Exemple -<p>Dans l'exemple suivant, <code>getElementsByTagNameNS</code> commence à partir d'un élément parent particulier et cherche dans le DOM récursivement de haut en bas à partir de cet élément parent, les éléments enfants correspondant au paramètre <code>name</code> de la balise.</p> +Dans l'exemple suivant, `getElementsByTagNameNS` commence à partir d'un élément parent particulier et cherche dans le DOM récursivement de haut en bas à partir de cet élément parent, les éléments enfants correspondant au paramètre `name` de la balise. -<p>Notez que lorsque le noeud sur lequel <code>getElementsByTagName</code> est invoqué n'est pas un noeud <code>document</code>, la méthode <a href="/fr/docs/Web/API/Element/getElementsByTagNameNS">element.getElementsByTagNameNS</a> est en fait utilisée.</p> +Notez que lorsque le noeud sur lequel `getElementsByTagName` est invoqué n'est pas un noeud `document`, la méthode [element.getElementsByTagNameNS](/fr/docs/Web/API/Element/getElementsByTagNameNS) est en fait utilisée. -<p>Pour utiliser l'exemple suivant, il suffit de le copier/coller dans un nouveau fichier enregistré avec l'extension .xhtml.</p> +Pour utiliser l'exemple suivant, il suffit de le copier/coller dans un nouveau fichier enregistré avec l'extension .xhtml. -<pre class="brush: html">http://www.w3.org/1999/xhtml"> +```html +http://www.w3.org/1999/xhtml"> -<head> -<title>getElementsByTagNameNS example</title> +<head> +<title>getElementsByTagNameNS example</title> -<script type="text/javascript"> +<script type="text/javascript"> function getAllParaElems() { @@ -52,7 +48,7 @@ function getAllParaElems() var num = allParas.length; - alert("There are " + num + " &lt;p&gt; elements in this document"); + alert("There are " + num + " <p> elements in this document"); } @@ -63,7 +59,7 @@ function div1ParaElems() var num = div1Paras.length; - alert("There are " + num + " &lt;p&gt; elements in div1 element"); + alert("There are " + num + " <p> elements in div1 element"); } @@ -74,48 +70,49 @@ function div2ParaElems() var num = div2Paras.length; - alert("There are " + num + " &lt;p&gt; elements in div2 element"); + alert("There are " + num + " <p> elements in div2 element"); } -</script> -</head> +</script> +</head> -<body style="border: solid green 3px"> -<p>Some outer text</p> -<p>Some outer text</p> +<body style="border: solid green 3px"> +<p>Some outer text</p> +<p>Some outer text</p> - <div id="div1" style="border: solid blue 3px"> - <p>Some div1 text</p> - <p>Some div1 text</p> - <p>Some div1 text</p> + <div id="div1" style="border: solid blue 3px"> + <p>Some div1 text</p> + <p>Some div1 text</p> + <p>Some div1 text</p> - <div id="div2" style="border: solid red 3px"> - <p>Some div2 text</p> - <p>Some div2 text</p> - </div> - </div> + <div id="div2" style="border: solid red 3px"> + <p>Some div2 text</p> + <p>Some div2 text</p> + </div> + </div> -<p>Some outer text</p> -<p>Some outer text</p> +<p>Some outer text</p> +<p>Some outer text</p> -<button onclick="getAllParaElems();"> - show all p elements in document</button><br /> +<button onclick="getAllParaElems();"> + show all p elements in document</button><br /> -<button onclick="div1ParaElems();"> - show all p elements in div1 element</button><br /> +<button onclick="div1ParaElems();"> + show all p elements in div1 element</button><br /> -<button onclick="div2ParaElems();"> - show all p elements in div2 element</button> +<button onclick="div2ParaElems();"> + show all p elements in div2 element</button> -</body> -</html> -</pre> +</body> +</html> +``` -<h2 id="Potential_Workaround_for_other_browsers_which_do_not_support">Solution de contournement potentielle pour les navigateurs qui ne prennent pas en charge XPath</h2> +## Solution de contournement potentielle pour les navigateurs qui ne prennent pas en charge XPath -<p>Si le navigateur souhaité ne supporte pas XPath, une autre approche (comme traverser le DOM à travers tous ses enfants, identifier toutes les instances de @xmlns, etc.) serait nécessaire pour trouver toutes les balises avec le nom local et l'espace de noms, mais XPath est beaucoup plus rapide. (Pour adapter à Explorer, on pourrait appeler un wrapper XPath au lieu du XPath dans la fonction ci-dessous (comme Explorer supporte XPath avec une API différente), comme <a href="http://www.davidflanagan.com/javascript5/display.php?n=21-10&f=21/10.js">cette classe wrapper</a>.)</p> +Si le navigateur souhaité ne supporte pas XPath, une autre approche (comme traverser le DOM à travers tous ses enfants, identifier toutes les instances de @xmlns, etc.) serait nécessaire pour trouver toutes les balises avec le nom local et l'espace de noms, mais XPath est beaucoup plus rapide. (Pour adapter à Explorer, on pourrait appeler un wrapper XPath au lieu du XPath dans la fonction ci-dessous (comme Explorer supporte XPath avec une API différente), comme [cette classe wrapper](http://www.davidflanagan.com/javascript5/display.php?n=21-10&f=21/10.js).) -<pre class="brush: js">function getElementsByTagNameNSWrapper (ns, elName, doc, context) { +```js +function getElementsByTagNameNSWrapper (ns, elName, doc, context) { if (!doc) { doc = document; } @@ -126,13 +123,13 @@ function div2ParaElems() var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); var a = []; - for(var i = 0; i < result.snapshotLength; i++) { + for(var i = 0; i < result.snapshotLength; i++) { a[i] = result.snapshotItem(i); } return a; } -</pre> +``` -<h2 id="Specification">Spécifications</h2> +## Spécifications -<p><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">DOM Level 2 Core: Document.getElementsByTagNameNS</a></p> +[DOM Level 2 Core: Document.getElementsByTagNameNS](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS) diff --git a/files/fr/web/api/document/getselection/index.md b/files/fr/web/api/document/getselection/index.md index e485df22ae..270449529f 100644 --- a/files/fr/web/api/document/getselection/index.md +++ b/files/fr/web/api/document/getselection/index.md @@ -11,6 +11,6 @@ translation_of: Web/API/DocumentOrShadowRoot/getSelection translation_of_original: Web/API/Document/getSelection original_slug: Web/API/DocumentOrShadowRoot/getSelection --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>Cette méthode fonctionne de manière identique à la méthode {{domxref ("Window.getSelection()")}} ; elle renvoie un objet {{domxref ("Selection")}} représentant le texte actuellement sélectionné dans le document.</p> +Cette méthode fonctionne de manière identique à la méthode {{domxref ("Window.getSelection()")}} ; elle renvoie un objet {{domxref ("Selection")}} représentant le texte actuellement sélectionné dans le document. diff --git a/files/fr/web/api/document/hasfocus/index.md b/files/fr/web/api/document/hasfocus/index.md index fb6088c0a9..e57571e2f3 100644 --- a/files/fr/web/api/document/hasfocus/index.md +++ b/files/fr/web/api/document/hasfocus/index.md @@ -9,34 +9,32 @@ tags: - Reference translation_of: Web/API/Document/hasFocus --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<p>La méthode <code><strong>Document.hasFocus()</strong></code> retourne une valeur {{jsxref("Boolean")}} <code>true</code> <em>(vrai)</em> indiquant si le document ou tout élément à l'intérieur du document a le focus. Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus.</p> +La méthode **`Document.hasFocus()`** retourne une valeur {{jsxref("Boolean")}} `true` _(vrai)_ indiquant si le document ou tout élément à l'intérieur du document a le focus. Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus. -<div class="note"> -<p><strong>Note :</strong> Lors de la visualisation d'un document, un élément avec focus est toujours l'élément actif dans le document, mais un élément actif n'a pas nécessairement le focus. Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus.</p> -</div> +> **Note :** Lors de la visualisation d'un document, un élément avec focus est toujours l'élément actif dans le document, mais un élément actif n'a pas nécessairement le focus. Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="eval">focused = document.hasFocus(); -</pre> + focused = document.hasFocus(); -<h3 id="Exemple">Valeur retournée</h3> +### Valeur retournée -<p><code>false</code> <em>(faux)</em> si l'élément actif dans le document n'a pas de focus ; <code>true</code><em> (vrai)</em> si l'élément actif dans le document a le focus.</p> +`false` _(faux)_ si l'élément actif dans le document n'a pas de focus ; `true` _(vrai)_ si l'élément actif dans le document a le focus. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<meta charset="UTF-8" /> -<title>TEST</title> -<style> +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="UTF-8" /> +<title>TEST</title> +<style> #message { font-weight: bold; } -</style> -<script> +</style> +<script> setInterval( checkPageFocus, 200 ); function checkPageFocus() { @@ -56,40 +54,26 @@ function openWindow() { "width=640,height=300,left=150,top=260" ); } -</script> -</head> -<body> - <h1>JavaScript hasFocus example</h1> - <div id="message">Waiting for user action</div> - <div><button onclick="openWindow()">Open a new window</button></div> -</body> -</html></pre> - -<h2 id="Specifications">Spécification</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Document.hasFocus")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Page_Visibility_API">Utilisation de l'API de visibilité des pages</a></li> -</ul> +</script> +</head> +<body> + <h1>JavaScript hasFocus example</h1> + <div id="message">Waiting for user action</div> + <div><button onclick="openWindow()">Open a new window</button></div> +</body> +</html> +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}} | {{Spec2('HTML WHATWG')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.Document.hasFocus")}} + +## Voir aussi + +- [Utilisation de l'API de visibilité des pages](/fr/docs/Web/API/Page_Visibility_API) diff --git a/files/fr/web/api/document/head/index.md b/files/fr/web/api/document/head/index.md index ef80950d76..b0ecd73b49 100644 --- a/files/fr/web/api/document/head/index.md +++ b/files/fr/web/api/document/head/index.md @@ -7,63 +7,39 @@ tags: - HTML5 translation_of: Web/API/Document/head --- +Retourne l'élément {{HTMLElement("head")}} du document courant. S'il y a plus d'un élément \<head>, le premier est retourné. -<p>Retourne l'élément {{HTMLElement("head")}} du document courant. S'il y a plus d'un élément <head>, le premier est retourné.</p> +## Syntaxe -<h2 id="Syntax">Syntaxe</h2> + var objRef = document.head; -<pre class="syntaxbox"><em>var objRef</em> = document.head; -</pre> +## Exemple -<h2 id="Example">Exemple</h2> - -<pre class="brush: js">// en HTML: <head id="my-document-head"> +```js +// en HTML: <head id="my-document-head"> var aHead = document.head; alert(aHead.id); // "my-document-head"; alert( document.head === document.querySelector("head") ); // true -</pre> +``` -<h2 id="Example">Notes</h2> +## Notes -<p><code>document.head</code> est en lecture seule. Essayer d'assigner une valeur à cettre propriété échouera en silence ou lancera une <code>TypeError</code> si le mode strict d'ECMAScript est activé dans un navigateur Gecko.</p> +`document.head` est en lecture seule. Essayer d'assigner une valeur à cettre propriété échouera en silence ou lancera une `TypeError` si le mode strict d'ECMAScript est activé dans un navigateur Gecko. -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}} | {{Spec2('HTML5.1')}} | | +| {{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}} | {{Spec2('HTML WHATWG')}} | Initial definition. | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.head")}}</p> +{{Compat("api.Document.head")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("document.body")}}</li> -</ul> +- {{domxref("document.body")}} diff --git a/files/fr/web/api/document/height/index.md b/files/fr/web/api/document/height/index.md index 6dbe1f47e8..f05e75b127 100644 --- a/files/fr/web/api/document/height/index.md +++ b/files/fr/web/api/document/height/index.md @@ -3,42 +3,37 @@ title: Document.height slug: Web/API/Document/height translation_of: Web/API/Document/height --- -<div>{{APIRef("DOM")}} {{Obsolete_header}}</div> +{{APIRef("DOM")}} {{Obsolete_header}} -<div class="note"> -<p><strong>Note:</strong> Apparu avec {{Gecko("6.0")}},<code> document.height n'est plus supporté</code>. Utilisez à la place <code>document.body.clientHeight</code>. Voir {{domxref("element.clientHeight")}}.</p> -</div> +> **Note :** Apparu avec {{Gecko("6.0")}},` document.height n'est plus supporté`. Utilisez à la place `document.body.clientHeight`. Voir {{domxref("element.clientHeight")}}. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Retourne la hauteur de l'objet {{domxref("document")}}. Dans la plupart des cas, ceci est égal à l'élément {{HTMLElement("body")}} du document courant.</p> +Retourne la hauteur de l'objet {{domxref("document")}}. Dans la plupart des cas, ceci est égal à l'élément {{HTMLElement("body")}} du document courant. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>height_value</em> = document.height -</pre> + height_value = document.height -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">// alert document height +```js +// alert document height alert(document.height); -</pre> +``` -<h2 id="Alternatives">Alternatives</h2> +## Alternatives -<pre class="syntaxbox">document.body.clientHeight -document.documentElement.clientHeight -document.documentElement.scrollHeight -</pre> + document.body.clientHeight + document.documentElement.clientHeight + document.documentElement.scrollHeight -<h2 id="Spécification">Spécification</h2> +## Spécification -<p>HTML5</p> +HTML5 -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("document.width")}}</li> - <li>{{domxref("Element.clientHeight")}}</li> - <li>{{domxref("Element.scrollHeight")}}</li> -</ul> +- {{domxref("document.width")}} +- {{domxref("Element.clientHeight")}} +- {{domxref("Element.scrollHeight")}} diff --git a/files/fr/web/api/document/hidden/index.md b/files/fr/web/api/document/hidden/index.md index 66da5b2e9d..23432385c6 100644 --- a/files/fr/web/api/document/hidden/index.md +++ b/files/fr/web/api/document/hidden/index.md @@ -3,39 +3,29 @@ title: Document.hidden slug: Web/API/Document/hidden translation_of: Web/API/Document/hidden --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>La propriété <code><strong>Document.hidden</strong></code> retourne un Booléen qui indique si la page est considérée cachée ou pas.</p> +La propriété **`Document.hidden`** retourne un Booléen qui indique si la page est considérée cachée ou pas. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>boolean</em> = document.hidden</pre> + var boolean = document.hidden -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush:js;">document.addEventListener("visibilitychange", function() { +```js +document.addEventListener("visibilitychange", function() { console.log( document.hidden ); // Modifier le comportement... }); -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}</td> - <td>{{Spec2('Page Visibility API')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("api.Document.hidden")}}</p> +``` + +## Spécifications + +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------ | +| {{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}} | {{Spec2('Page Visibility API')}} | Initial definition | + +## Browser compatibility + +{{Compat("api.Document.hidden")}} diff --git a/files/fr/web/api/document/images/index.md b/files/fr/web/api/document/images/index.md index 1b127eb980..2aaeb008e4 100644 --- a/files/fr/web/api/document/images/index.md +++ b/files/fr/web/api/document/images/index.md @@ -5,29 +5,32 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/Document/images --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<p><code>document.images</code> renvoie une collection des images du document HTML courant.</p> +`document.images` renvoie une collection des images du document HTML courant. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">HTMLCollection =document.images</pre> +```js +HTMLCollection =document.images +``` -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush:js">var listeimg = document.images; -for(var i = 0; i < listeimg.length; i++) { +```js +var listeimg = document.images; +for(var i = 0; i < listeimg.length; i++) { if(listeimg[i] == "banner.gif") { // l'image banner a été trouvée } } -</pre> +``` -<h2 id="Notes">Notes</h2> +## Notes -<p><a href="/fr/DOM/document.images"><code>document.images</code></a> fait partie du DOM HTML, et fonctionne uniquement pour les document HTML.</p> -<h2 id="Sp.C3.A9cification">Spécification</h2> -<ul> - <li>Spécification DOM Level 2 HTML : <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117">HTMLDocument.images</a></li> - <li>Traduction en français (non normative) : <a href="http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-90379117">HTMLDocument.images</a></li> -</ul> +[`document.images`](/fr/DOM/document.images) fait partie du DOM HTML, et fonctionne uniquement pour les document HTML. + +## Spécification + +- Spécification DOM Level 2 HTML : [HTMLDocument.images](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117) +- Traduction en français (non normative) : [HTMLDocument.images](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-90379117) diff --git a/files/fr/web/api/document/implementation/index.md b/files/fr/web/api/document/implementation/index.md index f7684fa56f..ec2cccdd51 100644 --- a/files/fr/web/api/document/implementation/index.md +++ b/files/fr/web/api/document/implementation/index.md @@ -8,40 +8,37 @@ tags: - Reference translation_of: Web/API/Document/implementation --- -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Retourne un objet {{domxref("DOMImplementation")}} associé avec le document courant.</p> +Retourne un objet {{domxref("DOMImplementation")}} associé avec le document courant. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>DOMImpObj</var> = document.implementation; -</pre> + DOMImpObj = document.implementation; -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">var modName = "HTML"; +```js +var modName = "HTML"; var modVer = "2.0"; var conformTest = document.implementation.hasFeature( modName, modVer ); alert( "DOM " + modName + " " + modVer + " supported?: " + conformTest ); -// alerte avec : "DOM HTML 2.0 pris en charge ?: true" si le module DOM niveau 2 HTML est pris en charge.</pre> +// alerte avec : "DOM HTML 2.0 pris en charge ?: true" si le module DOM niveau 2 HTML est pris en charge. +``` -<p>Une liste de noms de modules (par exemple, Core, HTML, XML, etc.) est disponible dans la <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance-h2">Conformance Section</a> DOM niveau 2.</p> +Une liste de noms de modules (par exemple, Core, HTML, XML, etc.) est disponible dans la [Conformance Section](http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance-h2) DOM niveau 2. -<h2 id="Notes">Notes</h2> +## Notes -<p>La recommandation DOM niveau 1 du W3C ne spécifiait que la méthode <code>hasFeature</code>, qui est un moyen de déterminer si un module DOM est supporté par un navigateur (voir l'exemple ci-dessus et ce que votre agent utilisateur prétend prendre en charge ?). Si disponibles, d'autres méthodes <code>DOMImplementation</code> fournissent des services pour contrôler des choses en dehors d'un document unique. Par exemple, l'interface <code>DOMImplementation</code> inclut une méthode <code>createDocumentType</code> avec laquelle des DTD peuvent être créées pour un ou plusieurs documents gérés par l'implémentation.</p> +La recommandation DOM niveau 1 du W3C ne spécifiait que la méthode `hasFeature`, qui est un moyen de déterminer si un module DOM est supporté par un navigateur (voir l'exemple ci-dessus et ce que votre agent utilisateur prétend prendre en charge ?). Si disponibles, d'autres méthodes `DOMImplementation` fournissent des services pour contrôler des choses en dehors d'un document unique. Par exemple, l'interface `DOMImplementation` inclut une méthode `createDocumentType` avec laquelle des DTD peuvent être créées pour un ou plusieurs documents gérés par l'implémentation. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490">DOM Level 2 Core: implementation</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-102161490">DOM Level 3 Core: implementation</a></li> -</ul> +- [DOM Level 2 Core: implementation](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490) +- [DOM Level 3 Core: implementation](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-102161490) -<h2 id="Notes_propres_à_Gecko">Notes propres à Gecko</h2> +## Notes propres à Gecko -<ul> - <li>À partir de Gecko 19.0 {{geckoRelease ("19.0")}} la méthode {{domxref ("DOMImplementation.hasFeature", "hasFeature")}} retournera toujours true.</li> -</ul> +- À partir de Gecko 19.0 {{geckoRelease ("19.0")}} la méthode {{domxref ("DOMImplementation.hasFeature", "hasFeature")}} retournera toujours true. diff --git a/files/fr/web/api/document/importnode/index.md b/files/fr/web/api/document/importnode/index.md index afda055041..65c30cb570 100644 --- a/files/fr/web/api/document/importnode/index.md +++ b/files/fr/web/api/document/importnode/index.md @@ -10,83 +10,57 @@ tags: - Reference translation_of: Web/API/Document/importNode --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode {{domxref ("Document")}} <code>importNode()</code> crée une nouvelle copie du {{domxref ("Node")}} ou {{domxref ("DocumentFragment")}} spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que {{domxref ("Node.appendChild", "appendChild ()")}} ou {{domxref ("Node.insertBefore", "insertBefore ()")}}.</p> +La méthode {{domxref ("Document")}} `importNode()` crée une nouvelle copie du {{domxref ("Node")}} ou {{domxref ("DocumentFragment")}} spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que {{domxref ("Node.appendChild", "appendChild ()")}} ou {{domxref ("Node.insertBefore", "insertBefore ()")}}. -<h3 id="Syntaxe">Syntaxe</h3> +### Syntaxe -<pre class="syntaxbox">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>); -</pre> + var node = document.importNode(externalNode, deep); -<dl> - <dt><code>externalNode</code></dt> - <dd>Le nouveau <code>Node</code> ou <code>DocumentFragment</code> à importer dans le document courant. Après l'importation, le nouveau <code><a href="/fr/docs/Web/API/Node/parentNode">parentNode</a></code> du noeud est <code>null</code>, car il n'a pas encore été inséré dans l'arborescence du document.</dd> - <dt><code>deep</code></dt> - <dd>Une valeur booléenne qui indique s'il faut ou non importer la totalité de la sous-arborescence DOM provenant de <code>externalNode</code>. Si ce paramètre est <code>true</code> (<em>vrai</em>), alors <code>externalNode</code> et tous ses descendants sont copiés; si <code>false</code> <em>(faux)</em>, seul le nœud unique, <code>externalNode</code>, est importé.</dd> -</dl> +- `externalNode` + - : Le nouveau `Node` ou `DocumentFragment` à importer dans le document courant. Après l'importation, le nouveau [`parentNode`](/fr/docs/Web/API/Node/parentNode) du noeud est `null`, car il n'a pas encore été inséré dans l'arborescence du document. +- `deep` + - : Une valeur booléenne qui indique s'il faut ou non importer la totalité de la sous-arborescence DOM provenant de `externalNode`. Si ce paramètre est `true` (_vrai_), alors `externalNode` et tous ses descendants sont copiés; si `false` _(faux)_, seul le nœud unique, `externalNode`, est importé. -<div class="note"> -<p><strong>Note :</strong> Dans la spécification DOM4, <code>deep</code> est répertorié en tant qu'argument facultatif. S'il est omis, la méthode agit comme si la valeur de <code>deep</code> était <code>true</code>, par défaut, elle utilisait le clonage profond comme comportement par défaut. Pour créer un clone superficiel, la profondeur doit être définie sur <code>false</code>.<br> - <br> - Ce comportement a été modifié dans la dernière spécification, et s'il est omis, la méthode agira comme si la valeur de <code>deep</code> était <code>false</code>. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument <code>deep</code> à la fois pour la compatibilité en amont et en aval. Avec Gecko 28.0 {{geckoRelease (28)}}, la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease (29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.</p> -</div> +> **Note :** Dans la spécification DOM4, `deep` est répertorié en tant qu'argument facultatif. S'il est omis, la méthode agit comme si la valeur de `deep` était `true`, par défaut, elle utilisait le clonage profond comme comportement par défaut. Pour créer un clone superficiel, la profondeur doit être définie sur `false`. +> +> Ce comportement a été modifié dans la dernière spécification, et s'il est omis, la méthode agira comme si la valeur de `deep` était `false`. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument `deep` à la fois pour la compatibilité en amont et en aval. Avec Gecko 28.0 {{geckoRelease (28)}}, la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease (29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">var iframe = document.getElementsByTagName("iframe")[0]; +```js +var iframe = document.getElementsByTagName("iframe")[0]; var oldNode = iframe.contentWindow.document.getElementById("myNode"); var newNode = document.importNode(oldNode, true); -document.getElementById("container").appendChild(newNode);</pre> +document.getElementById("container").appendChild(newNode); +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>Le noeud d'origine n'est pas supprimé du document d'origine. Le noeud importé est un clone de l'original.</p> +Le noeud d'origine n'est pas supprimé du document d'origine. Le noeud importé est un clone de l'original. -<p> </p> -<p>Les nœuds provenant de documents externes doivent être clonés à l'aide de <a href="/fr/docs/Web/API/Document/importNode"><code>document.importNode()</code></a> (ou adoptés avec <a href="/fr/docs/Web/API/Document/adoptNode"><code>document.adoptNode()</code></a>) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes de <a href="/fr/docs/Web/API/Node/ownerDocument"><code>Node.ownerDocument</code></a>, consultez la <a href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">FAQ DOM du W3C</a> (en anglais).</p> -<p>Gecko n'obligeait pas à utiliser <a href="/fr/docs/Web/API/Document/importNode"><code>document.importNode()</code></a> et <a href="/fr/docs/Web/API/Document/adoptNode"><code>document.adoptNode()</code></a> avant sa version 1.9. Depuis les versions 1.9 alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception <code>WRONG_DOCUMENT_ERR</code> est déclenchée (<code>NS_ERROR_DOM_WRONG_DOCUMENT_ERR</code>). implémentation dans le <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=47903" rel="noopener">bug 47903</a>.</p> +Les nœuds provenant de documents externes doivent être clonés à l'aide de [`document.importNode()`](/fr/docs/Web/API/Document/importNode) (ou adoptés avec [`document.adoptNode()`](/fr/docs/Web/API/Document/adoptNode)) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes de [`Node.ownerDocument`](/fr/docs/Web/API/Node/ownerDocument), consultez la [FAQ DOM du W3C](http://www.w3.org/DOM/faq.html#ownerdoc) (en anglais). -<p> </p> +Gecko n'obligeait pas à utiliser [`document.importNode()`](/fr/docs/Web/API/Document/importNode) et [`document.adoptNode()`](/fr/docs/Web/API/Document/adoptNode) avant sa version 1.9. Depuis les versions 1.9 alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception `WRONG_DOCUMENT_ERR` est déclenchée (`NS_ERROR_DOM_WRONG_DOCUMENT_ERR`). implémentation dans le [bug 47903](https://bugzilla.mozilla.org/show_bug.cgi?id=47903). -<h2 id="Sp.C3.A9cification">Spécifications</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Spécifications -<div> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}} | {{Spec2("DOM2 Core")}} | Définition initiale | +## Compatibilité des navigateurs -<p>{{Compat("api.Document.importNode")}} </p> -</div> +{{Compat("api.Document.importNode")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("document.adoptNode()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> -</ul> - -<p> </p> +- {{domxref("document.adoptNode()")}} +- {{domxref("Node.appendChild()")}} +- {{domxref("Node.insertBefore()")}} diff --git a/files/fr/web/api/document/index.md b/files/fr/web/api/document/index.md index 186904db9e..b510b17ae1 100644 --- a/files/fr/web/api/document/index.md +++ b/files/fr/web/api/document/index.md @@ -9,482 +9,402 @@ tags: - Reference translation_of: Web/API/Document --- -<p>{{ApiRef}}</p> - -<p>L'interface <strong><code>Document</code></strong> représente n'importe quelle page Web chargée dans le navigateur et sert de point d'entrée dans le contenu de la page Web, qui est l'arborescence DOM. L'arborescence DOM inclut des éléments tels que {{HTMLElement ("body")}} <em>(corps)</em> et {{HTMLElement ("table")}} <em>(tableau)</em>, parmi beaucoup d'autres. Il fournit des fonctionnalités globales au document, comme le moyen d'obtenir l'URL de la page et de créer de nouveaux éléments dans le document.</p> - -<p>{{inheritanceDiagram}}</p> - -<p>L'interface Document décrit les propriétés et méthodes communes à tout type de document. En fonction du type de document (HTML, XML, SVG, ...), une API plus grande est disponible : les documents HTML, servis avec le type <code>text/html</code>, implémentent également l'interface {{domxref ("HTMLDocument")}}, alors que les documents XML et SVG implémentent l'interface {{domxref ("XMLDocument")}}.</p> - -<h2 id="Constructeur">Constructeur</h2> - -<dl> - <dt>{{domxref("Document.Document","Document()")}}{{non-standard_inline}}</dt> - <dd>crée un nouvel objet <code>Document</code> .</dd> -</dl> - -<h2 id="Propri.C3.A9t.C3.A9s">Propriétés</h2> - -<p><em>Cette interface hérite aussi des interfaces {{domxref("Node")}} et {{domxref("EventTarget")}} .</em></p> - -<dl> - <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> - <dd>fournit un accès à tous les éléments du document. C'est une interface héritée non standard qui ne doit pas être utilisée.</dd> -</dl> - -<dl> - <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> - <dd>utilisé avec {{domxref("document.load")}} pour indiquer une requête asynchrone.</dd> -</dl> - -<dl> - <dt>{{domxref("Document.characterSet")}} {{readonlyinline}} {{Deprecated_inline}}</dt> - <dd>renvoie le jeu de caractères utilisé par le document.</dd> -</dl> - -<dl> - <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>indique si le document est rendu en mode <em>Quirks</em> ou <em>Strict</em>.</dd> -</dl> - -<dl> - <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>Renvoie le type de contenu de l'en-tête MIME du document courant.</dd> -</dl> - -<dl> - <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt> - <dd>Renvoie le DTD (Document Type Definition) du document courant.</dd> -</dl> - -<dl> - <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt> - <dd>Renvoie l'{{domxref("Element")}} qui est l'enfant direct du document. Pour les documents HTML, il s'agit normalement de l'élément {{HTMLElement("HTML")}}.</dd> - <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt> - <dd>retroune l'emplacement du document sous la forme d'une chaîne de caractères.</dd> - <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> - <dd>devrait retourner un objet {{domxref("DOMConfiguration")}} .</dd> - <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt> - <dd><code>true</code> <em>(vrai)</em> quand le document est en {{domxref("Using_full-screen_mode","mode plein écran")}}.</dd> - <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt> - <dd>...</dd> - <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt> - <dd>Renvoie l'implémentation DOM associée au document courant.</dd> - <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt> - <dd>alias de {{domxref("Document.characterSet")}}. Utilisez cette propriété à la place.</dd> - <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt> - <dd>retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. A la valeur <code>null</code> jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> - <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> - <dd>retourne un {{jsxref("Boolean")}} qui est <code>true</code> <em>(vrai)</em> seulement si le document est synthétique, tel qu'une image autonome, une vidéo, un fichier audio ou similaire.</dd> - <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> - <dd>L'élément qui est actuellement affiché en mode plein écran pour ce document.</dd> - <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> - <dd><code>true</code> <em>(vrai)</em> si l'appel {{domxref("Element.mozRequestFullscreen()")}} est réussi dans le document courant.</dd> - <dt>{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé. <code>null</code> si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document.</dd> - <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt> - <dd>renvoie la page de style préférée spécifiée par l'auteur de la page.</dd> - <dt>{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}</dt> - <dd>retourne une référence à l'{{domxref("Element")}} qui fait défiler le document.</dd> - <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> - <dd>renvoie la feuille de style actuellement utilisée.</dd> - <dt>{{domxref("Document.styleSheets")}} {{readonlyinline}}</dt> - <dd>Renvoie une liste de tous les objets {{domxref("stylesheet")}}<em> (feuilles de styles)</em> du document courant.</dd> - <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt> - <dd>...</dd> - <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>...</dd> - <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt> - <dd>renvoie une <code>string</code> <em>(chaîne de caractères)</em> indiquant l'état de visibilité du document. Les valeurs possibles sont <code>visible</code> , <code>hidden <em>(masqué)</em></code> , prerender <em>(pré-rendu)</em> et <code>unloaded</code> <em>(</em><em>déchargées</em>).</dd> - <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> - <dd>retourne le codage déterminé par une déclaration XML.</dd> - <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> - <dd>renvoie <code>true</code> si la déclaration XML précise que le document doit être autonome (par exemple, une partie externe de la DTD du contenu du document), sinon <code>false</code> <em>(faux)</em>.</dd> - <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> - <dd>retourne le numéro de la version spécifié dans la déclaration XML ou <code>"1.0"</code> si la déclaration est absente.</dd> -</dl> - -<p>L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} :</p> - -<p>{{page("/fr/docs/Web/API/ParentNode","Propriétés")}}</p> - -<h3 id="Extensions_du_document_HTML">Extensions du document HTML</h3> - -<p>L'interface Document, pour les documents HTML, hérite de l'interface <em>{{domxref("HTMLDocument")}}</em> ou depuis HTML5, est étendue pour eux.</p> - -<dl> - <dt>{{domxref("Document.activeElement")}} {{readonlyinline}}</dt> - <dd>Renvoie l'élément courant qui a la focus.</dd> - <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> - <dd>Renvoie ou définit la couleur des liens actifs du corps du document.</dd> - <dt>{{domxref("Document.anchors")}}</dt> - <dd>Renvoie une liste de toutes les ancres du document.</dd> - <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt> - <dd>Renvoie une liste ordonnée des "applets" du document.</dd> - <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> - <dd><strong>bgColor</strong> renvoie ou définit la couleur d'arrière-plan du document courant.</dd> -</dl> - -<dl> - <dt>{{domxref("Document.body")}}</dt> - <dd><strong>body</strong> renvoie l'élément {{HTMLElement("body")}} du document en cours.</dd> - <dt>{{domxref("Document.cookie")}}</dt> - <dd>Renvoie une liste des cookies du document, séparés par des points virgules, ou définit un cookie.</dd> -</dl> - -<dl> - <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt> - <dd>Renvoie une référence à l'objet window.</dd> - <dt>{{domxref("Document.designMode")}}</dt> - <dd>renvoie ou définit les capacités d'édition du document entier.</dd> - <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt> - <dd>Assigne / renvoie le sens du texte (rtl/ltr) <em>(de gauche à droite / de droite à gauche)</em> du document.</dd> - <dt>{{domxref("Document.domain")}}</dt> - <dd>renvoie ou affecte le domaine de l'élément courant.</dd> - <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt> - <dd>renvoie une liste des objets {{HTMLElement('embed')}} inclus dans le document courant.</dd> -</dl> - -<dl> - <dt>{{domxref("Document.fgColor")}} {{Deprecated_inline}}</dt> - <dd>renvoie ou définit la couleur du texte du document courant.</dd> - <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt> - <dd><strong>forms</strong> renvoie une liste des éléments {{HTMLElement("form")}} du document courant</dd> - <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt> - <dd>Renvoie l'élément {{HTMLElement("head")}} du document.</dd> - <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> - <dd>renvoie ou définit la hauteur du document courant.</dd> - <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt> - <dd>renvoie une liste des images du document courant.</dd> - <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt> - <dd>Renvoie la date de dernière modification du document.</dd> - <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> - <dd>Renvoie ou définit la couleur des liens du document.</dd> - <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt> - <dd>Renvoie un tableau de tous les liens du document.</dd> - <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt> - <dd>Renvoie l'URI (Uniform Ressource Identifier : <em>identifiant uniforme de ressource</em>) du document courant.</dd> - <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt> - <dd>Renvoie une liste des plugins disponibles.</dd> - <dt>{{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}</dt> - <dd>retourne l'état du chargement du document.</dd> - <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt> - <dd>Renvoie l'URI de la page qui a amené à cette page.</dd> - <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt> - <dd>renvoie tous les éléments {{HTMLElement("script")}} sur le document.</dd> - <dt>{{domxref("Document.title")}}</dt> - <dd>Renvoie le titre du document courant.</dd> - <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt> - <dd>Renvoie une chaîne de caractères contenant l'URL ("Uniform Resource Locator", <em>repère uniforme de ressource</em>) du document courant.</dd> -</dl> - -<dl> - <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> - <dd>Renvoie ou définit la couleur des liens visités du document.</dd> - <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Renvoie la largeur du document courant.</dd> -</dl> - -<h3 id="Gestionnaire_d'évènements">Gestionnaire d'évènements</h3> - -<dl> - <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt> - <dd>représente le code de gestion d'évènements pour l'évènement {{event("afterscriptexecute")}}</dd> - <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt> - <dd>retourne le code de gestion d'évènements pour l'évènement {{event("beforescriptexecute")}} .</dd> - <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt> - <dd>représente le code de gestion d'évènements pour l'évènement {{event("copy")}} .</dd> - <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt> - <dd>représente le code de gestion d'évènements pour l'évènement {{event("cut")}} .</dd> - <dt>{{domxref("Document.onfullscreenchange")}}</dt> - <dd>est un {{event("Event_handlers", "event handler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé.</dd> - <dt>{{domxref("Document.onfullscreenerror")}}</dt> - <dt>{{domxref("Document.onfullscreenchange")}}</dt> - <dd>est un {{event("Event_handlers", "event handler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé.</dd> - <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt> - <dd>représente le code de gestion d'évènements pour l'évènement {{event("paste")}} .</dd> - <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt> - <dd>représente le code de gestion d'évènements pour l'évènement {{event("pointerlockchange")}} .</dd> - <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt> - <dd>représente le code de gestion d'évènements pour l'évènement {{event("pointerlockerror")}} .</dd> - <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt> - <dd>représente le code de gestion d'évènements pour l'évènement {{event("readystatechange")}} .</dd> - <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt> - <dd>est un {{event("Event_handlers", "event handler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé.</dd> - <dt>{{domxref("Document.onvisibilitychange")}}</dt> - <dd>est un {{event("Event_handlers", "event handler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé.</dd> - <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt> - <dd>représente le code de gestion d'évènements pour l'évènement {{event("wheel")}} .</dd> -</dl> - -<p>L'interface <code>Document</code> est étendue avec l'interface {{domxref("GlobalEventHandlers")}} :</p> - -<p>{{Page("/fr/docs/Web/API/GlobalEventHandlers", "Propriétés")}}</p> - -<h2 id="Méthodes">Méthodes</h2> - -<p><em>Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("Document.adoptNode()")}}</dt> - <dd>adopte le noeud d'un document externe.</dd> - <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt> - <dd>voir {{domxref("Window.captureEvents")}}.</dd> - <dt>{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}</dt> - <dd>obtient le {{domxref ("CaretPosition")}} aux ou près des coordonnées spécifiées.</dd> - <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt> - <dd>Obtient un objet {{Domxref ("Range")}} pour le fragment de document sous les coordonnées spécifiées.</dd> - <dt>{{domxref("Document.createAttribute()")}}</dt> - <dd>Crée un nouvel objet {{domxref("Attr")}} et le renvoie.</dd> - <dt>{{domxref("Document.createAttributeNS()")}}</dt> - <dd>Crée un nouveau noeud dans l'espace nom donné et le renvoie.</dd> - <dt>{{domxref("Document.createCDATASection()")}}</dt> - <dd>Crée un nouveau nœud CDATA et le renvoie.</dd> - <dt>{{domxref("Document.createComment()")}}</dt> - <dd>Crée un nouveau nœud de commentaire et le renvoie.</dd> - <dt>{{domxref("Document.createDocumentFragment()")}}</dt> - <dd>Crée un nouveau fragment de document.</dd> - <dt>{{domxref("Document.createElement()")}}</dt> - <dd>Crée un nouvel élément avec l'étiquette spécifiée.</dd> - <dt>{{domxref("Document.createElementNS()")}}</dt> - <dd>Crée un nouvel élément du type et avec l'URI d'espace de nom spécifiés.</dd> - <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt> - <dd>Crée un nouvel objet de référence à une entité et le renvoie.</dd> - <dt>{{domxref("Document.createEvent()")}}</dt> - <dd>Crée un nouvel évènement.</dd> - <dt>{{domxref("Document.createNodeIterator()")}}</dt> - <dd>crée un objet {{domxref("NodeIterator")}} .</dd> - <dt>{{domxref("Document.createProcessingInstruction()")}}</dt> - <dd>crée un nouvel objet {{domxref("ProcessingInstruction")}} .</dd> - <dt>{{domxref("Document.createRange()")}}</dt> - <dd>Crée un objet {{domxref("Range")}} .</dd> - <dt>{{domxref("Document.createTextNode()")}}</dt> - <dd>Crée un nœud de texte.</dd> - <dt>{{domxref("Document.createTouch()")}} {{Deprecated_inline}}</dt> - <dd>crée un objet {{domxref("Touch")}}</dd> - <dt>{{domxref("Document.createTouchList()")}}</dt> - <dd>crée un objet {{domxref("TouchList")}}</dd> - <dt>{{domxref("Document.createTreeWalker()")}}</dt> - <dd>Crée un objet {{domxref("TreeWalker")}} .</dd> - <dt>{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}</dt> - <dd>Renvoie l'élément visible aux coordonnées spécifiées.</dd> - <dt>{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}</dt> - <dd>Renvoie un tableau de tous les éléments aux coordonnées spécifiées.</dd> - <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt> - <dd>active les feuilles de style pour l'ensemble de feuilles de style spécifié.</dd> - <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> - <dd>Supprime le verrou du pointeur.</dd> - <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt> - <dd>retourne un tableau de tous les objets {{domxref("Animation")}} actuels, dont les éléments cibles sont les descendants de ce <code>document</code>.</dd> -</dl> - -<dl> - <dt>{{domxref("Document.getElementsByClassName()")}}</dt> - <dd>Renvoie une liste des éléments ayant le nom de classe donné.</dd> -</dl> - -<dl> - <dt>{{domxref("Document.getElementsByTagName()")}}</dt> - <dd>Renvoie une liste des éléments ayant le nom de balise donné.</dd> -</dl> - -<dl> - <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt> - <dd>Renvoie une liste des éléments du nom de balise et de l'espace de noms spécifiés.</dd> -</dl> - -<dl> - <dt>{{domxref("Document.importNode()")}}</dt> - <dd>Renvoie une copie (un clone) d'un élément provenant d'un document externe.</dd> - <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> - <dd>remplace les entités, normalise les noeuds de texte, etc.</dd> - <dt>{{domxref("Document.registerElement()")}} {{experimental_inline}}</dt> - <dd>Enregistre un composant Web.</dd> - <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Libère la capture de la souris en cours s'il s'agit d'un élément de ce document.</dd> - <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> - <dd>voir {{domxref("Window.releaseEvents()")}}.</dd> - <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> - <dd>Voir {{domxref("Window.routeEvent()")}}.</dd> - <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Vous permet de modifier l'élément utilisé comme image d'arrière-plan pour un ID d'élément spécifié.</dd> -</dl> - -<p>L'interface <code>Document</code> est étendue avec l'interface {{domxref("ParentNode")}} :</p> - -<dl> - <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt> - <dd>retourne une référence d'objet à l'élément identifié.</dd> - <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> - <dd>Renvoie le premier noeud <code>Element</code> dans le document, dans l'ordre du document, qui correspond aux sélecteurs spécifiés.</dd> - <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> - <dd>retourne une liste de tous les noeuds éléments inclus dans le document qui correspondent aux sélecteurs spécifiés.</dd> -</dl> - -<p>L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator")}} :</p> - -<dl> - <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> - <dd>compile une <code><a href="/fr/docs/Web/API/XPathExpression">XPathExpression</a></code> qui peut ensuite être utilisée pour des évaluations (répétées).</dd> - <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt> - <dd>crée un objet {{domxref("XPathNSResolver")}} .</dd> - <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt> - <dd>évalue l'expression XPath .</dd> -</dl> - -<h3 id="Extensions_pour_les_documents_HTML">Extensions pour les documents HTML</h3> - -<dl> - <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> - <dd>dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien.</dd> - <dt>{{domxref("document.close()")}}</dt> - <dd>ferme un flux de document pour l'écriture.</dd> - <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt> - <dd>Sur un document modifiable, exécute une commande de formatage.</dd> - <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt> - <dd>retourne une liste d'éléments ayant le nom donné.</dd> - <dt>{{domxref("document.getSelection()")}}</dt> - <dd>retourne un objet {{domxref("Selection")}} relatif au texte sélectionné dans le document.</dd> - <dt>{{domxref("document.hasFocus()")}}</dt> - <dd>retourne <code>true</code> (vrai) si le focus est actuellement localisé n'importe où sur le document spécifié.</dd> - <dt>{{domxref("document.open()")}}</dt> - <dd>Ouvre un flux pour l'écriture dans le document.</dd> - <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt> - <dd>Renvoie <code>true</code> si la commande de formatage peut être exécutée sur la plage courante.</dd> - <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt> - <dd>Renvoie <code>true</code> si la commande de formatage est dans un état indéterminé sur la plage courante.</dd> - <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt> - <dd>Renvoie <code>true</code> si la commande de formatage a été exécutée sur la plage courante.</dd> - <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt> - <dd>retourne <code>true</code> <em>(vrai)</em> si la commande de formatage est supportée sur la plage courante.</dd> - <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt> - <dd>renvoie la valeur courante de la plage en cours pour une commande de formatage.</dd> - <dt>{{domxref("document.write","document.write(String text)")}}</dt> - <dd>Écrit du texte dans le document.</dd> - <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt> - <dd>Écrit une ligne de texte dans le document.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}</td> - <td>{{Spec2('Page Visibility API')}}</td> - <td>Ajoute <code>onvisibilitychange.</code></td> - </tr> - <tr> - <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td> - <td>{{Spec2('Selection API')}}</td> - <td>Ajoute <code>onselectstart</code>et <code>onselectionchange</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM1','#i-Document','Document')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale pour l'interface</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Remplace DOM 1</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>remplace DOM 2</td> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>en vue de remplacer DOM 3</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Transforme l'interface {{domxref("HTMLDocument")}} en une extension de <code>Document</code></td> - </tr> - <tr> - <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td> - <td>{{Spec2('DOM3 XPath')}}</td> - <td>Definit l'interface {{domxref("XPathEvaluator")}} qui étend le document.</td> - </tr> - <tr> - <td>{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}</td> - <td>{{Spec2('Page Visibility API')}}</td> - <td>Étend l'interface <code>Document</code> avec les attributs <code>visibilityState</code> et <code>hidden</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td> - <td>{{Spec2('HTML Editing')}}</td> - <td>Étend l'interface <code>Document</code></td> - </tr> - <tr> - <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Étend l'interface <code>Document</code></td> - </tr> - <tr> - <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td> - <td>{{Spec2('CSSOM')}}</td> - <td>Étend l'interface <code>Document</code></td> - </tr> - <tr> - <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td> - <td>{{Spec2('Pointer Lock')}}</td> - <td>Étend l'interface <code>Document</code></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs_notes">Compatibilité des navigateurs notes</h2> - -<h3 id="Notes_concernant_Firefox">Notes concernant Firefox :</h3> - -<p>Mozilla définit un ensemble de propriétés non-standard créées seulement pour le contenu XUL :</p> - -<dl> - <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>retourne l'élément {{HTMLElement("script")}} qui est en cours d'exécution.</dd> - <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt> - <dd>(extensions Mozilla seulement) retourne l'objet {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect).</dd> - <dt>{{domxref("document.popupNode")}}</dt> - <dd>retourne le noeud ouvert lors de l'appel d'une fenêtre contextuelle.</dd> - <dt>{{domxref("document.tooltipNode")}}</dt> - <dd>retourne le noeud qui est la cible de l'info-bulle actuelle.</dd> -</dl> - -<p>Mozilla a également défini quelques méthodes non standard :</p> - -<dl> - <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> - <dd>Cette méthode n'a jamais rien fait et a toujours lancé une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.</dd> - <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt> - <dd>Utiliser la méthode {{domxref("Element.getBoundingClientRect()")}} à la place.</dd> - <dt>{{domxref("document.loadOverlay")}}</dt> - <dd>charge dynamiquement un <a href="/fr/docs/Overlays_XUL">XUL overlay</a> . Celui-ci fonctionne seulement dans les documents XUL.</dd> - <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> - <dd>Cette méthode n'a jamais rien fait d'autre que de lancer une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.</dd> -</dl> - -<h3 id="Notes_concernant_Internet_Explorer">Notes concernant Internet Explorer</h3> - -<p>Microsoft a défini quelques propriétés non standard :</p> - -<dl> - <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Retourne la taille en octets du document. À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge. Voir <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> -</dl> - -<p>Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document :</p> - -<dl> - <dt>{{domxref("document.contains")}}</dt> - <dd>Pour contourner le problème, <code>document.body.contains ()</code> peut être utilisé.</dd> -</dl> +{{ApiRef}} + +L'interface **`Document`** représente n'importe quelle page Web chargée dans le navigateur et sert de point d'entrée dans le contenu de la page Web, qui est l'arborescence DOM. L'arborescence DOM inclut des éléments tels que {{HTMLElement ("body")}} _(corps)_ et {{HTMLElement ("table")}} _(tableau)_, parmi beaucoup d'autres. Il fournit des fonctionnalités globales au document, comme le moyen d'obtenir l'URL de la page et de créer de nouveaux éléments dans le document. + +{{inheritanceDiagram}} + +L'interface Document décrit les propriétés et méthodes communes à tout type de document. En fonction du type de document (HTML, XML, SVG, ...), une API plus grande est disponible : les documents HTML, servis avec le type `text/html`, implémentent également l'interface {{domxref ("HTMLDocument")}}, alors que les documents XML et SVG implémentent l'interface {{domxref ("XMLDocument")}}. + +## Constructeur + +- {{domxref("Document.Document","Document()")}}{{non-standard_inline}} + - : crée un nouvel objet `Document` . + +## Propriétés + +_Cette interface hérite aussi des interfaces {{domxref("Node")}} et {{domxref("EventTarget")}} ._ + +- {{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}} + - : fournit un accès à tous les éléments du document. C'est une interface héritée non standard qui ne doit pas être utilisée. + +<!----> + +- {{domxref("Document.async")}} {{Deprecated_inline}} + - : utilisé avec {{domxref("document.load")}} pour indiquer une requête asynchrone. + +<!----> + +- {{domxref("Document.characterSet")}} {{readonlyinline}} {{Deprecated_inline}} + - : renvoie le jeu de caractères utilisé par le document. + +<!----> + +- {{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}} + - : indique si le document est rendu en mode _Quirks_ ou _Strict_. + +<!----> + +- {{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}} + - : Renvoie le type de contenu de l'en-tête MIME du document courant. + +<!----> + +- {{domxref("Document.doctype")}} {{readonlyinline}} + - : Renvoie le DTD (Document Type Definition) du document courant. + +<!----> + +- {{domxref("Document.documentElement")}} {{readonlyinline}} + - : Renvoie l'{{domxref("Element")}} qui est l'enfant direct du document. Pour les documents HTML, il s'agit normalement de l'élément {{HTMLElement("HTML")}}. +- {{domxref("Document.documentURI")}} {{readonlyinline}} + - : retroune l'emplacement du document sous la forme d'une chaîne de caractères. +- {{domxref("Document.domConfig")}} {{Deprecated_inline}} + - : devrait retourner un objet {{domxref("DOMConfiguration")}} . +- {{domxref("Document.fullscreen")}} {{obsolete_inline}} + - : `true` _(vrai)_ quand le document est en {{domxref("Using_full-screen_mode","mode plein écran")}}. +- {{domxref("Document.hidden")}} {{readonlyinline}} + - : ... +- {{domxref("Document.implementation")}} {{readonlyinline}} + - : Renvoie l'implémentation DOM associée au document courant. +- {{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}} + - : alias de {{domxref("Document.characterSet")}}. Utilisez cette propriété à la place. +- {{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}} + - : retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. A la valeur `null` jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}. +- {{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}} + - : retourne un {{jsxref("Boolean")}} qui est `true` _(vrai)_ seulement si le document est synthétique, tel qu'une image autonome, une vidéo, un fichier audio ou similaire. +- {{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}} + - : L'élément qui est actuellement affiché en mode plein écran pour ce document. +- {{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}} + - : `true` _(vrai)_ si l'appel {{domxref("Element.mozRequestFullscreen()")}} est réussi dans le document courant. +- {{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}} + - : renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé. `null` si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document. +- {{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}} + - : renvoie la page de style préférée spécifiée par l'auteur de la page. +- {{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}} + - : retourne une référence à l'{{domxref("Element")}} qui fait défiler le document. +- {{domxref("Document.selectedStyleSheetSet")}} + - : renvoie la feuille de style actuellement utilisée. +- {{domxref("Document.styleSheets")}} {{readonlyinline}} + - : Renvoie une liste de tous les objets {{domxref("stylesheet")}} _(feuilles de styles)_ du document courant. +- {{domxref("Document.timeline")}} {{readonlyinline}} + - : ... +- {{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}} + - : ... +- {{domxref("Document.visibilityState")}} {{readonlyinline}} + - : renvoie une `string` _(chaîne de caractères)_ indiquant l'état de visibilité du document. Les valeurs possibles sont `visible` , `hidden (masqué)` , prerender _(pré-rendu)_ et `unloaded` _(\*\*déchargées_). +- {{domxref("Document.xmlEncoding")}} {{Deprecated_inline}} + - : retourne le codage déterminé par une déclaration XML. +- {{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}} + - : renvoie `true` si la déclaration XML précise que le document doit être autonome (par exemple, une partie externe de la DTD du contenu du document), sinon `false` _(faux)_. +- {{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}} + - : retourne le numéro de la version spécifié dans la déclaration XML ou `"1.0"` si la déclaration est absente. + +L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} : + +{{page("/fr/docs/Web/API/ParentNode","Propriétés")}} + +### Extensions du document HTML + +L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref("HTMLDocument")}}* ou depuis HTML5, est étendue pour eux. + +- {{domxref("Document.activeElement")}} {{readonlyinline}} + - : Renvoie l'élément courant qui a la focus. +- {{domxref("Document.alinkColor")}} {{Deprecated_inline}} + - : Renvoie ou définit la couleur des liens actifs du corps du document. +- {{domxref("Document.anchors")}} + - : Renvoie une liste de toutes les ancres du document. +- {{domxref("Document.applets")}} {{Deprecated_inline}} + - : Renvoie une liste ordonnée des "applets" du document. +- {{domxref("Document.bgColor")}} {{Deprecated_inline}} + - : **bgColor** renvoie ou définit la couleur d'arrière-plan du document courant. + +<!----> + +- {{domxref("Document.body")}} + - : **body** renvoie l'élément {{HTMLElement("body")}} du document en cours. +- {{domxref("Document.cookie")}} + - : Renvoie une liste des cookies du document, séparés par des points virgules, ou définit un cookie. + +<!----> + +- {{domxref("Document.defaultView")}} {{readonlyinline}} + - : Renvoie une référence à l'objet window. +- {{domxref("Document.designMode")}} + - : renvoie ou définit les capacités d'édition du document entier. +- {{domxref("Document.dir")}} {{readonlyinline}} + - : Assigne / renvoie le sens du texte (rtl/ltr) _(de gauche à droite / de droite à gauche)_ du document. +- {{domxref("Document.domain")}} + - : renvoie ou affecte le domaine de l'élément courant. +- {{domxref("Document.embeds")}} {{readonlyinline}} + - : renvoie une liste des objets {{HTMLElement('embed')}} inclus dans le document courant. + +<!----> + +- {{domxref("Document.fgColor")}} {{Deprecated_inline}} + - : renvoie ou définit la couleur du texte du document courant. +- {{domxref("Document.forms")}} {{readonlyinline}} + - : **forms** renvoie une liste des éléments {{HTMLElement("form")}} du document courant +- {{domxref("Document.head")}} {{readonlyinline}} + - : Renvoie l'élément {{HTMLElement("head")}} du document. +- {{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}} + - : renvoie ou définit la hauteur du document courant. +- {{domxref("Document.images")}} {{readonlyinline}} + - : renvoie une liste des images du document courant. +- {{domxref("Document.lastModified")}} {{readonlyinline}} + - : Renvoie la date de dernière modification du document. +- {{domxref("Document.linkColor")}} {{Deprecated_inline}} + - : Renvoie ou définit la couleur des liens du document. +- {{domxref("Document.links")}} {{readonlyinline}} + - : Renvoie un tableau de tous les liens du document. +- {{domxref("Document.location")}} {{readonlyinline}} + - : Renvoie l'URI (Uniform Ressource Identifier : _identifiant uniforme de ressource_) du document courant. +- {{domxref("Document.plugins")}} {{readonlyinline}} + - : Renvoie une liste des plugins disponibles. +- {{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}} + - : retourne l'état du chargement du document. +- {{domxref("Document.referrer")}} {{readonlyinline}} + - : Renvoie l'URI de la page qui a amené à cette page. +- {{domxref("Document.scripts")}} {{readonlyinline}} + - : renvoie tous les éléments {{HTMLElement("script")}} sur le document. +- {{domxref("Document.title")}} + - : Renvoie le titre du document courant. +- {{domxref("Document.URL")}} {{readonlyInline}} + - : Renvoie une chaîne de caractères contenant l'URL ("Uniform Resource Locator", _repère uniforme de ressource_) du document courant. + +<!----> + +- {{domxref("Document.vlinkColor")}} {{Deprecated_inline}} + - : Renvoie ou définit la couleur des liens visités du document. +- {{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}} + - : Renvoie la largeur du document courant. + +### Gestionnaire d'évènements + +- {{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}} + - : représente le code de gestion d'évènements pour l'évènement {{event("afterscriptexecute")}} +- {{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}} + - : retourne le code de gestion d'évènements pour l'évènement {{event("beforescriptexecute")}} . +- {{domxref("Document.oncopy")}} {{non-standard_inline}} + - : représente le code de gestion d'évènements pour l'évènement {{event("copy")}} . +- {{domxref("Document.oncut")}} {{non-standard_inline}} + - : représente le code de gestion d'évènements pour l'évènement {{event("cut")}} . +- {{domxref("Document.onfullscreenchange")}} + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé. +- {{domxref("Document.onfullscreenerror")}} + + {{domxref("Document.onfullscreenchange")}} + + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé. + +- {{domxref("Document.onpaste")}} {{non-standard_inline}} + - : représente le code de gestion d'évènements pour l'évènement {{event("paste")}} . +- {{domxref("Document.onpointerlockchange")}} {{experimental_inline}} + - : représente le code de gestion d'évènements pour l'évènement {{event("pointerlockchange")}} . +- {{domxref("Document.onpointerlockerror")}} {{experimental_inline}} + - : représente le code de gestion d'évènements pour l'évènement {{event("pointerlockerror")}} . +- {{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}} + - : représente le code de gestion d'évènements pour l'évènement {{event("readystatechange")}} . +- {{domxref("Document.onselectionchange")}} {{experimental_inline}} + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé. +- {{domxref("Document.onvisibilitychange")}} + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé. +- {{domxref("Document.onwheel")}} {{non-standard_inline}} + - : représente le code de gestion d'évènements pour l'évènement {{event("wheel")}} . + +L'interface `Document` est étendue avec l'interface {{domxref("GlobalEventHandlers")}} : + +{{Page("/fr/docs/Web/API/GlobalEventHandlers", "Propriétés")}} + +## Méthodes + +_Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}._ + +- {{domxref("Document.adoptNode()")}} + - : adopte le noeud d'un document externe. +- {{domxref("Document.captureEvents()")}} {{Deprecated_inline}} + - : voir {{domxref("Window.captureEvents")}}. +- {{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}} + - : obtient le {{domxref ("CaretPosition")}} aux ou près des coordonnées spécifiées. +- {{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}} + - : Obtient un objet {{Domxref ("Range")}} pour le fragment de document sous les coordonnées spécifiées. +- {{domxref("Document.createAttribute()")}} + - : Crée un nouvel objet {{domxref("Attr")}} et le renvoie. +- {{domxref("Document.createAttributeNS()")}} + - : Crée un nouveau noeud dans l'espace nom donné et le renvoie. +- {{domxref("Document.createCDATASection()")}} + - : Crée un nouveau nœud CDATA et le renvoie. +- {{domxref("Document.createComment()")}} + - : Crée un nouveau nœud de commentaire et le renvoie. +- {{domxref("Document.createDocumentFragment()")}} + - : Crée un nouveau fragment de document. +- {{domxref("Document.createElement()")}} + - : Crée un nouvel élément avec l'étiquette spécifiée. +- {{domxref("Document.createElementNS()")}} + - : Crée un nouvel élément du type et avec l'URI d'espace de nom spécifiés. +- {{domxref("Document.createEntityReference()")}} {{obsolete_inline}} + - : Crée un nouvel objet de référence à une entité et le renvoie. +- {{domxref("Document.createEvent()")}} + - : Crée un nouvel évènement. +- {{domxref("Document.createNodeIterator()")}} + - : crée un objet {{domxref("NodeIterator")}} . +- {{domxref("Document.createProcessingInstruction()")}} + - : crée un nouvel objet {{domxref("ProcessingInstruction")}} . +- {{domxref("Document.createRange()")}} + - : Crée un objet {{domxref("Range")}} . +- {{domxref("Document.createTextNode()")}} + - : Crée un nœud de texte. +- {{domxref("Document.createTouch()")}} {{Deprecated_inline}} + - : crée un objet {{domxref("Touch")}} +- {{domxref("Document.createTouchList()")}} + - : crée un objet {{domxref("TouchList")}} +- {{domxref("Document.createTreeWalker()")}} + - : Crée un objet {{domxref("TreeWalker")}} . +- {{domxref("Document.elementFromPoint()")}}{{experimental_inline}} + - : Renvoie l'élément visible aux coordonnées spécifiées. +- {{domxref("Document.elementsFromPoint()")}}{{experimental_inline}} + - : Renvoie un tableau de tous les éléments aux coordonnées spécifiées. +- {{domxref("Document.enableStyleSheetsForSet()")}} + - : active les feuilles de style pour l'ensemble de feuilles de style spécifié. +- {{domxref("Document.exitPointerLock()")}} {{experimental_inline}} + - : Supprime le verrou du pointeur. +- {{domxref("Document.getAnimations()")}} {{experimental_inline}} + - : retourne un tableau de tous les objets {{domxref("Animation")}} actuels, dont les éléments cibles sont les descendants de ce `document`. + +<!----> + +- {{domxref("Document.getElementsByClassName()")}} + - : Renvoie une liste des éléments ayant le nom de classe donné. + +<!----> + +- {{domxref("Document.getElementsByTagName()")}} + - : Renvoie une liste des éléments ayant le nom de balise donné. + +<!----> + +- {{domxref("Document.getElementsByTagNameNS()")}} + - : Renvoie une liste des éléments du nom de balise et de l'espace de noms spécifiés. + +<!----> + +- {{domxref("Document.importNode()")}} + - : Renvoie une copie (un clone) d'un élément provenant d'un document externe. +- {{domxref("Document.normalizeDocument()")}} {{obsolete_inline}} + - : remplace les entités, normalise les noeuds de texte, etc. +- {{domxref("Document.registerElement()")}} {{experimental_inline}} + - : Enregistre un composant Web. +- {{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}} + - : Libère la capture de la souris en cours s'il s'agit d'un élément de ce document. +- {{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}} + - : voir {{domxref("Window.releaseEvents()")}}. +- {{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}} + - : Voir {{domxref("Window.routeEvent()")}}. +- {{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}} + - : Vous permet de modifier l'élément utilisé comme image d'arrière-plan pour un ID d'élément spécifié. + +L'interface `Document` est étendue avec l'interface {{domxref("ParentNode")}} : + +- {{domxref("document.getElementById","document.getElementById(String id)")}} + - : retourne une référence d'objet à l'élément identifié. +- {{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}} + - : Renvoie le premier noeud `Element` dans le document, dans l'ordre du document, qui correspond aux sélecteurs spécifiés. +- {{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}} + - : retourne une liste de tous les noeuds éléments inclus dans le document qui correspondent aux sélecteurs spécifiés. + +L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator")}} : + +- {{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}} + - : compile une [`XPathExpression`](/fr/docs/Web/API/XPathExpression) qui peut ensuite être utilisée pour des évaluations (répétées). +- {{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}} + - : crée un objet {{domxref("XPathNSResolver")}} . +- {{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}} + - : évalue l'expression XPath . + +### Extensions pour les documents HTML + +- {{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}} + - : dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien. +- {{domxref("document.close()")}} + - : ferme un flux de document pour l'écriture. +- {{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}} + - : Sur un document modifiable, exécute une commande de formatage. +- {{domxref("document.getElementsByName","document.getElementsByName(String name)")}} + - : retourne une liste d'éléments ayant le nom donné. +- {{domxref("document.getSelection()")}} + - : retourne un objet {{domxref("Selection")}} relatif au texte sélectionné dans le document. +- {{domxref("document.hasFocus()")}} + - : retourne `true` (vrai) si le focus est actuellement localisé n'importe où sur le document spécifié. +- {{domxref("document.open()")}} + - : Ouvre un flux pour l'écriture dans le document. +- {{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}} + - : Renvoie `true` si la commande de formatage peut être exécutée sur la plage courante. +- {{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}} + - : Renvoie `true` si la commande de formatage est dans un état indéterminé sur la plage courante. +- {{domxref("document.queryCommandState","document.queryCommandState(String command)")}} + - : Renvoie `true` si la commande de formatage a été exécutée sur la plage courante. +- {{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}} + - : retourne `true` _(vrai)_ si la commande de formatage est supportée sur la plage courante. +- {{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}} + - : renvoie la valeur courante de la plage en cours pour une commande de formatage. +- {{domxref("document.write","document.write(String text)")}} + - : Écrit du texte dans le document. +- {{domxref("document.writeln","document.writeln(String text)")}} + - : Écrit une ligne de texte dans le document. + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------ | +| {{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}} | {{Spec2('Page Visibility API')}} | Ajoute `onvisibilitychange.` | +| {{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}} | {{Spec2('Selection API')}} | Ajoute `onselectstart`et `onselectionchange`. | +| {{SpecName('DOM1','#i-Document','Document')}} | {{Spec2('DOM1')}} | Définition initiale pour l'interface | +| {{SpecName('DOM2 Core','#i-Document','Document')}} | {{Spec2('DOM2 Core')}} | Remplace DOM 1 | +| {{SpecName('DOM3 Core','#i-Document','Document')}} | {{Spec2('DOM3 Core')}} | remplace DOM 2 | +| {{SpecName('DOM WHATWG','#interface-document','Document')}} | {{Spec2('DOM WHATWG')}} | en vue de remplacer DOM 3 | +| {{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}} | {{Spec2('HTML WHATWG')}} | Transforme l'interface {{domxref("HTMLDocument")}} en une extension de `Document` | +| {{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}} | {{Spec2('DOM3 XPath')}} | Definit l'interface {{domxref("XPathEvaluator")}} qui étend le document. | +| {{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}} | {{Spec2('Page Visibility API')}} | Étend l'interface `Document` avec les attributs `visibilityState` et `hidden`. | +| {{SpecName('HTML Editing','#dom-document-getselection','Document')}} | {{Spec2('HTML Editing')}} | Étend l'interface `Document` | +| {{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}} | {{Spec2('CSSOM View')}} | Étend l'interface `Document` | +| {{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}} | {{Spec2('CSSOM')}} | Étend l'interface `Document` | +| {{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}} | {{Spec2('Pointer Lock')}} | Étend l'interface `Document` | + +## Compatibilité des navigateurs notes + +### Notes concernant Firefox : + +Mozilla définit un ensemble de propriétés non-standard créées seulement pour le contenu XUL : + +- {{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}} + - : retourne l'élément {{HTMLElement("script")}} qui est en cours d'exécution. +- {{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}} + - : (extensions Mozilla seulement) retourne l'objet {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect). +- {{domxref("document.popupNode")}} + - : retourne le noeud ouvert lors de l'appel d'une fenêtre contextuelle. +- {{domxref("document.tooltipNode")}} + - : retourne le noeud qui est la cible de l'info-bulle actuelle. + +Mozilla a également défini quelques méthodes non standard : + +- {{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}} + - : Cette méthode n'a jamais rien fait et a toujours lancé une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}. +- {{domxref("document.getBoxObjectFor")}} {{obsolete_inline}} + - : Utiliser la méthode {{domxref("Element.getBoundingClientRect()")}} à la place. +- {{domxref("document.loadOverlay")}} + - : charge dynamiquement un [XUL overlay](/fr/docs/Overlays_XUL) . Celui-ci fonctionne seulement dans les documents XUL. +- {{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}} + - : Cette méthode n'a jamais rien fait d'autre que de lancer une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}. + +### Notes concernant Internet Explorer + +Microsoft a défini quelques propriétés non standard : + +- {{domxref("document.fileSize")}}\* {{non-standard_inline}} {{obsolete_inline}} + - : Retourne la taille en octets du document. À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge. Voir [MSDN](http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx). + +Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document : + +- {{domxref("document.contains")}} + - : Pour contourner le problème, `document.body.contains ()` peut être utilisé. diff --git a/files/fr/web/api/document/keypress_event/index.md b/files/fr/web/api/document/keypress_event/index.md index 76807b1f92..f079811072 100644 --- a/files/fr/web/api/document/keypress_event/index.md +++ b/files/fr/web/api/document/keypress_event/index.md @@ -9,94 +9,91 @@ tags: - Reference translation_of: Web/API/Document/keypress_event --- -<div>{{APIRef}} {{deprecated_header}}</div> +{{APIRef}} {{deprecated_header}} -<p>L'évènement <strong><code>keypress</code></strong> est déclenché lorsqu'une touche produisant un caractère est pressée. Cela concerne les touches qui produisent des caractères alphabétiques, des caractères numériques et des signes de ponctuations. Les touches <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd> ou <kbd>Meta</kbd> ne sont pas concernées.</p> +L'évènement **`keypress`** est déclenché lorsqu'une touche produisant un caractère est pressée. Cela concerne les touches qui produisent des caractères alphabétiques, des caractères numériques et des signes de ponctuations. Les touches <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd> ou <kbd>Meta</kbd> ne sont pas concernées. -<div class="warning"> -<p><strong>Attention :</strong> Cet évènement est déprécié et il faudrait plutôt utiliser <code><a href="/fr/docs/Web/API/HTMLElement/beforeinput_event">beforeinput</a></code> ou <code><a href="/fr/docs/Web/API/Document/keydown_event">keydown</a></code>.</p> -</div> +> **Attention :** Cet évènement est déprécié et il faudrait plutôt utiliser [`beforeinput`](/fr/docs/Web/API/HTMLElement/beforeinput_event) ou [`keydown`](/fr/docs/Web/API/Document/keydown_event). <table class="properties"> - <thead> - </thead> - <tbody> - <tr> - <th>Interface</th> - <td>{{domxref("KeyboardEvent")}}</td> - </tr> - <tr> - <th>Remonte sur les parents (<em>bubbles</em>)</th> - <td>Oui</td> - </tr> - <tr> - <th>Annulable</th> - <td>Oui</td> - </tr> - <tr> - <th>Action par défaut</th> - <td>Cela peut varier : évènement <code>keypress</code> ; ouverture du système de composition du texte ; évènements <code><a href="/fr/docs/Web/API/Element/blur_event">blur</a></code> et <code><a href="/fr/docs/Web/API/Element/focus_event">focus</a></code> ; évènement <a href="/fr/docs/Web/API/Element/DOMActivate_event"><code>DOMActivate</code> </a>{{deprecated_inline}}; autre évènement.</td> - </tr> - </tbody> + <thead></thead> + <tbody> + <tr> + <th>Interface</th> + <td>{{domxref("KeyboardEvent")}}</td> + </tr> + <tr> + <th>Remonte sur les parents (<em>bubbles</em>)</th> + <td>Oui</td> + </tr> + <tr> + <th>Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th>Action par défaut</th> + <td> + Cela peut varier : évènement <code>keypress</code> ; ouverture du + système de composition du texte ; évènements + <code><a href="/fr/docs/Web/API/Element/blur_event">blur</a></code> et + <code><a href="/fr/docs/Web/API/Element/focus_event">focus</a></code> ; + évènement + <a href="/fr/docs/Web/API/Element/DOMActivate_event" + ><code>DOMActivate</code> </a + >{{deprecated_inline}}; autre évènement. + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Ajout_d'un_addEventListener">Ajout d'un <code>addEventListener</code></h3> +### Ajout d'un `addEventListener` -<p>Dans cet exemple, on affiche la valeur de {{domxref("KeyboardEvent.code")}} lorsqu'on appuie sur une touche :</p> +Dans cet exemple, on affiche la valeur de {{domxref("KeyboardEvent.code")}} lorsqu'on appuie sur une touche : -<pre class="brush: html"><p> +```html +<p> Cliquez dans l'iframe pour lui passer le focus puis appuyez sur des touches du clavier. -</p> -<p id="log"></p></pre> +</p> +<p id="log"></p> +``` -<pre class="brush: js">const log = document.getElementById('log'); +```js +const log = document.getElementById('log'); document.addEventListener('keypress', logKey); function logKey(e) { log.textContent += ` ${e.code}`; -}</pre> +} +``` -<p>{{EmbedLiveSample("addEventListener_keypress_example")}}</p> +{{EmbedLiveSample("addEventListener_keypress_example")}} -<h3 id="Équivalent_onkeypress">Équivalent <code>onkeypress</code></h3> +### Équivalent `onkeypress` -<pre class="brush: js">document.onkeypress = logKey;</pre> +```js +document.onkeypress = logKey; +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('UI Events', '#event-type-keypress')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - </tbody> -</table> +| Spécification | État | +| ---------------------------------------------------------------- | ---------------------------- | +| {{SpecName('UI Events', '#event-type-keypress')}} | {{Spec2('UI Events')}} | + +## Compatibilité des navigateurs -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +{{Compat("api.Document.keypress_event")}} -<p>{{Compat("api.Document.keypress_event")}}</p> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> +- {{domxref("GlobalEventHandlers.onkeypress")}} +- L'interface {{domxref("Element")}} que cet évènement cible +- Les évènements associés : -<ul> - <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li> - <li>L'interface {{domxref("Element")}} que cet évènement cible</li> - <li>Les évènements associés : - <ul> - <li><code><a href="/fr/docs/Web/API/Document/keydown_event">keydown</a></code></li> - <li><code><a href="/fr/docs/Web/API/Document/keyup_event">keyup</a></code></li> - <li><code><a href="/fr/docs/Web/API/HTMLElement/beforeinput_event">beforeinput</a></code></li> - </ul> - </li> -</ul> + - [`keydown`](/fr/docs/Web/API/Document/keydown_event) + - [`keyup`](/fr/docs/Web/API/Document/keyup_event) + - [`beforeinput`](/fr/docs/Web/API/HTMLElement/beforeinput_event) diff --git a/files/fr/web/api/document/lastmodified/index.md b/files/fr/web/api/document/lastmodified/index.md index 90a7738bb3..bde5ee06e8 100644 --- a/files/fr/web/api/document/lastmodified/index.md +++ b/files/fr/web/api/document/lastmodified/index.md @@ -3,66 +3,70 @@ title: Document.lastModified slug: Web/API/Document/lastModified translation_of: Web/API/Document/lastModified --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>Retourne une chaîne de caractère contenant la date et l'heure à laquelle le présent document a été modifié pour la dernière fois.</p> +Retourne une chaîne de caractère contenant la date et l'heure à laquelle le présent document a été modifié pour la dernière fois. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>string</var> = document.lastModified; -</pre> + string = document.lastModified; -<h2 id="Example">Exemples</h2> +## Exemples -<h3 id="Exemple_1_Utilisation_simple">Exemple #1: Utilisation simple</h3> +### Exemple #1: Utilisation simple -<pre class="brush:js">alert(document.lastModified); +```js +alert(document.lastModified); // renvoie: 11/28/2015 16:11:15 -</pre> +``` -<h3 id="Exemple_2_Transformer_lastModified_en_un_objet_de_type_Date">Exemple #2: Transformer <code>lastModified</code> en un objet de type <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a></h3> +### Exemple #2: Transformer `lastModified` en un objet de type [`Date`](/en-US/docs/JavaScript/Reference/Global_Objects/Date) -<pre class="brush:js">var oLastModif = new Date(document.lastModified); -</pre> +```js +var oLastModif = new Date(document.lastModified); +``` -<h3 id="Exemple_3_Transformer_lastModified_en_un_nombre_de_millisecondes_passées_depuis_le_1_Janvier_1970_à_000000_heure_locale.">Exemple #3: Transformer <code>lastModified</code> en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale.</h3> +### Exemple #3: Transformer `lastModified` en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale. -<pre class="brush:js">var nLastModif = Date.parse(document.lastModified); -</pre> +```js +var nLastModif = Date.parse(document.lastModified); +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>Veuillez noter qu'en tant que chaîne de caractères, <code>lastModified </code>ne peut être <em>facilement </em>utilisé pour des comparaisons entre les dates modifées des documents. Voici un exemple possible qui montre comment afficher une alerte quand la page change (voir aussi: <a href="/en-US/docs/DOM/document.cookie">API des cookies en JavaScript</a>):</p> +Veuillez noter qu'en tant que chaîne de caractères, `lastModified `ne peut être *facilement* utilisé pour des comparaisons entre les dates modifées des documents. Voici un exemple possible qui montre comment afficher une alerte quand la page change (voir aussi: [API des cookies en JavaScript](/en-US/docs/DOM/document.cookie)): -<pre class="brush: js">if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) { +```js +if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) { document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; alert("Cette page a changé !"); -}</pre> +} +``` -<p>… le même exemple, mais en ignorant la première visite:</p> +… le même exemple, mais en ignorant la première visite: -<pre class="brush: js">var +```js +var nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")), nLastModif = Date.parse(document.lastModified); -if (isNaN(nLastVisit) || nLastModif > nLastVisit) { +if (isNaN(nLastVisit) || nLastModif > nLastVisit) { document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; if (isFinite(nLastVisit)) { alert("Cette page a changé !"); } -}</pre> +} +``` -<div class="note"> - <p><strong>Note:</strong> WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local. (Voir: <a href="https://bugs.webkit.org/show_bug.cgi?id=4363">Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local</a>)</p> -</div> +> **Note :** WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local. (Voir: [Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local](https://bugs.webkit.org/show_bug.cgi?id=4363)) -<p>Si vous voulez savoir <strong>si <em>une page externe</em> a changé, </strong>veuillez lire <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date">ce paragraphe à propos de l'API <code>XMLHttpRequest()</code></a>.</p> +Si vous voulez savoir **si *une page externe* a changé,** veuillez lire [ce paragraphe à propos de l'API `XMLHttpRequest()`](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date). -<h2 id="Specification">Spécification</h2> +## Spécification -<p>HTML5</p> +HTML5 -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.lastModified")}}</p> +{{Compat("api.Document.lastModified")}} diff --git a/files/fr/web/api/document/laststylesheetset/index.md b/files/fr/web/api/document/laststylesheetset/index.md index dce73ac17e..c0fb8e8080 100644 --- a/files/fr/web/api/document/laststylesheetset/index.md +++ b/files/fr/web/api/document/laststylesheetset/index.md @@ -8,41 +8,35 @@ tags: - Propriétés translation_of: Web/API/Document/lastStyleSheetSet --- -<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p> +{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }} -<p>Renvoie le dernier jeu de feuilles de styles activé ; cette valeur de la propriété change chaque fois que la propriété {{ domxref("document.selectedStyleSheetSet") }} est modifiée.</p> +Renvoie le dernier jeu de feuilles de styles activé ; cette valeur de la propriété change chaque fois que la propriété {{ domxref("document.selectedStyleSheetSet") }} est modifiée. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>lastStyleSheetSet</em> = document.lastStyleSheetSet -</pre> + lastStyleSheetSet = document.lastStyleSheetSet -<p>En retour, <code>lastStyleSheetSet</code> indique le jeu de feuilles de styles qui a été défini le plus récemment. Si le jeu de feuilles de style en cours n'a pas été modifié en définissant {{ domxref("document.selectedStyleSheetSet") }}, la valeur retournée est <code>null</code>.</p> +En retour, `lastStyleSheetSet` indique le jeu de feuilles de styles qui a été défini le plus récemment. Si le jeu de feuilles de style en cours n'a pas été modifié en définissant {{ domxref("document.selectedStyleSheetSet") }}, la valeur retournée est `null`. -<div class="note"> - <p><strong>Note :</strong> Cette valeur ne doit pas changer lorsque {{ domxref("document.enableStyleSheetsForSet()") }} est appelé.</p> -</div> +> **Note :** Cette valeur ne doit pas changer lorsque {{ domxref("document.enableStyleSheetsForSet()") }} est appelé. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush: js">var lastSheetSet = document.lastStyleSheetSet; +```js +var lastSheetSet = document.lastStyleSheetSet; if (!lastSheetSet) { lastSheetSet = "Sheet not yet changed"; } console.log("The last sheet set is: " + lastSheetSet); -</pre> +``` -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{ domxref("document.preferredStyleSheetSet") }}</li> - <li>{{ domxref("document.selectedStyleSheetSet") }}</li> - <li>{{ domxref("document.styleSheetSets") }}</li> - <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li> -</ul> +- {{ domxref("document.preferredStyleSheetSet") }} +- {{ domxref("document.selectedStyleSheetSet") }} +- {{ domxref("document.styleSheetSets") }} +- {{ domxref("document.enableStyleSheetsForSet()") }} -<h2 id="Specification">Spécifications</h2> +## Spécifications -<ul> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> -</ul> +- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) diff --git a/files/fr/web/api/document/location/index.md b/files/fr/web/api/document/location/index.md index 2a6f3e51c3..a3fb30e1ae 100644 --- a/files/fr/web/api/document/location/index.md +++ b/files/fr/web/api/document/location/index.md @@ -10,56 +10,39 @@ tags: - lecture seule translation_of: Web/API/Document/location --- -<p>La propriété en lecture seule <strong><code>Document.location</code></strong><code> renvoie un objet</code> {{domxref("Location")}}, contenant les informations sur l'URL du document et fournit des moyens pour modifier cette URL ou charger une autre URL.</p> +La propriété en lecture seule **`Document.location`**` renvoie un objet` {{domxref("Location")}}, contenant les informations sur l'URL du document et fournit des moyens pour modifier cette URL ou charger une autre URL. -<p>Bien que <code>Document.location</code> soit un objet <code>Location</code> en <em>lecture seule</em>, vous pouvez lui assigner un {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: <code>document.location = 'http://www.example.com'</code> est un synonyme de <code>document.location.href = 'http://www.example.com'</code>.</p> +Bien que `Document.location` soit un objet `Location` en _lecture seule_, vous pouvez lui assigner un {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: `document.location = 'http://www.example.com'` est un synonyme de `document.location.href = 'http://www.example.com'`. -<p>Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété {{domxref("document.URL")}} peut également être utilisée.</p> +Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété {{domxref("document.URL")}} peut également être utilisée. -<p>Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est <em>null</em>.</p> +Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est _null_. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>locationObj</em> = document.location -document.location = 'http://www.mozilla.org' // équivalent à document.location.href = 'http://www.mozilla.org' -</pre> + locationObj = document.location + document.location = 'http://www.mozilla.org' // équivalent à document.location.href = 'http://www.mozilla.org' -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush: js">console.log(document.location); +```js +console.log(document.location); // Affiche un string-like // "http://www.example.com/juicybits.html" dans la console -</pre> +``` -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Pas de changement avec {{SpecName("HTML5 W3C")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------- | +| {{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}} | {{Spec2('HTML WHATWG')}} | Pas de changement avec {{SpecName("HTML5 W3C")}}. | +| {{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}} | {{Spec2('HTML5 W3C')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.location")}}</p> +{{Compat("api.Document.location")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>L'interface de la valeur renvoyée, {{domxref("Location")}}.</li> - <li>Une information similaire mais attachée au contexte de navigation, {{domxref("Window.location")}}</li> -</ul> +- L'interface de la valeur renvoyée, {{domxref("Location")}}. +- Une information similaire mais attachée au contexte de navigation, {{domxref("Window.location")}} diff --git a/files/fr/web/api/document/mozsetimageelement/index.md b/files/fr/web/api/document/mozsetimageelement/index.md index aa70b99736..c91cbf97fd 100644 --- a/files/fr/web/api/document/mozsetimageelement/index.md +++ b/files/fr/web/api/document/mozsetimageelement/index.md @@ -10,31 +10,29 @@ tags: - Méthodes translation_of: Web/API/Document/mozSetImageElement --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>{{ gecko_minversion_header("2.0") }}{{ non-standard_header() }}</p> +{{ gecko_minversion_header("2.0") }}{{ non-standard_header() }} -<p>Change l'élément utilisé comme arrière-plan CSS par un arrière-plan avec un ID d'élément d'arrière-plan donné.</p> +Change l'élément utilisé comme arrière-plan CSS par un arrière-plan avec un ID d'élément d'arrière-plan donné. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval">document.mozSetImageElement(<em>imageElementId</em>, imageElement); -</pre> + document.mozSetImageElement(imageElementId, imageElement); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<ul> - <li><code>imageElementId</code> est une chaîne de caractères indiquant le nom d'un élément qui a été spécifié comme une image d'arrière-plan en utilisant la fonction CSS {{ cssxref("-moz-element") }}.</li> - <li><code>imageElement</code> est le nouvel élément à utiliser comme arrière-plan correspondant à cette chaîne d'élément image. Spécifiez <code>null</code> pour supprimer l'élément d'arrière-plan.</li> -</ul> +- `imageElementId` est une chaîne de caractères indiquant le nom d'un élément qui a été spécifié comme une image d'arrière-plan en utilisant la fonction CSS {{ cssxref("-moz-element") }}. +- `imageElement` est le nouvel élément à utiliser comme arrière-plan correspondant à cette chaîne d'élément image. Spécifiez `null` pour supprimer l'élément d'arrière-plan. -<h2 id="Example">Exemple</h2> +## Exemple -<p>Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque fois que l'utilisateur clique sur le bloc.</p> +Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque fois que l'utilisateur clique sur le bloc. -<p><a href="/samples/domref/mozSetImageElement.html">Vue de cet exemple en direct</a>.</p> +[Vue de cet exemple en direct](/samples/domref/mozSetImageElement.html). -<pre class="brush: html"><style type="text/css"> +```html +<style type="text/css"> #mybox { background-image: -moz-element(#canvasbg); text-align: center; @@ -42,12 +40,13 @@ translation_of: Web/API/Document/mozSetImageElement height: 400px; cursor: pointer; } -</style> -</pre> +</style> +``` -<p>Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan.</p> +Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan. -<pre class="brush: js">var c = 0x00; +```js +var c = 0x00; function clicked() { var canvas = document.createElement("canvas"); canvas.setAttribute("width", 100); @@ -58,24 +57,22 @@ function clicked() { ctx.fillRect(25, 25, 75, 75); c += 0x11; - if (c > 0xff) { + if (c > 0xff) { c = 0x00; } document.mozSetImageElement("canvasbg", canvas); } -</pre> +``` -<p>Le code ici est appelé chaque fois que l'utilisateur clique sur l'élément {{ HTMLElement("div") }}. Il crée un nouveau {{ HTMLElement("canvas") }} avec la largeur et la hauteur définies à 100 pixels et le dessine dans un carré de 50 par 50 pixels. Chaque fois que la fonction est appelée, le carré est d'une couleur différente (sa composante rouge est augmentée à chaque fois), donc chaque fois que l'utilisateur clique sur l'élément, le fond est plus lumineux et rempli d'un motif plus lumineux de carreaux rouges.</p> +Le code ici est appelé chaque fois que l'utilisateur clique sur l'élément {{ HTMLElement("div") }}. Il crée un nouveau {{ HTMLElement("canvas") }} avec la largeur et la hauteur définies à 100 pixels et le dessine dans un carré de 50 par 50 pixels. Chaque fois que la fonction est appelée, le carré est d'une couleur différente (sa composante rouge est augmentée à chaque fois), donc chaque fois que l'utilisateur clique sur l'élément, le fond est plus lumineux et rempli d'un motif plus lumineux de carreaux rouges. -<p>Une fois le canvas dessiné, <code>document.mozSetImageElement()</code> est appelée pour définir l'arrière-plan de tout CSS en utilisant l'ID "canvasbg" comme ID d'élément d'arrière-plan pour être notre nouveau canvas.</p> +Une fois le canvas dessiné, `document.mozSetImageElement()` est appelée pour définir l'arrière-plan de tout CSS en utilisant l'ID "canvasbg" comme ID d'élément d'arrière-plan pour être notre nouveau canvas. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<p>Ne fait partie d'aucune spécification.</p> +Ne fait partie d'aucune spécification. -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{ cssxref("-moz-element") }}</li> -</ul> +- {{ cssxref("-moz-element") }} diff --git a/files/fr/web/api/document/mozsyntheticdocument/index.md b/files/fr/web/api/document/mozsyntheticdocument/index.md index c8847269ca..8a9529ff35 100644 --- a/files/fr/web/api/document/mozsyntheticdocument/index.md +++ b/files/fr/web/api/document/mozsyntheticdocument/index.md @@ -8,28 +8,26 @@ tags: - Propriétés translation_of: Web/API/Document/mozSyntheticDocument --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>Indique si le document est synthétique ou non ; c'est-à-dire un document représentant une image autonome, une vidéo, un son ou analogue.</p> +Indique si le document est synthétique ou non ; c'est-à-dire un document représentant une image autonome, une vidéo, un son ou analogue. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>var isSynthetic</em> = <em>document</em>.mozSyntheticDocument; -</pre> + var isSynthetic = document.mozSyntheticDocument; -<p>En retour, <code>isSynthetic</code> est <code>true</code> (<em>vrai</em>) si le document est synthétique ; sinon, <code>false</code> (<em>faux</em>).</p> +En retour, `isSynthetic` est `true` (_vrai_) si le document est synthétique ; sinon, `false` (_faux_). -<h2 id="Example">Exemple</h2> +## Exemple -<p>Il peut être utile, si vous avez un élément de menu contextuel que vous souhaitez uniquement afficher pour les documents synthétiques (ou, inversement, pour les documents qui ne sont pas synthétiques).</p> +Il peut être utile, si vous avez un élément de menu contextuel que vous souhaitez uniquement afficher pour les documents synthétiques (ou, inversement, pour les documents qui ne sont pas synthétiques). -<pre class="eval">var isSynthetic = document.mozSyntheticDocument; + var isSynthetic = document.mozSyntheticDocument; -if (isSynthetic) { - /* insert your menu item here */ -} -</pre> + if (isSynthetic) { + /* insert your menu item here */ + } -<h2 id="Specification">Spécifications</h2> +## Spécifications -<p>Ne fait partie d'aucune spécification.</p> +Ne fait partie d'aucune spécification. diff --git a/files/fr/web/api/document/onafterscriptexecute/index.md b/files/fr/web/api/document/onafterscriptexecute/index.md index 9c3d8d138a..a53d74a24d 100644 --- a/files/fr/web/api/document/onafterscriptexecute/index.md +++ b/files/fr/web/api/document/onafterscriptexecute/index.md @@ -8,41 +8,35 @@ tags: - scripts translation_of: Web/API/Document/onafterscriptexecute --- -<div>{{ ApiRef("DOM") }} {{non-standard_header}}</div> +{{ ApiRef("DOM") }} {{non-standard_header}} -<div> </div> +## Résumé -<h2 id="Résumé">Résumé</h2> +Lancé lorsqu'un élément {{HTMLElement("script")}} statique achève l'exécution de son script. N'est pas lancé si l'élément est ajouté dynamiquement, par exemple avec appendChild(). -<p>Lancé lorsqu'un élément {{HTMLElement("script")}} statique achève l'exécution de son script. N'est pas lancé si l'élément est ajouté dynamiquement, par exemple avec appendChild().</p> +## Syntaxe -<h2 id="Syntaxe">Syntaxe</h2> + document.onafterscriptexecute = funcRef; -<pre class="syntaxbox"><em>document.onafterscriptexecute = funcRef;</em> -</pre> +_funcRef_ est une référence de fonction appelée lorsqu'un évènement est lancé. L'attribut de la `target` (cible) d'évènement est défini sur l'{{domxref("Element")}} script dont l'exécution vient de s'achever. -<p><em>funcRef</em> est une référence de fonction appelée lorsqu'un évènement est lancé. L'attribut de la <code>target</code> (cible) d'évènement est défini sur l'{{domxref("Element")}} script dont l'exécution vient de s'achever.</p> +## Exemple -<h2 id="Exemple">Exemple</h2> - -<pre class="brush:js">function finished(e) { +```js +function finished(e) { logMessage("Finished script with ID: " + e.target.id); } document.addEventListener("afterscriptexecute", finished, true); -</pre> +``` -<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p> +[Voir l'exemple sur une page](/samples/html/currentScript.html) -<h2 id="Spécification">Spécification</h2> +## Spécification -<ul> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li> -</ul> +- [HTML5](http://www.whatwg.org/specs/web-apps/current-work/#the-script-element) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Document.onbeforescriptexecute")}}</li> - <li>{{domxref("Document.currentScript")}}</li> -</ul> +- {{domxref("Document.onbeforescriptexecute")}} +- {{domxref("Document.currentScript")}} diff --git a/files/fr/web/api/document/onbeforescriptexecute/index.md b/files/fr/web/api/document/onbeforescriptexecute/index.md index 8527a38555..638590127d 100644 --- a/files/fr/web/api/document/onbeforescriptexecute/index.md +++ b/files/fr/web/api/document/onbeforescriptexecute/index.md @@ -8,39 +8,35 @@ tags: - scripts translation_of: Web/API/Document/onbeforescriptexecute --- -<div>{{ApiRef("DOM")}} {{non-standard_header }}</div> +{{ApiRef("DOM")}} {{non-standard_header }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Lancé lorsque le code dans un élément {{HTMLElement("script")}} déclaré dans un document HTML est sur le point de s'exécuter. N'est pas déclenché si l'élément est ajouté dynamiquement, par exemple avec appendChild().</p> +Lancé lorsque le code dans un élément {{HTMLElement("script")}} déclaré dans un document HTML est sur le point de s'exécuter. N'est pas déclenché si l'élément est ajouté dynamiquement, par exemple avec appendChild(). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>document.onbeforescriptexecute = funcRef;</em> -</pre> + document.onbeforescriptexecute = funcRef; -<p><em>funcRef</em> est une référence de fonction appelée lorsque l'évènement est lancé. L'attribut de la <code>target</code> (<em>cible</em>) d'évènement est défini dans l'{{domxref("Element")}} script qui est sur le point d'être exécuté.</p> +_funcRef_ est une référence de fonction appelée lorsque l'évènement est lancé. L'attribut de la `target` (_cible_) d'évènement est défini dans l'{{domxref("Element")}} script qui est sur le point d'être exécuté. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">function starting(e) { +```js +function starting(e) { logMessage("Starting script with ID: " + e.target.id); } document.addEventListener("beforescriptexecute", starting, true); -</pre> +``` -<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p> +[Voir l'exemple sur une page](/samples/html/currentScript.html) -<h2 id="Spécification">Spécification</h2> +## Spécification -<ul> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li> -</ul> +- [HTML5](http://www.whatwg.org/specs/web-apps/current-work/#the-script-element) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Document.onafterscriptexecute")}}</li> - <li>{{domxref("Document.currentScript")}}</li> -</ul> +- {{domxref("Document.onafterscriptexecute")}} +- {{domxref("Document.currentScript")}} diff --git a/files/fr/web/api/document/onfullscreenchange/index.md b/files/fr/web/api/document/onfullscreenchange/index.md index a3251b0188..c5d6336ada 100644 --- a/files/fr/web/api/document/onfullscreenchange/index.md +++ b/files/fr/web/api/document/onfullscreenchange/index.md @@ -3,50 +3,37 @@ title: Document.onfullscreenchange slug: Web/API/Document/onfullscreenchange translation_of: Web/API/Document/onfullscreenchange --- -<div>{{ApiRef("Fullscreen API")}}</div> +{{ApiRef("Fullscreen API")}} -<p>La propriété <code><strong>Document</strong></code><strong><code>.onfullscreenchange</code> </strong>est un gestionnaire d'événement pour l'événement {{event("fullscreenchange")}} qui est lancé lorsque le document entre ou sort du mode plein écran.</p> +La propriété **`Document`\*\***`.onfullscreenchange` \*\*est un gestionnaire d'événement pour l'événement {{event("fullscreenchange")}} qui est lancé lorsque le document entre ou sort du mode plein écran. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>targetDocument</var>.onfullscreenchange = <var>fullscreenChangeHandler</var>; -</pre> + targetDocument.onfullscreenchange = fullscreenChangeHandler; -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">document.onfullscreenchange = function ( event ) { +```js +document.onfullscreenchange = function ( event ) { console.log("FULL SCREEN CHANGE") }; document.documentElement.onclick = function () { // requestFullscreen() doit être un gestionnaire d'événement, sinon ça échouera document.documentElement.requestFullscreen(); } -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Document.onfullscreenchange")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{event("fullscreenchange")}}</li> - <li>{{domxref("Document.onfullscreenerror")}}</li> -</ul> +``` + +## Specifications + +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}} | {{Spec2("HTML WHATWG")}} | Initial definition. | + +## Compatibilité des navigateurs + +{{Compat("api.Document.onfullscreenchange")}} + +## Voir aussi + +- {{event("fullscreenchange")}} +- {{domxref("Document.onfullscreenerror")}} diff --git a/files/fr/web/api/document/onoffline/index.md b/files/fr/web/api/document/onoffline/index.md index 4e9ac673aa..b373eaaa77 100644 --- a/files/fr/web/api/document/onoffline/index.md +++ b/files/fr/web/api/document/onoffline/index.md @@ -8,6 +8,6 @@ tags: - Propriétés translation_of: Web/API/Document/onoffline --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>Le gestionnaire d'évènements est appelé lorsqu'un évènement {{event("offline")}} est lancé sur le corps (<em>body</em>) et propagé, quand la propriété <a href="/fr/docs/Web/API/NavigatorOnLine/onLine">navigator.onLine</a> change et devient <code>false</code> (<em>fausse</em>).</p> +Le gestionnaire d'évènements est appelé lorsqu'un évènement {{event("offline")}} est lancé sur le corps (_body_) et propagé, quand la propriété [navigator.onLine](/fr/docs/Web/API/NavigatorOnLine/onLine) change et devient `false` (_fausse_). diff --git a/files/fr/web/api/document/ononline/index.md b/files/fr/web/api/document/ononline/index.md index 0665ed87be..c2bdbdf88f 100644 --- a/files/fr/web/api/document/ononline/index.md +++ b/files/fr/web/api/document/ononline/index.md @@ -9,31 +9,25 @@ tags: - Propriétés translation_of: Web/API/Document/ononline --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>Un évènement "<code>online</code>" est lancé sur le <code><body></code> (<em>corps</em>) de chaque page quand le navigateur bascule entre les modes online (<em>en ligne</em>) et offline (<em>hors ligne</em>). De plus les évènements se propagent de <code>document.body</code> vers <code>document</code> et finalement sur <code>window</code>. Les deux évènements ne sont pas annulables (vous ne pouvez pas empêcher l'utilisateur de se connecter ou de vous déconnecter).</p> +Un évènement "`online`" est lancé sur le `<body>` (_corps_) de chaque page quand le navigateur bascule entre les modes online (_en ligne_) et offline (_hors ligne_). De plus les évènements se propagent de `document.body` vers `document` et finalement sur `window`. Les deux évènements ne sont pas annulables (vous ne pouvez pas empêcher l'utilisateur de se connecter ou de vous déconnecter). -<p><code>window.navigator.onLine</code> renvoie un booléen <em>true</em> (<em>vrai</em>) si le navigateur est online et false s'il est définitivement offline (déconnecté du réseau). Les évènements online et offline sont lancés si la valeur de cet attribut change.</p> +`window.navigator.onLine` renvoie un booléen _true_ (_vrai_) si le navigateur est online et false s'il est définitivement offline (déconnecté du réseau). Les évènements online et offline sont lancés si la valeur de cet attribut change. -<div class="note"> -<p><strong>Note :</strong> Il est important de noter que cet événement et cet attribut sont intrinsèquement peu fiables. Un ordinateur peut être connecté à un réseau sans avoir accès à Internet.</p> -</div> +> **Note :** Il est important de noter que cet événement et cet attribut sont intrinsèquement peu fiables. Un ordinateur peut être connecté à un réseau sans avoir accès à Internet. -<p>Vous pouvez enregistrer les écouteurs de ces événements de plusieurs manières habituelles :</p> +Vous pouvez enregistrer les écouteurs de ces événements de plusieurs manières habituelles : -<ul> - <li>en utilisant <code><a href="/en/DOM/element.addEventListener">addEventListener</a></code> sur <code>window</code>, <code>document</code> ou <code>document.body</code></li> - <li>en définissant les propriétés <code>.ononline</code> ou <code>.onoffline</code> sur <code>document</code> ou <code>document.body</code> sur un objet <code>Function</code> JavaScript. (<strong>Note :</strong> l'utilisation de <code>window.ononline</code> ou <code>window.onoffline</code> ne fonctionnera pas pour des raisons de compatibilité).</li> - <li>en spécifiant les attributs <code>ononline="..."</code> ou <code>onoffline="..."</code> sur la balise <code><body></code> dans le balisage HTML.</li> -</ul> +- en utilisant [`addEventListener`](/en/DOM/element.addEventListener) sur `window`, `document` ou `document.body` +- en définissant les propriétés `.ononline` ou `.onoffline` sur `document` ou `document.body` sur un objet `Function` JavaScript. (**Note :** l'utilisation de `window.ononline` ou `window.onoffline` ne fonctionnera pas pour des raisons de compatibilité). +- en spécifiant les attributs `ononline="..."` ou `onoffline="..."` sur la balise `<body>` dans le balisage HTML. -<h2 id="Example">Exemple</h2> +## Exemple -<p>Il existe <a href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">un cas de test simple</a> que vous pouvez exécuter pour vérifier le fonctionnement des évènements.</p> +Il existe [un cas de test simple](https://bugzilla.mozilla.org/attachment.cgi?id=220609) que vous pouvez exécuter pour vérifier le fonctionnement des évènements. -<h2 id="Example">Références</h2> +## Références -<ul> - <li><a href="/fr/docs/Web/API/NavigatorOnLine/%C3%89v%C3%A8nements_online_et_offline">Évènements online et offline</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#event-online">Spécification</a> <a href="http://www.whatwg.org/specs/web-apps/current-work/#event-online">WHATWG Web App</a> (en)</li> -</ul> +- [Évènements online et offline](/fr/docs/Web/API/NavigatorOnLine/%C3%89v%C3%A8nements_online_et_offline) +- [Spécification](http://www.whatwg.org/specs/web-apps/current-work/#event-online) [WHATWG Web App](http://www.whatwg.org/specs/web-apps/current-work/#event-online) (en) diff --git a/files/fr/web/api/document/open/index.md b/files/fr/web/api/document/open/index.md index c8da92836a..c427d5df05 100644 --- a/files/fr/web/api/document/open/index.md +++ b/files/fr/web/api/document/open/index.md @@ -8,69 +8,46 @@ tags: - Reference translation_of: Web/API/Document/open --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<div> </div> +La méthode **`document.open()`** ouvre un document pour [l'écriture](/fr/docs/Web/API/Document/write). -<p>La méthode <strong><code>document.open()</code></strong> ouvre un document pour <a href="/fr/docs/Web/API/Document/write">l'écriture</a>.</p> +## Syntaxe -<h2 id="Syntaxe">Syntaxe</h2> + document.open(); -<pre class="eval">document.open(); -</pre> +## Exemple -<h2 id="Exemple">Exemple</h2> + // Dans cet exemple, le contenu du document est + // écrasé au cours de la réinitialisation avec open() + document.write("<html><p>supprimez-moi</p></html>"); + document.open(); + // Le document est vide. -<pre>// Dans cet exemple, le contenu du document est -// écrasé au cours de la réinitialisation avec open() -document.write("<html><p>supprimez-moi</p></html>"); -document.open(); -// Le document est vide. -</pre> +## Notes -<h2 id="Notes">Notes</h2> +Si un document existe dans la cible, cette méthode le supprime (voir l'exemple ci-dessus). -<p>Si un document existe dans la cible, cette méthode le supprime (voir l'exemple ci-dessus).</p> +Par ailleurs, un appel automatique à `document.open()` est réalisé lorsque [document.write()](/fr/docs/Web/API/Document/write) est appelé après que la page ait été chargée, bien que ce ne soit pas défini dans la spécification du W3C. documenter les paramètres à document.open ne figurant pas dans la spécification -<p>Par ailleurs, un appel automatique à <code>document.open()</code> est réalisé lorsque <a href="/fr/docs/Web/API/Document/write">document.write()</a> est appelé après que la page ait été chargée, bien que ce ne soit pas défini dans la spécification du W3C. documenter les paramètres à document.open ne figurant pas dans la spécification</p> +Cette méthode ne doit pas être confondue avec [window.open()](/fr/docs/Web/API/Window/open). `document.open` permet d'écrire par dessus le document courant ou d'y ajouter du contenu, alors que `window.open` fournit une manière d'ouvrir une nouvelle fenêtre laissant le document courant intact. Comme `window` est l'objet, si on appelle juste `open(...)`, il sera traité comme un appel à `window.open(...)`. Le document ouvert peut être fermé à l'aide de [document.close()](/fr/docs/Web/API/Document/close). -<p>Cette méthode ne doit pas être confondue avec <a href="/fr/docs/Web/API/Window/open">window.open()</a>. <code>document.open</code> permet d'écrire par dessus le document courant ou d'y ajouter du contenu, alors que <code>window.open</code> fournit une manière d'ouvrir une nouvelle fenêtre laissant le document courant intact. Comme <code>window</code> est l'objet, si on appelle juste <code>open(...)</code>, il sera traité comme un appel à <code>window.open(...)</code>. Le document ouvert peut être fermé à l'aide de <a href="/fr/docs/Web/API/Document/close">document.close()</a>.</p> +Voir [Security check basics](/fr/docs/Mozilla/Gecko/Script_security#Security_checks) pour plus d'informations sur les principaux. -<p>Voir <a href="/fr/docs/Mozilla/Gecko/Script_security#Security_checks">Security check basics</a> pour plus d'informations sur les principaux.</p> +Si vous ne voulez pas créer une entrée d'historique, remplacez `open()` par `open("text/html", "replace")`. -<p>Si vous ne voulez pas créer une entrée d'historique, remplacez <code>open()</code> par <code>open("text/html", "replace")</code>.</p> +## Spécifications -<h2 id="Specifications">Spécifications</h2> +| Spécification | Status | Comment | +| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}} | {{Spec2("DOM2 HTML")}} | Définition initiale. | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}</td> - <td>{{Spec2("DOM2 HTML")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +## Compatibilité des navigateurs -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +{{Compat("api.Document.open")}} -<p>{{Compat("api.Document.open")}}</p> +## Voir aussi -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>{{domxref("Document")}}</li> - <li>{{domxref("Window.open()")}}</li> -</ul> +- {{domxref("Document")}} +- {{domxref("Window.open()")}} diff --git a/files/fr/web/api/document/origin/index.md b/files/fr/web/api/document/origin/index.md index 646f4e1242..326c3eef82 100644 --- a/files/fr/web/api/document/origin/index.md +++ b/files/fr/web/api/document/origin/index.md @@ -9,50 +9,34 @@ tags: - origine translation_of: Web/API/Document/origin --- -<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> +{{APIRef("DOM")}}{{SeeCompatTable}} -<p>La propriété en lecture seule <strong><code>Document.origin</code></strong> renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à <code>document.defaultView.location.origin</code>.</p> +La propriété en lecture seule **`Document.origin`** renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à `document.defaultView.location.origin`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">var origin = document.origin; +```js +var origin = document.origin; // Sur cette page, renvoie:'https://developer.mozilla.org' var origin = document.origin; // Sur "about:blank", renvoie :'null' var origin = document.origin; -// Sur "data:text/html,<b>foo</b>", renvoie :'null' -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-document-origin', 'Document.origin')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div>{{Compat("api.Document.origin")}}</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>La propriété {{domxref("URLUtils.origin")}}.</li> -</ul> +// Sur "data:text/html,<b>foo</b>", renvoie :'null' +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG', '#dom-document-origin', 'Document.origin')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | +| {{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Document.origin")}} + +## Voir aussi + +- La propriété {{domxref("URLUtils.origin")}}. diff --git a/files/fr/web/api/document/popupnode/index.md b/files/fr/web/api/document/popupnode/index.md index be0b64250e..0874d7dca0 100644 --- a/files/fr/web/api/document/popupnode/index.md +++ b/files/fr/web/api/document/popupnode/index.md @@ -10,36 +10,32 @@ tags: - XUL translation_of: Web/API/Document/popupNode --- -<div>{{ApiRef("DOM")}}{{deprecated_header}}</div> +{{ApiRef("DOM")}}{{deprecated_header}} -<div class="note"> - <p><strong>Note :</strong> À partir de {{Gecko("2.0")}}, les auteurs sont encouragés à utiliser la propriété <a href="/fr/docs/Mozilla/Tech/XUL/menupopup">menupopup </a>triggerNode à la place.</p> -</div> +> **Note :** À partir de {{Gecko("2.0")}}, les auteurs sont encouragés à utiliser la propriété [menupopup ](/fr/docs/Mozilla/Tech/XUL/menupopup)triggerNode à la place. -<p>Quand une fenêtre contextuelle attachée via les attributs <code>popup</code> ou <code>context</code> est ouverte, la propriété <code>popupNode</code> du document XUL est définie sur le noeud sur lequel vous avez cliqué. Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle. Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null. En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte.</p> +Quand une fenêtre contextuelle attachée via les attributs `popup` ou `context` est ouverte, la propriété `popupNode` du document XUL est définie sur le noeud sur lequel vous avez cliqué. Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle. Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null. En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte. -<p>Cette propriété est uniquement définie pour les fenêtres contextuelles attachées via les attributs <code>popup</code> ou <code>context</code>. Pour les autres types, la valeur n'est pas modifiée. Dans ces autres cas, par exemple lors de l'appel de la méthode <a href="/fr/docs/Mozilla/Tech/XUL/M%C3%A9thodes/showPopup">showPopup</a> de la fenêtre contextuelle, vous pouvez définir la propriété <code>popupNode</code> directement au préalable.</p> +Cette propriété est uniquement définie pour les fenêtres contextuelles attachées via les attributs `popup` ou `context`. Pour les autres types, la valeur n'est pas modifiée. Dans ces autres cas, par exemple lors de l'appel de la méthode [showPopup](/fr/docs/Mozilla/Tech/XUL/M%C3%A9thodes/showPopup) de la fenêtre contextuelle, vous pouvez définir la propriété `popupNode` directement au préalable. -<p>Cette propriété s'applique seulement aux documents XUL.</p> +Cette propriété s'applique seulement aux documents XUL. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <var>node</var> = <var>document</var>.popupNode; -</pre> + var node = document.popupNode; -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: xml"><menupopup id="toolbarContextMenu"> +```xml +<menupopup id="toolbarContextMenu"> ... - <menuitem oncommand="mailNewsCore.deleteButton(document.popupNode)"> + <menuitem oncommand="mailNewsCore.deleteButton(document.popupNode)"> ... -</menupopup> -</pre> +</menupopup> +``` -<p>Voir <a href="http://www.mozilla.org/xpfe/xptoolkit/popups.html">http://www.mozilla.org/xpfe/xptoolkit/popups.html</a></p> +Voir <http://www.mozilla.org/xpfe/xptoolkit/popups.html> -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>Défini dans {{Source("dom/public/idl/xul/nsIDOMXULDocument.idl#48", "nsIDOMXULDocument.idl")}}. méthode spécifique XUL. Ne fait partie d'aucune spécification.</li> -</ul> +- Défini dans {{Source("dom/public/idl/xul/nsIDOMXULDocument.idl#48", "nsIDOMXULDocument.idl")}}. méthode spécifique XUL. Ne fait partie d'aucune spécification. diff --git a/files/fr/web/api/document/preferredstylesheetset/index.md b/files/fr/web/api/document/preferredstylesheetset/index.md index ab47840dd3..9dabb35946 100644 --- a/files/fr/web/api/document/preferredstylesheetset/index.md +++ b/files/fr/web/api/document/preferredstylesheetset/index.md @@ -10,39 +10,35 @@ tags: - Reference translation_of: Web/API/Document/preferredStyleSheetSet --- -<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}</div> +{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}} -<p>Retourne la feuille de style préférée, telle que définie par l'auteur de la page.</p> +Retourne la feuille de style préférée, telle que définie par l'auteur de la page. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>preferredStyleSheetSet</var> = document.preferredStyleSheetSet -</pre> + preferredStyleSheetSet = document.preferredStyleSheetSet -<p>Au retour, <code>preferredStyleSheetSet</code> indique la feuille de style préférée par l'auteur. Ceci est déterminé par l'ordre des déclarations des feuilles de style et par l'entête HTTP intitulé <code>Default-Style</code>.</p> +Au retour, `preferredStyleSheetSet` indique la feuille de style préférée par l'auteur. Ceci est déterminé par l'ordre des déclarations des feuilles de style et par l'entête HTTP intitulé `Default-Style`. -<p>En l'absence de feuille de style préférée, une chaine vide ("") est retournée.</p> +En l'absence de feuille de style préférée, une chaine vide ("") est retournée. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush: js">if (document.preferredStyleSheetSet) { +```js +if (document.preferredStyleSheetSet) { console.log("La feuille de style préférée est : " + document.preferredStyleSheetSet); } else { console.log("Il n'y a pas de feuille de style préférée."); } -</pre> +``` -<h2 id="Specification">Spécifications</h2> +## Spécifications -<ul> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> -</ul> +- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("document.lastStyleSheetSet")}}</li> - <li>{{domxref("document.selectedStyleSheetSet")}}</li> - <li>{{domxref("document.styleSheetSets")}}</li> - <li>{{domxref("document.enableStyleSheetsForSet()")}}</li> -</ul> +- {{domxref("document.lastStyleSheetSet")}} +- {{domxref("document.selectedStyleSheetSet")}} +- {{domxref("document.styleSheetSets")}} +- {{domxref("document.enableStyleSheetsForSet()")}} diff --git a/files/fr/web/api/document/querycommandstate/index.md b/files/fr/web/api/document/querycommandstate/index.md index ca874815cb..aae32ace2b 100644 --- a/files/fr/web/api/document/querycommandstate/index.md +++ b/files/fr/web/api/document/querycommandstate/index.md @@ -7,43 +7,31 @@ tags: - Document translation_of: Web/API/Document/queryCommandState --- -<div>{{ApiRef("DOM")}}</div> +{{ApiRef("DOM")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">queryCommandState(String command) -</pre> +```js +queryCommandState(String command) +``` -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>TBD</p> +TBD -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML Editing','#execcommand()','execCommand')}}</td> - <td>{{Spec2('HTML Editing')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('HTML Editing','#execcommand()','execCommand')}} | {{Spec2('HTML Editing')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.queryCommandState")}}</p> +{{Compat("api.Document.queryCommandState")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("HTMLElement.contentEditable")}}</li> - <li>{{domxref("document.designMode")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li> - <li>Les bogues du navigateur liés à <code>queryCommandState()</code>: <a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md#documentquerycommandstate">Scribe's "Browser Inconsistencies" documentation</a></li> -</ul> +- {{domxref("HTMLElement.contentEditable")}} +- {{domxref("document.designMode")}} +- [Rich-Text Editing in Mozilla](/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla) +- Les bogues du navigateur liés à `queryCommandState()`: [Scribe's "Browser Inconsistencies" documentation](https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md#documentquerycommandstate) diff --git a/files/fr/web/api/document/querycommandsupported/index.md b/files/fr/web/api/document/querycommandsupported/index.md index ddd356a31b..9e31a74d0f 100644 --- a/files/fr/web/api/document/querycommandsupported/index.md +++ b/files/fr/web/api/document/querycommandsupported/index.md @@ -10,63 +10,48 @@ tags: - editeur translation_of: Web/API/Document/queryCommandSupported --- -<div>{{ApiRef("DOM")}}</div> +{{ApiRef("DOM")}} -<p>La méthode <code><strong>Document.queryCommandSupported()</strong></code> indique si la commande d'éditeur spécifiée est prise en charge par le navigateur.</p> +La méthode **`Document.queryCommandSupported()`** indique si la commande d'éditeur spécifiée est prise en charge par le navigateur. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>isSupported</var> = document.queryCommandSupported(<var>command</var>); -</pre> + isSupported = document.queryCommandSupported(command); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>command</code></dt> - <dd>La commande pour laquelle on veut déterminer si elle est prise en charge.</dd> -</dl> +- `command` + - : La commande pour laquelle on veut déterminer si elle est prise en charge. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Renvoie un {{jsxref("Boolean")}} qui est <code>true</code> (<em>vrai</em>) si la commande est prise en charge et <code>false</code> (<em>faux</em>) sinon.</p> +Renvoie un {{jsxref("Boolean")}} qui est `true` (_vrai_) si la commande est prise en charge et `false` (_faux_) sinon. -<h2 id="Notes">Notes</h2> +## Notes -<p>La commande <code>'paste'</code> (<em>coller</em>) renvoie <code>false</code> (<em>faux</em>), pas seulement si la fonctionnalité n'est pas disponible, mais également si le script l'appelant a des privilèges insuffisants pour réaliser l'action <a href="#note1">[1]</a>.</p> +La commande `'paste'` (_coller_) renvoie `false` (_faux_), pas seulement si la fonctionnalité n'est pas disponible, mais également si le script l'appelant a des privilèges insuffisants pour réaliser l'action [\[1\]](#note1). -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush:js">var flg = document.queryCommandSupported("SelectAll"); +```js +var flg = document.queryCommandSupported("SelectAll"); if(flg) { // ...Faire quelque chose } -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML Editing','#querycommandsupported()','querycommandsupported')}}</td> - <td>{{Spec2('HTML Editing')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Document.queryCommandSupported")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("Document.execCommand()")}}</li> - <li>{{domxref("Document.queryCommandEnabled()")}}</li> -</ul> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('HTML Editing','#querycommandsupported()','querycommandsupported')}} | {{Spec2('HTML Editing')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Document.queryCommandSupported")}} + +## Voir aussi + +- {{domxref("Document.execCommand()")}} +- {{domxref("Document.queryCommandEnabled()")}} diff --git a/files/fr/web/api/document/queryselector/index.md b/files/fr/web/api/document/queryselector/index.md index bb81eb32c0..5b3e19ea84 100644 --- a/files/fr/web/api/document/queryselector/index.md +++ b/files/fr/web/api/document/queryselector/index.md @@ -12,58 +12,52 @@ tags: - Échappement translation_of: Web/API/Document/querySelector --- -<div>{{ ApiRef("DOM") }}</div> +{{ ApiRef("DOM") }} -<p>La méthode <code><strong>querySelector()</strong></code> de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou <code>null</code> si aucune correspondance n'est trouvée.</p> +La méthode **`querySelector()`** de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou `null` si aucune correspondance n'est trouvée. -<div class="note"> -<p><strong>Note :</strong> La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants.</p> -</div> +> **Note :** La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">element = document.querySelector(sélecteurs); -</pre> +```js +element = document.querySelector(sélecteurs); +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>selectors</code> (sélecteurs)</dt> - <dd>une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception <code>SYNTAX_ERR</code> est lancée. Voir <a href="/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a> pour plus d'informations sur les sélecteurs et leur gestion.</dd> -</dl> +- `selectors` (sélecteurs) + - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception `SYNTAX_ERR` est lancée. Voir [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs) pour plus d'informations sur les sélecteurs et leur gestion. -<div class="note"> -<p><strong>Note :</strong> les caractères qui n'appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\"). Puisque JavaScript utilise aussi cette barre pour l'échappement, une attention particulière est nécessaire quand des chaînes comprennent ces caractères. Voir {{anch("Caractère spécial d'échappement")}} pour plus d'informations.</p> -</div> +> **Note :** les caractères qui n'appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\\"). Puisque JavaScript utilise aussi cette barre pour l'échappement, une attention particulière est nécessaire quand des chaînes comprennent ces caractères. Voir {{anch("Caractère spécial d'échappement")}} pour plus d'informations. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de <a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> spécifié, ou <code>null</code> s'il n'y a pas de correspondances.</p> +Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de [sélecteurs CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) spécifié, ou `null` s'il n'y a pas de correspondances. -<p>Si vous avez besoin d'une liste de tous les éléments correspondant aux sélecteurs spécifiés, vous devez utiliser {{domxref("Document.querySelectorAll", "querySelectorAll()")}} à la place.</p> +Si vous avez besoin d'une liste de tous les éléments correspondant aux sélecteurs spécifiés, vous devez utiliser {{domxref("Document.querySelectorAll", "querySelectorAll()")}} à la place. -<h3 id="Exception">Exception</h3> +### Exception -<dl> - <dt><code>SYNTAX_ERR</code></dt> - <dd>La syntaxe des sélecteurs spécifiés est invalide.</dd> -</dl> +- `SYNTAX_ERR` + - : La syntaxe des sélecteurs spécifiés est invalide. -<h2 id="Notes">Notes d'utilisation</h2> +## Notes d'utilisation -<p>Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné.</p> +Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné. -<p>Les <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a> CSS ne retourneront jamais aucun élément, comme spécifié dans l'<a href="http://www.w3.org/TR/selectors-api/#grammar">API des sélecteurs</a> (en).</p> +Les [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) CSS ne retourneront jamais aucun élément, comme spécifié dans l'[API des sélecteurs](http://www.w3.org/TR/selectors-api/#grammar) (en). -<h3 id="Caractère_spécial_d'échappement">Caractère spécial d'échappement</h3> +### Caractère spécial d'échappement -<p>Pour faire correspondre un ID (<em>identifiant</em>) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper <em>deux fois</em> (une pour la chaîne de caractères JavaScript et une autre fois pour <code>querySelector</code>) :</p> +Pour faire correspondre un ID (_identifiant_) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper _deux fois_ (une pour la chaîne de caractères JavaScript et une autre fois pour `querySelector`) : -<pre class="brush: html"><div id="machin\bidule"></div> -<div id="machin:bidule"></div> +```html +<div id="machin\bidule"></div> +<div id="machin:bidule"></div> -<script> - console.log('#machin\bidule') // "#machinidule" <code>(\b est le caractère de contrôle retour arrière)</code> +<script> + console.log('#machin\bidule') // "#machinidule" (\b est le caractère de contrôle retour arrière) document.querySelector('#machin\bidule') // ne correspond à rien console.log('#machin\\bidule') // "#machin\bidule" @@ -72,55 +66,42 @@ translation_of: Web/API/Document/querySelector document.querySelector('#machin:bidule') // ne correspond à rien document.querySelector('#machin\\:bidule') // correspond au second div -</script> -</pre> +</script> +``` -<h2 id="Exemple">Exemples</h2> +## Exemples -<h3 id="Trouver_le_premier_élément_correspondant_à_une_classe">Trouver le premier élément correspondant à une classe</h3> +### Trouver le premier élément correspondant à une classe -<p>Dans cet exemple, le premier élément dans le document qui contient la classe "<code>maclasse</code>" est retourné :</p> +Dans cet exemple, le premier élément dans le document qui contient la classe "`maclasse`" est retourné : -<pre class="brush: js">var el = document.querySelector(".maclasse");</pre> +```js +var el = document.querySelector(".maclasse"); +``` -<h3 id="Notes">Un sélecteur plus complexe</h3> +### Un sélecteur plus complexe -<p>Les <em>sélecteurs</em> peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément <code><input name="identifiant"/></code> dans un <code><div class="panneau-utilisateur principal"></code> dans le document est retourné :</p> +Les _sélecteurs_ peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément `<input name="identifiant"/>` dans un `<div class="panneau-utilisateur principal">` dans le document est retourné : -<pre class="brush: js">var el = document.querySelector("div.panneau-utilisateur.principal input[name='<code>identifiant</code>']");</pre> +```js +var el = document.querySelector("div.panneau-utilisateur.principal input[name='identifiant']"); +``` -<h2 id="Browser_Compatibility">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------- | +| {{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 2")}} | | +| {{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 1")}} | Définition initiale | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.Document.querySelector")}}</div> +{{Compat("api.Document.querySelector")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li> - <li>{{domxref("document.querySelectorAll()")}} ;</li> - <li>{{domxref("element.querySelector()")}} ;</li> - <li>{{domxref("element.querySelectorAll()")}} ;</li> - <li><a href="/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li> -</ul> +- [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs) +- {{domxref("document.querySelectorAll()")}} ; +- {{domxref("element.querySelector()")}} ; +- {{domxref("element.querySelectorAll()")}} ; +- [Extraits de code pour `querySelector`](/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector) diff --git a/files/fr/web/api/document/queryselectorall/index.md b/files/fr/web/api/document/queryselectorall/index.md index 7b73477245..07088e2c73 100644 --- a/files/fr/web/api/document/queryselectorall/index.md +++ b/files/fr/web/api/document/queryselectorall/index.md @@ -9,156 +9,139 @@ tags: - Sélecteurs translation_of: Web/API/Document/querySelectorAll --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>La méthode <code><strong>querySelectorAll()</strong></code> de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.</p> +La méthode **`querySelectorAll()`** de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés. -<div class="note"> -<p><strong>Note :</strong> Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} .</p> -</div> +> **Note :** Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} . -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); -</pre> +```js +elementList = parentNode.querySelectorAll(selectors); +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>selecteurs</code></dt> - <dd>une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient un ou plusieurs <a href="/fr/docs/Web/CSS/CSS_Selectors">sélecteurs CSS</a> ; s'il n'y en a pas, une exception <code>SyntaxError</code> est lancée. Voir <a href="/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">localisation des éléments DOM avec les sélecteurs</a> pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule.</dd> -</dl> +- `selecteurs` + - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs [sélecteurs CSS](/fr/docs/Web/CSS/CSS_Selectors) ; s'il n'y en a pas, une exception `SyntaxError` est lancée. Voir [localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule. -<div class="note"> -<p><strong>Note :</strong> Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations.</p> -</div> +> **Note :** Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations. -<h3 id="Valeur_renvoyée">Valeur renvoyée</h3> +### Valeur renvoyée -<p>Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée .</p> +Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée . -<div class="note"> -<p><strong>Note :</strong> Si les <code><em>selectors</em></code> spécifiés contiennent un <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste retournée sera toujours vide.</p> -</div> +> **Note :** Si les `selectors` spécifiés contiennent un [pseudo-element CSS](/fr/docs/Web/CSS/Pseudo-elements), la liste retournée sera toujours vide. -<h3 id="Exceptions">Exceptions</h3> +### Exceptions -<dl> - <dt><code>SyntaxError</code></dt> - <dd>la syntaxe des chaînes <code>selectors</code> spécifiés n'est pas valide.</dd> -</dl> +- `SyntaxError` + - : la syntaxe des chaînes `selectors` spécifiés n'est pas valide. -<h2 id="Example">Exemples</h2> +## Exemples -<p>Pour obtenir une {{domxref("NodeList")}} (<em>liste de noeuds</em>) de tous les éléments {{HTMLElement("p")}} dans le document :</p> +Pour obtenir une {{domxref("NodeList")}} (_liste de noeuds_) de tous les éléments {{HTMLElement("p")}} dans le document : -<pre class="brush: js">const matches = document.querySelectorAll("p");</pre> +```js +const matches = document.querySelectorAll("p"); +``` -<p>Cet exemple renvoie la liste de tous les éléments <code>div</code> du <code>document</code> dont l'attribut de classe a pour valeur "<code>note</code>" ou "<code>alert</code>" :</p> +Cet exemple renvoie la liste de tous les éléments `div` du `document` dont l'attribut de classe a pour valeur "`note`" ou "`alert`" : -<pre class="brush: js">const matches = document.querySelectorAll("div.note, div.alert"); -</pre> +```js +const matches = document.querySelectorAll("div.note, div.alert"); +``` -<p>Ici, nous obtenons une liste des éléments <code><p></code> dont l'élément parent immédiat est un {{domxref("div")}} avec la classe <code>"highlighted"</code> et qui sont situés dans un conteneur dont l'identifiant est <code>"test"</code>.</p> +Ici, nous obtenons une liste des éléments `<p>` dont l'élément parent immédiat est un {{domxref("div")}} avec la classe `"highlighted"` et qui sont situés dans un conteneur dont l'identifiant est `"test"`. -<pre class="brush: js">const container = document.querySelector("#test"); -const matches = container.querySelectorAll("div.highlighted > p");</pre> +```js +const container = document.querySelector("#test"); +const matches = container.querySelectorAll("div.highlighted > p"); +``` -<p>Cet exemple utilise un <a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">sélecteur d'attribut</a> pour renvoyer une liste d'éléments {{domxref("iframe")}} dans le document qui contient un attribut nommé <code>"data-src"</code> :</p> +Cet exemple utilise un [sélecteur d'attribut](/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut) pour renvoyer une liste d'éléments {{domxref("iframe")}} dans le document qui contient un attribut nommé `"data-src"` : -<pre class="brush: js">const matches = document.querySelectorAll("iframe[data-src]");</pre> +```js +const matches = document.querySelectorAll("iframe[data-src]"); +``` -<p>Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste d'éléments de liste contenus dans une liste dont l'identifiant est <code>"userlist"</code> lequel a un attribut <code>"data-active"</code> dont la valeur est <code>"1"</code>:</p> +Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste d'éléments de liste contenus dans une liste dont l'identifiant est `"userlist"` lequel a un attribut `"data-active"` dont la valeur est `"1"`: -<pre class="brush: js">const container = document.querySelector("#userlist"); -const matches = container.querySelectorAll("li[data-active='1']");</pre> +```js +const container = document.querySelector("#userlist"); +const matches = container.querySelectorAll("li[data-active='1']"); +``` -<h3 id="Accès_aux_correspondances">Accès aux correspondances</h3> +### Accès aux correspondances -<p>Une fois que la {{domxref("NodeList")}} des éléments correspondants est renvoyée, vous pouvez l'examiner comme un tableau (<em>array</em>). Si le tableau est vide (c'est quand sa propriété <code>length</code> est 0), alors aucune correspondance n'a été trouvée.</p> +Une fois que la {{domxref("NodeList")}} des éléments correspondants est renvoyée, vous pouvez l'examiner comme un tableau (_array_). Si le tableau est vide (c'est quand sa propriété `length` est 0), alors aucune correspondance n'a été trouvée. -<p>Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :</p> +Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que : -<pre class="brush: js">const highlightedItems = userList.querySelectorAll(".highlighted"); +```js +const highlightedItems = userList.querySelectorAll(".highlighted"); highlightedItems.forEach(function(userItem) { deleteUser(userItem); -});</pre> +}); +``` -<h2 id="Notes">Notes d'utilisation</h2> +## Notes d'utilisation -<p><code>querySelectorAll()</code> se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.</p> +`querySelectorAll()` se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus. -<h3 id="HTML">HTML</h3> +### HTML -<p>Considérez ce HTML, avec ses trois blocs {{HTMLElement("div")}} imbriqués.</p> +Considérez ce HTML, avec ses trois blocs {{HTMLElement("div")}} imbriqués. -<pre class="brush: html"><div class="outer"> - <div class="select"> - <div class="inner"> - </div> - </div> -</div></pre> +```html +<div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">const select = document.querySelector('.select'); +```js +const select = document.querySelector('.select'); const inner = select.querySelectorAll('.outer .inner'); -inner.length; // 1, not 0!</pre> +inner.length; // 1, not 0! +``` -<p>Dans cet exemple, lors de la sélection de <code>".outer .inner"</code> dans le contexte, le <code><div></code> avec la classe <code>"select"</code>, l'élément avec la classe <code>".inner"</code> est toujours trouvé, même si <code>.outer</code> n'est pas un descendant de l'élément de base sur lequel la recherche <code>(".select")</code> est effectuée. Par défaut, <code>querySelectorAll()</code> vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.</p> +Dans cet exemple, lors de la sélection de `".outer .inner"` dans le contexte, le `<div>` avec la classe `"select"`, l'élément avec la classe `".inner"` est toujours trouvé, même si `.outer` n'est pas un descendant de l'élément de base sur lequel la recherche `(".select")` est effectuée. Par défaut, `querySelectorAll()` vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche. -<p>La pseudo-classe {{cssxref (":scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :</p> +La pseudo-classe {{cssxref (":scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base : -<pre class="brush: js">const select = document.querySelector('.select'); +```js +const select = document.querySelector('.select'); const inner = select.querySelectorAll(':scope .outer .inner'); -inner.length; // 0</pre> - -<h2 id="Spécification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Norme actuelle</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td>Pas de changement</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td>Définition originale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Document.querySelectorAll")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localisation des éléments DOM avec les sélecteurs</a></li> - <li><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans le guide CSS</li> - <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage de MDN</li> - <li>{{domxref("Element.querySelectorAll")}} et {{domxref("Element.querySelectorAll()")}}</li> - <li>{{domxref("document.querySelector")}}</li> - <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li> - <li>{{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li> - <li><a href="/fr/docs/Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li> -</ul> +inner.length; // 0 +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}} | {{Spec2("DOM WHATWG")}} | Norme actuelle | +| {{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}} | {{Spec2("Selectors API Level 2")}} | Pas de changement | +| {{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}} | {{Spec2("DOM4")}} | Définition initiale | +| {{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 1")}} | Définition originale | + +## Compatibilité des navigateurs + +{{Compat("api.Document.querySelectorAll")}} + +## Voir aussi + +- [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) +- [Sélecteurs d'attribut](/fr/docs/Web/CSS/Attribute_selectors) dans le guide CSS +- [Sélecteurs d'attribut](/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors) dans la zone d'apprentissage de MDN +- {{domxref("Element.querySelectorAll")}} et {{domxref("Element.querySelectorAll()")}} +- {{domxref("document.querySelector")}} +- {{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}} +- {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}} +- [Extraits de code pour `querySelector`](/fr/docs/Code_snippets/QuerySelector) diff --git a/files/fr/web/api/document/readystate/index.md b/files/fr/web/api/document/readystate/index.md index 36d01f7c11..e90f271bc5 100644 --- a/files/fr/web/api/document/readystate/index.md +++ b/files/fr/web/api/document/readystate/index.md @@ -8,42 +8,40 @@ tags: - Référence(2) translation_of: Web/API/Document/readyState --- -<div>{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}</div> +{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }} -<p>La valeur <strong>Document.readyState</strong> est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document.</p> +La valeur **Document.readyState** est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document. -<p>À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}.</p> +À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <var>string</var> = <var>document</var>.readyState; -</pre> + var string = document.readyState; -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<p>La variable <code>readyState</code><strong> </strong>peut valoir :</p> +La variable `readyState`\*\* \*\*peut valoir : -<dl> - <dt><code><strong>loading</strong></code></dt> - <dd>Le {{ domxref("document") }} est encore en chargement.</dd> - <dt><code><strong>interactive</strong></code></dt> - <dd>Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis.</dd> - <dt><code><strong>complete</strong></code></dt> - <dd>Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis.</dd> -</dl> +- **`loading`** + - : Le {{ domxref("document") }} est encore en chargement. +- **`interactive`** + - : Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis. +- **`complete`** + - : Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Différents_états_de_chargement">Différents états de chargement</h3> +### Différents états de chargement -<pre class="brush: js">switch (document.readyState) { +```js +switch (document.readyState) { case "loading": // Encore en chargement. break; case "interactive": // Le DOM est construit, on peut y accéder. var span = document.createElement("span"); - span.textContent = "A <span> element."; + span.textContent = "A <span> element."; document.body.appendChild(span); break; case "complete": @@ -51,77 +49,61 @@ translation_of: Web/API/Document/readyState console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText); break; } -</pre> +``` -<h3 id="readystatechange_comme_alternative_à_DOMContentLoaded">readystatechange comme alternative à DOMContentLoaded</h3> +### readystatechange comme alternative à DOMContentLoaded -<pre class="brush:js">// alternative à DOMContentLoaded +```js +// alternative à DOMContentLoaded document.onreadystatechange = function () { if (document.readyState == "interactive") { initApplication(); } -}</pre> +} +``` -<h3 id="readystatechange_comme_alternative_à_load">readystatechange comme alternative à load</h3> +### readystatechange comme alternative à load -<pre class="brush: js">// alternative à load +```js +// alternative à load document.onreadystatechange = function () { if (document.readyState == "complete") { initApplication(); } -}</pre> +} +``` -<h3 id="readystatechange_comme_event_listener_pour_insérer_ou_modifier_le_DOM_avant_DOMContentLoaded">readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded</h3> +### readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded -<pre class="brush: js">// Modification du document <body> dès que possible en utilisant un script externe +```js +// Modification du document <body> dès que possible en utilisant un script externe var bootstrap = function(evt){ if (evt.target.readyState === "interactive") { initLoader(); } else if (evt.target.readyState === "complete") { initApp(); } } document.addEventListener('readystatechange', bootstrap, false); -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécifications</th> - <th scope="col">Status</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Spécification initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div>{{Compat("api.Document.readyState")}}</div> - -<p>[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5).</p> - -<p>[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' <a href="https://bugs.jquery.com/ticket/12282">peut être notifié trop tôt</a> avant que le document soit entièrement analysé.</p> - -<p>[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'événement {{event("readystatechange")}}</li> - <li>L'événement {{event("DOMContentLoaded")}}</li> - <li>L'événement {{event("load")}}</li> -</ul> +``` + +## Spécifications + +| Spécifications | Status | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------- | +| {{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}} | {{Spec2('HTML5.1')}} | | +| {{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}} | {{Spec2('HTML5 W3C')}} | Spécification initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Document.readyState")}} + +\[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5). + +\[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' [peut être notifié trop tôt](https://bugs.jquery.com/ticket/12282) avant que le document soit entièrement analysé. + +\[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML. + +## Voir aussi + +- L'événement {{event("readystatechange")}} +- L'événement {{event("DOMContentLoaded")}} +- L'événement {{event("load")}} diff --git a/files/fr/web/api/document/readystatechange_event/index.md b/files/fr/web/api/document/readystatechange_event/index.md index 95c60dae30..c6f5652efe 100644 --- a/files/fr/web/api/document/readystatechange_event/index.md +++ b/files/fr/web/api/document/readystatechange_event/index.md @@ -4,64 +4,38 @@ slug: Web/API/Document/readystatechange_event translation_of: Web/API/Document/readystatechange_event original_slug: Web/Events/readystatechange --- -<p>{{ApiRef}}</p> - -<p>L'événement <code>readystatechange</code> est déclenché lorsque l'attribut <a href="/fr/docs/DOM/document.readyState"> <code>readyState</code> </a> d'un document a changé.</p> - -<h2 id="Information_générale">Information générale</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Specification</dt> - <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness">HTML5</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">Event</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Target</dt> - <dd style="margin: 0 0 0 120px;">Document</dd> - <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> - <dd style="margin: 0 0 0 120px;">None.</dd> -</dl> - -<h2 id="propriétés">propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> - -<h2 id="exemple">exemple</h2> - -<pre class="brush: js">document.readyState === "complete"; +{{ApiRef}} + +L'événement `readystatechange` est déclenché lorsque l'attribut [`readyState` ](/fr/docs/DOM/document.readyState)d'un document a changé. + +## Information générale + +- Specification + - : [HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness) +- Interface + - : Event +- Bubbles + - : No +- Cancelable + - : No +- Target + - : Document +- Default Action + - : None. + +## propriétés + +| Property | Type | Description | +| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | + +## exemple + +```js +document.readyState === "complete"; // true @@ -71,18 +45,16 @@ document.onreadystatechange = function () { initApplication(); } } -</pre> +``` -<h2 id="Navigateur_compatible">Navigateur compatible</h2> +## Navigateur compatible -<p>Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement <code><a href="/fr/docs/">DOMContentLoaded</a></code> (voir la note [2] de la section <a href="/fr/docs/Web/Events/DOMContentLoaded#Navigateurs_compatibles">Navigateurs compatibles</a>).</p> +Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement [`DOMContentLoaded`](/fr/docs/) (voir la note \[2] de la section [Navigateurs compatibles](/fr/docs/Web/Events/DOMContentLoaded#Navigateurs_compatibles)). -<h2 id="Les_événements_liés">Les événements liés</h2> +## Les événements liés -<ul> - <li>{{event("DOMContentLoaded")}}</li> - <li>{{event("readystatechange")}}</li> - <li>{{event("load")}}</li> - <li>{{event("beforeunload")}}</li> - <li>{{event("unload")}}</li> -</ul> +- {{event("DOMContentLoaded")}} +- {{event("readystatechange")}} +- {{event("load")}} +- {{event("beforeunload")}} +- {{event("unload")}} diff --git a/files/fr/web/api/document/referrer/index.md b/files/fr/web/api/document/referrer/index.md index 075f837b2a..4c87c8e53d 100644 --- a/files/fr/web/api/document/referrer/index.md +++ b/files/fr/web/api/document/referrer/index.md @@ -8,16 +8,20 @@ tags: - Reference translation_of: Web/API/Document/referrer --- -<div> - {{APIRef}}</div> -<h2 id="Syntax">Résumé</h2> -<p>Renvoie l'<a href="http://www.w3.org/Addressing/#background">URI</a> de la page de provenance.</p> -<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox"><var>string</var> = document.referrer; -</pre> -<h2 id="Notes">Notes</h2> -<p>La valeur est une chaîne de caractères vide si l'utilisateur est arrivé directement sur la page (pas grâce à un lien, mais, par exemple, via un marque-page). Étant donné que cette propriété ne retourne qu'une chaîne, elle ne vous donne pas un accès DOM à la page de provenance.</p> -<h2 id="Specification">Spécification</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140">DOM Level 2: referrer</a></li> -</ul> +{{APIRef}} + +## Résumé + +Renvoie l'[URI](http://www.w3.org/Addressing/#background) de la page de provenance. + +## Syntaxe + + string = document.referrer; + +## Notes + +La valeur est une chaîne de caractères vide si l'utilisateur est arrivé directement sur la page (pas grâce à un lien, mais, par exemple, via un marque-page). Étant donné que cette propriété ne retourne qu'une chaîne, elle ne vous donne pas un accès DOM à la page de provenance. + +## Spécification + +- [DOM Level 2: referrer](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140) diff --git a/files/fr/web/api/document/registerelement/index.md b/files/fr/web/api/document/registerelement/index.md index 8512a48f5f..37a87f3cfe 100644 --- a/files/fr/web/api/document/registerelement/index.md +++ b/files/fr/web/api/document/registerelement/index.md @@ -10,56 +10,52 @@ tags: - Référence(2) translation_of: Web/API/Document/registerElement --- -<p>{{APIRef("DOM")}} {{Deprecated_header}}</p> +{{APIRef("DOM")}} {{Deprecated_header}} -<div class="warning"> -<p><strong>Attention :</strong> document.registerElement() est déprécié en faveur de <a href="/fr/docs/Web/API/CustomElementRegistry/define">customElements.define()</a>.</p> -</div> +> **Attention :** document.registerElement() est déprécié en faveur de [customElements.define()](/fr/docs/Web/API/CustomElementRegistry/define). -<p>{{draft}}</p> +{{draft}} -<p>La méthode <code><strong>Document.registerElement()</strong></code> permet d'enregistrer un nouvel <a href="/fr/docs/Web/Web_Components/Custom_Elements">élément personnalisé</a> dans le navigateur, et retourne un constructeur pour ce nouvel élément.</p> +La méthode **`Document.registerElement()`** permet d'enregistrer un nouvel [élément personnalisé](/fr/docs/Web/Web_Components/Custom_Elements) dans le navigateur, et retourne un constructeur pour ce nouvel élément. -<div class="note"> -<p><strong>Note :</strong> Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir <a href="/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">Activer les Composants Web dans Firefox</a>.</p> -</div> +> **Note :** Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir [Activer les Composants Web dans Firefox](/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>constructeur</em> = document.registerElement(<em>nom-tag</em>, <em>options</em>);</pre> + var constructeur = document.registerElement(nom-tag, options); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><em>nom-tag</em></dt> - <dd>Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple <code>mon-tag</code>.</dd> - <dt><em>options {{optional_inline}}</em></dt> - <dd>Un objet définissant le prototype sur lequel se base l'élément personnalisé, ainsi qu'un tag existant à étendre.</dd> -</dl> +- _nom-tag_ + - : Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple `mon-tag`. +- _options {{optional_inline}}_ + - : Un objet définissant le prototype sur lequel se base l'élément personnalisé, ainsi qu'un tag existant à étendre. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Voici un exemple très simple :</p> +Voici un exemple très simple : -<pre class="brush: js">var Montag = document.registerElement('mon-tag'); -</pre> +```js +var Montag = document.registerElement('mon-tag'); +``` -<p>Le nouveau tag est désormais enregistré dans le navigateur. La variable <code>Montag</code> contient un constructeur que vous pouvez utiliser pour créer des éléments <code>mon-tag</code> dans le document de la façon suivante :</p> +Le nouveau tag est désormais enregistré dans le navigateur. La variable `Montag` contient un constructeur que vous pouvez utiliser pour créer des éléments `mon-tag` dans le document de la façon suivante : -<pre class="brush: js">document.body.appendChild(new Montag());</pre> +```js +document.body.appendChild(new Montag()); +``` -<p>Ceci insert un élément <code>mon-tag</code> vide qui sera visible si vous utilisez les outils de développement du navigateur. Il ne sera pas visible si vous utilisez la fonction de visualisation de la source du navigateur. Et il ne sera pas visible dans le navigateur tant que vous n'aurez pas ajouter du contenu au tag. Ce qui suit est un exemple d'ajout de contenu au nouveau tag :</p> +Ceci insert un élément `mon-tag` vide qui sera visible si vous utilisez les outils de développement du navigateur. Il ne sera pas visible si vous utilisez la fonction de visualisation de la source du navigateur. Et il ne sera pas visible dans le navigateur tant que vous n'aurez pas ajouter du contenu au tag. Ce qui suit est un exemple d'ajout de contenu au nouveau tag : -<pre class="brush: js">var montag = document.getElementsByTagName("mon-tag")[0]; +```js +var montag = document.getElementsByTagName("mon-tag")[0]; montag.textContent = "Je suis un élément mon-tag."; -</pre> +``` -<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2> +## Compatibilité avec les navigateurs -<p>{{Compat("api.Document.registerElement")}}</p> +{{Compat("api.Document.registerElement")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Web_Components/Custom_Elements">Éléments personnalisés</a></li> -</ul> +- [Éléments personnalisés](/fr/docs/Web/Web_Components/Custom_Elements) diff --git a/files/fr/web/api/document/releasecapture/index.md b/files/fr/web/api/document/releasecapture/index.md index bb7cafb599..4e07757b26 100644 --- a/files/fr/web/api/document/releasecapture/index.md +++ b/files/fr/web/api/document/releasecapture/index.md @@ -10,29 +10,24 @@ tags: - Souris translation_of: Web/API/Document/releaseCapture --- -<div>{{ ApiRef("DOM") }} {{gecko_minversion_header("2.0")}}</div> +{{ ApiRef("DOM") }} {{gecko_minversion_header("2.0")}} -<div> </div> +Libère la capture de la souris si elle est actuellement activée (_bouton gauche enfoncé_) sur un élément de ce document. L'activation de la capture de la souris sur un élément se fait en appelant {{domxref("element.setCapture()")}}. -<p>Libère la capture de la souris si elle est actuellement activée (<em>bouton gauche enfoncé</em>) sur un élément de ce document. L'activation de la capture de la souris sur un élément se fait en appelant {{domxref("element.setCapture()")}}.</p> +## Syntaxe -<h2 id="Syntax">Syntaxe</h2> + document.releaseCapture() -<pre class="syntaxbox">document.releaseCapture() -</pre> +Une fois la capture de la souris relâchée, les événements de souris ne seront plus dirigés vers l'élément sur lequel la capture est activée. -<p>Une fois la capture de la souris relâchée, les événements de souris ne seront plus dirigés vers l'élément sur lequel la capture est activée.</p> +## Exemple -<h2 id="Example">Exemple</h2> +Voir l'[exemple](/en-US/docs/Web/API/element.setCapture#Example) pour {{domxref("element.setCapture()")}}. -<p>Voir l'<a href="/en-US/docs/Web/API/element.setCapture#Example">exemple</a> pour {{domxref("element.setCapture()")}}.</p> +## Spécifications -<h2 id="Specification">Spécifications</h2> +Basé sur l'implémentation Internet Explorer. -<p>Basé sur l'implémentation Internet Explorer.</p> +## Voir aussi -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>{{domxref("element.setCapture()")}}</li> -</ul> +- {{domxref("element.setCapture()")}} diff --git a/files/fr/web/api/document/scripts/index.md b/files/fr/web/api/document/scripts/index.md index cf019c81d2..3f974461c6 100644 --- a/files/fr/web/api/document/scripts/index.md +++ b/files/fr/web/api/document/scripts/index.md @@ -9,47 +9,36 @@ tags: - Reference translation_of: Web/API/Document/scripts --- -<div>{{ApiRef}}</div> +{{ApiRef}} -<p>Retourne une liste des scripts (éléments {{HTMLElement("script")}}) présents dans le document. L'objet retourné est une liste du type {{domxref("HTMLCollection")}}.</p> +Retourne une liste des scripts (éléments {{HTMLElement("script")}}) présents dans le document. L'objet retourné est une liste du type {{domxref("HTMLCollection")}}. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var <var>scriptList</var> = document.scripts; -</pre> +```js +var scriptList = document.scripts; +``` -<p>La liste <code>scriptList</code> est un objet {{domxref("HTMLCollection")}} qu'on peut utiliser comme un tableau pour accéder aux éléments qu'elle contient.</p> +La liste `scriptList` est un objet {{domxref("HTMLCollection")}} qu'on peut utiliser comme un tableau pour accéder aux éléments qu'elle contient. -<h2 id="Example">Exemple</h2> +## Exemple -<p>Cet exemple détecte la présence d'éléments {{HTMLElement("script")}} dans le document.</p> +Cet exemple détecte la présence d'éléments {{HTMLElement("script")}} dans le document. -<pre class="brush:js">var scripts = document.scripts; +```js +var scripts = document.scripts; if (scripts.length) { alert("This page has scripts!"); } -</pre> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-document-scripts', 'Document.scripts')}}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<div>{{Compat("api.Document.scripts")}}</div> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('HTML WHATWG', '#dom-document-scripts', 'Document.scripts')}} | {{ Spec2('HTML WHATWG') }} | | + +## Compatibilité des navigateurs + +{{Compat("api.Document.scripts")}} diff --git a/files/fr/web/api/document/scroll_event/index.md b/files/fr/web/api/document/scroll_event/index.md index 21c5ba592e..47a92ef23c 100644 --- a/files/fr/web/api/document/scroll_event/index.md +++ b/files/fr/web/api/document/scroll_event/index.md @@ -9,94 +9,66 @@ tags: - requestAnimationFrame translation_of: Web/API/Document/scroll_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L’évènement <strong><code>scroll</code></strong> (défilement) est émis lorsque l’on fait défiler le document ou un élément.</p> +L’évènement **`scroll`** (défilement) est émis lorsque l’on fait défiler le document ou un élément. -<h2 id="Informations_générales">Informations générales</h2> +## Informations générales <table class="properties"> - <tbody> - <tr> - <th>Bouillonne</th> - <td>Pas sur les éléments, mais bouillonne vers la defaultView si émis sur le document</td> - </tr> - <tr> - <th>Annulable</th> - <td>Non</td> - </tr> - <tr> - <th>Interface</th> - <td>{{domxref("UIEvent")}}</td> - </tr> - <tr> - <th>Cible</th> - <td>DefaultView, {{domxref("Document")}}, {{domxref("Element")}}</td> - </tr> - <tr> - <th>Action par défaut</th> - <td>Aucune</td> - </tr> - </tbody> + <tbody> + <tr> + <th>Bouillonne</th> + <td> + Pas sur les éléments, mais bouillonne vers la defaultView si émis sur le + document + </td> + </tr> + <tr> + <th>Annulable</th> + <td>Non</td> + </tr> + <tr> + <th>Interface</th> + <td>{{domxref("UIEvent")}}</td> + </tr> + <tr> + <th>Cible</th> + <td> + DefaultView, {{domxref("Document")}}, + {{domxref("Element")}} + </td> + </tr> + <tr> + <th>Action par défaut</th> + <td>Aucune</td> + </tr> + </tbody> </table> -<div class="note"> -<p><strong>Note :</strong> Sur iOS UIWebViews, les évènements <code>scroll</code> ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. Voir <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>. Safari et WKWebViews ne sont pas affectés par ce bogue.</p> -</div> +> **Note :** Sur iOS UIWebViews, les évènements `scroll` ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. Voir [Bootstrap issue #16202](https://github.com/twbs/bootstrap/issues/16202). Safari et WKWebViews ne sont pas affectés par ce bogue. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>La cible de l’évènement (la plus haute dans l’arbre DOM).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Le type d’évènement.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{domxref("Boolean")}}</td> - <td>Si l’évènement bouillonne ou non.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{domxref("Boolean")}}</td> - <td>Si l’évènement est annulable ou non.</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td>{{domxref("WindowProxy")}}</td> - <td>{{domxref("Document.defaultView")}} (objet <code>window</code> du document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - </tbody> -</table> +| Propriété | Type | Description | +| ------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------- | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | La cible de l’évènement (la plus haute dans l’arbre DOM). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | Le type d’évènement. | +| `bubbles` {{readonlyInline}} | {{domxref("Boolean")}} | Si l’évènement bouillonne ou non. | +| `cancelable` {{readonlyInline}} | {{domxref("Boolean")}} | Si l’évènement est annulable ou non. | +| `view` {{readonlyInline}} | {{domxref("WindowProxy")}} | {{domxref("Document.defaultView")}} (objet `window` du document) | +| `detail` {{readonlyInline}} | `long` (`float`) | 0. | -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="Temporisation_des_évènements_scroll">Temporisation des évènements scroll</h3> +### Temporisation des évènements scroll -<p>Comme les évènements <code>scroll</code> peuvent être émis à une fréquence élevée, le gestionnaire d’évènements ne devrait pas effectuer des opérations coûteuses en termes de puissance de calcul, telles que des modification du DOM. À la place, il est recommandé de temporiser l’évènement en utilisant {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("window.setTimeout()", "setTimeout()")}} ou un {{domxref("CustomEvent")}}, comme suit.</p> +Comme les évènements `scroll` peuvent être émis à une fréquence élevée, le gestionnaire d’évènements ne devrait pas effectuer des opérations coûteuses en termes de puissance de calcul, telles que des modification du DOM. À la place, il est recommandé de temporiser l’évènement en utilisant {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("window.setTimeout()", "setTimeout()")}} ou un {{domxref("CustomEvent")}}, comme suit. -<p>Notez, cependant, que les évènements d’interface utilisateur et les frames d’animation sont émises à peu près à la même fréquence, et ainsi l’optimisation qui suit est souvent superflue. Cet exemple optimise l’évènement <code>scroll</code> avec <code>requestAnimationFrame</code>.</p> +Notez, cependant, que les évènements d’interface utilisateur et les frames d’animation sont émises à peu près à la même fréquence, et ainsi l’optimisation qui suit est souvent superflue. Cet exemple optimise l’évènement `scroll` avec `requestAnimationFrame`. -<pre class="brush: js">// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/ +```js +// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/ var derniere_position_de_scroll_connue = 0; var ticking = false; @@ -116,33 +88,32 @@ window.addEventListener('scroll', function(e) { } ticking = true; -});</pre> +}); +``` -<h3 id="Autres_exemples">Autres exemples</h3> +### Autres exemples -<p>Pour plus d’exemples similaires, voir l’évènement <a href="/en-US/docs/Web/Events/resize#Example">resize</a>.</p> +Pour plus d’exemples similaires, voir l’évènement [resize](/en-US/docs/Web/Events/resize#Example). -<h2 id="Spécifications">Spécifications</h2> +## Spécifications <table class="standard-table"> - <tbody> - <tr> - <td>Spécification</td> - <td>État</td> - </tr> - <tr> - <td>{{SpecName('CSSOM View', '#scrolling-events')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td>Spécification</td> + <td>État</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#scrolling-events')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + </tr> + </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.scroll_event")}}</p> +{{Compat("api.Document.scroll_event")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("GlobalEventHandlers.onscroll")}}</li> -</ul> +- {{domxref("GlobalEventHandlers.onscroll")}} diff --git a/files/fr/web/api/document/selectedstylesheetset/index.md b/files/fr/web/api/document/selectedstylesheetset/index.md index 270c7d8821..8ec18bf3a4 100644 --- a/files/fr/web/api/document/selectedstylesheetset/index.md +++ b/files/fr/web/api/document/selectedstylesheetset/index.md @@ -9,47 +9,39 @@ tags: - Propriétés translation_of: Web/API/Document/selectedStyleSheetSet --- -<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p> +{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }} -<p>Indique le nom du jeu de feuilles de styles actuellement utilisé.</p> +Indique le nom du jeu de feuilles de styles actuellement utilisé. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>currentStyleSheetSet</em> = document.selectedStyleSheetSet + currentStyleSheetSet = document.selectedStyleSheetSet -document.selectedStyleSheet = <em>newStyleSheetSet</em> -</pre> + document.selectedStyleSheet = newStyleSheetSet -<p>En retour, <code>currentStyleSheetSet</code> indique le nom du jeu de feuilles de styles en cours d'utilisation. Vous pouvez aussi définir celui-ci en utilisant cette propriété.</p> +En retour, `currentStyleSheetSet` indique le nom du jeu de feuilles de styles en cours d'utilisation. Vous pouvez aussi définir celui-ci en utilisant cette propriété. -<p>La définition de la valeur de cette propriété équivaut à appeler {{ domxref("document.enableStyleSheetsForSet()") }} avec la valeur de <code>currentStyleSheetSet</code>, puis de définir la valeur de <code>lastStyleSheetSet</code> sur cette valeur.</p> +La définition de la valeur de cette propriété équivaut à appeler {{ domxref("document.enableStyleSheetsForSet()") }} avec la valeur de `currentStyleSheetSet`, puis de définir la valeur de `lastStyleSheetSet` sur cette valeur. -<div class="note"> - <p><strong>Note :</strong> Cette valeur d'attribut est directe : sa modification affectera la valeur de l'attribut.</p> -</div> +> **Note :** Cette valeur d'attribut est directe : sa modification affectera la valeur de l'attribut. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush: js">console.log("Current style sheet set: " + document.selectedStyleSheetSet); +```js +console.log("Current style sheet set: " + document.selectedStyleSheetSet); document.selectedStyleSheetSet = "Some other style sheet"; -</pre> +``` -<div class="note"> - <p><strong>Note :</strong> Cet exemple vous aidera à comprendre la différence de comportement entre la définition de la valeur de <code>selectedStyleSheetSet</code> et l'appel de {{ domxref("document.enableStyleSheetsForSet()") }}.</p> -</div> +> **Note :** Cet exemple vous aidera à comprendre la différence de comportement entre la définition de la valeur de `selectedStyleSheetSet` et l'appel de {{ domxref("document.enableStyleSheetsForSet()") }}. -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{ domxref("document.lastStyleSheetSet") }}</li> - <li>{{ domxref("document.preferredStyleSheetSet") }}</li> - <li>{{ domxref("document.styleSheetSets") }}</li> - <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li> -</ul> +- {{ domxref("document.lastStyleSheetSet") }} +- {{ domxref("document.preferredStyleSheetSet") }} +- {{ domxref("document.styleSheetSets") }} +- {{ domxref("document.enableStyleSheetsForSet()") }} -<h2 id="Specification">Spécifications</h2> +## Spécifications -<ul> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> -</ul> +- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) diff --git a/files/fr/web/api/document/stylesheets/index.md b/files/fr/web/api/document/stylesheets/index.md index 44b8d92e15..ab07cc650e 100644 --- a/files/fr/web/api/document/stylesheets/index.md +++ b/files/fr/web/api/document/stylesheets/index.md @@ -5,53 +5,27 @@ translation_of: Web/API/DocumentOrShadowRoot/styleSheets translation_of_original: Web/API/Document/styleSheets original_slug: Web/API/DocumentOrShadowRoot/styleSheets --- -<div>{{APIRef}}</div> - -<div>La propriété <strong><code>Document.styleSheets </code></strong>est en lecture seule et retourne une liste {{domxref("StyleSheetList")}} d'objets {{domxref("StyleSheet")}}, qui font référence à l'ensemble des feuilles de style contenues ou embarquées dans le document.</div> - -<div> </div> - -<h2 id="Syntax">Syntaxe</h2> - -<pre class="syntaxbox">var <var>styleSheetList</var> = <em>document</em>.styleSheets; -</pre> - -<p>L'objet retourné est une liste {{domxref("StyleSheetList")}}.</p> - -<p>Il s'agit d'une collection ordonnée d'objets {{domxref("StyleSheet")}}. <code><em>styleSheetList</em>.item(<em>index</em>)</code> ou <code><em>styleSheetList</em>{{ mediawiki.External('<em>index</em>') }}</code> retourne un seul objet stylesheet par son <code>index </code>(<code>index</code> débute par 0).</p> - -<h2 id="Specification">Spécification</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - </tbody> - <tbody> - <tr> - <td>{{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}}</td> - <td>{{Spec2('CSSOM')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}}</td> - <td>{{Spec2('DOM2 Style')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>{{Link("/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information")}}</li> -</ul> - -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">DOM Level 2 Style: styleSheets</a></li> -</ul> +{{APIRef}}La propriété **`Document.styleSheets `**est en lecture seule et retourne une liste {{domxref("StyleSheetList")}} d'objets {{domxref("StyleSheet")}}, qui font référence à l'ensemble des feuilles de style contenues ou embarquées dans le document. + +## Syntaxe + + var styleSheetList = document.styleSheets; + +L'objet retourné est une liste {{domxref("StyleSheetList")}}. + +Il s'agit d'une collection ordonnée d'objets {{domxref("StyleSheet")}}. `styleSheetList.item(index)` ou `styleSheetList{{ mediawiki.External('<em>index</em>') }}` retourne un seul objet stylesheet par son `index `(`index` débute par 0). + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}} | {{Spec2('CSSOM')}} | | +| {{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}} | {{Spec2('DOM2 Style')}} | | + +## Voir aussi + +- {{Link("/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information")}} + +<!----> + +- [DOM Level 2 Style: styleSheets](http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets) diff --git a/files/fr/web/api/document/stylesheetsets/index.md b/files/fr/web/api/document/stylesheetsets/index.md index f584192df8..5f8f8eb146 100644 --- a/files/fr/web/api/document/stylesheetsets/index.md +++ b/files/fr/web/api/document/stylesheetsets/index.md @@ -9,50 +9,47 @@ tags: - Propriétés translation_of: Web/API/Document/styleSheetSets --- -<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}</div> +{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}} -<p>Renvoie une liste active de tous les jeux de feuilles de styles actuellement disponibles.</p> +Renvoie une liste active de tous les jeux de feuilles de styles actuellement disponibles. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>sets</em> = document.styleSheetSets -</pre> + sets = document.styleSheetSets -<p>En retour, <code>sets</code> est une liste de jeux de feuilles de styles disponibles.</p> +En retour, `sets` est une liste de jeux de feuilles de styles disponibles. -<h2 id="Example">Exemple</h2> +## Exemple -<p>Étant donné un élément {{HTMLElement("ul")}} (liste) avec l'ID "sheetList", vous pouvez le remplir avec tous les noms de tous les jeux de feuilles de styles disponibles avec un code comme celui-ci :</p> +Étant donné un élément {{HTMLElement("ul")}} (liste) avec l'ID "sheetList", vous pouvez le remplir avec tous les noms de tous les jeux de feuilles de styles disponibles avec un code comme celui-ci : -<pre class="brush:js">var list = document.getElementById("sheetList"); +```js +var list = document.getElementById("sheetList"); var sheets = document.styleSheetSets; list.innerHTML = ""; -for (var i = 0; i < sheets.length; i++) { +for (var i = 0; i < sheets.length; i++) { var item = document.createElement("li"); item.innerHTML = sheets[i]; list.appendChild(item); -}</pre> +} +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>La liste des jeux de feuilles de styles disponibles est construite par énumération de toutes les feuilles de styles disponibles pour le document, dans l'ordre dans lequel elles sont répertoriées dans l'attribut {{domxref("document.styleSheets")}}, en ajoutant le <code>title</code> (<em>titre</em>) de chacune de celles en ayant un. Les doublons sont supprimés de la liste (en utilisant une comparaison sensible à la casse).</p> +La liste des jeux de feuilles de styles disponibles est construite par énumération de toutes les feuilles de styles disponibles pour le document, dans l'ordre dans lequel elles sont répertoriées dans l'attribut {{domxref("document.styleSheets")}}, en ajoutant le `title` (_titre_) de chacune de celles en ayant un. Les doublons sont supprimés de la liste (en utilisant une comparaison sensible à la casse). -<h2 id="Specification">Spécifications</h2> +## Spécifications -<ul> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5 : Alternate Style Sheets</a></li> -</ul> +- [HTML5 : Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Stylesheet")}}</li> - <li>{{domxref("document.styleSheets")}}</li> - <li>{{domxref("document.lastStyleSheetSet")}}</li> - <li>{{domxref("document.preferredStyleSheetSet")}}</li> - <li>{{domxref("document.selectedStyleSheetSet")}}</li> - <li>{{domxref("document.enableStyleSheetsForSet()")}}</li> -</ul> +- {{domxref("Stylesheet")}} +- {{domxref("document.styleSheets")}} +- {{domxref("document.lastStyleSheetSet")}} +- {{domxref("document.preferredStyleSheetSet")}} +- {{domxref("document.selectedStyleSheetSet")}} +- {{domxref("document.enableStyleSheetsForSet()")}} diff --git a/files/fr/web/api/document/title/index.md b/files/fr/web/api/document/title/index.md index 8744193915..abcabe2e9a 100644 --- a/files/fr/web/api/document/title/index.md +++ b/files/fr/web/api/document/title/index.md @@ -3,52 +3,49 @@ title: Document.title slug: Web/API/Document/title translation_of: Web/API/Document/title --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>Obtient ou défini le titre de la page.</p> +Obtient ou défini le titre de la page. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>var docTitle</em> = <em>document</em>.title; -</pre> + var docTitle = document.title; -<p><code>title</code> est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par <code>document.title</code>, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous).</p> +`title` est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par `document.title`, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous). -<pre class="syntaxbox"><em>document</em>.title = <em>newTitle</em>; -</pre> + document.title = newTitle; -<p><code>newTitle</code> sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de <code>document.title</code>, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML <code><title></code>).</p> +`newTitle` sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de `document.title`, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML `<title>`). -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush:html"><!DOCTYPE html> -<html> -<head> -<title>Hello World!</title> -</head> -<body> +```html +<!DOCTYPE html> +<html> +<head> +<title>Hello World!</title> +</head> +<body> -<script> +<script> alert(document.title); // Affiche "Hello World!" document.title = "Goodbye World!"; alert(document.title); // Affiche "Goodbye World!" -</script> +</script> -</body> -</html> -</pre> +</body> +</html> +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko.</p> +Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko. -<p>Pour les documents HTML, la valeur initiale de <code>document.title</code> est le texte de la balise <code><title></code>. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL.</p> +Pour les documents HTML, la valeur initiale de `document.title` est le texte de la balise `<title>`. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL. -<p>En XUL, accéder à <code>document.title</code> avant que le document soit complètement chargé a des conséquences variables (<code>document.title</code> peut retourner une chaîne vide et définir <code>document.title</code> peut n'avoir aucun effet).</p> +En XUL, accéder à `document.title` avant que le document soit complètement chargé a des conséquences variables (`document.title` peut retourner une chaîne vide et définir `document.title` peut n'avoir aucun effet). -<h2 id="Specification">Spécification</h2> +## Spécification -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-18446827">DOM Level 2 HTML: document.title</a></li> - <li><a href="http://www.whatwg.org/html/#document.title">HTML5</a></li> -</ul> +- [DOM Level 2 HTML: document.title](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-18446827) +- [HTML5](http://www.whatwg.org/html/#document.title) diff --git a/files/fr/web/api/document/tooltipnode/index.md b/files/fr/web/api/document/tooltipnode/index.md index 13c0927cff..b5f14bb18a 100644 --- a/files/fr/web/api/document/tooltipnode/index.md +++ b/files/fr/web/api/document/tooltipnode/index.md @@ -9,17 +9,16 @@ tags: - XUL translation_of: Web/API/Document/tooltipNode --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>{{draft}}</p> +{{draft}} -<p>Renvoie le noeud qui est la cible de l'actuel {{ XULElem("tooltip") }}.</p> +Renvoie le noeud qui est la cible de l'actuel {{ XULElem("tooltip") }}. -<h2 id="Usage">Syntaxe</h2> +## Syntaxe -<pre class="eval">document.tooltipNode; -</pre> + document.tooltipNode; -<h2 id="Specification">Spécification</h2> +## Spécification -<p>XUL-specific method. Not part of any specification. Defined in {{ Source("dom/public/idl/xul/nsIDOMXULDocument.idl#59", "nsIDOMXULDocument.idl") }}.</p> +XUL-specific method. Not part of any specification. Defined in {{ Source("dom/public/idl/xul/nsIDOMXULDocument.idl#59", "nsIDOMXULDocument.idl") }}. diff --git a/files/fr/web/api/document/touchend_event/index.md b/files/fr/web/api/document/touchend_event/index.md index a12b93005e..071d7824f2 100644 --- a/files/fr/web/api/document/touchend_event/index.md +++ b/files/fr/web/api/document/touchend_event/index.md @@ -7,119 +7,53 @@ tags: - events translation_of: Web/API/Document/touchend_event --- -<div>{{APIRef}}</div> - -<p>L'événement <code>touchend</code> est déclenché quand un point de contact est retiré de la surface.</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="http://w3c.github.io/touch-events/#event-touchend">Touch Events</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Target</dt> - <dd style="margin: 0 0 0 120px;">Document, Element</dd> - <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> - <dd style="margin: 0 0 0 120px;">indéfinie</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>EventTarget</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>DOMString</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>Boolean</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>Boolean</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td>WindowProxy</td> - <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td>long (float)</td> - <td>0.</td> - </tr> - <tr> - <td><code>touches</code> {{readonlyInline}}</td> - <td>TouchList</td> - <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact currently touching the surface.</td> - </tr> - <tr> - <td><code>targetTouches</code> {{readonlyInline}}</td> - <td>TouchList</td> - <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact that is touching the surface and started on the element that is the target of the current event.</td> - </tr> - <tr> - <td><code>changedTouches</code> {{readonlyInline}}</td> - <td>TouchList</td> - <td>A list of <a href="/en-US/docs/DOM/Touch"><code>Touch</code></a>es for every point of contact which contributed to the event.<br> - For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.</td> - </tr> - <tr> - <td><code>ctrlKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>shiftKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>altKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>metaKey</code> {{readonlyInline}}</td> - <td>boolean</td> - <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> - </tr> - </tbody> -</table> - -<h2 id="Exemples">Exemples</h2> - -<p>Des exemples d'implémentation de cet événement sont disponibles : <a href="/en-US/docs/DOM/Touch_events">Touch events</a>.</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Document.touchend_event")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{ domxref("GlobalEventHandlers.ontouchleave","ontouchleave")}}</li> - <li>{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}</li> - <li>{{ domxref("GlobalEventHandlers.ontouchmove","ontouchmove")}}</li> -</ul> +{{APIRef}} + +L'événement `touchend` est déclenché quand un point de contact est retiré de la surface. + +## Informations générales + +- Spécification + - : [Touch Events](http://w3c.github.io/touch-events/#event-touchend) +- Interface + - : {{domxref("TouchEvent")}} +- Bubbles + - : Oui +- Cancelable + - : Oui +- Target + - : Document, Element +- Default Action + - : indéfinie + +## Propriétés + +| Property | Type | Description | +| ----------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `target` {{readonlyInline}} | EventTarget | The event target (the topmost target in the DOM tree). | +| `type` {{readonlyInline}} | DOMString | The type of event. | +| `bubbles` {{readonlyInline}} | Boolean | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | Boolean | Whether the event is cancellable or not. | +| `view` {{readonlyInline}} | WindowProxy | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document) | +| `detail` {{readonlyInline}} | long (float) | 0. | +| `touches` {{readonlyInline}} | TouchList | A list of [`Touch`](/en/DOM/Touch)es for every point of contact currently touching the surface. | +| `targetTouches` {{readonlyInline}} | TouchList | A list of [`Touch`](/en/DOM/Touch)es for every point of contact that is touching the surface and started on the element that is the target of the current event. | +| `changedTouches` {{readonlyInline}} | TouchList | A list of [`Touch`](/en-US/docs/DOM/Touch)es for every point of contact which contributed to the event. For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface. | +| `ctrlKey` {{readonlyInline}} | boolean | `true` if the control key was down when the event was fired. `false` otherwise. | +| `shiftKey` {{readonlyInline}} | boolean | `true` if the shift key was down when the event was fired. `false` otherwise. | +| `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. | + +## Exemples + +Des exemples d'implémentation de cet événement sont disponibles : [Touch events](/en-US/docs/DOM/Touch_events). + +## Compatibilité des navigateurs + +{{Compat("api.Document.touchend_event")}} + +## Voir aussi + +- {{ domxref("GlobalEventHandlers.ontouchleave","ontouchleave")}} +- {{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}} +- {{ domxref("GlobalEventHandlers.ontouchmove","ontouchmove")}} diff --git a/files/fr/web/api/document/transitionend_event/index.md b/files/fr/web/api/document/transitionend_event/index.md index 55916580ec..c962feeb7d 100644 --- a/files/fr/web/api/document/transitionend_event/index.md +++ b/files/fr/web/api/document/transitionend_event/index.md @@ -3,81 +3,76 @@ title: 'Document: évènement transitionend' slug: Web/API/Document/transitionend_event translation_of: Web/API/Document/transitionend_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L’évènement <strong><code>transitionend</code></strong> est émis quand une <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">transition CSS</a> a terminé. Dans le cas où une transition est supprimée avant d’avoir terminé, comme lorsqu’une {{cssxref("transition-property")}} est supprimée ou lorsque {{cssxref("display")}} reçoit la valeur <code>none</code>, l’évènement n’est pas généré.</p> +L’évènement **`transitionend`** est émis quand une [transition CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS) a terminé. Dans le cas où une transition est supprimée avant d’avoir terminé, comme lorsqu’une {{cssxref("transition-property")}} est supprimée ou lorsque {{cssxref("display")}} reçoit la valeur `none`, l’évènement n’est pas généré. <table class="properties"> - <tbody> - <tr> - <th>Bouillonne</th> - <td>Oui</td> - </tr> - <tr> - <th>Est annulable</th> - <td>Oui</td> - </tr> - <tr> - <th>Interface</th> - <td>{{domxref("TransitionEvent")}}</td> - </tr> - <tr> - <th>Propriété gestionnaire d’évènement</th> - <td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code></td> - </tr> - </tbody> + <tbody> + <tr> + <th>Bouillonne</th> + <td>Oui</td> + </tr> + <tr> + <th>Est annulable</th> + <td>Oui</td> + </tr> + <tr> + <th>Interface</th> + <td>{{domxref("TransitionEvent")}}</td> + </tr> + <tr> + <th>Propriété gestionnaire d’évènement</th> + <td> + <code + ><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend" + >ontransitionend</a + ></code + > + </td> + </tr> + </tbody> </table> -<p>L’évènement <code>transitionend</code> est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement <code>transitioncancel</code> est émis, l’évènement <code>transitionend</code> ne se produira pas.</p> +L’évènement `transitionend` est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement `transitioncancel` est émis, l’évènement `transitionend` ne se produira pas. -<p>La cible originale pour cet évènement est l’<code><a href="/en-US/docs/Web/API/Element">Element</a></code> sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l’interface <code>Window</code> pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page <a href="/fr/docs/Web/Events/transitionend">HTMLElement: transitionend</a>.</p> +La cible originale pour cet évènement est l’[`Element`](/en-US/docs/Web/API/Element) sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l’interface `Window` pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page [HTMLElement: transitionend](/fr/docs/Web/Events/transitionend). -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Le code suivant ajoute un gestionnaire sur l’évènement <code>transitionend</code> :</p> +Le code suivant ajoute un gestionnaire sur l’évènement `transitionend` : -<pre class="brush: js">document.addEventListener('transitionend', () => { +```js +document.addEventListener('transitionend', () => { console.log('Transition terminée'); -});</pre> +}); +``` -<p>La même chose, mais en utilisant la propriété <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code> au lieu de <code>addEventListener()</code> :</p> +La même chose, mais en utilisant la propriété [`ontransitionend`](/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend) au lieu de `addEventListener()` : -<pre class="brush: js">document.ontransitionend = () => { +```js +document.ontransitionend = () => { console.log('Transition terminée'); -};</pre> - -<p><a href="/en-US/docs/Web/API/HTMLElement/transitionend_event#Live_example">Voir un exemple en direct sur cet évènement.</a></p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +}; +``` + +[Voir un exemple en direct sur cet évènement.](/en-US/docs/Web/API/HTMLElement/transitionend_event#Live_example) + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.transitionend_event")}}</p> +{{Compat("api.Document.transitionend_event")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>Le gestionnaire d’évènement {{domxref("GlobalEventHandlers.ontransitionend")}}</li> - <li>L’interface {{domxref("TransitionEvent")}}</li> - <li>Les propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li> - <li>Des évènements associés : <code><a href="/en-US/docs/Web/API/Document/transitionrun_event">transitionrun</a></code>, <code><a href="/en-US/docs/Web/API/Document/transitionstart_event">transitionstart</a></code>, <code><a href="/en-US/docs/Web/API/Document/transitioncancel_event">transitioncancel</a></code></li> - <li>Cet évènement sur les cibles <code><a href="/en-US/docs/Web/API/HTMLElement">HTMLElement</a></code> : <code><a href="/en-US/docs/Web/API/HTMLElement/transitionend_event">transitionend</a></code></li> - <li>Cet évènement sur les cibles <code><a href="/en-US/docs/Web/API/Window">Window</a></code> : <code><a href="/en-US/docs/Web/API/Window/transitionend_event">transitionend</a></code></li> -</ul> +- Le gestionnaire d’évènement {{domxref("GlobalEventHandlers.ontransitionend")}} +- L’interface {{domxref("TransitionEvent")}} +- Les propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}} +- Des évènements associés : [`transitionrun`](/en-US/docs/Web/API/Document/transitionrun_event), [`transitionstart`](/en-US/docs/Web/API/Document/transitionstart_event), [`transitioncancel`](/en-US/docs/Web/API/Document/transitioncancel_event) +- Cet évènement sur les cibles [`HTMLElement`](/en-US/docs/Web/API/HTMLElement) : [`transitionend`](/en-US/docs/Web/API/HTMLElement/transitionend_event) +- Cet évènement sur les cibles [`Window`](/en-US/docs/Web/API/Window) : [`transitionend`](/en-US/docs/Web/API/Window/transitionend_event) diff --git a/files/fr/web/api/document/url/index.md b/files/fr/web/api/document/url/index.md index 1b599ff794..454dde3afb 100644 --- a/files/fr/web/api/document/url/index.md +++ b/files/fr/web/api/document/url/index.md @@ -3,22 +3,21 @@ title: Document.URL slug: Web/API/Document/URL translation_of: Web/API/Document/URL --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>Retourne l'<code><strong>URL</strong></code> du {{domxref("Document")}} sous forme de string (lecture seule).</p> +Retourne l'**`URL`** du {{domxref("Document")}} sous forme de string (lecture seule). -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var <em>string</em> = document.URL -</pre> +```js +var string = document.URL +``` -<h2 id="Specification">Exemple</h2> +## Exemple -<pre><code>var currentURL = document.URL; -alert(currentURL);</code></pre> + var currentURL = document.URL; + alert(currentURL); -<h2 id="Specification">Specification</h2> +## Specification -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM Level 2 HTML: URL</a></li> -</ul> +- [DOM Level 2 HTML: URL](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437) diff --git a/files/fr/web/api/document/visibilitystate/index.md b/files/fr/web/api/document/visibilitystate/index.md index d8ea3d1139..51d43852c7 100644 --- a/files/fr/web/api/document/visibilitystate/index.md +++ b/files/fr/web/api/document/visibilitystate/index.md @@ -9,49 +9,38 @@ tags: - Visibilité translation_of: Web/API/Document/visibilityState --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>La propriété en lecture seule <code><strong>Document.visibilityState</strong></code> renvoie la visibilité du {{domxref('document')}}, c'est-à-dire informe si l'élément est visible dans son contexte. Il est utile de savoir si le document est en arrière-plan ou sur un onglet invisible ou seulement chargé pour le pré-rendu. Les valeurs possibles sont :</p> +La propriété en lecture seule **`Document.visibilityState`** renvoie la visibilité du {{domxref('document')}}, c'est-à-dire informe si l'élément est visible dans son contexte. Il est utile de savoir si le document est en arrière-plan ou sur un onglet invisible ou seulement chargé pour le pré-rendu. Les valeurs possibles sont : -<ul> - <li><strong><code>'visible'</code></strong> : le contenu de la page peut être au-moins partiellement visible. Dans la pratique, cela signifie que la page est l'onglet de premier plan d'une fenêtre non réduite.</li> - <li><strong><code>'hidden</code>'</strong> (<em>caché</em>) : le contenu de la page n'est pas visible pour l'utilisateur. Dans la pratique , cela signifie que le document est soit dans un onglet d'arrière-plan ou une partie d'une fenêtre réduite, soit que le verrouillage de l'écran du système d'exploitation est actif.</li> - <li><strong><code>'prerender'</code></strong> (<em>prérendu</em>) : le contenu de la page est prérendu et n'est pas visible par l'utilisateur (considéré caché aux fins de <code><a href="/en-US/docs/Web/API/Document/hidden">document.hidden</a></code>). Le document peut démarrer dans cet état mais ne changera jamais à partir d'une autre valeur. Note : le support du navigateur est facultatif.</li> - <li><strong><code>'unloaded</code>'</strong> (<em>déchargé</em>) : la page est en train d'être déchargée de la mémoire. Remarque : le support du navigateur est facultatif.</li> -</ul> +- **`'visible'`** : le contenu de la page peut être au-moins partiellement visible. Dans la pratique, cela signifie que la page est l'onglet de premier plan d'une fenêtre non réduite. +- **`'hidden`'** (_caché_) : le contenu de la page n'est pas visible pour l'utilisateur. Dans la pratique , cela signifie que le document est soit dans un onglet d'arrière-plan ou une partie d'une fenêtre réduite, soit que le verrouillage de l'écran du système d'exploitation est actif. +- **`'prerender'`** (_prérendu_) : le contenu de la page est prérendu et n'est pas visible par l'utilisateur (considéré caché aux fins de [`document.hidden`](/en-US/docs/Web/API/Document/hidden)). Le document peut démarrer dans cet état mais ne changera jamais à partir d'une autre valeur. Note : le support du navigateur est facultatif. +- **`'unloaded`'** (_déchargé_) : la page est en train d'être déchargée de la mémoire. Remarque : le support du navigateur est facultatif. -<p>Lorsque la valeur de cette propriété change, l'évènement {{event('visibilitychange')}} est envoyé au {{domxref("Document")}}.</p> +Lorsque la valeur de cette propriété change, l'évènement {{event('visibilitychange')}} est envoyé au {{domxref("Document")}}. -<p>L'utilisation typique de ceci peut être d'empêcher le téléchargement de certains éléments actifs lorsque le document est uniquement prérendu, ou d'arrêter certaines activités lorsque le document est en arrière-plan ou réduit au minimum.</p> +L'utilisation typique de ceci peut être d'empêcher le téléchargement de certains éléments actifs lorsque le document est uniquement prérendu, ou d'arrêter certaines activités lorsque le document est en arrière-plan ou réduit au minimum. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>string</em> = document.visibilityState</pre> + var string = document.visibilityState -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush:js">document.addEventListener("visibilitychange", function() { +```js +document.addEventListener("visibilitychange", function() { console.log( document.visibilityState ); // Modifier le comportement... -});</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Spécification</th> - <th>Statut</th> - <th>Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Page Visibility API','#dom-document-visibilitystate', 'Document.visibilityState')}}</td> - <td>{{Spec2('Page Visibility API')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Document.visibilityState")}}</p> +}); +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('Page Visibility API','#dom-document-visibilitystate', 'Document.visibilityState')}} | {{Spec2('Page Visibility API')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Document.visibilityState")}} diff --git a/files/fr/web/api/document/width/index.md b/files/fr/web/api/document/width/index.md index 8be64c2109..bd02da9607 100644 --- a/files/fr/web/api/document/width/index.md +++ b/files/fr/web/api/document/width/index.md @@ -3,43 +3,38 @@ title: Document.width slug: Web/API/Document/width translation_of: Web/API/Document/width --- -<div>{{APIRef("DOM")}} {{Obsolete_header}}</div> +{{APIRef("DOM")}} {{Obsolete_header}} -<div class="note"> -<p><strong>Note :</strong> À partir de {{Gecko("6.0")}},<code> document.width </code>n'est plus pris en charge. Au lieu de cela, utilisez document.body.clientWidth. Voir {{domxref("element.clientWidth")}}.</p> -</div> +> **Note :** À partir de {{Gecko("6.0")}},` document.width `n'est plus pris en charge. Au lieu de cela, utilisez document.body.clientWidth. Voir {{domxref("element.clientWidth")}}. -<p>Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels.</p> +Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels. -<p>Non pris en charge par Internet Explorer.</p> +Non pris en charge par Internet Explorer. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>pixels</em> = document.width; -</pre> + pixels = document.width; -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush:js">function init() { +```js +function init() { alert("La largeur du document est " + document.width + " pixels."); } -</pre> +``` -<h2 id="Alternatives">Alternatives</h2> +## Alternatives -<pre class="syntaxbox">document.body.clientWidth /* largeur de <body> */ -document.documentElement.clientWidth /* largeur de <html> */ -window.innerWidth /* largeur de la fenêtre */ -</pre> + document.body.clientWidth /* largeur de <body> */ + document.documentElement.clientWidth /* largeur de <html> */ + window.innerWidth /* largeur de la fenêtre */ -<h2 id="Specification">Spécification</h2> +## Spécification -<p>HTML5</p> +HTML5 -<h2 id="See_also">Voir également</h2> +## Voir également -<ul> - <li>{{domxref("document.height")}}</li> - <li>{{domxref("Element.clientWidth")}}</li> - <li>{{domxref("Element.scrollWidth")}}</li> -</ul> +- {{domxref("document.height")}} +- {{domxref("Element.clientWidth")}} +- {{domxref("Element.scrollWidth")}} diff --git a/files/fr/web/api/document/write/index.md b/files/fr/web/api/document/write/index.md index deac04e6b3..fd54354baf 100644 --- a/files/fr/web/api/document/write/index.md +++ b/files/fr/web/api/document/write/index.md @@ -9,88 +9,74 @@ tags: - Rérérence translation_of: Web/API/Document/write --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>Écrit une chaîne de texte dans un document ouvert par <a href="/fr/docs/Web/API/Document/open">document.open()</a>.</p> +Écrit une chaîne de texte dans un document ouvert par [document.open()](/fr/docs/Web/API/Document/open). -<div class="note"> -<p><strong>Note :</strong> comme <code>document.write</code> écrit dans le flux de documents, appeler <code>document.write</code> sur un document fermé (chargé) appelle automatiquement <code>document.open</code>, ce qui efface le document.</p> -</div> +> **Note :** comme `document.write` écrit dans le flux de documents, appeler `document.write` sur un document fermé (chargé) appelle automatiquement `document.open`, ce qui efface le document. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="eval">document.write(<em>balisage</em>); -</pre> + document.write(balisage); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>markup</code></dt> - <dd>est une chaîne de caractères contenant le texte à écrire dans le document.</dd> -</dl> +- `markup` + - : est une chaîne de caractères contenant le texte à écrire dans le document. -<h3 id="Exemple">Exemple</h3> +### Exemple -<pre class="brush: html"><html> +```html +<html> -<head> -<title>Exemple de document.write</title> +<head> +<title>Exemple de document.write</title> -<script type="text/javascript"> +<script type="text/javascript"> function nouveauContenu() { alert("chargement du nouveau contenu"); document.open(); -document.write("<h1>Assez de l'ancien contenu, passons au nouveau !</h1>"); +document.write("<h1>Assez de l'ancien contenu, passons au nouveau !</h1>"); document.close(); } -</script> -</head> +</script> +</head> -<body onload="nouveauContenu();"> -<p>Ceci est le contenu original du document.</p> -</body> -</html> -</pre> +<body onload="nouveauContenu();"> +<p>Ceci est le contenu original du document.</p> +</body> +</html> +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>Écrire dans un document qui a déjà été chargé sans appeler <a href="/fr/docs/Web/API/Document/open">document.open()</a> provoquera un appel automatique à <code>document.open</code>. Une fois l'écriture terminée, il est recommandé d'appeler <a href="/fr/docs/Web/API/Document/close">document.close()</a> pour indiquer au navigateur qu'il peut terminer de charger la page. Le texte fourni est analysé et intégré à la structure du modèle de document. Dans l'exemple ci-dessus, l'élément <code>h1</code> devient un nœud dans le document.</p> +Écrire dans un document qui a déjà été chargé sans appeler [document.open()](/fr/docs/Web/API/Document/open) provoquera un appel automatique à `document.open`. Une fois l'écriture terminée, il est recommandé d'appeler [document.close()](/fr/docs/Web/API/Document/close) pour indiquer au navigateur qu'il peut terminer de charger la page. Le texte fourni est analysé et intégré à la structure du modèle de document. Dans l'exemple ci-dessus, l'élément `h1` devient un nœud dans le document. -<p>Si l'appel à <code>document.write()</code> est intégré directement dans le code HTML, il n'appellera pas <code>document.open()</code>. Par exemple :</p> +Si l'appel à `document.write()` est intégré directement dans le code HTML, il n'appellera pas `document.open()`. Par exemple : -<pre class="brush: html"><script> - document.write("<h1>Main title</h1>") -</script></pre> +```html +<script> + document.write("<h1>Main title</h1>") +</script> +``` -<div class="note"> -<p><strong>Note :</strong> <code>document.write</code> et <code>document.writeln <a href="/fr/docs/Archive/Web/Writing_JavaScript_for_HTML">ne fonctionnent pas dans les documents XHTML</a> (vous obtiendrez une erreur </code> "Operation is not supported" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] dans la console d'erreurs). Cela arrive lors de l'ouverture d'un fichier local avec l'extension de fichier .xhtm ou pour tout document servi avec une <code>application/xhtml+xml</code> de <a href="/fr/docs/Glossaire/Type_MIME">type MIME</a>. Plus d'informations disponibles dans la <a href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">foire aux questions W3C XHTML (en)</a>.</p> -</div> +> **Note :** `document.write` et `document.writeln ne fonctionnent pas dans les documents XHTML (vous obtiendrez une erreur ` "Operation is not supported" \[`NS_ERROR_DOM_NOT_SUPPORTED_ERR`] dans la console d'erreurs). Cela arrive lors de l'ouverture d'un fichier local avec l'extension de fichier .xhtm ou pour tout document servi avec une `application/xhtml+xml` de [type MIME](/fr/docs/Glossaire/Type_MIME). Plus d'informations disponibles dans la [foire aux questions W3C XHTML (en)](http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite). -<div class="note"> -<p><strong>Note :</strong> <code>document.write</code> dans les scripts <a href="/en-US/docs/Web/HTML/Element/script#attr-defer">deferred (<em>différé</em>)</a> ou <a href="/en-US/docs/Web/HTML/Element/script#attr-async">asynchronous (<em>asynchrone</em>)</a> sera ignoré et vous recevrez un message comme "A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored" dans la console d'erreurs.</p> -</div> +> **Note :** `document.write` dans les scripts [deferred (_différé_)](/en-US/docs/Web/HTML/Element/script#attr-defer) ou [asynchronous (_asynchrone_)](/en-US/docs/Web/HTML/Element/script#attr-async) sera ignoré et vous recevrez un message comme "A call to `document.write()` from an asynchronously-loaded external script was ignored" dans la console d'erreurs. -<div class="note"> -<p><strong>Note :</strong> Dans Edge seulement, appeler plusieurs fois <code>document.write</code> dans un "iframe" déclenche une erreur "SCRIPT70: Permission denied." <em>(autorisation refusée)</em>.</p> -</div> +> **Note :** Dans Edge seulement, appeler plusieurs fois `document.write` dans un "iframe" déclenche une erreur "SCRIPT70: Permission denied." _(autorisation refusée)_. -<div class="note"> -<p><strong>Note :</strong> À partir de la version 55, Chrome n'exécute pas les éléments <code><script></code> injectés via <code>document.write()</code> en cas d'échec de cache HTTP pour les utilisateurs sur une connexion 2G.</p> -</div> +> **Note :** À partir de la version 55, Chrome n'exécute pas les éléments `<script>` injectés via `document.write()` en cas d'échec de cache HTTP pour les utilisateurs sur une connexion 2G. -<h2 id="Sp.C3.A9cification">Spécification</h2> +## Spécification -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Method</a></li> - <li><a href="http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion">Dynamic markup insertion in HTML</a></li> -</ul> +- [DOM Level 2 HTML: `write()` Method](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634) +- [Dynamic markup insertion in HTML](http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{ domxref("element.innerHTML") }}</li> - <li>{{ domxref("document.createElement()") }}</li> -</ul> +- {{ domxref("element.innerHTML") }} +- {{ domxref("document.createElement()") }} diff --git a/files/fr/web/api/document/writeln/index.md b/files/fr/web/api/document/writeln/index.md index eb06d11321..8c69f2caa7 100644 --- a/files/fr/web/api/document/writeln/index.md +++ b/files/fr/web/api/document/writeln/index.md @@ -8,49 +8,49 @@ tags: - Reference translation_of: Web/API/Document/writeln --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>Écrit une chaine de caractères suivie d'un retour de ligne.</p> +Écrit une chaine de caractères suivie d'un retour de ligne. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval">document.writeln(<em>ligne</em>); -</pre> + document.writeln(ligne); -<h3 id="Parameters">Paramètres</h3> +### Paramètres -<ul> - <li><code>ligne</code> est la chaine de caractère contenant le texte.</li> -</ul> +- `ligne` est la chaine de caractère contenant le texte. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="notranslate">document.writeln("<p>Entrez votre mot de passe :</p>"); -</pre> + document.writeln("<p>Entrez votre mot de passe :</p>"); -<h2 id="Notes">Notes</h2> +## Notes -<p><strong>document.writeln </strong>est identique à <a href="/en-US/docs/Web/API/Document/write">{{domxref("document.write")}}</a>, mais ajoute une nouvelle ligne.</p> +**document.writeln** est identique à [{{domxref("document.write")}}](/en-US/docs/Web/API/Document/write), mais ajoute une nouvelle ligne. -<h2 id="Specification">Spécifications</h2> +## Spécifications <table class="standard-table"> - <tbody> - <tr> - <td><strong>Spécification</strong></td> - <td><strong>État</strong></td> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - </tr> - <tr> - <td>{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}</td> - <td>{{Spec2("DOM2 HTML")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>Spécification</strong></td> + <td><strong>État</strong></td> + </tr> + <tr> + <td> + {{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}} + </td> + <td>{{Spec2("HTML WHATWG")}}</td> + </tr> + <tr> + <td> + {{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}} + </td> + <td>{{Spec2("DOM2 HTML")}}</td> + </tr> + </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Document.writeln")}}</p> +{{Compat("api.Document.writeln")}} diff --git a/files/fr/web/api/document/xmlencoding/index.md b/files/fr/web/api/document/xmlencoding/index.md index a7236fc2f6..78f8172253 100644 --- a/files/fr/web/api/document/xmlencoding/index.md +++ b/files/fr/web/api/document/xmlencoding/index.md @@ -10,26 +10,21 @@ tags: - XML translation_of: Web/API/Document/xmlEncoding --- -<p>{{APIRef("DOM")}}{{ obsolete_header("10.0") }}</p> +{{APIRef("DOM")}}{{ obsolete_header("10.0") }} -<p>Renvoie le codage déterminé par la déclaration XML. Devrait être <code>null</code> si non précisé ou inconnu.</p> +Renvoie le codage déterminé par la déclaration XML. Devrait être `null` si non précisé ou inconnu. -<div class="warning"> - <p><strong>Attention :</strong> N'utilisez pas cet attribut ; il a été supprimé de la spécification DOM Niveau 4 et n'est plus pris en charge dans Gecko 10.0 {{ geckoRelease("10.0") }}.</p> -</div> +> **Attention :** N'utilisez pas cet attribut ; il a été supprimé de la spécification DOM Niveau 4 et n'est plus pris en charge dans Gecko 10.0 {{ geckoRelease("10.0") }}. -<p>Si la déclaration XML indique :</p> +Si la déclaration XML indique : -<pre><?xml version="1.0" encoding="UTF-16"?> -</pre> + <?xml version="1.0" encoding="UTF-16"?> -<p>... le résultat doit être "UTF-16".</p> +... le résultat doit être "UTF-16". -<p>Cependant, Firefox 3.0 inclut des informations sur l'"endianness" (par exemple, UTF-16BE pour le codage "big endian") et, tandis que cette information supplémentaire est supprimée à partir de Firefox 3.1b3, Firefox 3.1b3 consulte toujours l'encodage du fichier plutôt que la déclaration XML, comme la spécification le prévoit ("Un attribut spécifiant, <em>dans le cadre de la déclaration XML</em>, l'encodage de ce document.").</p> +Cependant, Firefox 3.0 inclut des informations sur l'"endianness" (par exemple, UTF-16BE pour le codage "big endian") et, tandis que cette information supplémentaire est supprimée à partir de Firefox 3.1b3, Firefox 3.1b3 consulte toujours l'encodage du fichier plutôt que la déclaration XML, comme la spécification le prévoit ("Un attribut spécifiant, _dans le cadre de la déclaration XML_, l'encodage de ce document."). -<h3 id="Spécification">Spécification</h3> +### Spécification -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-encoding">http://www.w3.org/TR/DOM-Level-3-Cor...ment3-encoding</a></li> - <li>A été supprimé de {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li> -</ul> +- [http://www.w3.org/TR/DOM-Level-3-Cor...ment3-encoding](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-encoding) +- A été supprimé de {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }} diff --git a/files/fr/web/api/document/xmlversion/index.md b/files/fr/web/api/document/xmlversion/index.md index 4145a61548..73b9895781 100644 --- a/files/fr/web/api/document/xmlversion/index.md +++ b/files/fr/web/api/document/xmlversion/index.md @@ -10,20 +10,17 @@ tags: - version translation_of: Web/API/Document/xmlVersion --- -<p>{{APIRef("DOM")}}{{ obsolete_header("10.0") }}</p> +{{APIRef("DOM")}}{{ obsolete_header("10.0") }} -<p>Renvoie le numéro de version comme spécifié dans la déclaration XML (par exemple, <code><?xml version="1.0"?></code>) ou "1.0" si la déclaration est absente.</p> +Renvoie le numéro de version comme spécifié dans la déclaration XML (par exemple, `<?xml version="1.0"?>`) ou "1.0" si la déclaration est absente. -<p>Cet attribut n'a jamais été réellement utile, parce qu'il a toujours renvoyé 1.0, et a été supprimé dans la spécification DOM Niveau 4. En conséquence, Firefox 10 ne l'implémente plus. Son utilisation principale dans le passé consistait à détecter si le document était rendu en XML plutôt qu'en HTML. Pour ce faire, vous pouvez créer un élément avec son nom en minuscule, puis vérifier s'il est converti en majuscules (auquel cas le document est en mode HTML non XML) :</p> +Cet attribut n'a jamais été réellement utile, parce qu'il a toujours renvoyé 1.0, et a été supprimé dans la spécification DOM Niveau 4. En conséquence, Firefox 10 ne l'implémente plus. Son utilisation principale dans le passé consistait à détecter si le document était rendu en XML plutôt qu'en HTML. Pour ce faire, vous pouvez créer un élément avec son nom en minuscule, puis vérifier s'il est converti en majuscules (auquel cas le document est en mode HTML non XML) : -<pre>if (document.createElement("foo").tagName == "FOO") { - /* le document n'est pas XML */ -} -</pre> + if (document.createElement("foo").tagName == "FOO") { + /* le document n'est pas XML */ + } -<h2 id="Specification">Spécifications</h2> +## Spécifications -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-version">http://www.w3.org/TR/DOM-Level-3-Cor...ument3-version</a></li> - <li>A été supprimée de {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li> -</ul> +- [http://www.w3.org/TR/DOM-Level-3-Cor...ument3-version](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-version) +- A été supprimée de {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }} diff --git a/files/fr/web/api/document_object_model/examples/index.md b/files/fr/web/api/document_object_model/examples/index.md index 9754cae903..b9a9de6176 100644 --- a/files/fr/web/api/document_object_model/examples/index.md +++ b/files/fr/web/api/document_object_model/examples/index.md @@ -7,17 +7,18 @@ tags: translation_of: Web/API/Document_Object_Model/Examples original_slug: Web/API/Document_Object_Model/Exemples --- -<p>Cette page présente quelques exemples plus détaillés de développement Web et XML utilisant le DOM. Partout où c'est possible, les exemples utilisent des API courantes, des astuces et des modèles en JavaScript pour manipuler l'objet de document.</p> +Cette page présente quelques exemples plus détaillés de développement Web et XML utilisant le DOM. Partout où c'est possible, les exemples utilisent des API courantes, des astuces et des modèles en JavaScript pour manipuler l'objet de document. -<h2 id="Exemple_1_:_height_et_width">Exemple 1 : <em>height</em> (hauteur) et width <em>(largeur)</em></h2> +## Exemple 1 : _height_ (hauteur) et width _(largeur)_ -<p>L'exemple qui suit montre l'utilisation des propriétés <code>height</code> et <code>width</code> pour dimensionner des images de diverses tailles :</p> +L'exemple qui suit montre l'utilisation des propriétés `height` et `width` pour dimensionner des images de diverses tailles : -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<title>width/height example</title> -<script> +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<title>width/height example</title> +<script> function init() { var arrImages = new Array(3); @@ -26,147 +27,153 @@ function init() { arrImages[2] = document.getElementById("image3"); var objOutput = document.getElementById("output"); - var strHtml = "<ul>"; + var strHtml = "<ul>"; - for (var i = 0; i < arrImages.length; i++) { - strHtml += "<li>image" + (i+1) + + for (var i = 0; i < arrImages.length; i++) { + strHtml += "<li>image" + (i+1) + ": height=" + arrImages[i].height + ", width=" + arrImages[i].width + ", style.height=" + arrImages[i].style.height + ", style.width=" + arrImages[i].style.width + - "<\/li>"; + "<\/li>"; } - strHtml += "<\/ul>"; + strHtml += "<\/ul>"; objOutput.innerHTML = strHtml; } -</script> -</head> -<body onload="init();"> +</script> +</head> +<body onload="init();"> -<p>Image 1: no height, width, or style - <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"> -</p> +<p>Image 1: no height, width, or style + <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"> +</p> -<p>Image 2: height="50", width="500", but no style - <img id="image2" +<p>Image 2: height="50", width="500", but no style + <img id="image2" src="http://www.mozilla.org/images/mozilla-banner.gif" - height="50" width="500"> -</p> + height="50" width="500"> +</p> -<p>Image 3: no height, width, but style="height: 50px; width: 500px;" - <img id="image3" +<p>Image 3: no height, width, but style="height: 50px; width: 500px;" + <img id="image3" src="http://www.mozilla.org/images/mozilla-banner.gif" - style="height: 50px; width: 500px;"> -</p> + style="height: 50px; width: 500px;"> +</p> -<div id="output"> </div> -</body> -</html></pre> +<div id="output"> </div> +</body> +</html> +``` -<h2 id="Exemple_2_:_attributs_d.27image">Exemple 2 : attributs d'image</h2> +## Exemple 2 : attributs d'image -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<title>Modifying an image border</title> +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<title>Modifying an image border</title> -<script> +<script> function setBorderWidth(width) { document.getElementById("img1").style.borderWidth = width + "px"; } -</script> -</head> +</script> +</head> -<body> -<p> - <img id="img1" +<body> +<p> + <img id="img1" src="image1.gif" style="border: 5px solid green;" - width="100" height="100" alt="border test"> -</p> + width="100" height="100" alt="border test"> +</p> -<form name="FormName"> - <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /> - <input type="button" value="Make border 5px-wide" onclick="setBorderWidth(5);" /> -</form> +<form name="FormName"> + <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /> + <input type="button" value="Make border 5px-wide" onclick="setBorderWidth(5);" /> +</form> -</body> -</html></pre> +</body> +</html> +``` -<h2 id="Exemple_3_:_manipulation_de_styles">Exemple 3 : manipulation de styles</h2> +## Exemple 3 : manipulation de styles -<p>Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupérés et définis depuis le DOM. Dans ce cas-ci, les styles individuels sont manipulés directement. Dans l'exemple suivant (l'exemple 4), on utilisera les feuilles de style et leurs règles pour changer les styles de documents entiers.</p> +Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupérés et définis depuis le DOM. Dans ce cas-ci, les styles individuels sont manipulés directement. Dans l'exemple suivant (l'exemple 4), on utilisera les feuilles de style et leurs règles pour changer les styles de documents entiers. -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<title>Changing color and font-size example</title> +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<title>Changing color and font-size example</title> -<script> +<script> function changeText() { var p = document.getElementById("pid"); p.style.color = "blue" p.style.fontSize = "18pt" } -</script> -</head> -<body> +</script> +</head> +<body> -<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> +<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> -<form> - <p><input value="rec" type="button" onclick="changeText();" /></p> -</form> +<form> + <p><input value="rec" type="button" onclick="changeText();" /></p> +</form> -</body> -</html></pre> +</body> +</html> +``` -<h2 id="Exemple_4_:_utilisation_de_feuilles_de_style">Exemple 4 : utilisation de feuilles de style</h2> +## Exemple 4 : utilisation de feuilles de style -<p>La propriété <code>styleSheets</code> de l'objet <code>document</code> renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets <code>stylesheet</code>, <code>style</code> et <code>CSSRule</code>, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console.</p> +La propriété `styleSheets` de l'objet `document` renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets `stylesheet`, `style` et `CSSRule`, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console. -<pre class="brush:js">var ss = document.styleSheets; +```js +var ss = document.styleSheets; -for(var i = 0; i < ss.length; i++) { - for(var j = 0; j < ss[i].cssRules.length; j++) { +for(var i = 0; i < ss.length; i++) { + for(var j = 0; j < ss[i].cssRules.length; j++) { dump( ss[i].cssRules[j].selectorText + "\n" ); } -}</pre> +} +``` -<p>Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies :</p> +Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies : -<pre class="eval">BODY { background-color: darkblue; } -P { font-face: Arial; font-size: 10pt; margin-left: .125in; } -#lumpy { display: none; } -</pre> + BODY { background-color: darkblue; } + P { font-face: Arial; font-size: 10pt; margin-left: .125in; } + #lumpy { display: none; } -<p>Ce script affiche les lignes suivantes :</p> +Ce script affiche les lignes suivantes : -<pre class="eval">BODY -P -#LUMPY -</pre> + BODY + P + #LUMPY -<h2 id="Exemple_5_:_propagation_d.27.C3.A9v.C3.A8nements">Exemple 5 : propagation d'évènements</h2> +## Exemple 5 : propagation d'évènements -<p>Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction <code>stopEvent</code>, qui modifie la valeur de la cellule inférieure du tableau.</p> +Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction `stopEvent`, qui modifie la valeur de la cellule inférieure du tableau. -<p>Cependant, <code>stopEvent</code> appelle également une méthode d'objet <code>event</code>, {{domxref("event.stopPropagation")}} , qui empêche l'évènement de se propager (bubbling) plus haut dans le DOM. Notez que le tableau lui-même dispose d'un gestionnaire d'évènement {{domxref("element.onclick","onclick")}} qui devrait afficher un message lorsqu'on clique sur le tableau. Mais comme la méthode <code>stopEvent</code> a interrompu la propagation, après que les données du tableau aient été mises à jour, la phase évènementielle est effectivement arrêtée et un message d'alerte est affiché pour le confirmer.</p> +Cependant, `stopEvent` appelle également une méthode d'objet `event`, {{domxref("event.stopPropagation")}} , qui empêche l'évènement de se propager (bubbling) plus haut dans le DOM. Notez que le tableau lui-même dispose d'un gestionnaire d'évènement {{domxref("element.onclick","onclick")}} qui devrait afficher un message lorsqu'on clique sur le tableau. Mais comme la méthode `stopEvent` a interrompu la propagation, après que les données du tableau aient été mises à jour, la phase évènementielle est effectivement arrêtée et un message d'alerte est affiché pour le confirmer. -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<title>Event Propagation</title> +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<title>Event Propagation</title> -<style> +<style> #t-daddy { border: 1px solid red } #c1 { background-color: pink; } -</style> +</style> -<script> +<script> function stopEvent(ev) { c2 = document.getElementById("c2"); c2.innerHTML = "hello"; @@ -180,36 +187,38 @@ function load() { elem = document.getElementById("tbl1"); elem.addEventListener("click", stopEvent, false); } -</script> -</head> +</script> +</head> -<body onload="load();"> +<body onload="load();"> -<table id="t-daddy" onclick="alert('hi');"> - <tr id="tbl1"> - <td id="c1">one</td> - </tr> - <tr> - <td id="c2">two</td> - </tr> -</table> +<table id="t-daddy" onclick="alert('hi');"> + <tr id="tbl1"> + <td id="c1">one</td> + </tr> + <tr> + <td id="c2">two</td> + </tr> +</table> -</body> -</html></pre> +</body> +</html> +``` -<h2 id="Exemple_6_:_getComputedStyle">Exemple 6 : getComputedStyle</h2> +## Exemple 6 : getComputedStyle -<p>Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut <code>style</code> ou à l'aide de JavaScript (c'est-à-dire, <code>elem.style.backgroundColor="rgb(173, 216, 230)"</code>). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la <a href="/fr/docs/Web/CSS/Reference">liste des propriétés DOM CSS</a>.</p> +Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut `style` ou à l'aide de JavaScript (c'est-à-dire, `elem.style.backgroundColor="rgb(173, 216, 230)"`). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la [liste des propriétés DOM CSS](/fr/docs/Web/CSS/Reference). -<p><code>getComputedStyle()</code> renvoie un objet <code>ComputedCSSStyleDeclaration</code>, dont les propriétés de style individuelles peuvent être référencées à l'aide de sa méthode <code>getPropertyValue()</code> comme montré dans l'exemple suivant.</p> +`getComputedStyle()` renvoie un objet `ComputedCSSStyleDeclaration`, dont les propriétés de style individuelles peuvent être référencées à l'aide de sa méthode `getPropertyValue()` comme montré dans l'exemple suivant. -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> +```html +<!DOCTYPE html> +<html lang="en"> +<head> -<title>getComputedStyle example</title> +<title>getComputedStyle example</title> -<script> +<script> function cStyles() { var RefDiv = document.getElementById("d1"); var txtHeight = document.getElementById("t1"); @@ -227,59 +236,61 @@ function cStyles() { txtBackgroundColor.value = b_style; } -</script> +</script> -<style> +<style> #d1 { margin-left: 10px; background-color: rgb(173, 216, 230); height: 20px; max-width: 20px; } -</style> +</style> -</head> +</head> -<body> +<body> -<div id="d1">&nbsp;</div> +<div id="d1"> </div> -<form action=""> - <p> - <button type="button" onclick="cStyles();">getComputedStyle</button> - height<input id="t1" type="text" value="1" /> - max-width<input id="t2" type="text" value="2" /> - bg-color<input id="t3" type="text" value="3" /> - </p> -</form> +<form action=""> + <p> + <button type="button" onclick="cStyles();">getComputedStyle</button> + height<input id="t1" type="text" value="1" /> + max-width<input id="t2" type="text" value="2" /> + bg-color<input id="t3" type="text" value="3" /> + </p> +</form> -</body> -</html></pre> +</body> +</html> +``` -<h2 id="Exemple_7_:_affichage_des_propri.C3.A9t.C3.A9s_d.27un_objet_event">Exemple 7 : affichage des propriétés d'un objet <code>event</code></h2> +## Exemple 7 : affichage des propriétés d'un objet `event` -<p>Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}} et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle <code>for..in</code> pour parcourir les propriétés d'un objet et obtenir leurs valeurs.</p> +Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}} et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle `for..in` pour parcourir les propriétés d'un objet et obtenir leurs valeurs. -<p>Les propriétés des objets <code>event</code> diffèrent sensiblement entre les différents navigateurs, la <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">spécification norme DOM</a> liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires.</p> +Les propriétés des objets `event` diffèrent sensiblement entre les différents navigateurs, la [spécification norme DOM](http://www.w3.org/TR/DOM-Level-2-Events/events.html) liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires. -<p>Placez le code qui suit dans une fichier texte vide et chargez-le dans différents navigateurs, vous serez surpris des différences entre le nombre et le nom des propriétés. Vous pouvez également ajouter quelques éléments à la page et appeler cette fonction depuis d'autres gestionnaires d'évènements.</p> +Placez le code qui suit dans une fichier texte vide et chargez-le dans différents navigateurs, vous serez surpris des différences entre le nombre et le nom des propriétés. Vous pouvez également ajouter quelques éléments à la page et appeler cette fonction depuis d'autres gestionnaires d'évènements. -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<meta charset="utf-8"/> -<title>Show Event properties</title> +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>Show Event properties</title> -<style> +<style> table { border-collapse: collapse; } thead { font-weight: bold; } td { padding: 2px 10px 2px 10px; } .odd { background-color: #efdfef; } .even { background-color: #ffffff; } -</style> +</style> -<script> +<script> function showEventProperties(e) { function addCell(row, text) { @@ -296,7 +307,7 @@ function showEventProperties(e) { var lableList = ['#', 'Property', 'Value']; var len = lableList.length; - for (var i=0; i<len; i++) { + for (var i=0; i<len; i++) { addCell(row, lableList[i]); } @@ -317,54 +328,53 @@ function showEventProperties(e) { window.onload = function(event){ showEventProperties(event); } -</script> -</head> +</script> +</head> -<body> -<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> -</body> +<body> +<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> +</body> -</html></pre> +</html> +``` -<h2 id="Exemple_8_:_utilisation_de_l.27interface_DOM_Table">Exemple 8 : utilisation de l'interface DOM Table</h2> +## Exemple 8 : utilisation de l'interface DOM Table -<p>L'interface DOM HTMLTableElement fournit certaines méthodes utilitaires permettant de créer et de manipuler des tableaux. Deux méthodes utilisées fréquemment sont {{domxref("HTMLTableElement.insertRow")}} et {{domxref("tableRow.insertCell")}}</p> +L'interface DOM HTMLTableElement fournit certaines méthodes utilitaires permettant de créer et de manipuler des tableaux. Deux méthodes utilisées fréquemment sont {{domxref("HTMLTableElement.insertRow")}} et {{domxref("tableRow.insertCell")}} -<p>Pour ajouter une ligne et quelques cellules à un tableau existant :</p> +Pour ajouter une ligne et quelques cellules à un tableau existant : -<pre class="brush:html"><table id="table0"> - <tr> - <td>Row 0 Cell 0</td> - <td>Row 0 Cell 1</td> - </tr> -</table> +```html +<table id="table0"> + <tr> + <td>Row 0 Cell 0</td> + <td>Row 0 Cell 1</td> + </tr> +</table> -<script> +<script> var table = document.getElementById('table0'); var row = table.insertRow(-1); var cell, text; -for (var i = 0; i < 2; i++) { +for (var i = 0; i < 2; i++) { cell = row.insertCell(-1); text = 'Row ' + row.rowIndex + ' Cell ' + i; cell.appendChild(document.createTextNode(text)); } -</script></pre> +</script> +``` -<h4 id="Notes">Notes</h4> +#### Notes -<ul> - <li>N'utilisez jamais la propriété {{domxref("element.innerHTML","innerHTML")}} d'un tableau pour le modifier, même si vous pouvez l'utiliser pour créer un tableau entier ou le contenu d'une cellule.</li> - <li>Si vous utilisez les méthodes DOM Core {{domxref("document.createElement")}} et {{domxref("Node.appendChild")}} pour créer des lignes et cellules de tableau, il est nécessaire de les ajouter à un élément <code>tbody</code> dans Internet Explorer, tandis que les autres navigateurs vous permettront de les ajouter à un élément <code>table</code> (les lignes seront ajoutées au dernier élément <code>tbody</code>).</li> - <li>Un certain nombre d'autres méthodes utilitaires faisant partie de l'<a href="/fr/docs/Web/API/HTMLTableElement#M%C3%A9thodes">interface table</a> peuvent être utilisées pour créer et modifier des tableaux.</li> -</ul> +- N'utilisez jamais la propriété {{domxref("element.innerHTML","innerHTML")}} d'un tableau pour le modifier, même si vous pouvez l'utiliser pour créer un tableau entier ou le contenu d'une cellule. +- Si vous utilisez les méthodes DOM Core {{domxref("document.createElement")}} et {{domxref("Node.appendChild")}} pour créer des lignes et cellules de tableau, il est nécessaire de les ajouter à un élément `tbody` dans Internet Explorer, tandis que les autres navigateurs vous permettront de les ajouter à un élément `table` (les lignes seront ajoutées au dernier élément `tbody`). +- Un certain nombre d'autres méthodes utilitaires faisant partie de l'[interface table](/fr/docs/Web/API/HTMLTableElement#M%C3%A9thodes) peuvent être utilisées pour créer et modifier des tableaux. -<h2 id="Subnav">Subnav</h2> +## Subnav -<ul> - <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence DOM</a></li> - <li><a href="/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction à DOM</a></li> - <li><a href="/fr/docs/Web/API/Document_Object_Model/Events">Les événements et DOM</a></li> - <li><a href="/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li> -</ul> +- [Référence DOM](/fr/docs/Web/API/Document_Object_Model) +- [Introduction à DOM](/fr/docs/Web/API/Document_Object_Model/Introduction) +- [Les événements et DOM](/fr/docs/Web/API/Document_Object_Model/Events) +- [Exemples](/fr/docs/Web/API/Document_Object_Model/Exemples) diff --git a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md index ed1a422071..ff8be434b7 100644 --- a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md +++ b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md @@ -8,88 +8,85 @@ tags: translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree original_slug: Comment_créer_un_arbre_DOM --- -<p> </p> - -<p>Cet article décrit comment utiliser l'API <a href="https://www.w3.org/TR/DOM-Level-3-Core/">DOM Core (en)</a> en JavaScript pour créer et modifier des objets DOM. Il concerne toutes les applications basées sur Gecko (telles que Firefox) sur du code avec privilèges (par exemple les extensions) ou sans privilège (des pages Web).</p> - -<h3 id="Cr.C3.A9er_dynamiquement_un_arbre_DOM">Créer dynamiquement un arbre DOM</h3> - -<p>Considérons le document XML suivant :</p> - -<pre class="eval"><?xml version="1.0"?> -<people> - <person first-name="eric" middle-initial="H" last-name="jung"> - <address street="321 south st" city="denver" state="co" country="usa"/> - <address street="123 main st" city="arlington" state="ma" country="usa"/> - </person> - - <person first-name="jed" last-name="brown"> - <address street="321 north st" city="atlanta" state="ga" country="usa"/> - <address street="123 west st" city="seattle" state="wa" country="usa"/> - <address street="321 south avenue" city="denver" state="co" country="usa"/> - </person> -</people> -</pre> - -<p>L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela :</p> - -<pre class="eval">var doc = document.implementation.createDocument("", "", null); -var peopleElem = doc.createElement("people"); - -var personElem1 = doc.createElement("person"); -personElem1.setAttribute("first-name", "eric"); -personElem1.setAttribute("middle-initial", "h"); -personElem1.setAttribute("last-name", "jung"); - -var addressElem1 = doc.createElement("address"); -addressElem1.setAttribute("street", "321 south st"); -addressElem1.setAttribute("city", "denver"); -addressElem1.setAttribute("state", "co"); -addressElem1.setAttribute("country", "usa"); -personElem1.appendChild(addressElem1); - -var addressElem2 = doc.createElement("address"); -addressElem2.setAttribute("street", "123 main st"); -addressElem2.setAttribute("city", "arlington"); -addressElem2.setAttribute("state", "ma"); -addressElem2.setAttribute("country", "usa"); -personElem1.appendChild(addressElem2); - -var personElem2 = doc.createElement("person"); -personElem2.setAttribute("first-name", "jed"); -personElem2.setAttribute("last-name", "brown"); - -var addressElem3 = doc.createElement("address"); -addressElem3.setAttribute("street", "321 north st"); -addressElem3.setAttribute("city", "atlanta"); -addressElem3.setAttribute("state", "ga"); -addressElem3.setAttribute("country", "usa"); -personElem2.appendChild(addressElem3); - -var addressElem4 = doc.createElement("address"); -addressElem4.setAttribute("street", "123 west st"); -addressElem4.setAttribute("city", "seattle"); -addressElem4.setAttribute("state", "wa"); -addressElem4.setAttribute("country", "usa"); -personElem2.appendChild(addressElem4); - -var addressElem5 = doc.createElement("address"); -addressElem5.setAttribute("street", "321 south avenue"); -addressElem5.setAttribute("city", "denver"); -addressElem5.setAttribute("state", "co"); -addressElem5.setAttribute("country", "usa"); -personElem2.appendChild(addressElem5); - -peopleElem.appendChild(personElem1); -peopleElem.appendChild(personElem2); -doc.appendChild(peopleElem); -</pre> - -<p>Voir également le chapitre <a href="/fr/docs/Mozilla/Tech/XUL/Tutoriel_XUL/Document_Object_Model"> DOM du tutoriel XUL</a></p> - -<p>Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme inversé JSON associé avec la représentation JSON suivante :</p> - -<pre class="brush: js">{ +Cet article décrit comment utiliser l'API [DOM Core (en)](https://www.w3.org/TR/DOM-Level-3-Core/) en JavaScript pour créer et modifier des objets DOM. Il concerne toutes les applications basées sur Gecko (telles que Firefox) sur du code avec privilèges (par exemple les extensions) ou sans privilège (des pages Web). + +### Créer dynamiquement un arbre DOM + +Considérons le document XML suivant : + + <?xml version="1.0"?> + <people> + <person first-name="eric" middle-initial="H" last-name="jung"> + <address street="321 south st" city="denver" state="co" country="usa"/> + <address street="123 main st" city="arlington" state="ma" country="usa"/> + </person> + + <person first-name="jed" last-name="brown"> + <address street="321 north st" city="atlanta" state="ga" country="usa"/> + <address street="123 west st" city="seattle" state="wa" country="usa"/> + <address street="321 south avenue" city="denver" state="co" country="usa"/> + </person> + </people> + +L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela : + + var doc = document.implementation.createDocument("", "", null); + var peopleElem = doc.createElement("people"); + + var personElem1 = doc.createElement("person"); + personElem1.setAttribute("first-name", "eric"); + personElem1.setAttribute("middle-initial", "h"); + personElem1.setAttribute("last-name", "jung"); + + var addressElem1 = doc.createElement("address"); + addressElem1.setAttribute("street", "321 south st"); + addressElem1.setAttribute("city", "denver"); + addressElem1.setAttribute("state", "co"); + addressElem1.setAttribute("country", "usa"); + personElem1.appendChild(addressElem1); + + var addressElem2 = doc.createElement("address"); + addressElem2.setAttribute("street", "123 main st"); + addressElem2.setAttribute("city", "arlington"); + addressElem2.setAttribute("state", "ma"); + addressElem2.setAttribute("country", "usa"); + personElem1.appendChild(addressElem2); + + var personElem2 = doc.createElement("person"); + personElem2.setAttribute("first-name", "jed"); + personElem2.setAttribute("last-name", "brown"); + + var addressElem3 = doc.createElement("address"); + addressElem3.setAttribute("street", "321 north st"); + addressElem3.setAttribute("city", "atlanta"); + addressElem3.setAttribute("state", "ga"); + addressElem3.setAttribute("country", "usa"); + personElem2.appendChild(addressElem3); + + var addressElem4 = doc.createElement("address"); + addressElem4.setAttribute("street", "123 west st"); + addressElem4.setAttribute("city", "seattle"); + addressElem4.setAttribute("state", "wa"); + addressElem4.setAttribute("country", "usa"); + personElem2.appendChild(addressElem4); + + var addressElem5 = doc.createElement("address"); + addressElem5.setAttribute("street", "321 south avenue"); + addressElem5.setAttribute("city", "denver"); + addressElem5.setAttribute("state", "co"); + addressElem5.setAttribute("country", "usa"); + personElem2.appendChild(addressElem5); + + peopleElem.appendChild(personElem1); + peopleElem.appendChild(personElem2); + doc.appendChild(peopleElem); + +Voir également le chapitre [DOM du tutoriel XUL](/fr/docs/Mozilla/Tech/XUL/Tutoriel_XUL/Document_Object_Model) + +Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme inversé JSON associé avec la représentation JSON suivante : + +```js +{ "people": { "person": [{ "address": [{ @@ -127,21 +124,20 @@ doc.appendChild(peopleElem); "@last-name": "brown" }] } -}</pre> +} +``` -<h3 id="Alors_quoi_.3F">Et après ?</h3> +### Et après ? -<p>Les arbres DOM peuvent être interrogés en utilisant des <a href="/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript">expressions XPath</a>, convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant <a href="/fr/docs/Web/Guide/Parsing_and_serializing_XML">XMLSerializer</a> (sans avoir à le convertir en chaîne de caractères auparavant), <a href="/fr/docs/Web/API/XMLHttpRequest">envoyés à un serveur Web</a> (via XMLHttpRequest), transformés en utilisant <a href="/fr/docs/XSLT">XSLT</a>, <a href="/fr/docs/Glossaire/XLink">XLink</a>, convertis en un objet JavaScript à travers un <a href="/fr/docs/Archive/JXON">algorithme JXON</a>, etc.</p> +Les arbres DOM peuvent être interrogés en utilisant des [expressions XPath](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript), convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant [XMLSerializer](/fr/docs/Web/Guide/Parsing_and_serializing_XML) (sans avoir à le convertir en chaîne de caractères auparavant), [envoyés à un serveur Web](/fr/docs/Web/API/XMLHttpRequest) (via XMLHttpRequest), transformés en utilisant [XSLT](/fr/docs/XSLT), [XLink](/fr/docs/Glossaire/XLink), convertis en un objet JavaScript à travers un [algorithme JXON](/fr/docs/Archive/JXON), etc. -<p>Vous pouvez utiliser des arbres DOM pour modéliser des données qui ne peuvent pas être traitées avec RDF (ou si vous n'aimez pas RDF). Un autre champ d'action est que, comme XUL est du XML, l'UI de votre application peut être manipulée dynamiquement, téléchargée, enregistrée, chargée, convertie ou transformée relativement facilement.</p> +Vous pouvez utiliser des arbres DOM pour modéliser des données qui ne peuvent pas être traitées avec RDF (ou si vous n'aimez pas RDF). Un autre champ d'action est que, comme XUL est du XML, l'UI de votre application peut être manipulée dynamiquement, téléchargée, enregistrée, chargée, convertie ou transformée relativement facilement. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Glossaire/XML">XML</a></li> - <li><a href="/fr/docs/Archive/JXON">JXON</a></li> - <li><a href="/fr/docs/XPath">XPath</a></li> - <li><a href="/fr/docs/E4X">E4X (ECMAScript for XML)</a></li> - <li><a href="/fr/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> - <li><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></li> -</ul> +- [XML](/fr/docs/Glossaire/XML) +- [JXON](/fr/docs/Archive/JXON) +- [XPath](/fr/docs/XPath) +- [E4X (ECMAScript for XML)](/fr/docs/E4X) +- [Parsing and serializing XML](/fr/docs/Web/Guide/Parsing_and_serializing_XML) +- [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) diff --git a/files/fr/web/api/document_object_model/index.md b/files/fr/web/api/document_object_model/index.md index dad3cd1a68..fffb6dd481 100644 --- a/files/fr/web/api/document_object_model/index.md +++ b/files/fr/web/api/document_object_model/index.md @@ -8,401 +8,377 @@ tags: - Référence(2) translation_of: Web/API/Document_Object_Model --- -<div>{{DefaultAPISidebar("DOM")}}</div> - -<p>Le <em><strong>Document Object Model</strong></em> ou <strong>DOM</strong> (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation. Les nœuds peuvent être associés à des gestionnaires d'événements. Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.</p> - -<p>Pour mieux comprendre le fonctionnement du DOM, <a href="/fr/docs/Web/API/Document_Object_Model/Introduction">une introduction est disponible</a>.</p> - -<h2 id="Interfaces_du_DOM">Interfaces du DOM</h2> - -<ul> - <li>{{domxref("Attr")}}</li> - <li>{{domxref("CharacterData")}}</li> - <li>{{domxref("ChildNode")}} {{experimental_inline}}</li> - <li>{{domxref("Comment")}}</li> - <li>{{domxref("CustomEvent")}}</li> - <li>{{domxref("Document")}}</li> - <li>{{domxref("DocumentFragment")}}</li> - <li>{{domxref("DocumentType")}}</li> - <li>{{domxref("DOMError")}} {{deprecated_inline}}</li> - <li>{{domxref("DOMException")}}</li> - <li>{{domxref("DOMImplementation")}}</li> - <li>{{domxref("DOMString")}}</li> - <li>{{domxref("DOMTimeStamp")}}</li> - <li>{{domxref("DOMSettableTokenList")}}</li> - <li>{{domxref("DOMStringList")}}</li> - <li>{{domxref("DOMTokenList")}}</li> - <li>{{domxref("Element")}}</li> - <li>{{domxref("EventTarget")}}</li> - <li>{{domxref("HTMLCollection")}}</li> - <li>{{domxref("MutationObserver")}}</li> - <li>{{domxref("Event")}}</li> - <li>{{domxref("MutationRecord")}}</li> - <li>{{domxref("NamedNodeMap")}}</li> - <li>{{domxref("Node")}}</li> - <li>{{domxref("NodeFilter")}}</li> - <li>{{domxref("NodeIterator")}}</li> - <li>{{domxref("NodeList")}}</li> - <li>{{domxref("NonDocumentTypeChildNode")}}</li> - <li>{{domxref("ParentNode")}}</li> - <li>{{domxref("ProcessingInstruction")}}</li> - <li>{{domxref("Selection")}}{{experimental_inline}}</li> - <li>{{domxref("Range")}}</li> - <li>{{domxref("Text")}}</li> - <li>{{domxref("TextDecoder")}} {{experimental_inline}}</li> - <li>{{domxref("TextEncoder")}} {{experimental_inline}}</li> - <li>{{domxref("TimeRanges")}}</li> - <li>{{domxref("TreeWalker")}}</li> - <li>{{domxref("URL")}}</li> - <li>{{domxref("Window")}}</li> - <li>{{domxref("Worker")}}</li> - <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li> -</ul> - -<h2 id="Interfaces_obsolètes_du_DOM_obsolete_inline">Interfaces obsolètes du DOM {{obsolete_inline}}</h2> - -<p>Le DOM a été simplifié au cours du temps. Pour cette raison, les interfaces qui suivent, présentes dans la spécification du DOM de niveau 3 ou des niveaux antérieurs, ont été supprimées. Bien qu'il ne soit pas certain qu'elles ne soient pas réintroduites, elles doivent être considérées comme obsolètes et il faut éviter de les utiliser :</p> - -<ul> - <li>{{domxref("CDATASection")}}</li> - <li>{{domxref("DocumentTouch")}}</li> - <li>{{domxref("DOMConfiguration")}}</li> - <li>{{domxref("DOMErrorHandler")}}</li> - <li>{{domxref("DOMImplementationList")}}</li> - <li>{{domxref("DOMImplementationRegistry")}}</li> - <li>{{domxref("DOMImplementationSource")}}</li> - <li>{{domxref("DOMLocator")}}</li> - <li>{{domxref("DOMObject")}}</li> - <li>{{domxref("DOMUserData")}}</li> - <li>{{domxref("ElementTraversal")}}</li> - <li>{{domxref("Entity")}}</li> - <li>{{domxref("EntityReference")}}</li> - <li>{{domxref("NamedNodeMap")}}</li> - <li>{{domxref("NameList")}}</li> - <li>{{domxref("Notation")}}</li> - <li>{{domxref("TypeInfo")}}</li> - <li>{{domxref("UserDataHandler")}}</li> -</ul> - -<h2 id="Interfaces_HTML">Interfaces HTML</h2> - -<p>Un document contenant du HTML est décrit grâce à l'interface {{domxref("HTMLDocument")}}. On notera que la spécification HTML étend également l'interface {{domxref("Document")}}.</p> - -<p>Un objet <code>HTMLDocument</code> donne également accès à différentes fonctionnalités liées au navigateur comme l'onglet ou la fenêtre dans laquelle la page est dessinée, notamment grâce à l'interface {{domxref("Window")}}. On peut accéder à la mise en forme de la page via {{domxref("window.style")}} (généralement le CSS associé au document), à l'historique de navigation relatif au contexte via {{domxref("window.history")}} et enfin à la sélection faite dans le document via {{domxref("Selection")}}.</p> - -<h3 id="Interfaces_des_éléments_HTML">Interfaces des éléments HTML</h3> - -<ul> - <li>{{domxref("HTMLAnchorElement")}}</li> - <li>{{domxref("HTMLAppletElement")}}</li> - <li>{{domxref("HTMLAreaElement")}}</li> - <li>{{domxref("HTMLAudioElement")}}</li> - <li>{{domxref("HTMLBaseElement")}}</li> - <li>{{domxref("HTMLBodyElement")}}</li> - <li>{{domxref("HTMLBRElement")}}</li> - <li>{{domxref("HTMLButtonElement")}}</li> - <li>{{domxref("HTMLCanvasElement")}}</li> - <li>{{domxref("HTMLDataElement")}}</li> - <li>{{domxref("HTMLDataListElement")}}</li> - <li>{{domxref("HTMLDialogElement")}}</li> - <li>{{domxref("HTMLDirectoryElement")}}</li> - <li>{{domxref("HTMLDivElement")}}</li> - <li>{{domxref("HTMLDListElement")}}</li> - <li>{{domxref("HTMLElement")}}</li> - <li>{{domxref("HTMLEmbedElement")}}</li> - <li>{{domxref("HTMLFieldSetElement")}}</li> - <li>{{domxref("HTMLFontElement")}}</li> - <li>{{domxref("HTMLFormElement")}}</li> - <li>{{domxref("HTMLFrameElement")}}</li> - <li>{{domxref("HTMLFrameSetElement")}}</li> - <li>{{domxref("HTMLHeadElement")}}</li> - <li>{{domxref("HTMLHeadingElement")}}</li> - <li>{{domxref("HTMLHtmlElement")}}</li> - <li>{{domxref("HTMLHRElement")}}</li> - <li>{{domxref("HTMLIFrameElement")}}</li> - <li>{{domxref("HTMLImageElement")}}</li> - <li>{{domxref("HTMLInputElement")}}</li> - <li>{{domxref("HTMLKeygenElement")}}</li> - <li>{{domxref("HTMLLabelElement")}}</li> - <li>{{domxref("HTMLLegendElement")}}</li> - <li>{{domxref("HTMLLIElement")}}</li> - <li>{{domxref("HTMLLinkElement")}}</li> - <li>{{domxref("HTMLMapElement")}}</li> - <li>{{domxref("HTMLMediaElement")}}</li> - <li>{{domxref("HTMLMenuElement")}}</li> - <li>{{domxref("HTMLMetaElement")}}</li> - <li>{{domxref("HTMLMeterElement")}}</li> - <li>{{domxref("HTMLModElement")}}</li> - <li>{{domxref("HTMLObjectElement")}}</li> - <li>{{domxref("HTMLOListElement")}}</li> - <li>{{domxref("HTMLOptGroupElement")}}</li> - <li>{{domxref("HTMLOptionElement")}}</li> - <li>{{domxref("HTMLOutputElement")}}</li> - <li>{{domxref("HTMLParagraphElement")}}</li> - <li>{{domxref("HTMLParamElement")}}</li> - <li>{{domxref("HTMLPreElement")}}</li> - <li>{{domxref("HTMLProgressElement")}}</li> - <li>{{domxref("HTMLQuoteElement")}}</li> - <li>{{domxref("HTMLScriptElement")}}</li> - <li>{{domxref("HTMLSelectElement")}}</li> - <li>{{domxref("HTMLSourceElement")}}</li> - <li>{{domxref("HTMLSpanElement")}}</li> - <li>{{domxref("HTMLStyleElement")}}</li> - <li>{{domxref("HTMLTableElement")}}</li> - <li>{{domxref("HTMLTableCaptionElement")}}</li> - <li>{{domxref("HTMLTableCellElement")}}</li> - <li>{{domxref("HTMLTableDataCellElement")}}</li> - <li>{{domxref("HTMLTableHeaderCellElement")}}</li> - <li>{{domxref("HTMLTableColElement")}}</li> - <li>{{domxref("HTMLTableRowElement")}}</li> - <li>{{domxref("HTMLTableSectionElement")}}</li> - <li>{{domxref("HTMLTextAreaElement")}}</li> - <li>{{domxref("HTMLTimeElement")}}</li> - <li>{{domxref("HTMLTitleElement")}}</li> - <li>{{domxref("HTMLTrackElement")}}</li> - <li>{{domxref("HTMLUListElement")}}</li> - <li>{{domxref("HTMLUnknownElement")}}</li> - <li>{{domxref("HTMLVideoElement")}}</li> -</ul> - -<h3 id="Autres_interfaces">Autres interfaces</h3> - -<ul> - <li>{{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasPattern")}}</li> - <li>{{domxref("TextMetrics")}}</li> - <li>{{domxref("ImageData")}}</li> - <li>{{domxref("CanvasPixelArray")}}</li> - <li>{{domxref("NotifyAudioAvailableEvent")}}</li> - <li>{{domxref("HTMLAllCollection")}}</li> - <li>{{domxref("HTMLFormControlsCollection")}}</li> - <li>{{domxref("HTMLOptionsCollection")}}</li> - <li>{{domxref("HTMLPropertiesCollection")}}</li> - <li>{{domxref("DOMStringMap")}}</li> - <li>{{domxref("RadioNodeList")}}</li> - <li>{{domxref("MediaError")}}</li> -</ul> - -<h3 id="Interfaces_HTML_obsolètes_obsolete_inline">Interfaces HTML obsolètes {{obsolete_inline}}</h3> - -<ul> - <li>{{domxref("HTMLBaseFontElement")}}</li> - <li>{{domxref("HTMLIsIndexElement")}}</li> -</ul> - -<h2 id="Interfaces_SVG">Interfaces SVG</a></h2> - -<h3 id="Interfaces_des_éléments_SVG">Interfaces des éléments SVG</h3> - -<ul> - <li>{{domxref("SVGAElement")}}</li> - <li>{{domxref("SVGAltGlyphElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAltGlyphDefElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAltGlyphItemElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAnimationElement")}}</li> - <li>{{domxref("SVGAnimateElement")}}</li> - <li>{{domxref("SVGAnimateColorElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAnimateMotionElement")}}</li> - <li>{{domxref("SVGAnimateTransformElement")}}</li> - <li>{{domxref("SVGCircleElement")}}</li> - <li>{{domxref("SVGClipPathElement")}}</li> - <li>{{domxref("SVGColorProfileElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGComponentTransferFunctionElement")}}</li> - <li>{{domxref("SVGCursorElement")}}</li> - <li>{{domxref("SVGDefsElement")}}</li> - <li>{{domxref("SVGDescElement")}}</li> - <li>{{domxref("SVGElement")}}</li> - <li>{{domxref("SVGEllipseElement")}}</li> - <li>{{domxref("SVGFEBlendElement")}}</li> - <li>{{domxref("SVGFEColorMatrixElement")}}</li> - <li>{{domxref("SVGFEComponentTransferElement")}}</li> - <li>{{domxref("SVGFECompositeElement")}}</li> - <li>{{domxref("SVGFEConvolveMatrixElement")}}</li> - <li>{{domxref("SVGFEDiffuseLightingElement")}}</li> - <li>{{domxref("SVGFEDisplacementMapElement")}}</li> - <li>{{domxref("SVGFEDistantLightElement")}}</li> - <li>{{domxref("SVGFEDropShadowElement")}}</li> - <li>{{domxref("SVGFEFloodElement")}}</li> - <li>{{domxref("SVGFEFuncAElement")}}</li> - <li>{{domxref("SVGFEFuncBElement")}}</li> - <li>{{domxref("SVGFEFuncGElement")}}</li> - <li>{{domxref("SVGFEFuncRElement")}}</li> - <li>{{domxref("SVGFEGaussianBlurElement")}}</li> - <li>{{domxref("SVGFEImageElement")}}</li> - <li>{{domxref("SVGFEMergeElement")}}</li> - <li>{{domxref("SVGFEMergeNodeElement")}}</li> - <li>{{domxref("SVGFEMorphologyElement")}}</li> - <li>{{domxref("SVGFEOffsetElement")}}</li> - <li>{{domxref("SVGFEPointLightElement")}}</li> - <li>{{domxref("SVGFESpecularLightingElement")}}</li> - <li>{{domxref("SVGFESpotLightElement")}}</li> - <li>{{domxref("SVGFETileElement")}}</li> - <li>{{domxref("SVGFETurbulenceElement")}}</li> - <li>{{domxref("SVGFilterElement")}}</li> - <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li> - <li>{{domxref("SVGFontElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceFormatElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceNameElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceSrcElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceUriElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGForeignObjectElement")}}</li> - <li>{{domxref("SVGGElement")}}</li> - <li>{{domxref("SVGGeometryElement")}}</li> - <li>{{domxref("SVGGlyphElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGGlyphRefElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGGradientElement")}}</li> - <li>{{domxref("SVGGraphicsElement")}}</li> - <li>{{domxref("SVGHatchElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGHatchpathElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGHKernElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGImageElement")}}</li> - <li>{{domxref("SVGLinearGradientElement")}}</li> - <li>{{domxref("SVGLineElement")}}</li> - <li>{{domxref("SVGMarkerElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMaskElement")}}</li> - <li>{{domxref("SVGMeshElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMeshGradientElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMeshpatchElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMeshrowElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMetadataElement")}}</li> - <li>{{domxref("SVGMissingGlyphElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGMPathElement")}}</li> - <li>{{domxref("SVGPathElement")}}</li> - <li>{{domxref("SVGPatternElement")}}</li> - <li>{{domxref("SVGPolylineElement")}}</li> - <li>{{domxref("SVGPolygonElement")}}</li> - <li>{{domxref("SVGRadialGradientElement")}}</li> - <li>{{domxref("SVGRectElement")}}</li> - <li>{{domxref("SVGScriptElement")}}</li> - <li>{{domxref("SVGSetElement")}}</li> - <li>{{domxref("SVGSolidcolorElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGStopElement")}}</li> - <li>{{domxref("SVGStyleElement")}}</li> - <li>{{domxref("SVGSVGElement")}}</li> - <li>{{domxref("SVGSwitchElement")}}</li> - <li>{{domxref("SVGSymbolElement")}}</li> - <li>{{domxref("SVGTextContentElement")}}</li> - <li>{{domxref("SVGTextElement")}}</li> - <li>{{domxref("SVGTextPathElement")}}</li> - <li>{{domxref("SVGTextPositioningElement")}}</li> - <li>{{domxref("SVGTitleElement")}}</li> - <li>{{domxref("SVGTRefElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGTSpanElement")}}</li> - <li>{{domxref("SVGUseElement")}}</li> - <li>{{domxref("SVGUnknownElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGViewElement")}}</li> - <li>{{domxref("SVGVKernElement")}} {{deprecated_inline}}</li> -</ul> - -<h3 id="Interfaces_pour_les_types_de_donnée_SVG">Interfaces pour les types de donnée SVG</h3> - -<p>Voici l'API du DOM pour les types de donnée utilisés pour les propriétés et attributs SVG.</p> - -<div class="note"> -<p><strong>Note :</strong> À partir de {{Gecko("5.0")}}, les interfaces suivantes relatives à SVG et qui représentent des listes d'objets sont indexées et permettent d'y accéder. Elles possèdent en plus une propriété de longueur qui indique le nombre d'éléments dans la liste : {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} et {{domxref("SVGPointList")}}.</p> -</div> - -<h4 id="Interfaces_statiques">Interfaces statiques</h4> - -<ul> - <li>{{domxref("SVGAngle")}}</li> - <li>{{domxref("SVGColor")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGICCColor")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGElementInstance")}}</li> - <li>{{domxref("SVGElementInstanceList")}}</li> - <li>{{domxref("SVGLength")}}</li> - <li>{{domxref("SVGLengthList")}}</li> - <li>{{domxref("SVGMatrix")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGNameList")}}</li> - <li>{{domxref("SVGNumber")}}</li> - <li>{{domxref("SVGNumberList")}}</li> - <li>{{domxref("SVGPaint")}}</li> - <li>{{domxref("SVGPathSeg")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegClosePath")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegMovetoAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegMovetoRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoCubicAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoCubicRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoQuadraticAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoQuadraticRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegArcAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegArcRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoHorizontalAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoHorizontalRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoVerticalAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoVerticalRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoCubicSmoothAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoCubicSmoothRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegList")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPoint")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPointList")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPreserveAspectRatio")}}</li> - <li>{{domxref("SVGRect")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGStringList")}}</li> - <li>{{domxref("SVGTransform")}}</li> - <li>{{domxref("SVGTransformList")}}</li> -</ul> - -<h4 id="Interfaces_animées">Interfaces animées</h4> - -<ul> - <li>{{domxref("SVGAnimatedAngle")}}</li> - <li>{{domxref("SVGAnimatedBoolean")}}</li> - <li>{{domxref("SVGAnimatedEnumeration")}}</li> - <li>{{domxref("SVGAnimatedInteger")}}</li> - <li>{{domxref("SVGAnimatedLength")}}</li> - <li>{{domxref("SVGAnimatedLengthList")}}</li> - <li>{{domxref("SVGAnimatedNumber")}}</li> - <li>{{domxref("SVGAnimatedNumberList")}}</li> - <li>{{domxref("SVGAnimatedPathData")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAnimatedPoints")}}</li> - <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li> - <li>{{domxref("SVGAnimatedRect")}}</li> - <li>{{domxref("SVGAnimatedString")}}</li> - <li>{{domxref("SVGAnimatedTransformList")}}</li> -</ul> - -<h3 id="Interfaces_relatives_à_SMIL">Interfaces relatives à SMIL</h3> - -<ul> - <li>{{domxref("ElementTimeControl")}}</li> - <li>{{domxref("TimeEvent")}}</li> -</ul> - -<h3 id="Autres_interfaces_SVG">Autres interfaces SVG</h3> - -<ul> - <li>{{domxref("GetSVGDocument")}}</li> - <li>{{domxref("ShadowAnimation")}}</li> - <li>{{domxref("SVGColorProfileRule")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGCSSRule")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGDocument")}}</li> - <li>{{domxref("SVGException")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGExternalResourcesRequired")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFitToViewBox")}}</li> - <li>{{domxref("SVGLangSpace")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGLocatable")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGRenderingIntent")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGStylable")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGTests")}}</li> - <li>{{domxref("SVGTransformable")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGUnitTypes")}}</li> - <li>{{domxref("SVGUseElementShadowRoot")}}</li> - <li>{{domxref("SVGURIReference")}}</li> - <li>{{domxref("SVGViewSpec")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGZoomAndPan")}}</li> - <li>{{domxref("SVGZoomEvent")}} {{deprecated_inline}}</li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Référence_du_DOM_Gecko/Exemples">Exemples appliqués pour le DOM</a></li> -</ul> +{{DefaultAPISidebar("DOM")}} + +Le **_Document Object Model_** ou **DOM** (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation. Les nœuds peuvent être associés à des gestionnaires d'événements. Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés. + +Pour mieux comprendre le fonctionnement du DOM, [une introduction est disponible](/fr/docs/Web/API/Document_Object_Model/Introduction). + +## Interfaces du DOM + +- {{domxref("Attr")}} +- {{domxref("CharacterData")}} +- {{domxref("ChildNode")}} {{experimental_inline}} +- {{domxref("Comment")}} +- {{domxref("CustomEvent")}} +- {{domxref("Document")}} +- {{domxref("DocumentFragment")}} +- {{domxref("DocumentType")}} +- {{domxref("DOMError")}} {{deprecated_inline}} +- {{domxref("DOMException")}} +- {{domxref("DOMImplementation")}} +- {{domxref("DOMString")}} +- {{domxref("DOMTimeStamp")}} +- {{domxref("DOMSettableTokenList")}} +- {{domxref("DOMStringList")}} +- {{domxref("DOMTokenList")}} +- {{domxref("Element")}} +- {{domxref("EventTarget")}} +- {{domxref("HTMLCollection")}} +- {{domxref("MutationObserver")}} +- {{domxref("Event")}} +- {{domxref("MutationRecord")}} +- {{domxref("NamedNodeMap")}} +- {{domxref("Node")}} +- {{domxref("NodeFilter")}} +- {{domxref("NodeIterator")}} +- {{domxref("NodeList")}} +- {{domxref("NonDocumentTypeChildNode")}} +- {{domxref("ParentNode")}} +- {{domxref("ProcessingInstruction")}} +- {{domxref("Selection")}}{{experimental_inline}} +- {{domxref("Range")}} +- {{domxref("Text")}} +- {{domxref("TextDecoder")}} {{experimental_inline}} +- {{domxref("TextEncoder")}} {{experimental_inline}} +- {{domxref("TimeRanges")}} +- {{domxref("TreeWalker")}} +- {{domxref("URL")}} +- {{domxref("Window")}} +- {{domxref("Worker")}} +- {{domxref("XMLDocument")}} {{experimental_inline}} + +## Interfaces obsolètes du DOM {{obsolete_inline}} + +Le DOM a été simplifié au cours du temps. Pour cette raison, les interfaces qui suivent, présentes dans la spécification du DOM de niveau 3 ou des niveaux antérieurs, ont été supprimées. Bien qu'il ne soit pas certain qu'elles ne soient pas réintroduites, elles doivent être considérées comme obsolètes et il faut éviter de les utiliser : + +- {{domxref("CDATASection")}} +- {{domxref("DocumentTouch")}} +- {{domxref("DOMConfiguration")}} +- {{domxref("DOMErrorHandler")}} +- {{domxref("DOMImplementationList")}} +- {{domxref("DOMImplementationRegistry")}} +- {{domxref("DOMImplementationSource")}} +- {{domxref("DOMLocator")}} +- {{domxref("DOMObject")}} +- {{domxref("DOMUserData")}} +- {{domxref("ElementTraversal")}} +- {{domxref("Entity")}} +- {{domxref("EntityReference")}} +- {{domxref("NamedNodeMap")}} +- {{domxref("NameList")}} +- {{domxref("Notation")}} +- {{domxref("TypeInfo")}} +- {{domxref("UserDataHandler")}} + +## Interfaces HTML + +Un document contenant du HTML est décrit grâce à l'interface {{domxref("HTMLDocument")}}. On notera que la spécification HTML étend également l'interface {{domxref("Document")}}. + +Un objet `HTMLDocument` donne également accès à différentes fonctionnalités liées au navigateur comme l'onglet ou la fenêtre dans laquelle la page est dessinée, notamment grâce à l'interface {{domxref("Window")}}. On peut accéder à la mise en forme de la page via {{domxref("window.style")}} (généralement le CSS associé au document), à l'historique de navigation relatif au contexte via {{domxref("window.history")}} et enfin à la sélection faite dans le document via {{domxref("Selection")}}. + +### Interfaces des éléments HTML + +- {{domxref("HTMLAnchorElement")}} +- {{domxref("HTMLAppletElement")}} +- {{domxref("HTMLAreaElement")}} +- {{domxref("HTMLAudioElement")}} +- {{domxref("HTMLBaseElement")}} +- {{domxref("HTMLBodyElement")}} +- {{domxref("HTMLBRElement")}} +- {{domxref("HTMLButtonElement")}} +- {{domxref("HTMLCanvasElement")}} +- {{domxref("HTMLDataElement")}} +- {{domxref("HTMLDataListElement")}} +- {{domxref("HTMLDialogElement")}} +- {{domxref("HTMLDirectoryElement")}} +- {{domxref("HTMLDivElement")}} +- {{domxref("HTMLDListElement")}} +- {{domxref("HTMLElement")}} +- {{domxref("HTMLEmbedElement")}} +- {{domxref("HTMLFieldSetElement")}} +- {{domxref("HTMLFontElement")}} +- {{domxref("HTMLFormElement")}} +- {{domxref("HTMLFrameElement")}} +- {{domxref("HTMLFrameSetElement")}} +- {{domxref("HTMLHeadElement")}} +- {{domxref("HTMLHeadingElement")}} +- {{domxref("HTMLHtmlElement")}} +- {{domxref("HTMLHRElement")}} +- {{domxref("HTMLIFrameElement")}} +- {{domxref("HTMLImageElement")}} +- {{domxref("HTMLInputElement")}} +- {{domxref("HTMLKeygenElement")}} +- {{domxref("HTMLLabelElement")}} +- {{domxref("HTMLLegendElement")}} +- {{domxref("HTMLLIElement")}} +- {{domxref("HTMLLinkElement")}} +- {{domxref("HTMLMapElement")}} +- {{domxref("HTMLMediaElement")}} +- {{domxref("HTMLMenuElement")}} +- {{domxref("HTMLMetaElement")}} +- {{domxref("HTMLMeterElement")}} +- {{domxref("HTMLModElement")}} +- {{domxref("HTMLObjectElement")}} +- {{domxref("HTMLOListElement")}} +- {{domxref("HTMLOptGroupElement")}} +- {{domxref("HTMLOptionElement")}} +- {{domxref("HTMLOutputElement")}} +- {{domxref("HTMLParagraphElement")}} +- {{domxref("HTMLParamElement")}} +- {{domxref("HTMLPreElement")}} +- {{domxref("HTMLProgressElement")}} +- {{domxref("HTMLQuoteElement")}} +- {{domxref("HTMLScriptElement")}} +- {{domxref("HTMLSelectElement")}} +- {{domxref("HTMLSourceElement")}} +- {{domxref("HTMLSpanElement")}} +- {{domxref("HTMLStyleElement")}} +- {{domxref("HTMLTableElement")}} +- {{domxref("HTMLTableCaptionElement")}} +- {{domxref("HTMLTableCellElement")}} +- {{domxref("HTMLTableDataCellElement")}} +- {{domxref("HTMLTableHeaderCellElement")}} +- {{domxref("HTMLTableColElement")}} +- {{domxref("HTMLTableRowElement")}} +- {{domxref("HTMLTableSectionElement")}} +- {{domxref("HTMLTextAreaElement")}} +- {{domxref("HTMLTimeElement")}} +- {{domxref("HTMLTitleElement")}} +- {{domxref("HTMLTrackElement")}} +- {{domxref("HTMLUListElement")}} +- {{domxref("HTMLUnknownElement")}} +- {{domxref("HTMLVideoElement")}} + +### Autres interfaces + +- {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasGradient")}} +- {{domxref("CanvasPattern")}} +- {{domxref("TextMetrics")}} +- {{domxref("ImageData")}} +- {{domxref("CanvasPixelArray")}} +- {{domxref("NotifyAudioAvailableEvent")}} +- {{domxref("HTMLAllCollection")}} +- {{domxref("HTMLFormControlsCollection")}} +- {{domxref("HTMLOptionsCollection")}} +- {{domxref("HTMLPropertiesCollection")}} +- {{domxref("DOMStringMap")}} +- {{domxref("RadioNodeList")}} +- {{domxref("MediaError")}} + +### Interfaces HTML obsolètes {{obsolete_inline}} + +- {{domxref("HTMLBaseFontElement")}} +- {{domxref("HTMLIsIndexElement")}} + +## Interfaces SVG + +### Interfaces des éléments SVG + +- {{domxref("SVGAElement")}} +- {{domxref("SVGAltGlyphElement")}} {{deprecated_inline}} +- {{domxref("SVGAltGlyphDefElement")}} {{deprecated_inline}} +- {{domxref("SVGAltGlyphItemElement")}} {{deprecated_inline}} +- {{domxref("SVGAnimationElement")}} +- {{domxref("SVGAnimateElement")}} +- {{domxref("SVGAnimateColorElement")}} {{deprecated_inline}} +- {{domxref("SVGAnimateMotionElement")}} +- {{domxref("SVGAnimateTransformElement")}} +- {{domxref("SVGCircleElement")}} +- {{domxref("SVGClipPathElement")}} +- {{domxref("SVGColorProfileElement")}} {{deprecated_inline}} +- {{domxref("SVGComponentTransferFunctionElement")}} +- {{domxref("SVGCursorElement")}} +- {{domxref("SVGDefsElement")}} +- {{domxref("SVGDescElement")}} +- {{domxref("SVGElement")}} +- {{domxref("SVGEllipseElement")}} +- {{domxref("SVGFEBlendElement")}} +- {{domxref("SVGFEColorMatrixElement")}} +- {{domxref("SVGFEComponentTransferElement")}} +- {{domxref("SVGFECompositeElement")}} +- {{domxref("SVGFEConvolveMatrixElement")}} +- {{domxref("SVGFEDiffuseLightingElement")}} +- {{domxref("SVGFEDisplacementMapElement")}} +- {{domxref("SVGFEDistantLightElement")}} +- {{domxref("SVGFEDropShadowElement")}} +- {{domxref("SVGFEFloodElement")}} +- {{domxref("SVGFEFuncAElement")}} +- {{domxref("SVGFEFuncBElement")}} +- {{domxref("SVGFEFuncGElement")}} +- {{domxref("SVGFEFuncRElement")}} +- {{domxref("SVGFEGaussianBlurElement")}} +- {{domxref("SVGFEImageElement")}} +- {{domxref("SVGFEMergeElement")}} +- {{domxref("SVGFEMergeNodeElement")}} +- {{domxref("SVGFEMorphologyElement")}} +- {{domxref("SVGFEOffsetElement")}} +- {{domxref("SVGFEPointLightElement")}} +- {{domxref("SVGFESpecularLightingElement")}} +- {{domxref("SVGFESpotLightElement")}} +- {{domxref("SVGFETileElement")}} +- {{domxref("SVGFETurbulenceElement")}} +- {{domxref("SVGFilterElement")}} +- {{domxref("SVGFilterPrimitiveStandardAttributes")}} +- {{domxref("SVGFontElement")}} {{deprecated_inline}} +- {{domxref("SVGFontFaceElement")}} {{deprecated_inline}} +- {{domxref("SVGFontFaceFormatElement")}} {{deprecated_inline}} +- {{domxref("SVGFontFaceNameElement")}} {{deprecated_inline}} +- {{domxref("SVGFontFaceSrcElement")}} {{deprecated_inline}} +- {{domxref("SVGFontFaceUriElement")}} {{deprecated_inline}} +- {{domxref("SVGForeignObjectElement")}} +- {{domxref("SVGGElement")}} +- {{domxref("SVGGeometryElement")}} +- {{domxref("SVGGlyphElement")}} {{deprecated_inline}} +- {{domxref("SVGGlyphRefElement")}} {{deprecated_inline}} +- {{domxref("SVGGradientElement")}} +- {{domxref("SVGGraphicsElement")}} +- {{domxref("SVGHatchElement")}} {{experimental_inline}} +- {{domxref("SVGHatchpathElement")}} {{experimental_inline}} +- {{domxref("SVGHKernElement")}} {{deprecated_inline}} +- {{domxref("SVGImageElement")}} +- {{domxref("SVGLinearGradientElement")}} +- {{domxref("SVGLineElement")}} +- {{domxref("SVGMarkerElement")}} {{experimental_inline}} +- {{domxref("SVGMaskElement")}} +- {{domxref("SVGMeshElement")}} {{experimental_inline}} +- {{domxref("SVGMeshGradientElement")}} {{experimental_inline}} +- {{domxref("SVGMeshpatchElement")}} {{experimental_inline}} +- {{domxref("SVGMeshrowElement")}} {{experimental_inline}} +- {{domxref("SVGMetadataElement")}} +- {{domxref("SVGMissingGlyphElement")}} {{deprecated_inline}} +- {{domxref("SVGMPathElement")}} +- {{domxref("SVGPathElement")}} +- {{domxref("SVGPatternElement")}} +- {{domxref("SVGPolylineElement")}} +- {{domxref("SVGPolygonElement")}} +- {{domxref("SVGRadialGradientElement")}} +- {{domxref("SVGRectElement")}} +- {{domxref("SVGScriptElement")}} +- {{domxref("SVGSetElement")}} +- {{domxref("SVGSolidcolorElement")}} {{experimental_inline}} +- {{domxref("SVGStopElement")}} +- {{domxref("SVGStyleElement")}} +- {{domxref("SVGSVGElement")}} +- {{domxref("SVGSwitchElement")}} +- {{domxref("SVGSymbolElement")}} +- {{domxref("SVGTextContentElement")}} +- {{domxref("SVGTextElement")}} +- {{domxref("SVGTextPathElement")}} +- {{domxref("SVGTextPositioningElement")}} +- {{domxref("SVGTitleElement")}} +- {{domxref("SVGTRefElement")}} {{deprecated_inline}} +- {{domxref("SVGTSpanElement")}} +- {{domxref("SVGUseElement")}} +- {{domxref("SVGUnknownElement")}} {{experimental_inline}} +- {{domxref("SVGViewElement")}} +- {{domxref("SVGVKernElement")}} {{deprecated_inline}} + +### Interfaces pour les types de donnée SVG + +Voici l'API du DOM pour les types de donnée utilisés pour les propriétés et attributs SVG. + +> **Note :** À partir de {{Gecko("5.0")}}, les interfaces suivantes relatives à SVG et qui représentent des listes d'objets sont indexées et permettent d'y accéder. Elles possèdent en plus une propriété de longueur qui indique le nombre d'éléments dans la liste : {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} et {{domxref("SVGPointList")}}. + +#### Interfaces statiques + +- {{domxref("SVGAngle")}} +- {{domxref("SVGColor")}} {{deprecated_inline}} +- {{domxref("SVGICCColor")}} {{deprecated_inline}} +- {{domxref("SVGElementInstance")}} +- {{domxref("SVGElementInstanceList")}} +- {{domxref("SVGLength")}} +- {{domxref("SVGLengthList")}} +- {{domxref("SVGMatrix")}} {{deprecated_inline}} +- {{domxref("SVGNameList")}} +- {{domxref("SVGNumber")}} +- {{domxref("SVGNumberList")}} +- {{domxref("SVGPaint")}} +- {{domxref("SVGPathSeg")}} {{deprecated_inline}} +- {{domxref("SVGPathSegClosePath")}} {{deprecated_inline}} +- {{domxref("SVGPathSegMovetoAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegMovetoRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegLinetoAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegLinetoRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoCubicAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoCubicRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoQuadraticAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoQuadraticRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegArcAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegArcRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegLinetoHorizontalAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegLinetoHorizontalRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegLinetoVerticalAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegLinetoVerticalRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoCubicSmoothAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoCubicSmoothRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegList")}} {{deprecated_inline}} +- {{domxref("SVGPoint")}} {{deprecated_inline}} +- {{domxref("SVGPointList")}} {{deprecated_inline}} +- {{domxref("SVGPreserveAspectRatio")}} +- {{domxref("SVGRect")}} {{deprecated_inline}} +- {{domxref("SVGStringList")}} +- {{domxref("SVGTransform")}} +- {{domxref("SVGTransformList")}} + +#### Interfaces animées + +- {{domxref("SVGAnimatedAngle")}} +- {{domxref("SVGAnimatedBoolean")}} +- {{domxref("SVGAnimatedEnumeration")}} +- {{domxref("SVGAnimatedInteger")}} +- {{domxref("SVGAnimatedLength")}} +- {{domxref("SVGAnimatedLengthList")}} +- {{domxref("SVGAnimatedNumber")}} +- {{domxref("SVGAnimatedNumberList")}} +- {{domxref("SVGAnimatedPathData")}} {{deprecated_inline}} +- {{domxref("SVGAnimatedPoints")}} +- {{domxref("SVGAnimatedPreserveAspectRatio")}} +- {{domxref("SVGAnimatedRect")}} +- {{domxref("SVGAnimatedString")}} +- {{domxref("SVGAnimatedTransformList")}} + +### Interfaces relatives à SMIL + +- {{domxref("ElementTimeControl")}} +- {{domxref("TimeEvent")}} + +### Autres interfaces SVG + +- {{domxref("GetSVGDocument")}} +- {{domxref("ShadowAnimation")}} +- {{domxref("SVGColorProfileRule")}} {{deprecated_inline}} +- {{domxref("SVGCSSRule")}} {{deprecated_inline}} +- {{domxref("SVGDocument")}} +- {{domxref("SVGException")}} {{deprecated_inline}} +- {{domxref("SVGExternalResourcesRequired")}} {{deprecated_inline}} +- {{domxref("SVGFitToViewBox")}} +- {{domxref("SVGLangSpace")}} {{deprecated_inline}} +- {{domxref("SVGLocatable")}} {{deprecated_inline}} +- {{domxref("SVGRenderingIntent")}} {{deprecated_inline}} +- {{domxref("SVGStylable")}} {{deprecated_inline}} +- {{domxref("SVGTests")}} +- {{domxref("SVGTransformable")}} {{deprecated_inline}} +- {{domxref("SVGUnitTypes")}} +- {{domxref("SVGUseElementShadowRoot")}} +- {{domxref("SVGURIReference")}} +- {{domxref("SVGViewSpec")}} {{deprecated_inline}} +- {{domxref("SVGZoomAndPan")}} +- {{domxref("SVGZoomEvent")}} {{deprecated_inline}} + +## Voir aussi + +- [Exemples appliqués pour le DOM](/fr/docs/Web/API/Référence_du_DOM_Gecko/Exemples) diff --git a/files/fr/web/api/document_object_model/introduction/index.md b/files/fr/web/api/document_object_model/introduction/index.md index fa1af30b15..81279982bf 100644 --- a/files/fr/web/api/document_object_model/introduction/index.md +++ b/files/fr/web/api/document_object_model/introduction/index.md @@ -11,62 +11,67 @@ tags: - Tutorial translation_of: Web/API/Document_Object_Model/Introduction --- -<div>{{DefaultAPISidebar("DOM")}}</div> +{{DefaultAPISidebar("DOM")}} -<p>Le Modèle Objet de Document (<strong>DOM: Document object Model</strong>) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, nous présenterons brièvement le DOM. Nous verrons comment le DOM représente un document {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications.</p> +Le Modèle Objet de Document (**DOM: Document object Model**) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, nous présenterons brièvement le DOM. Nous verrons comment le DOM représente un document {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications. -<h2 id="what_is_the_dom">Qu'est-ce que le DOM?</h2> +## Qu'est-ce que le DOM? -<p>Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.</p> +Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation. -<p>Une page Web est un document. Celui-ci peut être affiché soit dans la fenêtre du navigateur, soit sous la forme de son code source HTML. Mais il s'agit du même document dans les deux cas. Le modèle objet de document proposé par le DOM fournit une autre manière de représenter, stocker et manipuler ce même document. Le DOM est une représentation entièrement orientée objet de la page Web, et peut être manipulé à l'aide d'un langage de script comme JavaScript.</p> +Une page Web est un document. Celui-ci peut être affiché soit dans la fenêtre du navigateur, soit sous la forme de son code source HTML. Mais il s'agit du même document dans les deux cas. Le modèle objet de document proposé par le DOM fournit une autre manière de représenter, stocker et manipuler ce même document. Le DOM est une représentation entièrement orientée objet de la page Web, et peut être manipulé à l'aide d'un langage de script comme JavaScript. -<p>Les normes <a href="https://www.w3.org/DOM/">DOM du W3C</a> et <a href="https://dom.spec.whatwg.org">WHATWG DOM</a> forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.</p> +Les normes [DOM du W3C](https://www.w3.org/DOM/) et [WHATWG DOM](https://dom.spec.whatwg.org) forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent. -<p>Par exemple, DOM du W3C spécifie que la méthode <code>getElementsByTagName</code> dans le code ci-dessous doit renvoyer une liste de tous les éléments <code><P></code> présents dans le document :</p> +Par exemple, DOM du W3C spécifie que la méthode `getElementsByTagName` dans le code ci-dessous doit renvoyer une liste de tous les éléments `<P>` présents dans le document : -<pre class="brush: js">const paragraphs = document.querySelectorAll("p"); -// paragraphes[0] est le premier élément <p> -// paragraphes[1] est le second élément <p>, etc. +```js +const paragraphs = document.querySelectorAll("p"); +// paragraphes[0] est le premier élément <p> +// paragraphes[1] est le second élément <p>, etc. alert(paragraphes[0].nodeName); -</pre> +``` -<p>Chacune des propriétés et des méthodes et chacun des évènements disponibles permettant la manipulation et la création de pages Web sont organisés dans des objets (par exemple, l'objet <code>document</code> qui représente le document lui-même, l'objet <code>table</code> qui implémente l'interface DOM particulière <code>HTMLTableElement</code> permettant d'accéder aux tables HTML, etc.). Cette documentation fournit une référence, objet par objet, du DOM implémenté dans les navigateurs basés sur Gecko.</p> +Chacune des propriétés et des méthodes et chacun des évènements disponibles permettant la manipulation et la création de pages Web sont organisés dans des objets (par exemple, l'objet `document` qui représente le document lui-même, l'objet `table` qui implémente l'interface DOM particulière `HTMLTableElement` permettant d'accéder aux tables HTML, etc.). Cette documentation fournit une référence, objet par objet, du DOM implémenté dans les navigateurs basés sur Gecko. -<h2 id="dom_and_javascript">DOM et JavaScript</h2> +## DOM et JavaScript -<p>Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en <a href="/fr/docs/Web/JavaScript">JavaScript</a>. C'est-à-dire qu'il est<em> écrit</em> en JavaScript, mais qu'il<em> utilise</em> le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.</p> +Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en [JavaScript](/fr/docs/Web/JavaScript). C'est-à-dire qu'il est _écrit_ en JavaScript, mais qu'il _utilise_ le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript. -<p>À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative :</p> +À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative : -<p>API(page Web ou XML) = DOM + JS(langage de script)</p> +API(page Web ou XML) = DOM + JS(langage de script) -<p>Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :</p> +Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python : -<pre class="brush: python"># Exemple d'utilisation du DOM en Python +```python +# Exemple d'utilisation du DOM en Python import xml.dom.minidom as m doc = m.parse("C:\\Projects\\Py\\chap1.xml"); doc.nodeName # Propriété DOM de l'objet document; p_list = doc.getElementsByTagName("para"); -</pre> +``` -<p>Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir <a href="/fr/docs/Web/JavaScript/JavaScript_technologies_overview">Survol des technologies JavaScript</a>.</p> +Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir [Survol des technologies JavaScript](/fr/docs/Web/JavaScript/JavaScript_technologies_overview). -<h2 id="how_do_i_access_the_dom">Méthodes d'accès au DOM</h2> +## Méthodes d'accès au DOM -<p>Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Les différents navigateurs ont différentes implémentations du DOM, et celles-ci présentent des degrés divers de conformité au standard DOM de référence (un sujet que l'on tente d'éviter dans cette documentation), mais chacun d'entre eux utilise un modèle objet de document pour rendre les pages Web accessibles aux scripts.</p> +Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Les différents navigateurs ont différentes implémentations du DOM, et celles-ci présentent des degrés divers de conformité au standard DOM de référence (un sujet que l'on tente d'éviter dans cette documentation), mais chacun d'entre eux utilise un modèle objet de document pour rendre les pages Web accessibles aux scripts. -<p>Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <code><SCRIPT></code> ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments <code><a href="/fr/docs/Web/API/Document">document</a></code> ou <code><a href="/fr/docs/Web/API/Window">window</a></code>, vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction <code><a href="/fr/docs/Web/API/Window/alert">alert()</a></code> de l'objet <code><a href="/fr/docs/Web/API/Window">window</a></code>, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.</p> +Lorsque vous créez un script, qu'il figure au sein de la page dans un élément `<SCRIPT>` ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments [`document`](/fr/docs/Web/API/Document) ou [`window`](/fr/docs/Web/API/Window), vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction [`alert()`](/fr/docs/Web/API/Window/alert) de l'objet [`window`](/fr/docs/Web/API/Window), ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas. -<p>Le code JavaScript suivant affichera une alerte quand le document est chargé (et quand le DOM entier est disponible à l'utilisation).</p> +Le code JavaScript suivant affichera une alerte quand le document est chargé (et quand le DOM entier est disponible à l'utilisation). -<pre class="brush: html"><body onload="window.alert('Bienvenue sur ma page Web !');"></pre> +```html +<body onload="window.alert('Bienvenue sur ma page Web !');"> +``` -<p>Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :</p> +Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document : -<pre class="brush: html"><html> - <head> - <script> +```html +<html> + <head> + <script> // run this function when the document is loaded window.onload = function() { @@ -76,167 +81,219 @@ p_list = doc.getElementsByTagName("para"); heading.appendChild(heading_text); document.body.appendChild(heading); } - </script> - </head> - <body> - </body> -</html> -</pre> + </script> + </head> + <body> + </body> +</html> +``` -<h2 id="important_data_types">Types de données fondamentaux</h2> +## Types de données fondamentaux -<p>Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître.</p> +Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître. -<div class="note"> -<p><strong>Note :</strong> Parce que la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN fera souvent la même chose, à cause de la fréquence de cette hypothèse.</p> -</div> +> **Note :** Parce que la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN fera souvent la même chose, à cause de la fréquence de cette hypothèse. -<p><strong>NDTR: </strong>(Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant <code>elements</code>, aux tableaux de nœuds en tant que <code>nodeLists</code> (ou même simplement éléments), et aux nœuds d'attributs en tant qu'<code>attributes)</code>.</p> +**NDTR:** (Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant `elements`, aux tableaux de nœuds en tant que `nodeLists` (ou même simplement éléments), et aux nœuds d'attributs en tant qu'`attributes)`. -<p>Le tableau suivant décrit brièvement ces types de données.</p> +Le tableau suivant décrit brièvement ces types de données. <table class="standard-table"> - <thead> - <tr> - <th scope="col">Type de donnée (Interface)</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{domxref("Document")}}</td> - <td>Lorsqu'un membre renvoie un objet de type <code>document</code> (par exemple la propriété <strong>ownerDocument</strong> d'un élément, qui retourne le <code>document</code> auquel il appartient), cet objet est l'objet <code>document</code> racine lui-même. Le chapitre <a href="/fr/docs/Web/API/Document">référence de DOM <code>document</code></a> décrit l'objet <code>document</code> en détail.</td> - </tr> - <tr> - <td>{{domxref("Node")}}</td> - <td>Chaque objet du document est sous une forme ou une autre un noeud. Dans un document HTML, un objet peût être un élément nœud, mais aussi un nœud text ou nœud attribut.</td> - </tr> - <tr> - <td>{{domxref("Element")}}</td> - <td>Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire, par exemple que la méthode <a href="/fr/docs/Web/API/Document/createElement">document.createElement()</a> renvoie une réference à un objet de type nœud, nous dirons simplement que cette méthode renvoie l'élément qui vient juste d'être créer dans le DOM. Les objets element implémentent l'interface DOM element, mais aussi l'interface plus basique node, qui sont toutes les deux incluses dans cette réference. dans un document HTML, les éléments sont mis en valeur par l'interface API HTML DOM {{domxref("HTMLElement")}} aussi bien que par d'autres interfaces décrivant les capacités d'éléments spécifiques ( par exemple , {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).</td> - </tr> - <tr> - <td>{{domxref("NodeList")}}</td> - <td>Une <code>nodeList</code> est un tableau d'éléments, comme celui qui est renvoyé par la méthode <a href="/fr/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName()</a>. Les éléments d'une <code>nodeList</code> sont accessibles par un index de deux manières différentes : - <ul> - <li>list.item(1)</li> - <li>list[1]</li> - </ul> - - <p>Ces deux lignes sont équivalentes. Dans la première, <strong>item()</strong> est la méthode de l'objet <code>nodeList</code>. La seconde utilise la syntaxe habituelle d'un tableau pour accéder au second élément de la liste.</p> - </td> - </tr> - <tr> - <td>{{domxref("Attribute")}}</td> - <td>Lorsqu'un <code>attribute</code> est renvoyé par un membre (par exemple par la méthode <strong>createAttribute()</strong>), il s'agit d'une référence à un objet qui expose une interface particulière (et limitée) aux attributs. Les attributs sont des nœuds dans le DOM tout comme les éléments, mais ils seront rarement utilisés de cette manière.</td> - </tr> - <tr> - <td>{{domxref("NamedNodeMap")}}</td> - <td>Une <code>namedNodeMap</code> est comme un tableau, mais où l'on peut accéder aux éléments à la fois par nom ou par index. Cette dernière possibilité est cependant juste là pour faciliter l'énumération, car la liste n'est pas dans un ordre particulier. Une <code>namedNodeMap</code> a une méthode item() pour la même raison, et il est également possible d'ajouter et de retirer des élements d'une <code>namedNodeMap</code>.</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Type de donnée (Interface)</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("Document")}}</td> + <td> + Lorsqu'un membre renvoie un objet de type <code>document</code> (par + exemple la propriété <strong>ownerDocument</strong> d'un élément, qui + retourne le <code>document</code> auquel il appartient), cet objet est + l'objet <code>document</code> racine lui-même. Le chapitre + <a href="/fr/docs/Web/API/Document" + >référence de DOM <code>document</code></a + > + décrit l'objet <code>document</code> en détail. + </td> + </tr> + <tr> + <td>{{domxref("Node")}}</td> + <td> + Chaque objet du document est sous une forme ou une autre un noeud. Dans + un document HTML, un objet peût être un élément nœud, mais aussi un nœud + text ou nœud attribut. + </td> + </tr> + <tr> + <td>{{domxref("Element")}}</td> + <td> + Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud + de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire, + par exemple que la méthode + <a href="/fr/docs/Web/API/Document/createElement" + >document.createElement()</a + > + renvoie une réference à un objet de type nœud, nous dirons simplement + que cette méthode renvoie l'élément qui vient juste d'être créer dans le + DOM. Les objets element implémentent l'interface DOM element, mais aussi + l'interface plus basique node, qui sont toutes les deux incluses dans + cette réference. dans un document HTML, les éléments sont mis en valeur + par l'interface API HTML DOM {{domxref("HTMLElement")}} aussi + bien que par d'autres interfaces décrivant les capacités d'éléments + spécifiques ( par exemple , {{domxref("HTMLTableElement")}} for + {{HTMLElement("table")}} elements). + </td> + </tr> + <tr> + <td>{{domxref("NodeList")}}</td> + <td> + Une <code>nodeList</code> est un tableau d'éléments, comme celui qui est + renvoyé par la méthode + <a href="/fr/docs/Web/API/Document/getElementsByTagName" + >document.getElementsByTagName()</a + >. Les éléments d'une <code>nodeList</code> sont accessibles par un + index de deux manières différentes : + <ul> + <li>list.item(1)</li> + <li>list[1]</li> + </ul> + <p> + Ces deux lignes sont équivalentes. Dans la première, + <strong>item()</strong> est la méthode de l'objet + <code>nodeList</code>. La seconde utilise la syntaxe habituelle d'un + tableau pour accéder au second élément de la liste. + </p> + </td> + </tr> + <tr> + <td>{{domxref("Attribute")}}</td> + <td> + Lorsqu'un <code>attribute</code> est renvoyé par un membre (par exemple + par la méthode <strong>createAttribute()</strong>), il s'agit d'une + référence à un objet qui expose une interface particulière (et limitée) + aux attributs. Les attributs sont des nœuds dans le DOM tout comme les + éléments, mais ils seront rarement utilisés de cette manière. + </td> + </tr> + <tr> + <td>{{domxref("NamedNodeMap")}}</td> + <td> + Une <code>namedNodeMap</code> est comme un tableau, mais où l'on peut + accéder aux éléments à la fois par nom ou par index. Cette dernière + possibilité est cependant juste là pour faciliter l'énumération, car la + liste n'est pas dans un ordre particulier. Une + <code>namedNodeMap</code> a une méthode item() pour la même raison, et + il est également possible d'ajouter et de retirer des élements d'une + <code>namedNodeMap</code>. + </td> + </tr> + </tbody> </table> -<h2 id="dom_interfaces">Les interfaces DOM</h2> +## Les interfaces DOM -<p>Un des objectifs de ce guide est de ne pas trop parler de l'héritage abstrait d'interfaces, et d'autres détails d'implémentation, et de se concentrer plutôt sur les objets dans le DOM qui sont les<em>choses</em> réelles utilisables pour manipuler la hiérarchie du DOM. Du point de vue du programmeur Web, il est rarement utile de savoir que l'objet représentant l'élément <code>HTML FORM</code> reçoit sa propriété <strong>name</strong> de l'interface <code>HTMLElement</code>. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire.</p> +Un des objectifs de ce guide est de ne pas trop parler de l'héritage abstrait d'interfaces, et d'autres détails d'implémentation, et de se concentrer plutôt sur les objets dans le DOM qui sont les*choses* réelles utilisables pour manipuler la hiérarchie du DOM. Du point de vue du programmeur Web, il est rarement utile de savoir que l'objet représentant l'élément `HTML FORM` reçoit sa propriété **name** de l'interface `HTMLElement`. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire. -<p>Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut entrainer une certaine confusion, c'est pourquoi cette section tente de présenter un tant soit peu les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles.</p> +Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut entrainer une certaine confusion, c'est pourquoi cette section tente de présenter un tant soit peu les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles. -<h3 id="interfaces_and_objects">Les interfaces et les objets</h3> +### Les interfaces et les objets -<p>De nombreux objets empruntent à plusieurs interfaces différentes. L'objet table par exemple implémente une <a href="/fr/docs/Web/API/HTMLTableElement">interface spécialisée de l'élément HTML Table</a>, qui comprend des méthodes telles que <code>createCaption</code> et <code>insertRow</code>. Mais comme il s'agit également d'un élément HTML, <code>table</code> implémente aussi l'interface <code>Element</code> décrite dans le chapitre <a href="/fr/docs/Web/API/Element">Référence de DOM <code>element</code></a>. Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique <code>Node</code>, dont dérive <code>Element</code>.</p> +De nombreux objets empruntent à plusieurs interfaces différentes. L'objet table par exemple implémente une [interface spécialisée de l'élément HTML Table](/fr/docs/Web/API/HTMLTableElement), qui comprend des méthodes telles que `createCaption` et `insertRow`. Mais comme il s'agit également d'un élément HTML, `table` implémente aussi l'interface `Element` décrite dans le chapitre [Référence de DOM `element`](/fr/docs/Web/API/Element). Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique `Node`, dont dérive `Element`. -<p>Lorsque vous obtiendrez une référence à un objet <code>table</code>, comme dans l'exemple suivant, vous utiliserez régulièrement ces trois interfaces de manière interchangeable sur l'objet, peut-être même sans le savoir.</p> +Lorsque vous obtiendrez une référence à un objet `table`, comme dans l'exemple suivant, vous utiliserez régulièrement ces trois interfaces de manière interchangeable sur l'objet, peut-être même sans le savoir. -<pre class="brush: js">var table = document.getElementById("table"); +```js +var table = document.getElementById("table"); var tableAttrs = table.attributes; // Interface Node/Element -for(var i = 0; i < tableAttrs.length; i++){ +for(var i = 0; i < tableAttrs.length; i++){ // Interface HTMLTableElement : attribut border if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // Interface HTMLTableElement : attribut summary table.summary = "note : bordure plus large"; -</pre> +``` -<h3 id="core_interfaces_in_the_dom">Interfaces essentielles du DOM</h3> +### Interfaces essentielles du DOM -<p>Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre <a href="/fr/docs/Web/API/Document_Object_Model/Examples">Exemples d'utilisation du DOM</a> à la fin de livre.</p> +Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre [Exemples d'utilisation du DOM](/fr/docs/Web/API/Document_Object_Model/Examples) à la fin de livre. -<p>Les objets <code>document</code> et <code>window</code> sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet <code>window</code> représente quelque chose comme le navigateur, et l'objet <code>document</code> est la racine du document lui-même. <code>Element</code> hérite de l'interface générique <code>Node</code>, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent, comme dans l'objet <code>table</code> donné en exemple dans la section précédente.</p> +Les objets `document` et `window` sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet `window` représente quelque chose comme le navigateur, et l'objet `document` est la racine du document lui-même. `Element` hérite de l'interface générique `Node`, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent, comme dans l'objet `table` donné en exemple dans la section précédente. -<p>Ce qui suit est une brève liste des API communes au script de page dans le Web et XML utilisant le DOM.</p> +Ce qui suit est une brève liste des API communes au script de page dans le Web et XML utilisant le DOM. -<ul> - <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li> - <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li> - <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li> - <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li> - <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li> - <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li> - <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li> - <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li> - <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li> - <li><code>{{domxref("window.content", "", "", "1")}}</code></li> - <li><code>{{domxref("window.onload", "", "", "1")}}</code></li> - <li><code>{{domxref("console.log", "", "", "1")}}()</code></li> - <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li> -</ul> +- `{{domxref("document.getElementById", "", "", "1")}}(id)` +- `document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)` +- `{{domxref("document.createElement", "", "", "1")}}(name)` +- `parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)` +- `element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}` +- `element.{{domxref("HTMLElement.style", "style", "", "1")}}.left` +- `element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()` +- `element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()` +- `element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()` +- `{{domxref("window.content", "", "", "1")}}` +- `{{domxref("window.onload", "", "", "1")}}` +- `{{domxref("console.log", "", "", "1")}}()` +- `{{domxref("window.scrollTo", "", "", "1")}}()` -<h2 id="testing_the_dom_api">Test de l'API DOM</h2> +## Test de l'API DOM -<p>Ce document fournit des exemples pour chaque interface utilisable dans le cadre de votre propre développement Web. Dans certains cas, les exemples sont des pages HTML complètes, avec l'accès au DOM dans un élément <script>, l'interface (comme les boutons) nécessaire pour lancer le script dans un formulaire, et les éléments HTML sur lesquels le DOM opère sont listés également. Lorsque c'est le cas, vous pouvez copier et coller l'exemple dans un nouveau document HTML, l'enregistrer et l'exécuter depuis un navigateur.</p> +Ce document fournit des exemples pour chaque interface utilisable dans le cadre de votre propre développement Web. Dans certains cas, les exemples sont des pages HTML complètes, avec l'accès au DOM dans un élément \<script>, l'interface (comme les boutons) nécessaire pour lancer le script dans un formulaire, et les éléments HTML sur lesquels le DOM opère sont listés également. Lorsque c'est le cas, vous pouvez copier et coller l'exemple dans un nouveau document HTML, l'enregistrer et l'exécuter depuis un navigateur. -<p>Il y a cependant certains cas où les exemples sont plus concis. Pour exécuter les exemples qui démontrent seulement la relation basique entre l'interface et les éléments HTML, il peut être utile de mettre en place une page de test dans laquelle les interfaces peuvent être accédées facilement par des scriptes. La page suivante, très simple, fournit un élément <script> dans l'entête dans lequel vous pouvez placer les fonctions qui testent l'interface voulue, quelques éléments HTML avec des attributs que vous pouvez lire, modifier ou manipuler de quelque manière que ce soit, et l'interface utilisateur Web nécessaire pour appeler toutes ces fonctions depuis le navigateur.</p> +Il y a cependant certains cas où les exemples sont plus concis. Pour exécuter les exemples qui démontrent seulement la relation basique entre l'interface et les éléments HTML, il peut être utile de mettre en place une page de test dans laquelle les interfaces peuvent être accédées facilement par des scriptes. La page suivante, très simple, fournit un élément \<script> dans l'entête dans lequel vous pouvez placer les fonctions qui testent l'interface voulue, quelques éléments HTML avec des attributs que vous pouvez lire, modifier ou manipuler de quelque manière que ce soit, et l'interface utilisateur Web nécessaire pour appeler toutes ces fonctions depuis le navigateur. -<p>Vous pouvez utiliser cette page de test ou en créer une semblable pour tester les interfaces DOM qui vous intéressent et voir comment elles fonctionnent sur la plateforme du navigateur. Vous pouvez mettre à jour le contenu de la fonction <code>test()</code>, créer plus de boutons, ou ajouter d'autres éléments si nécessaire.</p> +Vous pouvez utiliser cette page de test ou en créer une semblable pour tester les interfaces DOM qui vous intéressent et voir comment elles fonctionnent sur la plateforme du navigateur. Vous pouvez mettre à jour le contenu de la fonction `test()`, créer plus de boutons, ou ajouter d'autres éléments si nécessaire. -<pre class="brush: html"><html> -<head> - <title>Tests du DOM</title> - <script type="application/x-javascript"> +```html +<html> +<head> + <title>Tests du DOM</title> + <script type="application/x-javascript"> function setBodyAttr(attr,value){ if(document.body) eval('document.body.'+attr+'="'+value+'"'); else notSupported(); } - </script> -</head> -<body> - <div style="margin: .5in; height="400""> - <p><b><tt>text</tt> color</p> - <form> - <select onChange="setBodyAttr('text', - this.options[this.selectedIndex].value);"> - <option value="black">black - <option value="darkblue">darkblue - </select> - <p><b><tt>bgColor</tt></p> - <select onChange="setBodyAttr('bgColor', - this.options[this.selectedIndex].value);"> - <option value="white">white - <option value="lightgrey">gray - </select> - <p><b><tt>link</tt></p> - <select onChange="setBodyAttr('link', - this.options[this.selectedIndex].value);"> - <option value="blue">blue - <option value="green">green - </select> <small> - <a href="http://www.brownhen.com/dom_api_top.html" id="sample"> - (exemple de lien)</a></small><br> - </form> - <form> - <input type="button" value="version" onclick="ver()" /> - </form> - </div> -</body> -</html></pre> - -<p>Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.</p> - -<p>Figure 0.1 Exemple de page de test du DOM</p> - -<p><img alt="" src="dom_ref_introduction_to_the_dom.gif"></p> - -<p>Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web accessibles au DOM comme sa couleur de fond (<code>bgColor</code>), la couleur des hyperliens (<code>aLink</code>) et la couleur du texte (<code>text</code>). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM.</p> + </script> +</head> +<body> + <div style="margin: .5in; height="400""> + <p><b><tt>text</tt> color</p> + <form> + <select onChange="setBodyAttr('text', + this.options[this.selectedIndex].value);"> + <option value="black">black + <option value="darkblue">darkblue + </select> + <p><b><tt>bgColor</tt></p> + <select onChange="setBodyAttr('bgColor', + this.options[this.selectedIndex].value);"> + <option value="white">white + <option value="lightgrey">gray + </select> + <p><b><tt>link</tt></p> + <select onChange="setBodyAttr('link', + this.options[this.selectedIndex].value);"> + <option value="blue">blue + <option value="green">green + </select> <small> + <a href="http://www.brownhen.com/dom_api_top.html" id="sample"> + (exemple de lien)</a></small><br> + </form> + <form> + <input type="button" value="version" onclick="ver()" /> + </form> + </div> +</body> +</html> +``` + +Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test. + +Figure 0.1 Exemple de page de test du DOM + + + +Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web accessibles au DOM comme sa couleur de fond (`bgColor`), la couleur des hyperliens (`aLink`) et la couleur du texte (`text`). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM. diff --git a/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md index 72893cd5ab..b23bc2e16d 100644 --- a/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md +++ b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md @@ -11,48 +11,42 @@ translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_select original_slug: >- Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs --- -<div>{{ gecko_minversion_header("1.9.1") }}</div> +{{ gecko_minversion_header("1.9.1") }} -<p>L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds <a href="/fr/docs/Web/API/element" ><code>Element</code></a> du DOM par correspondance avec un jeu de sélecteurs. C'est beaucoup plus rapide que les techniques passées, pour lesquelles il était nécessaire, par exemple, d'utiliser une boucle en code JavaScript pour localiser l'élément spécifique que l'on devait trouver.</p> +L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds [`Element`](/fr/docs/Web/API/element) du DOM par correspondance avec un jeu de sélecteurs. C'est beaucoup plus rapide que les techniques passées, pour lesquelles il était nécessaire, par exemple, d'utiliser une boucle en code JavaScript pour localiser l'élément spécifique que l'on devait trouver. -<h2 id="L'interface_NodeSelector">L'interface NodeSelector</h2> +## L'interface NodeSelector -<p>Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces <a href="/fr/docs/Web/API/document" ><code>Document</code></a>, <a href="/fr/docs/Web/API/DocumentFragment" ><code>DocumentFragment</code></a> ou <a href="/fr/docs/Web/API/element" ><code>Element</code></a> :</p> +Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces [`Document`](/fr/docs/Web/API/document), [`DocumentFragment`](/fr/docs/Web/API/DocumentFragment) ou [`Element`](/fr/docs/Web/API/element) : -<dl> - <dt><code>querySelector</code></dt> - <dd>Renvoie le premier noeud <a href="/fr/docs/Web/API/element" ><code>Element</code></a> correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, <code>null</code> est renvoyé.</dd> - <dt><code>querySelectorAll</code></dt> - <dd>Renvoie une <a href="/fr/docs/Web/API/NodeList" ><code>NodeList</code></a> (<em>liste de noeuds</em>) contenant tous les noeuds <code>Element</code> correspondants dans la sous-arborescence du noeud, ou une <code>NodeList</code> vide si aucune correspondance n'a été trouvée.</dd> -</dl> +- `querySelector` + - : Renvoie le premier noeud [`Element`](/fr/docs/Web/API/element) correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, `null` est renvoyé. +- `querySelectorAll` + - : Renvoie une [`NodeList`](/fr/docs/Web/API/NodeList) (_liste de noeuds_) contenant tous les noeuds `Element` correspondants dans la sous-arborescence du noeud, ou une `NodeList` vide si aucune correspondance n'a été trouvée. -<div class="note"> - <p><strong>Note :</strong> La <code><a href="/fr/docs/Web/API/NodeList" >NodeList</a></code> retournée par <code><a href="/fr/docs/Web/API/Element/querySelectorAll" >querySelectorAll()</a></code> n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe.</p> -</div> +> **Note :** La [`NodeList`](/fr/docs/Web/API/NodeList) retournée par [`querySelectorAll()`](/fr/docs/Web/API/Element/querySelectorAll) n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe. -<p>Vous pouvez trouver des exemples et des détails en lisant la documentation sur les méthodes <a href="/fr/docs/Web/API/Element/querySelector" ><code>querySelector()</code></a> et <a href="/fr/docs/Web/API/Element/querySelectorAll" ><code>querySelectorAll()</code></a>, ainsi que dans l'article <a href="/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector" >Extraits de code pour querySelector</a>.</p> +Vous pouvez trouver des exemples et des détails en lisant la documentation sur les méthodes [`querySelector()`](/fr/docs/Web/API/Element/querySelector) et [`querySelectorAll()`](/fr/docs/Web/API/Element/querySelectorAll), ainsi que dans l'article [Extraits de code pour querySelector](/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector). -<h2 id="Sélecteurs">Sélecteurs</h2> +## Sélecteurs -<p>Les méthodes de Selector acceptent un ou plusieurs sélecteurs séparés par des virgules pour déterminer les éléments à renvoyer. Par exemple, pour sélectionner tous les éléments paragraphe (<code>p</code>) dans le document dont la classe CSS est soit <code>warning</code> soit <code>note</code>, vous pouvez utiliser ce qui suit :</p> +Les méthodes de Selector acceptent un ou plusieurs sélecteurs séparés par des virgules pour déterminer les éléments à renvoyer. Par exemple, pour sélectionner tous les éléments paragraphe (`p`) dans le document dont la classe CSS est soit `warning` soit `note`, vous pouvez utiliser ce qui suit : -<pre><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre> + var special = document.querySelectorAll( "p.warning, p.note" ); -<p>Vous pouvez aussi interroger par l'ID (<em>identifiant</em>). Par exemple :</p> +Vous pouvez aussi interroger par l'ID (_identifiant_). Par exemple : -<pre><code>var el = document.querySelector( "#main, #basic, #exclamation" );</code></pre> + var el = document.querySelector( "#main, #basic, #exclamation" ); -<p>Après l'exécution du code ci-dessus, <code>el</code> contient le premier élément dans le document dont l'ID est <code>main</code>, <code>basic</code> ou <code>exclamation</code>.</p> +Après l'exécution du code ci-dessus, `el` contient le premier élément dans le document dont l'ID est `main`, `basic` ou `exclamation`. -<p>Vous pouvez utiliser tous les sélecteurs CSS avec les méthodes <code>querySelector()</code> et <code>querySelectorAll()</code>.</p> +Vous pouvez utiliser tous les sélecteurs CSS avec les méthodes `querySelector()` et `querySelectorAll()`. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://www.w3.org/TR/selectors-api/">API Selectors</a> (en)</li> - <li><a href="/fr/docs/Web/API/Element/querySelector" ><code>element.querySelector</code></a></li> - <li><a href="/fr/docs/Web/API/Element/querySelectorAll" ><code>element.querySelectorAll</code></a></li> - <li><a href="/fr/docs/Web/API/Document/querySelector" ><code>document.querySelector</code></a></li> - <li><a href="/fr/docs/Web/API/Document/querySelectorAll" ><code>document.querySelectorAll</code></a></li> - <li><a href="/en-US/docs/Code_snippets/QuerySelector" >Extraits de code pour querySelector</a></li> -</ul> +- [API Selectors](http://www.w3.org/TR/selectors-api/) (en) +- [`element.querySelector`](/fr/docs/Web/API/Element/querySelector) +- [`element.querySelectorAll`](/fr/docs/Web/API/Element/querySelectorAll) +- [`document.querySelector`](/fr/docs/Web/API/Document/querySelector) +- [`document.querySelectorAll`](/fr/docs/Web/API/Document/querySelectorAll) +- [Extraits de code pour querySelector](/en-US/docs/Code_snippets/QuerySelector) 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 cc245fd99b..78199ae55a 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 @@ -11,40 +11,39 @@ 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 --- -<p> </p> +## Introduction -<h2 id="Introduction">Introduction</h2> +Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondamentales et la façon de les utiliser depuis JavaScript. Vous y apprendrez à créer, accéder, contrôler et supprimer dynamiquement des éléments HTML. Les méthodes DOM décrites ne sont pas spécifiques au HTML et s'appliquent également au XML. Les exemples fonctionneront dans tous les navigateurs offrant le support complet du DOM niveau 1, ce qui est le cas de tous les navigateurs basés sur Mozilla comme Firefox ou Netscape. Les morceaux de code de ce document fonctionneront également dans Internet Explorer 5. -<p>Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondamentales et la façon de les utiliser depuis JavaScript. Vous y apprendrez à créer, accéder, contrôler et supprimer dynamiquement des éléments HTML. Les méthodes DOM décrites ne sont pas spécifiques au HTML et s'appliquent également au XML. Les exemples fonctionneront dans tous les navigateurs offrant le support complet du DOM niveau 1, ce qui est le cas de tous les navigateurs basés sur Mozilla comme Firefox ou Netscape. Les morceaux de code de ce document fonctionneront également dans Internet Explorer 5.</p> +> **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). -<div class="note"> - <p><strong>Note :</strong>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).</p> -</div> +## Exemple: Création d'un tableau HTML dynamiquement (`Sample1.html`) -<h2 id="Overview_of_Sample1.html">Exemple: Création d'un tableau HTML dynamiquement (<code>Sample1.html</code>)</h2> +### Contenu HTML -<h3 id="Contenu_HTML">Contenu HTML</h3> +```html +<input type="button" value="Generate a table." onclick="generate_table()"> +``` -<pre class="brush: html"><input type="button" value="Generate a table." onclick="generate_table()"></pre> +### Contenu JavaScript -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> - -<pre class="brush: js">function generate_table() { +```js +function generate_table() { // get the reference for the body var body = document.getElementsByTagName("body")[0]; - // creates a <table> element and a <tbody> element + // creates a <table> element and a <tbody> element var tbl = document.createElement("table"); var tblBody = document.createElement("tbody"); // creating all cells - for (var i = 0; i < 2; i++) { + for (var i = 0; i < 2; i++) { // creates a table row var row = document.createElement("tr"); - for (var j = 0; j < 2; j++) { - // Create a <td> element and a text node, make the text - // node the contents of the <td>, and put the <td> at + for (var j = 0; j < 2; j++) { + // Create a <td> element and a text node, make the text + // node the contents of the <td>, and put the <td> at // the end of the table row var cell = document.createElement("td"); var cellText = document.createTextNode("cell in row "+i+", column "+j); @@ -56,79 +55,82 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript tblBody.appendChild(row); } - // put the <tbody> in the <table> + // put the <tbody> in the <table> tbl.appendChild(tblBody); - // appends <table> into <body> + // appends <table> into <body> body.appendChild(tbl); // sets the border attribute of tbl to 2; tbl.setAttribute("border", "2"); -}</pre> +} +``` + +{{ EmbedLiveSample('Overview_of_Sample1.html') }} + +Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés : + +1. On crée d'abord l'élément \<table>. +2. Ensuite, l'élément \<tbody> qui est un enfant de l'élément \<table>. +3. Puis, grâce à une boucle, on crée les éléments \<tr>, qui sont des enfants de l'élément \<tbody>. +4. Pour chaque élément \<tr>, on emploie une boucle pour créer les éléments enfants \<td>. +5. Enfin pour chaque élément \<td>, on crée le nœud texte contenant le texte de la cellule du tableau. + +Après avoir créé les éléments \<table>, \<tbody>, \<tr>, \<td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse : + +1. On attache d'abord chaque nœud texte à son élément parent \<td> en utilisant + + cell.appendChild(texte); -<p>{{ EmbedLiveSample('Overview_of_Sample1.html') }}</p> +2. Ensuite, on lie chaque élément \<td> à son élément \<tr> parent avec -<p>Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés :</p> + row.appendChild(cell); -<ol> - <li>On crée d'abord l'élément <table>.</li> - <li>Ensuite, l'élément <tbody> qui est un enfant de l'élément <table>.</li> - <li>Puis, grâce à une boucle, on crée les éléments <tr>, qui sont des enfants de l'élément <tbody>.</li> - <li>Pour chaque élément <tr>, on emploie une boucle pour créer les éléments enfants <td>.</li> - <li>Enfin pour chaque élément <td>, on crée le nœud texte contenant le texte de la cellule du tableau.</li> -</ol> +3. Puis chaque \<tr> à son parent \<tbody> avec -<p>Après avoir créé les éléments <table>, <tbody>, <tr>, <td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse :</p> + tablebody.appendChild(row); -<ol> - <li>On attache d'abord chaque nœud texte à son élément parent <td> en utilisant - <pre>cell.appendChild(texte);</pre> - </li> - <li>Ensuite, on lie chaque élément <td> à son élément <tr> parent avec - <pre>row.appendChild(cell);</pre> - </li> - <li>Puis chaque <tr> à son parent <tbody> avec - <pre>tablebody.appendChild(row);</pre> - </li> - <li>Puis l'élément <tbody> est attaché à son élément parent <table> grace à - <pre>table.appendChild(tablebody);</pre> - </li> - <li>Enfin, <table> est rattaché à <body> avec - <pre>body.appendChild(table);</pre> - </li> -</ol> +4. Puis l'élément \<tbody> est attaché à son élément parent \<table> grace à -<p>Souvenez-vous de cette technique, vous l'utiliserez souvent en programmant pour le DOM W3C. On crée d'abord les éléments du haut vers le bas, puis on attache les enfants aux parents dans l'ordre inverse.</p> + table.appendChild(tablebody); + +5. Enfin, \<table> est rattaché à \<body> avec + + body.appendChild(table); -<p>Voici l'HTML généré par ce code JavaScript :</p> +Souvenez-vous de cette technique, vous l'utiliserez souvent en programmant pour le DOM W3C. On crée d'abord les éléments du haut vers le bas, puis on attache les enfants aux parents dans l'ordre inverse. -<pre>... -<table border="2"> -<tr><td>la cellule est ligne 0 colonne 0</td><td>la cellule est ligne 0 colonne 1</td></tr> -<tr><td>la cellule est ligne 1 colonne 0</td><td>la cellule est ligne 1 colonne 1</td></tr> -</table> -... -</pre> +Voici l'HTML généré par ce code JavaScript : -<p>Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :</p> + ... + <table border="2"> + <tr><td>la cellule est ligne 0 colonne 0</td><td>la cellule est ligne 0 colonne 1</td></tr> + <tr><td>la cellule est ligne 1 colonne 0</td><td>la cellule est ligne 1 colonne 1</td></tr> + </table> + ... -<p><img src="sample1-tabledom.jpg"></p> +Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants : -<p>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.</p> + -<h2 id="M.C3.A9thodes_DOM_fondamentales_-_Exemple2.html">Exemple : Définition de la couleur d'arrière-plan d'un paragraphe</h2> +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. -<p><code>getElementsByTagName</code> 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.</p> +## Exemple : Définition de la couleur d'arrière-plan d'un paragraphe -<h3 id="Contenu_HTML_2">Contenu HTML</h3> +`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. -<pre class="brush: html"><body> - <input type="button" value="Set paragraph background color" onclick="set_background()"> - <p>hi</p> - <p>hello</p> -</body></pre> +### Contenu HTML -<h3 id="Contenu_JavaScript_2">Contenu JavaScript</h3> +```html +<body> + <input type="button" value="Set paragraph background color" onclick="set_background()"> + <p>hi</p> + <p>hello</p> +</body> +``` -<pre class="brush: js">function set_background() { +### Contenu JavaScript + +```js +function set_background() { // récupère une liste de tous les éléments body (il n'y en aura qu'un), // et sélectionne le premier (indice 0) de ces éléments myBody = document.getElementsByTagName("body")[0]; @@ -139,160 +141,160 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript // récupère le second élément de cette liste d'éléments p myP = myBodyElements[1]; myP.style.background = "rgb(255,0,0)"; -}</pre> +} +``` + +{{ EmbedLiveSample('Setting_background_of_a_paragraph') }} + +Dans cet exemple, on assigne à la variable `myP` l'objet DOM du second élément `p` du corps (body). -<p>{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}</p> +1. On récupère d'abord une liste de tous les éléments body avec -<p>Dans cet exemple, on assigne à la variable <code>myP</code> l'objet DOM du second élément <code>p</code> du corps (body).</p> + ```html + myBody = document.getElementsByTagName("body")[0] + ``` -<ol> - <li>On récupère d'abord une liste de tous les éléments body avec - <pre class="brush:html">myBody = document.getElementsByTagName("body")[0]</pre> - Puisqu'il n'existe qu'un seul élément body dans un document HTML valide, cette liste ne comporte qu'un élément, que l'on récupère en sélectionnant le premier élément de la liste grace à <code>{{mediawiki.external(0)}}</code>.</li> - <li>Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant - <pre class="brush:html">myBodyElements = myBody.getElementsByTagName("p");</pre> - </li> - <li>Pour finir on prend le deuxième élément de la liste des éléments p avec - <pre class="brush:html">myP = myBodyElements[1];</pre> - </li> -</ol> + Puisqu'il n'existe qu'un seul élément body dans un document HTML valide, cette liste ne comporte qu'un élément, que l'on récupère en sélectionnant le premier élément de la liste grace à `{{mediawiki.external(0)}}`. -<p><img src="sample2a2.jpg"></p> +2. Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant -<p>Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement :</p> + ```html + myBodyElements = myBody.getElementsByTagName("p"); + ``` -<pre class="eval">myP.style.background = "rgb(255,0,0)"; -// ajoute une propriété de style inline -</pre> +3. Pour finir on prend le deuxième élément de la liste des éléments p avec -<h3 id="Cr.C3.A9ation_de_n.C5.93uds_texte_avec_document.createTextNode.28.22...22.29">Création de nœuds texte avec <code>document.createTextNode("..")</code></h3> + ```html + myP = myBodyElements[1]; + ``` -<p>Employez l'objet <code>document</code> pour appeler la méthode <code>createTextNode</code> et créer un nœud texte. Il suffit de lui communiquer le contenu texte, et la valeur renvoyée est un objet représentant le nœud texte.</p> + -<pre class="brush:html">myTextNode = document.createTextNode("world");</pre> +Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement : -<p>Ce morceau de code crée un nœud de type TEXT_NODE qui contient la donnée texte <code>"world"</code>, et <code>monNoeudTexte</code> est la référence de l'objet nœud créé. Pour afficher ce texte sur votre page HTML, vous devez ensuite définir ce nœud texte comme l'enfant d'un autre élément nœud.</p> + myP.style.background = "rgb(255,0,0)"; + // ajoute une propriété de style inline -<h3 id="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29">Insertion d'éléments avec appendChild(...)</h3> +### Création de nœuds texte avec `document.createTextNode("..")` -<p>En invoquant <code>myP.appendChild</code> ({{mediawiki.external('node_element')}}) , vous définissez <code>element_nœud</code> comme un nouvel enfant du second élément <code>p</code> (<code>myP</code> a été défini plus haut comme étant le second élément p).</p> +Employez l'objet `document` pour appeler la méthode `createTextNode` et créer un nœud texte. Il suffit de lui communiquer le contenu texte, et la valeur renvoyée est un objet représentant le nœud texte. -<pre class="eval">myP.appendChild(noeudTexte); -</pre> +```html +myTextNode = document.createTextNode("world"); +``` -<p>En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : <code>helloworld</code>. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise <p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document :</p> +Ce morceau de code crée un nœud de type TEXT_NODE qui contient la donnée texte `"world"`, et `monNoeudTexte` est la référence de l'objet nœud créé. Pour afficher ce texte sur votre page HTML, vous devez ensuite définir ce nœud texte comme l'enfant d'un autre élément nœud. -<p><img src="sample2b2.jpg"></p> +### Insertion d'éléments avec appendChild(...) -<div class="note"> - <p><strong>Note :</strong>L'utilisation de <code>createTextNode</code> et de <code>appendChild</code> permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode <code>appendChild</code> ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez <code>insertBefore</code> à la place de <code>appendChild</code>.</p> -</div> +En invoquant `myP.appendChild` ({{mediawiki.external('node_element')}}) , vous définissez `element_nœud` comme un nouvel enfant du second élément `p` (`myP` a été défini plus haut comme étant le second élément p). -<h3 id="Cr.C3.A9ation_de_nouveaux_.C3.A9l.C3.A9ments_avec_l.27objet_document_et_la_m.C3.A9thode_createElement.28....29">Création de nouveaux éléments avec l'objet document et la méthode <code>createElement(...)</code></h3> + myP.appendChild(noeudTexte); -<p>Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec <code>createElement</code>. Pour créer un élément <p> enfant de l'élément <body>, vous pouvez vous servir de <code>body</code> défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez <code>document.createElement("nombalise")</code>. Voici un exemple :</p> +En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : `helloworld`. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise \<p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document : -<pre class="eval">nouveauNoeudBALISEP = document.createElement("p"); -body.appendChild(nouveauNoeudBALISEP); -</pre> + -<p><img src="sample2c.jpg"></p> +> **Note :**L'utilisation de `createTextNode` et de `appendChild` permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode `appendChild` ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez `insertBefore` à la place de `appendChild`. -<h3 id="Suppression_de_n.C5.93uds_avec_la_m.C3.A9thode_removeChild.28....29">Suppression de nœuds avec la méthode <code>removeChild(...)</code></h3> +### Création de nouveaux éléments avec l'objet document et la méthode `createElement(...)` -<p>Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de <code>myP</code> (deuxième élément <p>) le nœud texte contenant le mot « world » :</p> +Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec `createElement`. Pour créer un élément \<p> enfant de l'élément \<body>, vous pouvez vous servir de `body` défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez `document.createElement("nombalise")`. Voici un exemple : -<pre class="eval">myP.removeChild(noeudTexte); -</pre> + nouveauNoeudBALISEP = document.createElement("p"); + body.appendChild(nouveauNoeudBALISEP); -<p>Vous pouvez ensuite ajouter <code>monNoeudTexte</code> (contenant <code>"world"</code>) dans l'élément <p> récemment créé :</p> + -<pre class="eval">nouveauNoeudBALISEP.appendChild(noeudTexte); -</pre> +### Suppression de nœuds avec la méthode `removeChild(...)` -<p>L'arborescence des objets se présente désormais comme ceci :</p> +Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de `myP` (deuxième élément \<p>) le nœud texte contenant le mot « world » : -<p><img src="sample2d.jpg"></p> + myP.removeChild(noeudTexte); -<h2 id="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29">Création dynamique d'un tableau (retour à Sample1.html)</h2> +Vous pouvez ensuite ajouter `monNoeudTexte` (contenant `"world"`) dans l'élément \<p> récemment créé : -<p>Jusqu'à la fin de cet article, nous travaillons de nouveau sur Exemple1.html. Le schéma qui suit vous rappelle la structure de l'arbre des objets pour le tableau créé dans l'exemple.</p> + nouveauNoeudBALISEP.appendChild(noeudTexte); -<h3 id="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML">Rappel de la structure arborescente d'un tableau HTML</h3> +L'arborescence des objets se présente désormais comme ceci : -<p><img src="sample1-tabledom.jpg"></p> + -<h3 id="Cr.C3.A9ation_et_insertion_des_.C3.A9l.C3.A9ments_dans_l.27arborescence">Création et insertion des éléments dans l'arborescence</h3> +## Création dynamique d'un tableau (retour à Sample1.html) -<p>On peut décomposer la création du tableau de Exemple1.html en trois étapes :</p> +Jusqu'à la fin de cet article, nous travaillons de nouveau sur Exemple1.html. Le schéma qui suit vous rappelle la structure de l'arbre des objets pour le tableau créé dans l'exemple. -<ul> - <li>Récupérer l'objet body (c'est le premier élément de l'objet document).</li> - <li>Créer tous les éléments.</li> - <li>Greffer chaque enfant sur son parent en respectant la structure du tableau (cf. le schéma ci-dessus).</li> -</ul> +### Rappel de la structure arborescente d'un tableau HTML -<p>Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.</p> + -<div class="note"> - <p><strong>Note :</strong> Il y a une ligne de code supplémentaire à la fin de la fonction <code>start()</code>, qui définit la propriété bordure du tableau en employant la méthode <code>setAttribute</code>. <code>setAttribute</code> utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément.</p> -</div> +### Création et insertion des éléments dans l'arborescence -<pre class="brush: html"><head> -<title>Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript</title> -<script> +On peut décomposer la création du tableau de Exemple1.html en trois étapes : + +- Récupérer l'objet body (c'est le premier élément de l'objet document). +- Créer tous les éléments. +- Greffer chaque enfant sur son parent en respectant la structure du tableau (cf. le schéma ci-dessus). + +Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1. + +> **Note :** Il y a une ligne de code supplémentaire à la fin de la fonction `start()`, qui définit la propriété bordure du tableau en employant la méthode `setAttribute`. `setAttribute` utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément. + +```html +<head> +<title>Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript</title> +<script> function start() { // récupère une référence vers l'élément body var body = document.getElementsByTagName("body")[0]; - // création des éléments <table> et <tbody> + // création des éléments <table> et <tbody> table = document.createElement("table"); tablebody = document.createElement("tbody"); // création des cellules - for(var j = 0; j < 2; j++) { - // création d'un élément <tr> + for(var j = 0; j < 2; j++) { + // création d'un élément <tr> row = document.createElement("tr"); - for(var i = 0; i < 2; i++) { - // création d'un élément <td> + for(var i = 0; i < 2; i++) { + // création d'un élément <td> cell = document.createElement("td"); // création d'un nœud texte texte = document.createTextNode("la cellule est ligne " + j + ", colonne " + i); - // ajoute le nœud texte créé à la cellule <td> + // ajoute le nœud texte créé à la cellule <td> cell.appendChild(texte); - // ajoute la cellule <td> à la ligne <tr> + // ajoute la cellule <td> à la ligne <tr> row.appendChild(cell); } - // ajoute la ligne <tr> à l'élément <tbody> + // ajoute la ligne <tr> à l'élément <tbody> tablebody.appendChild(row); } - // ajoute <tbody> à l'élément <table> + // ajoute <tbody> à l'élément <table> table.appendChild(tablebody); - // ajoute <table> à l'élément <body> + // ajoute <table> à l'élément <body> body.appendChild(table); // définit l'attribut border de table à 2; table.setAttribute("border", "2"); } -</script> -</head> -<body onload="start()"> -</body> -</html> -</pre> +</script> +</head> +<body onload="start()"> +</body> +</html> +``` -<h2 id="Manipulation_du_tableau_avec_DOM_et_CSS">Manipulation du tableau avec DOM et CSS</h2> +## Manipulation du tableau avec DOM et CSS -<h3 id="R.C3.A9cup.C3.A9rer_un_n.C5.93ud_texte_dans_le_tableau">Récupérer un nœud texte dans le tableau</h3> +### Récupérer un nœud texte dans le tableau -<p>Cet exemple présente deux nouveaux attributs DOM. D'abord, l'attribut <code>childNodes</code> qui est utilisé pour récupérer la liste des nœuds enfants de <code>cel</code>. A la différence de <code>getElementsByTagName</code>, la liste renvoyée par <code>childNodes</code> comporte tous les enfants sans considération de type. Une fois la liste obtenue, la méthode <code>{{ mediawiki.external('x') }}</code> est employée pour sélectionner l'élément enfant désiré. Dans cet exemple, le nœud texte de la seconde cellule de la seconde ligne du tableau est enregistré dans <code>celtext</code>. Ensuite, un nouveau nœud texte contenant les données de <code>celtext</code> est greffé en tant qu'enfant sur l'élément <body>.</p> +Cet exemple présente deux nouveaux attributs DOM. D'abord, l'attribut `childNodes` qui est utilisé pour récupérer la liste des nœuds enfants de `cel`. A la différence de `getElementsByTagName`, la liste renvoyée par `childNodes` comporte tous les enfants sans considération de type. Une fois la liste obtenue, la méthode `{{ mediawiki.external('x') }}` est employée pour sélectionner l'élément enfant désiré. Dans cet exemple, le nœud texte de la seconde cellule de la seconde ligne du tableau est enregistré dans `celtext`. Ensuite, un nouveau nœud texte contenant les données de `celtext` est greffé en tant qu'enfant sur l'élément \<body>. -<div class="note"> - <p><strong>Note :</strong> Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut <code>data</code>.</p> -</div> +> **Note :** Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut `data`. -<pre class="brush:js">mybody = document.getElementsByTagName("body")[0]; +```js +mybody = document.getElementsByTagName("body")[0]; mytable = mybody.getElementsByTagName("table")[0]; mytablebody = mytable.getElementsByTagName("tbody")[0]; myrow = mytablebody.getElementsByTagName("tr")[1]; @@ -303,59 +305,58 @@ myceltext=mycel.childNodes[0]; // contenu de currenttext est le contenu des données de myceltext currenttext=document.createTextNode(myceltext.data); -mybody.appendChild(currenttext);</pre> - -<h3 id="R.C3.A9cup.C3.A9rer_la_valeur_d.27un_attribut">Récupérer la valeur d'un attribut</h3> - -<p>A la fin d'Exemple1, l'appel à <code>setAttribute</code> sur l'objet <code>table</code> définit la propriété <code>border</code> du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode <code>getAttribute</code> :</p> - -<pre class="brush:html">mytable.getAttribute("border");</pre> - -<h3 id="Cacher_une_colonne_en_changeant_les_propri.C3.A9t.C3.A9s_de_style">Cacher une colonne en changeant les propriétés de style</h3> - -<p>Une fois que vous avez l'objet dans une variable JavaScript, vous pouvez définir les propriétés directement. Le code qui suit est une version modifiée de Exemple1.html où les cellules de la seconde colonne sont cachées, et le fond de celles de la première colonne est rouge. Remarquez que la propriété de style y est définie directement.</p> - -<pre><html> -<body onload="start()"> -</body> -<script> - function start() { - var body = document.getElementsByTagName("body")[0]; - table = document.createElement("table"); - tablebody = document.createElement("tbody"); - - for(var j = 0; j < 2; j++) { - row = document.createElement("tr"); - for(var i = 0; i < 2; i++) { - cell = document.createElement("td"); - text = document.createTextNode("la cellule est :" + i + j); - cell.appendChild(text); - row.appendChild(cell); - // change la couleur de fond de la cellule - // si la colonne est 0. Si la colonne est 1, cache la cellule - if (i == 0) { - cell.style.background = "rgb(255,0,0)"; - } else { - cell.style.display = "none"; +mybody.appendChild(currenttext); +``` + +### Récupérer la valeur d'un attribut + +A la fin d'Exemple1, l'appel à `setAttribute` sur l'objet `table` définit la propriété `border` du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode `getAttribute` : + +```html +mytable.getAttribute("border"); +``` + +### Cacher une colonne en changeant les propriétés de style + +Une fois que vous avez l'objet dans une variable JavaScript, vous pouvez définir les propriétés directement. Le code qui suit est une version modifiée de Exemple1.html où les cellules de la seconde colonne sont cachées, et le fond de celles de la première colonne est rouge. Remarquez que la propriété de style y est définie directement. + + <html> + <body onload="start()"> + </body> + <script> + function start() { + var body = document.getElementsByTagName("body")[0]; + table = document.createElement("table"); + tablebody = document.createElement("tbody"); + + for(var j = 0; j < 2; j++) { + row = document.createElement("tr"); + for(var i = 0; i < 2; i++) { + cell = document.createElement("td"); + text = document.createTextNode("la cellule est :" + i + j); + cell.appendChild(text); + row.appendChild(cell); + // change la couleur de fond de la cellule + // si la colonne est 0. Si la colonne est 1, cache la cellule + if (i == 0) { + cell.style.background = "rgb(255,0,0)"; + } else { + cell.style.display = "none"; + } } + tablebody.appendChild(row); } - tablebody.appendChild(row); - } - table.appendChild(tablebody); - body.appendChild(table); - } -</script> -</html> -</pre> + table.appendChild(tablebody); + body.appendChild(table); + } + </script> + </html> -<h4 id="Original_Document_Information">Original Document Information</h4> +#### Original Document Information -<dl> - <dt>Author(s)</dt> - <dd>Marcio Galli</dd> - <dt>Migrated from</dt> - <dd>http://web.archive.org/web/20000815054125/http://mozilla.org/docs/dom/technote/tn-dom-table/</dd> -</dl> +- Author(s) + - : Marcio Galli +- Migrated from + - : http\://web.archive.org/web/20000815054125/http\://mozilla.org/docs/dom/technote/tn-dom-table/ -<p><br> - Interwik</p> +Interwik diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.md b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.md index e4298a2055..c2d92e9281 100644 --- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.md +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.md @@ -9,16 +9,16 @@ tags: translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C/Exemple --- - -<pre class="brush: html"> <html> - <head> - <title>Mon Document</title> - <script type="text/javascript"> +```html + <html> + <head> + <title>Mon Document</title> + <script type="text/javascript"> function change() { - // document.getElementsByTagName("H1") renvoie une NodeList (<em>liste de noeuds</em>) de h1 + // document.getElementsByTagName("H1") renvoie une NodeList (liste de noeuds) de h1 // les éléments dans le document dont le premier a le numéro 0 : var header = document.getElementsByTagName("H1").item(0); - // le firstChild (<em>premier enfant</em>) de l'en-tête est un noeud Texte : + // le firstChild (premier enfant) de l'en-tête est un noeud Texte : header.firstChild.data = "Un document dynamique"; // maintenant l'en-tête est "Un document dynamique". var para = document.getElementsByTagName("P").item(0); @@ -30,15 +30,15 @@ original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_ // placer le texte dans le paragraphe newElement.appendChild(newText); // et placer le paragraphe à la fin du document par son ajout - // le BODY (<em>corps</em>) (qui est le parent de para) + // le BODY (corps) (qui est le parent de para) para.parentNode.appendChild(newElement); } - </script> - </head> - <body> - <input type="button" value="Modifier ce document." onclick="change()"> - <h1>Header</h1> - <p>Paragraph</p> - </body> - </head> -</pre> + </script> + </head> + <body> + <input type="button" value="Modifier ce document." onclick="change()"> + <h1>Header</h1> + <p>Paragraph</p> + </body> + </head> +``` 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 c59fe45427..0348ed4df2 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 @@ -9,49 +9,51 @@ tags: 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 --- -<p>Le DOM Level 1 Core du W3C est un modèle objet puissant permettant de modifier l'arbre de contenu de documents. Il est géré dans Mozilla (sur lequel Firefox et Netscape sont basés) et (pour la plus grande partie) dans Internet Explorer 5 pour Windows. Il s'agit d'une base essentielle du scripting sur le Web dans l'avenir.</p> +Le DOM Level 1 Core du W3C est un modèle objet puissant permettant de modifier l'arbre de contenu de documents. Il est géré dans Mozilla (sur lequel Firefox et Netscape sont basés) et (pour la plus grande partie) dans Internet Explorer 5 pour Windows. Il s'agit d'une base essentielle du scripting sur le Web dans l'avenir. -<h2 id="D.C3.A9finition_d.27un_arbre_de_contenu">Définition d'un arbre de contenu</h2> +## Définition d'un arbre de contenu -<p>Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">les espaces dans le DOM</a>) :</p> +Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur [les espaces dans le DOM](/fr/docs/Gestion_des_espaces_dans_le_DOM)) : -<pre class="eval"><html> -<head> - <title>Mon document</title> -</head> -<body> - <h1>Titre</h1> - <p>Paragraphe</p> -</body> -</html> -</pre> + <html> + <head> + <title>Mon document</title> + </head> + <body> + <h1>Titre</h1> + <p>Paragraphe</p> + </body> + </html> -<p><img src="using_the_w3c_dom_level_1_core-doctree.jpg"></p> + -<p>Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage.</p> +Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage. -<p>Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.)</p> +Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.) -<h2 id="Ce_que_permet_le_DOM_Level_1_Core">Ce que permet le DOM Level 1 Core</h2> +## Ce que permet le DOM Level 1 Core -<p>Le DOM Level 1 permet de modifier l'arbre du contenu<em>selon vos désirs</em>. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété <code>document</code> de l'objet global. Cet objet <code>document</code> implémente l'<a href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document">interface Document</a> de la spécification DOM Level 1 du W3C.</p> +Le DOM Level 1 permet de modifier l'arbre du contenu*selon vos désirs*. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété `document` de l'objet global. Cet objet `document` implémente l'[interface Document](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document) de la spécification DOM Level 1 du W3C. -<h2 id="Un_exemple_simple">Un exemple simple</h2> +## Un exemple simple -<p>Supposons que l'auteur désire prendre le document présenté plus haut et changer le contenu du titre, ainsi qu'écrire deux paragraphes plutôt qu'un seul. Le script suivant le permettrait :</p> +Supposons que l'auteur désire prendre le document présenté plus haut et changer le contenu du titre, ainsi qu'écrire deux paragraphes plutôt qu'un seul. Le script suivant le permettrait : -<h3 id="Contenu_HTML">Contenu HTML</h3> +### Contenu HTML -<pre class="brush: html"><body> -<input type="button" value="Change this document." onclick="change()"> -<h2>Header</h2> -<p>Paragraph</p> -</body></pre> +```html +<body> +<input type="button" value="Change this document." onclick="change()"> +<h2>Header</h2> +<p>Paragraph</p> +</body> +``` -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> +### Contenu JavaScript -<pre class="brush: js"> function change() { - // document.getElementsByTagName ("H2") renvoie un NodeList du <h2> +```js + function change() { + // document.getElementsByTagName ("H2") renvoie un NodeList du <h2> // éléments dans le document, et le premier est le nombre 0: var header = document.getElementsByTagName("H2").item(0); @@ -71,14 +73,15 @@ original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_ // et pose le paragraphe à la fin du document en l'ajoutant // au BODY (qui est le parent de para) para.parentNode.appendChild(newElement); - }</pre> + } +``` -<p>{{ EmbedLiveSample('A_simple_example', 800, 300) }}</p> +{{ EmbedLiveSample('A_simple_example', 800, 300) }} -<p>Vous pouvez voir ce script dans <a href="http://www.mozilla.org/docs/dom/technote/intro/example.html">un exemple complet</a>.</p> +Vous pouvez voir ce script dans [un exemple complet](http://www.mozilla.org/docs/dom/technote/intro/example.html). -<h3 id="Pour_en_savoir_plus">Pour en apprendre plus</h3> +### Pour en apprendre plus -<p>Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant <a href="/fr/docs/Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript">les méthodes fondamentales de DOM Level 1</a>. C'est la suite de ce document.</p> +Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant [les méthodes fondamentales de DOM Level 1](/fr/docs/Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript). C'est la suite de ce document. -<p>Consultez également la <a href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html">spécification DOM Level 1 Core</a> du W3C (traduction en français non normative). C'est une spécification relativement claire, même si elle est un peu formelle. Ce qui est surtout intéressant pour les auteurs, c'est la description des différents objets DOM et de toutes leurs propriétés et méthodes. Voyez encore notre <a href="/fr/docs/Web/API/Document_Object_Model">documentation complète sur le DOM</a>.</p>
\ No newline at end of file +Consultez également la [spécification DOM Level 1 Core](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html) du W3C (traduction en français non normative). C'est une spécification relativement claire, même si elle est un peu formelle. Ce qui est surtout intéressant pour les auteurs, c'est la description des différents objets DOM et de toutes leurs propriétés et méthodes. Voyez encore notre [documentation complète sur le DOM](/fr/docs/Web/API/Document_Object_Model). diff --git a/files/fr/web/api/document_object_model/whitespace/index.md b/files/fr/web/api/document_object_model/whitespace/index.md index 9529722049..e20754093f 100644 --- a/files/fr/web/api/document_object_model/whitespace/index.md +++ b/files/fr/web/api/document_object_model/whitespace/index.md @@ -5,63 +5,63 @@ tags: - DOM translation_of: Web/API/Document_Object_Model/Whitespace --- -<h2 id="Le_probl.C3.A8me">Le problème</h2> +## Le problème -<p>La présence d'espaces et de blancs dans le <a href="fr/DOM">DOM</a> peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction <code>white-space: pre</code> en <a href="fr/CSS">CSS</a> fonctionne.) Cela signifie que :</p> +La présence d'espaces et de blancs dans le [DOM](fr/DOM) peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction `white-space: pre` en [CSS](fr/CSS) fonctionne.) Cela signifie que : -<ul> - <li>il y aura certains nœuds texte qui ne contiendront que du vide, et</li> - <li>certains nœuds texte commenceront ou se termineront par des blancs.</li> -</ul> +- il y aura certains nœuds texte qui ne contiendront que du vide, et +- certains nœuds texte commenceront ou se termineront par des blancs. -<p>En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) :</p> +En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) : -<pre class="eval"><!-- My document --> -<html> -<head> - <title>My Document</title> -</head> -<body> - <h1>Header</h1> - <p> - Paragraph - </p> -</body> -</html> -</pre> + <!-- My document --> + <html> + <head> + <title>My Document</title> + </head> + <body> + <h1>Header</h1> + <p> + Paragraph + </p> + </body> + </html> -<p><img alt="Arbre du DOM équivalent à l'exemple HTML ci-avant" src="dom-string.png"></p> + -<p>Ceci peut rendre les choses un peu plus difficiles pour les utilisateurs du DOM qui aimeraient parcourir le contenu, sans se préoccuper des blancs.</p> +Ceci peut rendre les choses un peu plus difficiles pour les utilisateurs du DOM qui aimeraient parcourir le contenu, sans se préoccuper des blancs. -<h2 id="Rendre_les_choses_plus_faciles">Rendre les choses plus faciles</h2> +## Rendre les choses plus faciles -<p>On peut formater leur code comme indiqué ci-dessous pour contourner le problème:</p> +On peut formater leur code comme indiqué ci-dessous pour contourner le problème: -<pre class="brush: html"><!-- jolie impression conventionnelle +```html +<!-- jolie impression conventionnelle avec des espaces entre les balises: - --> -<div> - <ul> - <li>Position 1</li> - <li>Position 2</li> - <li>Position 3</li> - </ul> -</div> - -<!-- jolie impression adaptée au problème : - --> -<div - ><ul - ><li>Position 1</li - ><li>Position 2</li - ><li>Position 3</li - ></ul -></div></pre> - -<p>Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM :</p> - -<pre class="brush: js">/** + --> +<div> + <ul> + <li>Position 1</li> + <li>Position 2</li> + <li>Position 3</li> + </ul> +</div> + +<!-- jolie impression adaptée au problème : + --> +<div + ><ul + ><li>Position 1</li + ><li>Position 2</li + ><li>Position 3</li + ></ul +></div> +``` + +Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM : + +```js +/** * Tout au long, les espaces sont définis comme l'un des caractères * "\t" TAB \u0009 * "\n" LF \u000A @@ -78,8 +78,8 @@ translation_of: Web/API/Document_Object_Model/Whitespace * * @param nod Un nœud implémentant l'interface |CharacterData| (c'est-à-dire, * un nœud |Text|, |Comment| ou |CDATASection| - * @return True <em>(vrai)</em> Si tout le contenu du texte du |nod| est un espace, - * sinon false <em>(faux)</em>. + * @return True (vrai) Si tout le contenu du texte du |nod| est un espace, + * sinon false (faux). */ function is_all_ws( nod ) { @@ -92,16 +92,16 @@ function is_all_ws( nod ) * Détermine si le nœud doit être ignoré par les fonctions d'itération. * * @param nod Un objet implémentant l'interface DOM1 |Node|. - * @return true <em>(vrai)</em> si le nœud est : + * @return true (vrai) si le nœud est : * 1) un nœud |Text| qui est tout en espace * 2) un nœud |Comment| - * et autrement false <em>(faux)</em>. + * et autrement false (faux). */ function is_ignorable( nod ) { return ( nod.nodeType == 8) || // un nœud commentaire - ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nœud texte, tout espace + ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nœud texte, tout espace } /** @@ -204,13 +204,15 @@ function data_of( txt ) if (data.charAt(data.length - 1) == " ") data = data.substring(0, data.length - 1); return data; -}</pre> +} +``` -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Le code qui suit montre l'utilisation des fonctions présentées plus haut. Il parcourt les enfants d'un élément (dont les enfants sont tous des éléments) pour trouver celui dont le texte est <code>"Ceci est le troisième paragraphe"</code>, et change ensuite l'attribut <code>class</code> et le contenu de ce paragraphe.</p> +Le code qui suit montre l'utilisation des fonctions présentées plus haut. Il parcourt les enfants d'un élément (dont les enfants sont tous des éléments) pour trouver celui dont le texte est `"Ceci est le troisième paragraphe"`, et change ensuite l'attribut `class` et le contenu de ce paragraphe. -<pre class="brush: js">var cur = first_child(document.getElementById("test")); +```js +var cur = first_child(document.getElementById("test")); while (cur) { if (data_of(cur.firstChild) == "This is the third paragraph.") @@ -219,4 +221,5 @@ while (cur) cur.firstChild.textContent = "This is the magic paragraph."; } cur = node_after(cur); -}</pre>
\ No newline at end of file +} +``` diff --git a/files/fr/web/api/documentfragment/documentfragment/index.md b/files/fr/web/api/documentfragment/documentfragment/index.md index f9c636ecef..753d6f303c 100644 --- a/files/fr/web/api/documentfragment/documentfragment/index.md +++ b/files/fr/web/api/documentfragment/documentfragment/index.md @@ -10,41 +10,30 @@ tags: - Fragments translation_of: Web/API/DocumentFragment/DocumentFragment --- -<p>{{ApiRef("DOM")}}{{seeCompatTable}}</p> +{{ApiRef("DOM")}}{{seeCompatTable}} -<p>Le constructeur <code><strong>DocumentFragment()</strong></code> renvoie un nouvel objet {{domxref("DocumentFragment")}} créé vide.</p> +Le constructeur **`DocumentFragment()`** renvoie un nouvel objet {{domxref("DocumentFragment")}} créé vide. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>fragment</em> = new DocumentFragment()</pre> + fragment = new DocumentFragment() -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">fragment = new DocumentFragment();</pre> +```js +fragment = new DocumentFragment(); +``` -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-documentfragment', 'DocumentFragment.DocumentFragment()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG', '#dom-documentfragment', 'DocumentFragment.DocumentFragment()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DocumentFragment.DocumentFragment")}}</p> +{{Compat("api.DocumentFragment.DocumentFragment")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Document_Object_Model">L'index des interfaces du DOM.</a></li> -</ul> +- [L'index des interfaces du DOM.](/fr/docs/Web/API/Document_Object_Model) diff --git a/files/fr/web/api/documentfragment/index.md b/files/fr/web/api/documentfragment/index.md index 23025411fa..10737564e4 100644 --- a/files/fr/web/api/documentfragment/index.md +++ b/files/fr/web/api/documentfragment/index.md @@ -10,96 +10,61 @@ tags: - Noeuds translation_of: Web/API/DocumentFragment --- -<p>{{ ApiRef("DOM") }}</p> - -<p>L’interface <strong><code>DocumentFragment</code></strong> représente un objet document minimal qui n’a pas de parent. Il est utilisé comme une version légère de {{domxref("Document")}} pour stocker un segment de structure de document composé de nœuds, tout comme un document standard. La différence fondamentale est que, comme le fragment de document ne fait pas réellement partie de la structure du DOM, les changements faits au fragment n’affectent pas le document, ne causent pas de {{Glossary("Reflow")}} , et ne provoquent pas les éventuels impacts de performance qui peuvent avoir lieu quand des changements sont faits.</p> - -<p>Un usage courant de <code>DocumentFragment</code> est de créer un fragment, assembler un sous-arbre DOM au sein de celui-ci, puis ajouter ou insérer le fragment dans le DOM en utilisant les méthodes de l’interface {{domxref("Node")}} (telles que {{domxref("Node.appendChild", "appendChild()")}} ou {{domxref("Node.insertBefore", "insertBefore()")}}). En faisant ainsi, on place les nœuds du fragment dans le DOM, en laissant derrière un <code>DocumentFragment</code> vide. Comme tous les nœuds sont insérés dans le document en une seule fois, un seul <em>reflow</em> et un seul rendu sont déclenchés, au lieu de potentiellement un pour chaque nœud inséré s’ils avaient été insérés séparément.</p> - -<p>Cette interface est également beaucoup utilisée avec les Web components : les éléments {{HTMLElement("template")}} contiennent un <code>DocumentFragment</code> dans leur propriété {{domxref("HTMLTemplateElement.content")}}.</p> - -<p>Un <code>DocumentFragment</code> vide peut être créé en utilisant la méthode {{domxref("document.createDocumentFragment()")}} ou le constructeur.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Specification">Propriétés</h2> - -<p><em>Cette interface n’a pas de propriétés spécifiques, mais hérite de celles de son parent, </em><em>{{domxref("Node")}}, et implémente celles de l’interface {{domxref("ParentNode")}}.</em></p> - -<dl> - <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Retourne une {{domxref("HTMLCollection")}} dynamique contenant tous les objets de type {{domxref("Element")}} enfants de l’objet <code>DocumentFragment</code>.</dd> - <dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Retourne un {{domxref("Element")}} qui est le premier enfant de l’objet <code>DocumentFragment</code>, ou <code>null</code> s’il n’y en a aucun.</dd> - <dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Retourne un {{domxref("Element")}} qui est le dernier enfant de l’objet <code>DocumentFragment</code>, ou <code>null</code> s’il n’y en a aucun.</dd> - <dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Retourne un <code>unsigned long</code> indiquant le nomble d’enfants que le <code>DocumentFragment</code> possède.</dd> -</dl> - -<h2 id="Constructeur">Constructeur</h2> - -<dl> - <dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}</dt> - <dd>Retourne un objet <code>DocumentFragment</code> vide.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p><em>Cette interface hérite des méthodes de son parent, {{domxref("Node")}}<em>, et implémente celles de l’interface {{domxref("ParentNode")}}</em></em><em>.</em></p> - -<dl> - <dt>{{domxref("DocumentFragment.querySelector()")}}</dt> - <dd>Retourne le premier nœud {{domxref("Element")}} du <code>DocumentFragment</code>, dans l’ordre du document, correspondant aux sélécteurs spécifiés.</dd> - <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt> - <dd>Retourne une {{domxref("NodeList")}} de tous les nœuds {{domxref("Element")}} du <code>DocumentFragment</code> qui correspondent aux sélecteurs spécifiés.</dd> - <dt>{{domxref("DocumentFragment.getElementById()")}}</dt> - <dd>Retourne le premier nœud {{domxref("Element")}} du <code>DocumentFragment</code>, dans l’ordre du document, qui correspond à l’ID spécifié.</dd> -</dl> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Ajouté le constructeur et l’implémentation de {{domxref("ParentNode")}}.</td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td> - <td>{{Spec2('Selectors API Level 1')}}</td> - <td>Ajouté les méthodes <code>querySelector()</code> et <code>querySelectorAll()</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Pas de changement depuis {{SpecName('DOM2 Core')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Pas de changement depuis {{SpecName('DOM1')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.DocumentFragment")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/DOM/DOM_Reference">Index des interfaces DOM</a></li> -</ul> +{{ ApiRef("DOM") }} + +L’interface **`DocumentFragment`** représente un objet document minimal qui n’a pas de parent. Il est utilisé comme une version légère de {{domxref("Document")}} pour stocker un segment de structure de document composé de nœuds, tout comme un document standard. La différence fondamentale est que, comme le fragment de document ne fait pas réellement partie de la structure du DOM, les changements faits au fragment n’affectent pas le document, ne causent pas de {{Glossary("Reflow")}} , et ne provoquent pas les éventuels impacts de performance qui peuvent avoir lieu quand des changements sont faits. + +Un usage courant de `DocumentFragment` est de créer un fragment, assembler un sous-arbre DOM au sein de celui-ci, puis ajouter ou insérer le fragment dans le DOM en utilisant les méthodes de l’interface {{domxref("Node")}} (telles que {{domxref("Node.appendChild", "appendChild()")}} ou {{domxref("Node.insertBefore", "insertBefore()")}}). En faisant ainsi, on place les nœuds du fragment dans le DOM, en laissant derrière un `DocumentFragment` vide. Comme tous les nœuds sont insérés dans le document en une seule fois, un seul _reflow_ et un seul rendu sont déclenchés, au lieu de potentiellement un pour chaque nœud inséré s’ils avaient été insérés séparément. + +Cette interface est également beaucoup utilisée avec les Web components : les éléments {{HTMLElement("template")}} contiennent un `DocumentFragment` dans leur propriété {{domxref("HTMLTemplateElement.content")}}. + +Un `DocumentFragment` vide peut être créé en utilisant la méthode {{domxref("document.createDocumentFragment()")}} ou le constructeur. + +{{InheritanceDiagram}} + +## Propriétés + +_Cette interface n’a pas de propriétés spécifiques, mais hérite de celles de son parent,_ _{{domxref("Node")}}, et implémente celles de l’interface {{domxref("ParentNode")}}._ + +- {{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}} + - : Retourne une {{domxref("HTMLCollection")}} dynamique contenant tous les objets de type {{domxref("Element")}} enfants de l’objet `DocumentFragment`. +- {{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}} + - : Retourne un {{domxref("Element")}} qui est le premier enfant de l’objet `DocumentFragment`, ou `null` s’il n’y en a aucun. +- {{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}} + - : Retourne un {{domxref("Element")}} qui est le dernier enfant de l’objet `DocumentFragment`, ou `null` s’il n’y en a aucun. +- {{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}} + - : Retourne un `unsigned long` indiquant le nomble d’enfants que le `DocumentFragment` possède. + +## Constructeur + +- {{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}} + - : Retourne un objet `DocumentFragment` vide. + +## Méthodes + +_Cette interface hérite des méthodes de son parent, {{domxref("Node")}}_, et implémente celles de l’interface {{domxref("ParentNode")}}_\*\*._ + +- {{domxref("DocumentFragment.querySelector()")}} + - : Retourne le premier nœud {{domxref("Element")}} du `DocumentFragment`, dans l’ordre du document, correspondant aux sélécteurs spécifiés. +- {{domxref("DocumentFragment.querySelectorAll()")}} + - : Retourne une {{domxref("NodeList")}} de tous les nœuds {{domxref("Element")}} du `DocumentFragment` qui correspondent aux sélecteurs spécifiés. +- {{domxref("DocumentFragment.getElementById()")}} + - : Retourne le premier nœud {{domxref("Element")}} du `DocumentFragment`, dans l’ordre du document, qui correspond à l’ID spécifié. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}} | {{Spec2('DOM WHATWG')}} | Ajouté le constructeur et l’implémentation de {{domxref("ParentNode")}}. | +| {{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}} | {{Spec2('Selectors API Level 1')}} | Ajouté les méthodes `querySelector()` et `querySelectorAll()`. | +| {{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}} | {{Spec2('DOM3 Core')}} | Pas de changement depuis {{SpecName('DOM2 Core')}} | +| {{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}} | {{Spec2('DOM2 Core')}} | Pas de changement depuis {{SpecName('DOM1')}} | +| {{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}} | {{Spec2('DOM1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.DocumentFragment")}} + +## Voir aussi + +- [Index des interfaces DOM](/en-US/docs/DOM/DOM_Reference) diff --git a/files/fr/web/api/documentfragment/queryselector/index.md b/files/fr/web/api/documentfragment/queryselector/index.md index 86aac6075b..b30928e051 100644 --- a/files/fr/web/api/documentfragment/queryselector/index.md +++ b/files/fr/web/api/documentfragment/queryselector/index.md @@ -9,77 +9,60 @@ tags: - fragment translation_of: Web/API/DocumentFragment/querySelector --- -<div>{{ApiRef("DOM")}}</div> +{{ApiRef("DOM")}} -<p>La méthode <strong><code>DocumentFragment.querySelector()</code></strong> renvoie le premier élément ou <code>null</code> si aucune correspondance n'est trouvée, dans le {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), avec le groupe spécifié de sélecteurs.</p> +La méthode **`DocumentFragment.querySelector()`** renvoie le premier élément ou `null` si aucune correspondance n'est trouvée, dans le {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), avec le groupe spécifié de sélecteurs. -<p>Si le sélecteur correspond à un ID (<em>identifiant</em>) et que cet ID est utilisé plusieurs fois par erreur dans le document, il renvoie le premier élément correspondant.</p> +Si le sélecteur correspond à un ID (_identifiant_) et que cet ID est utilisé plusieurs fois par erreur dans le document, il renvoie le premier élément correspondant. -<p>Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur <code>SYNTAX_ERR</code> est lancée.</p> +Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur `SYNTAX_ERR` est lancée. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>element</em> = <em>documentfragment</em>.querySelector(<em>selectors</em>);</pre> + element = documentfragment.querySelector(selectors); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><em>selectors </em></dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.</dd> -</dl> +- _selectors_ + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant un ou plusieurs sélecteurs CSS séparés par des virgules. -<h2 id="Example">Exemples</h2> +## Exemples -<h3 id="Exemple_de_base">Exemple de base</h3> +### Exemple de base -<p>Dans cet exemple de base, le premier élément dans le {{domxref("DocumentFragment")}} avec la classe "<code>myclass</code>" est renvoyé :</p> +Dans cet exemple de base, le premier élément dans le {{domxref("DocumentFragment")}} avec la classe "`myclass`" est renvoyé : -<pre class="brush: js">var el = documentfragment.querySelector(".myclass"); -</pre> +```js +var el = documentfragment.querySelector(".myclass"); +``` -<h3 id="Syntaxe_CSS_et_argument_de_la_méthode">Syntaxe CSS et argument de la méthode</h3> +### Syntaxe CSS et argument de la méthode -<p>L'argument chaîne transmis à <code>querySelector</code> doit suivre la syntaxe CSS. Pour faire correspondre un identifiant ou des sélecteurs qui ne suivent pas la syntaxe CSS (utilisant un point-virgule ou un espace inappropriés par exemple), il est obligatoire d'échapper les mauvais caractères avec une double barre oblique inverse :</p> +L'argument chaîne transmis à `querySelector` doit suivre la syntaxe CSS. Pour faire correspondre un identifiant ou des sélecteurs qui ne suivent pas la syntaxe CSS (utilisant un point-virgule ou un espace inappropriés par exemple), il est obligatoire d'échapper les mauvais caractères avec une double barre oblique inverse : -<pre class="brush: html"><div id="foo\bar"></div> -<div id="foo:bar"></div> +```html +<div id="foo\bar"></div> +<div id="foo:bar"></div> -<script> +<script> document.querySelector('#foo\bar') // Ne correspond à rien document.querySelector('#foo\\\\bar') // Correspond au premier div document.querySelector('#foo:bar') // Ne correspond à rien document.querySelector('#foo\\:bar') // Correspond au second div -</script> -</pre> - -<h2 id="Specification">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 2', '#queryselector', 'DocumentFragment.querySelector')}}</td> - <td>{{Spec2('Selectors API Level 2')}}</td> - <td>Pas de changement de {{SpecName('Selectors API Level 1')}}</td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelector')}}</td> - <td>{{Spec2('Selectors API Level 1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.DocumentFragment.querySelector")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient.</li> -</ul> +</script> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | --------------------------------------------------------------------- | +| {{SpecName('Selectors API Level 2', '#queryselector', 'DocumentFragment.querySelector')}} | {{Spec2('Selectors API Level 2')}} | Pas de changement de {{SpecName('Selectors API Level 1')}} | +| {{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelector')}} | {{Spec2('Selectors API Level 1')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.DocumentFragment.querySelector")}} + +## Voir aussi + +- L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient. diff --git a/files/fr/web/api/documentfragment/queryselectorall/index.md b/files/fr/web/api/documentfragment/queryselectorall/index.md index c5468e6e6a..f54a09c554 100644 --- a/files/fr/web/api/documentfragment/queryselectorall/index.md +++ b/files/fr/web/api/documentfragment/queryselectorall/index.md @@ -9,57 +9,41 @@ tags: - fragment translation_of: Web/API/DocumentFragment/querySelectorAll --- -<div>{{ApiRef("DOM")}}</div> +{{ApiRef("DOM")}} -<p>La méthode <strong><code>DocumentFragment.querySelectorAll()</code></strong> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) des éléments du {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), qui correspondent avec le groupe spécifié de sélecteurs.</p> +La méthode **`DocumentFragment.querySelectorAll()`** renvoie une {{domxref("NodeList")}} (_liste de noeuds_) des éléments du {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), qui correspondent avec le groupe spécifié de sélecteurs. -<p>Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur <code>SYNTAX_ERR</code> est lancée.</p> +Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur `SYNTAX_ERR` est lancée. -<div class="note"> -<p><strong>Note :</strong> La définition de cet API a été déplacé vers l'interface {{domxref("ParentNode")}}.</p> -</div> +> **Note :** La définition de cet API a été déplacé vers l'interface {{domxref("ParentNode")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>elementList</em> = <em>documentframgment</em>.querySelectorAll(<em>selectors</em>);</pre> + elementList = documentframgment.querySelectorAll(selectors); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><em>selectors</em></dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.</dd> -</dl> +- _selectors_ + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant un ou plusieurs sélecteurs CSS séparés par des virgules. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Cet exemple renvoie une liste de tous les éléments <code>div</code> du <code>DocumentFragment</code> avec une classe soit "<code>note</code>" soit "<code>alert</code>" :</p> +Cet exemple renvoie une liste de tous les éléments `div` du `DocumentFragment` avec une classe soit "`note`" soit "`alert`" : -<pre class="brush: js">var matches = documentfrag.querySelectorAll("div.note, div.alert"); -</pre> +```js +var matches = documentfrag.querySelectorAll("div.note, div.alert"); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelectorAll')}}</td> - <td>{{Spec2('Selectors API Level 1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelectorAll')}} | {{Spec2('Selectors API Level 1')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DocumentFragment.querySelectorAll")}}</p> +{{Compat("api.DocumentFragment.querySelectorAll")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient.</li> -</ul> +- L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient. diff --git a/files/fr/web/api/documenttype/index.md b/files/fr/web/api/documenttype/index.md index c3f4a28204..c9b72f6c7b 100644 --- a/files/fr/web/api/documenttype/index.md +++ b/files/fr/web/api/documenttype/index.md @@ -8,82 +8,55 @@ tags: - Interface translation_of: Web/API/DocumentType --- -<div>{{APIRef("DOM")}}</div> - -<p>L'interface <strong><code>DocumentType</code></strong> représente un nœud ({{domxref("Node")}}) contenant un <em>doctype</em>.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Propriétés">Propriétés</h2> - -<p><em>Cette interface hérite de propriétés de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}.</em></p> - -<dl> - <dt>...</dt> - <dt>{{domxref("DocumentType.entities")}} {{readonlyInline}} {{obsolete_Inline}}</dt> - <dd>Une {{domxref ("NamedNodeMap")}} des entités déclarées dans la DTD. Chaque noeud de cette carte implémente l'interface {{domxref ("Entity")}}.</dd> - <dt>{{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{obsolete_Inline}}</dt> - <dd>Un {{domxref ("DOMString")}} du sous-ensemble interne, ou null s'il n'y en a pas. Par exemple "<! ELEMENT foo (bar)"></dd> - <dt>{{domxref("DocumentType.name")}} {{readonlyInline}}</dt> - <dd>une {{domxref("DOMString")}}, par exemple, <code>"html"</code> pour <code><!DOCTYPE HTML></code>.</dd> - <dt>{{domxref("DocumentType.notations")}} {{readonlyInline}} {{obsolete_Inline}}</dt> - <dd>une {{domxref ("NamedNodeMap")}} avec les notations déclarées dans la DTD. Chaque nœud de cette carte implémente l'interface {{domxref ("Notation")}}.</dd> - <dt>{{domxref("DocumentType.publicId")}} {{readonlyInline}}</dt> - <dd>une {{domxref("DOMString")}}, par exemple <code>"-//W3C//DTD HTML 4.01//EN"</code>, chaîne vide pour HTML5.</dd> - <dt>{{domxref("DocumentType.systemId")}} {{readonlyInline}}</dt> - <dd>une {{domxref("DOMString")}}, par exemple, <code>"http://www.w3.org/TR/html4/strict.dtd"</code>, chaîne vide pour HTML5.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p><em>Cette interface hérite de méthodes de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}.</em></p> - -<dl> - <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> - <dd>Cette méthode retire l'objet de la liste des enfants de son élément parent.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#documenttype', 'DocumentType')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Implémente désormais l'interface {{domxref("ChildNode")}}.<br> - Retrait des propriétés <code>internalSubset</code>, <code>entities</code> et <code>notation</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-412266927', 'DocumentType')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Aucune modification depuis {{SpecName('DOM2 Core')}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-412266927', 'CharacterData')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Ajout des propriétés <code>publicID</code>, <code>systemID</code> et <code>internalSubset</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-412266927', 'CharacterData')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.DocumentType")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Document_Object_Model">L'index des interfaces du DOM</a></li> - <li>{{domxref("Entity")}}</li> - <li>{{domxref("Notation")}}</li> -</ul> +{{APIRef("DOM")}} + +L'interface **`DocumentType`** représente un nœud ({{domxref("Node")}}) contenant un _doctype_. + +{{InheritanceDiagram}} + +## Propriétés + +_Cette interface hérite de propriétés de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}._ + +- ... + + {{domxref("DocumentType.entities")}} {{readonlyInline}} {{obsolete_Inline}} + + - : Une {{domxref ("NamedNodeMap")}} des entités déclarées dans la DTD. Chaque noeud de cette carte implémente l'interface {{domxref ("Entity")}}. + +- {{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{obsolete_Inline}} + - : Un {{domxref ("DOMString")}} du sous-ensemble interne, ou null s'il n'y en a pas. Par exemple "\<! ELEMENT foo (bar)"> +- {{domxref("DocumentType.name")}} {{readonlyInline}} + - : une {{domxref("DOMString")}}, par exemple, `"html"` pour `<!DOCTYPE HTML>`. +- {{domxref("DocumentType.notations")}} {{readonlyInline}} {{obsolete_Inline}} + - : une {{domxref ("NamedNodeMap")}} avec les notations déclarées dans la DTD. Chaque nœud de cette carte implémente l'interface {{domxref ("Notation")}}. +- {{domxref("DocumentType.publicId")}} {{readonlyInline}} + - : une {{domxref("DOMString")}}, par exemple `"-//W3C//DTD HTML 4.01//EN"`, chaîne vide pour HTML5. +- {{domxref("DocumentType.systemId")}} {{readonlyInline}} + - : une {{domxref("DOMString")}}, par exemple, `"http://www.w3.org/TR/html4/strict.dtd"`, chaîne vide pour HTML5. + +## Méthodes + +_Cette interface hérite de méthodes de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}._ + +- {{domxref("ChildNode.remove()")}} {{experimental_inline}} + - : Cette méthode retire l'objet de la liste des enfants de son élément parent. + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#documenttype', 'DocumentType')}} | {{Spec2('DOM WHATWG')}} | Implémente désormais l'interface {{domxref("ChildNode")}}. Retrait des propriétés `internalSubset`, `entities` et `notation`. | +| {{SpecName('DOM3 Core', 'core.html#ID-412266927', 'DocumentType')}} | {{Spec2('DOM3 Core')}} | Aucune modification depuis {{SpecName('DOM2 Core')}}. | +| {{SpecName('DOM2 Core', 'core.html#ID-412266927', 'CharacterData')}} | {{Spec2('DOM2 Core')}} | Ajout des propriétés `publicID`, `systemID` et `internalSubset`. | +| {{SpecName('DOM1', 'level-one-core.html#ID-412266927', 'CharacterData')}} | {{Spec2('DOM1')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.DocumentType")}} + +## Voir aussi + +- [L'index des interfaces du DOM](/fr/docs/Web/API/Document_Object_Model) +- {{domxref("Entity")}} +- {{domxref("Notation")}} diff --git a/files/fr/web/api/domerror/index.md b/files/fr/web/api/domerror/index.md index 8e481bab48..c0aa91a55b 100644 --- a/files/fr/web/api/domerror/index.md +++ b/files/fr/web/api/domerror/index.md @@ -9,139 +9,53 @@ tags: - Reference translation_of: Web/API/DOMError --- -<p>{{ APIRef("DOM") }}{{deprecated_header}}</p> - -<p>L'interface <strong><code>DOMError</code></strong> décrit un objet d'erreur contenant le nom de l'erreur.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{domxref("DOMError.name")}} {{readOnlyInline}}</dt> - <dd>Retourne une {{ domxref("DOMString") }} <em>(chaîne de caractères)</em> représentant l'un des noms de type d'erreur (voir ci-dessous).</dd> - <dt>{{domxref("DOMError.message")}} {{readOnlyInline}}</dt> - <dd>Retourne une {{ domxref("DOMString") }} <em>(chaîne de caractères)</em> représentant un message ou une description associée avec le nom de type d'erreur.</dd> -</dl> - -<h2 id="Type_d'erreurs">Type d'erreurs</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Type</th> - <th>Description</th> - </tr> - <tr> - <td><code>IndexSizeError</code></td> - <td>L'index n'est pas dans l'étendue autorisée (par exemple, déclenché dans un objet {{ domxref("range") }}).</td> - </tr> - <tr> - <td><code>HierarchyRequestError</code></td> - <td>La hiérarchie de l'arbre de noeud est incorrecte.</td> - </tr> - <tr> - <td><code>WrongDocumentError</code></td> - <td>L'objet est dans le mauvais {{ domxref("document") }}.</td> - </tr> - <tr> - <td><code>InvalidCharacterError</code></td> - <td>La chaîne de caractères contient des caractères non valides.</td> - </tr> - <tr> - <td><code>NoModificationAllowedError</code></td> - <td>L'objet ne peut pas être modifié.</td> - </tr> - <tr> - <td><code>NotFoundError</code></td> - <td>L'objet ne peut pas être trouvé.</td> - </tr> - <tr> - <td><code>NotSupportedError</code></td> - <td>Cette opération n'est pas supportée.</td> - </tr> - <tr> - <td><code>InvalidStateError</code></td> - <td>L'objet est dans un état non valide.</td> - </tr> - <tr> - <td><code>SyntaxError</code></td> - <td>La chaîne de caractère ne correspond pas au motif attendu.</td> - </tr> - <tr> - <td><code>InvalidModificationError</code></td> - <td>L'objet ne peut pas être modifié de cette façon.</td> - </tr> - <tr> - <td><code>NamespaceError</code></td> - <td>Cette opération n'est pas autorisée par les Namespaces en XML.</td> - </tr> - <tr> - <td><code>InvalidAccessError</code></td> - <td>L'objet ne supporte pas cette opération ou cet argument.</td> - </tr> - <tr> - <td><code>TypeMismatchError</code></td> - <td>Le type de l'objet ne correspond pas au type attendu.</td> - </tr> - <tr> - <td><code>SecurityError</code></td> - <td>L'opération n'est pas sécurisée.</td> - </tr> - <tr> - <td><code>NetworkError</code></td> - <td>Une erreur réseau est survenue.</td> - </tr> - <tr> - <td><code>AbortError</code></td> - <td>L'opération a été annulée.</td> - </tr> - <tr> - <td><code>URLMismatchError</code></td> - <td>L'URL fournie ne correspond pas à une autre URL.</td> - </tr> - <tr> - <td><code>QuotaExceededError</code></td> - <td>Le quota a été dépassé.</td> - </tr> - <tr> - <td><code>TimeoutError</code></td> - <td>L'opération a dépassé le temps autorisé. (Time Out)</td> - </tr> - <tr> - <td><code>InvalidNodeTypeError</code></td> - <td>Le noeud est incorrect ou a un ancêtre incorrect pour cette opération.</td> - </tr> - <tr> - <td><code>DataCloneError</code></td> - <td>L'objet n'a pas pu être cloné.</td> - </tr> - </tbody> -</table> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM4', '#interface-domerror', 'DOMError')}}</td> - <td>{{Spec2('DOM4')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - - -<p>{{Compat("api.DOMError")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{ domxref("DOMException") }}</li> -</ul> +{{ APIRef("DOM") }}{{deprecated_header}} + +L'interface **`DOMError`** décrit un objet d'erreur contenant le nom de l'erreur. + +## Propriétés + +- {{domxref("DOMError.name")}} {{readOnlyInline}} + - : Retourne une {{ domxref("DOMString") }} _(chaîne de caractères)_ représentant l'un des noms de type d'erreur (voir ci-dessous). +- {{domxref("DOMError.message")}} {{readOnlyInline}} + - : Retourne une {{ domxref("DOMString") }} _(chaîne de caractères)_ représentant un message ou une description associée avec le nom de type d'erreur. + +## Type d'erreurs + +| Type | Description | +| ---------------------------- | --------------------------------------------------------------------------------------------------------------- | +| `IndexSizeError` | L'index n'est pas dans l'étendue autorisée (par exemple, déclenché dans un objet {{ domxref("range") }}). | +| `HierarchyRequestError` | La hiérarchie de l'arbre de noeud est incorrecte. | +| `WrongDocumentError` | L'objet est dans le mauvais {{ domxref("document") }}. | +| `InvalidCharacterError` | La chaîne de caractères contient des caractères non valides. | +| `NoModificationAllowedError` | L'objet ne peut pas être modifié. | +| `NotFoundError` | L'objet ne peut pas être trouvé. | +| `NotSupportedError` | Cette opération n'est pas supportée. | +| `InvalidStateError` | L'objet est dans un état non valide. | +| `SyntaxError` | La chaîne de caractère ne correspond pas au motif attendu. | +| `InvalidModificationError` | L'objet ne peut pas être modifié de cette façon. | +| `NamespaceError` | Cette opération n'est pas autorisée par les Namespaces en XML. | +| `InvalidAccessError` | L'objet ne supporte pas cette opération ou cet argument. | +| `TypeMismatchError` | Le type de l'objet ne correspond pas au type attendu. | +| `SecurityError` | L'opération n'est pas sécurisée. | +| `NetworkError` | Une erreur réseau est survenue. | +| `AbortError` | L'opération a été annulée. | +| `URLMismatchError` | L'URL fournie ne correspond pas à une autre URL. | +| `QuotaExceededError` | Le quota a été dépassé. | +| `TimeoutError` | L'opération a dépassé le temps autorisé. (Time Out) | +| `InvalidNodeTypeError` | Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. | +| `DataCloneError` | L'objet n'a pas pu être cloné. | + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------ | ------------------------ | -------------------- | +| {{SpecName('DOM4', '#interface-domerror', 'DOMError')}} | {{Spec2('DOM4')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.DOMError")}} + +## Voir aussi + +- {{ domxref("DOMException") }} diff --git a/files/fr/web/api/domexception/index.md b/files/fr/web/api/domexception/index.md index a2b859da99..0c3e390c86 100644 --- a/files/fr/web/api/domexception/index.md +++ b/files/fr/web/api/domexception/index.md @@ -8,146 +8,109 @@ tags: - exceptions translation_of: Web/API/DOMException --- -<p>{{ APIRef("DOM") }}</p> - -<p>L'interface <code><strong>DOMException</strong></code> représente un évènement anormal (appelé <strong>exception</strong>) qui appraît suite à l'appel d'une méthode ou à l'accès à une propriété d'une API web. C'est essentiellement lié à la façon dont les conditions d'erreur sont décrites dans les API web.</p> - -<p>Chaque exception a un <strong>nom</strong>, qui est une courte chaîne identifiant l'erreur ou la condition anormale.</p> - -<h2 id="Constructeur">Constructeur</h2> - -<dl> - <dt>{{domxref("DOMException.DOMException()", "DOMException()")}} {{experimental_inline}}</dt> - <dd>Retourne un objet <code>DOMException</code> avec un message et un nom spécifiés.</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{domxref("DOMException.code")}} {{deprecated_inline}} {{readOnlyInline}}</dt> - <dd>Renvoie un court message qui contient l'un des {{anch ("Noms d'erreur", "constantes de code d'erreur")}} ou 0 si aucun ne correspond. Ce champ est utilisé pour des raisons historiques. Les nouvelles exceptions DOM ne l'utilisent plus : elles mettent cette information dans l'attribut {{domxref("DOMException.name")}}.</dd> - <dt>{{domxref("DOMException.message")}} {{readOnlyInline}}</dt> - <dd>Returne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant un message ou une description associé avec le <a href="/en-US/docs/Web/API/DOMException#Error_names">nom d'erreur</a> donné.</dd> - <dt>{{domxref("DOMException.name")}} {{readOnlyInline}}</dt> - <dd>Retourne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient l'une des chaînes associées à un <a href="#Error_names">nom d'erreur</a>.</dd> -</dl> - -<h2 id="Noms_d'erreur">Noms d'erreur</h2> - -<p>Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent leurs propres ensembles de noms, il ne s'agit donc pas ici nécessairement d'une liste complète.</p> - -<div class="note"> -<p><strong>Note :</strong> Parce qu'historiquement les erreurs ont été identifiées par une valeur numérique qui correspondait à une variable nommée définie pour avoir cette valeur, certaines des entrées ci-dessous indiquent la valeur de code héritée et le nom de constante qui ont été utilisés dans le passé.</p> -</div> - -<dl> - <dt><code>IndexSizeError</code></dt> - <dd>L'index n'est pas dans la plage autorisée. Par exemple, cela peut être lancé par un objet {{ domxref("Range") }}. (Valeur de code héritée : <code>1</code> et nom de la constante héritée : <code>INDEX_SIZE_ERR</code>)</dd> - <dt><code>HierarchyRequestError</code></dt> - <dd>La hiérarchie de l'arborescence des nœuds est incorrecte. ( Valeur de code héritée : <code>3</code> et nom de la constante héritée : <code>HIERARCHY_REQUEST_ERR</code>)</dd> - <dt><code>WrongDocumentError</code></dt> - <dd>L'objet est dans le mauvais {{ domxref("Document") }}. ( Valeur de code héritée : <code>4</code> et nom de la constante héritée : <code>WRONG_DOCUMENT_ERR</code>)</dd> - <dt><code>InvalidCharacterError</code></dt> - <dd>La chaîne contient des caractères non valides. (Valeur de code héritée : <code>5</code> et nom de la constante héritée : <code>INVALID_CHARACTER_ERR</code>)</dd> - <dt><code>NoModificationAllowedError</code></dt> - <dd>L'objet ne peut être modifié. (Valeur de code héritée : <code>7</code> et nom de la constante héritée : <code>NO_MODIFICATION_ALLOWED_ERR</code>)</dd> - <dt><code>NotFoundError</code></dt> - <dd>L'objet ne peut être trouvé ici. (Valeur de code héritée : <code>8</code> et nom de la constante héritée : <code>NOT_FOUND_ERR</code>)</dd> - <dt><code>NotSupportedError</code></dt> - <dd>L'opération n'est pas supportée. (Valeur de code héritée : <code>9</code> et nom de la constante héritée : <code>NOT_SUPPORTED_ERR</code>)</dd> - <dt><code>InvalidStateError</code></dt> - <dd>L'objet est dans un état non valide. (Valeur de code héritée : <code>11</code> et nom de la constante héritée : <code>INVALID_STATE_ERR</code>)</dd> - <dt><code>SyntaxError</code></dt> - <dd>La chaîne ne correspond pas au modèle attendu. (Valeur de code héritée : <code>12</code> et nom de la constante héritée : <code>SYNTAX_ERR</code>)</dd> - <dt><code>InvalidModificationError</code></dt> - <dd>L'objet ne peut pas être modifié de cette manière. (Valeur de code héritée : <code>13</code> et nom de la constante héritée : <code>INVALID_MODIFICATION_ERR</code>)</dd> - <dt><code>NamespaceError</code></dt> - <dd>L'opération n'est pas autorisée par Namespaces en XML. (Valeur de code héritée : <code>14</code> et nom de la constante héritée : <code>NAMESPACE_ERR</code>)</dd> - <dt><code>InvalidAccessError</code></dt> - <dd>L'objet ne prend pas en charge l'opération ou l'argument. (Valeur de code héritée : <code>15</code> et nom de la constante héritée : <code>INVALID_ACCESS_ERR</code>)</dd> - <dt><code>TypeMismatchError</code> {{deprecated_inline}}</dt> - <dd>Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : <code>17</code> et nom de la constante héritée : <code>TYPE_MISMATCH_ERR</code>). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une <code>DOMException</code> avec cette valeur.</dd> - <dt><code>SecurityError</code> {{experimental_inline}}</dt> - <dd>L'opération n'est pas sécurisée. (Valeur de code héritée : <code>18</code> et nom de la constante héritée : <code>SECURITY_ERR</code>)</dd> - <dt><code>NetworkError</code> {{experimental_inline}}</dt> - <dd>Une erreur réseau s'est produite. (Valeur de code héritée : <code>19</code> et nom de la constante héritée : <code>NETWORK_ERR</code>)</dd> - <dt><code>AbortError</code> {{experimental_inline}}</dt> - <dd>L'opération a été annulée (Valeur de code héritée : <code>20</code> et nom de la constante héritée : <code>ABORT_ERR</code>)</dd> - <dt><code>URLMismatchError</code> {{experimental_inline}}</dt> - <dd>L'URL donnée ne correspond pas à une autre URL. (Valeur de code héritée : <code>21</code> et nom de la constante héritée : <code>URL_MISMATCH_ERR</code>)</dd> - <dt><code>QuotaExceededError</code> {{experimental_inline}}</dt> - <dd>Le quota a été dépassé. (Valeur de code héritée : <code>22</code> et nom de la constante héritée : <code>QUOTA_EXCEEDED_ERR</code>)</dd> - <dt><code>TimeoutError</code> {{experimental_inline}}</dt> - <dd>Le temps est dépassé. (Valeur de code héritée : <code>23</code> et nom de la constante héritée : <code>TIMEOUT_ERR</code>)</dd> - <dt><code>InvalidNodeTypeError</code> {{experimental_inline}}</dt> - <dd>Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : <code>24</code> et nom de la constante héritée : <code>INVALID_NODE_TYPE_ERR</code>)</dd> - <dt><code>DataCloneError</code> {{experimental_inline}}</dt> - <dd>L'objet ne peut pas être cloné. ( Valeur de code héritée : <code>25</code> et nom de la constante héritée : <code>DATA_CLONE_ERR</code>)</dd> - <dt><code>EncodingError</code> {{experimental_inline}}</dt> - <dd>L'opération de codage ou de décodage a échoué (Pas de valeur de code ni de nom de constante hérités).</dd> - <dt><code>NotReadableError</code> {{experimental_inline}}</dt> - <dd>L'opération de lecture entrée / sortie a échoué (Pas de valeur de code ni de nom de constante hérités).</dd> - <dt><code>UnknownError</code> {{experimental_inline}}</dt> - <dd>L'opération a échoué pour une raison transitoire inconnue (par exemple dépassement de mémoire) (Pas de valeur de code ni de nom de constante hérités) .</dd> - <dt><code>ConstraintError</code> {{experimental_inline}}</dt> - <dd>Une opération de mutation dans une transaction a échoué car une contrainte n'a pas été satisfaite (Pas de valeur de code ni de nom de constante hérités) .</dd> - <dt><code>DataError</code> {{experimental_inline}}</dt> - <dd>Provided data is inadequate (No legacy code value and constant name).</dd> - <dt><code>TransactionInactiveError</code> {{experimental_inline}}</dt> - <dd>Une demande a été placée contre une transaction qui n'est actuellement pas active ou qui est terminée (Pas de valeur de code ni de nom de constante hérités).</dd> - <dt><code>ReadOnlyError</code> {{experimental_inline}}</dt> - <dd>L'opération de mutation a été tentée dans une transaction "en lecture seule" (Pas de valeur de code ni de nom de constante hérités).</dd> - <dt><code>VersionError</code> {{experimental_inline}}</dt> - <dd>Une tentative a été faite pour ouvrir une base de données en utilisant une version inférieure à la version existante (Pas de valeur de code ni de nom de constante hérités).</dd> - <dt><code>OperationError</code> {{experimental_inline}}</dt> - <dd>L'opération a échoué pour une raison spécifique à l'opération (Pas de valeur de code ni de nom de constante hérités).</dd> - <dt><code>NotAllowedError</code> {{experimental_inline}}</dt> - <dd>La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission (Pas de valeur de code ni de nom de constante hérités).</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('WebIDL', '#es-DOMException-call', 'constructor')}}</td> - <td>{{Spec2('WebIDL')}}</td> - <td>Ajout du constructeur pour la classe <code>DOMException</code>. Ajout des valeurs <code>NotReadableError</code>, <code>UnknownError</code>, <code>ConstraintError</code>, <code>DataError</code>, <code>TransactionInactiveError</code>, <code>ReadOnlyError</code>, <code>VersionError</code>, <code>OperationError</code> et <code>NotAllowedError</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM4', '#exception-domexception', 'DOMException')}}</td> - <td>{{Spec2('DOM4')}}</td> - <td>Ajout des <code>SECURITY_ERR</code>, <code>NETWORK_ERR</code>, <code>ABORT_ERR</code>, <code>URL_MISMATCH_ERR</code>, <code>QUOTA_EXCEEDED_ERR</code>, <code>TIMEOUT_ERR</code>, <code>INVALID_NODE_TYPE_ERR</code>, et <code>DATA_CLONE_ERR</code>. La propriété <code>code</code> a été dépréciée pour les valeurs d'exception. La valeur <code>EncodingError</code> ajoutée.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-17189187', 'DOMException')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Ajout de <code>VALIDATION_ERR</code> et <code>TYPE_MISMATCH_ERR</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-17189187', 'DOMException')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Ajout de <code>INVALID_STATE_ERR</code>, <code>SYNTAX_ERR</code>, <code>INVALID_MODIFICATION_ERR</code>, <code>NAMESPACE_ERR</code>, and <code>INVALID_ACCESS_ERR</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-17189187', 'DOMException')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.DOMException")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{ domxref("DOMError") }}</li> -</ul> +{{ APIRef("DOM") }} + +L'interface **`DOMException`** représente un évènement anormal (appelé **exception**) qui appraît suite à l'appel d'une méthode ou à l'accès à une propriété d'une API web. C'est essentiellement lié à la façon dont les conditions d'erreur sont décrites dans les API web. + +Chaque exception a un **nom**, qui est une courte chaîne identifiant l'erreur ou la condition anormale. + +## Constructeur + +- {{domxref("DOMException.DOMException()", "DOMException()")}} {{experimental_inline}} + - : Retourne un objet `DOMException` avec un message et un nom spécifiés. + +## Propriétés + +- {{domxref("DOMException.code")}} {{deprecated_inline}} {{readOnlyInline}} + - : Renvoie un court message qui contient l'un des {{anch ("Noms d'erreur", "constantes de code d'erreur")}} ou 0 si aucun ne correspond. Ce champ est utilisé pour des raisons historiques. Les nouvelles exceptions DOM ne l'utilisent plus : elles mettent cette information dans l'attribut {{domxref("DOMException.name")}}. +- {{domxref("DOMException.message")}} {{readOnlyInline}} + - : Returne une {{domxref("DOMString")}} (_chaîne de caractères_) représentant un message ou une description associé avec le [nom d'erreur](/en-US/docs/Web/API/DOMException#Error_names) donné. +- {{domxref("DOMException.name")}} {{readOnlyInline}} + - : Retourne une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient l'une des chaînes associées à un [nom d'erreur](#Error_names). + +## Noms d'erreur + +Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent leurs propres ensembles de noms, il ne s'agit donc pas ici nécessairement d'une liste complète. + +> **Note :** Parce qu'historiquement les erreurs ont été identifiées par une valeur numérique qui correspondait à une variable nommée définie pour avoir cette valeur, certaines des entrées ci-dessous indiquent la valeur de code héritée et le nom de constante qui ont été utilisés dans le passé. + +- `IndexSizeError` + - : L'index n'est pas dans la plage autorisée. Par exemple, cela peut être lancé par un objet {{ domxref("Range") }}. (Valeur de code héritée : `1` et nom de la constante héritée : `INDEX_SIZE_ERR`) +- `HierarchyRequestError` + - : La hiérarchie de l'arborescence des nœuds est incorrecte. ( Valeur de code héritée : `3` et nom de la constante héritée : `HIERARCHY_REQUEST_ERR`) +- `WrongDocumentError` + - : L'objet est dans le mauvais {{ domxref("Document") }}. ( Valeur de code héritée : `4` et nom de la constante héritée : `WRONG_DOCUMENT_ERR`) +- `InvalidCharacterError` + - : La chaîne contient des caractères non valides. (Valeur de code héritée : `5` et nom de la constante héritée : `INVALID_CHARACTER_ERR`) +- `NoModificationAllowedError` + - : L'objet ne peut être modifié. (Valeur de code héritée : `7` et nom de la constante héritée : `NO_MODIFICATION_ALLOWED_ERR`) +- `NotFoundError` + - : L'objet ne peut être trouvé ici. (Valeur de code héritée : `8` et nom de la constante héritée : `NOT_FOUND_ERR`) +- `NotSupportedError` + - : L'opération n'est pas supportée. (Valeur de code héritée : `9` et nom de la constante héritée : `NOT_SUPPORTED_ERR`) +- `InvalidStateError` + - : L'objet est dans un état non valide. (Valeur de code héritée : `11` et nom de la constante héritée : `INVALID_STATE_ERR`) +- `SyntaxError` + - : La chaîne ne correspond pas au modèle attendu. (Valeur de code héritée : `12` et nom de la constante héritée : `SYNTAX_ERR`) +- `InvalidModificationError` + - : L'objet ne peut pas être modifié de cette manière. (Valeur de code héritée : `13` et nom de la constante héritée : `INVALID_MODIFICATION_ERR`) +- `NamespaceError` + - : L'opération n'est pas autorisée par Namespaces en XML. (Valeur de code héritée : `14` et nom de la constante héritée : `NAMESPACE_ERR`) +- `InvalidAccessError` + - : L'objet ne prend pas en charge l'opération ou l'argument. (Valeur de code héritée : `15` et nom de la constante héritée : `INVALID_ACCESS_ERR`) +- `TypeMismatchError` {{deprecated_inline}} + - : Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : `17` et nom de la constante héritée : `TYPE_MISMATCH_ERR`). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une `DOMException` avec cette valeur. +- `SecurityError` {{experimental_inline}} + - : L'opération n'est pas sécurisée. (Valeur de code héritée : `18` et nom de la constante héritée : `SECURITY_ERR`) +- `NetworkError` {{experimental_inline}} + - : Une erreur réseau s'est produite. (Valeur de code héritée : `19` et nom de la constante héritée : `NETWORK_ERR`) +- `AbortError` {{experimental_inline}} + - : L'opération a été annulée (Valeur de code héritée : `20` et nom de la constante héritée : `ABORT_ERR`) +- `URLMismatchError` {{experimental_inline}} + - : L'URL donnée ne correspond pas à une autre URL. (Valeur de code héritée : `21` et nom de la constante héritée : `URL_MISMATCH_ERR`) +- `QuotaExceededError` {{experimental_inline}} + - : Le quota a été dépassé. (Valeur de code héritée : `22` et nom de la constante héritée : `QUOTA_EXCEEDED_ERR`) +- `TimeoutError` {{experimental_inline}} + - : Le temps est dépassé. (Valeur de code héritée : `23` et nom de la constante héritée : `TIMEOUT_ERR`) +- `InvalidNodeTypeError` {{experimental_inline}} + - : Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : `24` et nom de la constante héritée : `INVALID_NODE_TYPE_ERR`) +- `DataCloneError` {{experimental_inline}} + - : L'objet ne peut pas être cloné. ( Valeur de code héritée : `25` et nom de la constante héritée : `DATA_CLONE_ERR`) +- `EncodingError` {{experimental_inline}} + - : L'opération de codage ou de décodage a échoué (Pas de valeur de code ni de nom de constante hérités). +- `NotReadableError` {{experimental_inline}} + - : L'opération de lecture entrée / sortie a échoué (Pas de valeur de code ni de nom de constante hérités). +- `UnknownError` {{experimental_inline}} + - : L'opération a échoué pour une raison transitoire inconnue (par exemple dépassement de mémoire) (Pas de valeur de code ni de nom de constante hérités) . +- `ConstraintError` {{experimental_inline}} + - : Une opération de mutation dans une transaction a échoué car une contrainte n'a pas été satisfaite (Pas de valeur de code ni de nom de constante hérités) . +- `DataError` {{experimental_inline}} + - : Provided data is inadequate (No legacy code value and constant name). +- `TransactionInactiveError` {{experimental_inline}} + - : Une demande a été placée contre une transaction qui n'est actuellement pas active ou qui est terminée (Pas de valeur de code ni de nom de constante hérités). +- `ReadOnlyError` {{experimental_inline}} + - : L'opération de mutation a été tentée dans une transaction "en lecture seule" (Pas de valeur de code ni de nom de constante hérités). +- `VersionError` {{experimental_inline}} + - : Une tentative a été faite pour ouvrir une base de données en utilisant une version inférieure à la version existante (Pas de valeur de code ni de nom de constante hérités). +- `OperationError` {{experimental_inline}} + - : L'opération a échoué pour une raison spécifique à l'opération (Pas de valeur de code ni de nom de constante hérités). +- `NotAllowedError` {{experimental_inline}} + - : La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission (Pas de valeur de code ni de nom de constante hérités). + +## Spécifications + +| Spécification | Status | Comment | +| ------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('WebIDL', '#es-DOMException-call', 'constructor')}} | {{Spec2('WebIDL')}} | Ajout du constructeur pour la classe `DOMException`. Ajout des valeurs `NotReadableError`, `UnknownError`, `ConstraintError`, `DataError`, `TransactionInactiveError`, `ReadOnlyError`, `VersionError`, `OperationError` et `NotAllowedError`. | +| {{SpecName('DOM4', '#exception-domexception', 'DOMException')}} | {{Spec2('DOM4')}} | Ajout des `SECURITY_ERR`, `NETWORK_ERR`, `ABORT_ERR`, `URL_MISMATCH_ERR`, `QUOTA_EXCEEDED_ERR`, `TIMEOUT_ERR`, `INVALID_NODE_TYPE_ERR`, et `DATA_CLONE_ERR`. La propriété `code` a été dépréciée pour les valeurs d'exception. La valeur `EncodingError` ajoutée. | +| {{SpecName('DOM3 Core', 'core.html#ID-17189187', 'DOMException')}} | {{Spec2('DOM3 Core')}} | Ajout de `VALIDATION_ERR` et `TYPE_MISMATCH_ERR`. | +| {{SpecName('DOM2 Core', 'core.html#ID-17189187', 'DOMException')}} | {{Spec2('DOM2 Core')}} | Ajout de `INVALID_STATE_ERR`, `SYNTAX_ERR`, `INVALID_MODIFICATION_ERR`, `NAMESPACE_ERR`, and `INVALID_ACCESS_ERR`. | +| {{SpecName('DOM1', 'level-one-core.html#ID-17189187', 'DOMException')}} | {{Spec2('DOM1')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.DOMException")}} + +## Voir aussi + +- {{ domxref("DOMError") }} diff --git a/files/fr/web/api/domhighrestimestamp/index.md b/files/fr/web/api/domhighrestimestamp/index.md index b089be1d46..29993ca8bb 100644 --- a/files/fr/web/api/domhighrestimestamp/index.md +++ b/files/fr/web/api/domhighrestimestamp/index.md @@ -3,20 +3,21 @@ title: DOMHighResTimeStamp slug: Web/API/DOMHighResTimeStamp translation_of: Web/API/DOMHighResTimeStamp --- -<p>{{APIRef("High Resolution Time")}}</p> +{{APIRef("High Resolution Time")}} -<p>Le type <code><strong>DOMHighResTimeStamp</strong></code> est un <code>double</code> et est utilisé pour stocker une valeur temporelle. La valeur peut représenter un point dans le temps ou la différence entre deux points dans le temps.</p> +Le type **`DOMHighResTimeStamp`** est un `double` et est utilisé pour stocker une valeur temporelle. La valeur peut représenter un point dans le temps ou la différence entre deux points dans le temps. -<p>L'unité est la milliseconde et sa précision est en principe de 5 µs (microsecondes). Cependant, si le navigateur n'est pas capable de fournir une valeur temporelle avec une précision de 5 microsecondes (en raison par exemple de contraintes hardware ou software), le navigateur peut représenter la valeur comme un temps en millisecondes avec une précision d'une milliseconde. Référez-vous également à la section ci-dessous concernant la réduction de précision temporelle contrôlée par les préférences du navigateur pour éviter les attaques de synchronisation et le fingerprinting.</p> +L'unité est la milliseconde et sa précision est en principe de 5 µs (microsecondes). Cependant, si le navigateur n'est pas capable de fournir une valeur temporelle avec une précision de 5 microsecondes (en raison par exemple de contraintes hardware ou software), le navigateur peut représenter la valeur comme un temps en millisecondes avec une précision d'une milliseconde. Référez-vous également à la section ci-dessous concernant la réduction de précision temporelle contrôlée par les préférences du navigateur pour éviter les attaques de synchronisation et le fingerprinting. -<p>De plus, si l'appareil ou le système d'exploitation sur lequel tourne le navigateur n'est pas doté d'une horloge avec une précision de l'ordre de la microseconde, la précision peut également être de l'ordre de la milliseconde.</p> +De plus, si l'appareil ou le système d'exploitation sur lequel tourne le navigateur n'est pas doté d'une horloge avec une précision de l'ordre de la microseconde, la précision peut également être de l'ordre de la milliseconde. -<h2 id="Précision_temporelle_réduite">Précision temporelle réduite</h2> +## Précision temporelle réduite -<p>Pour offrir une protection contre les attaques de synchronisation et le fingerprinting, la précision des timestamps peut être arrondie en fonction des préférences du navigateur.<br> - Dans Firefox, l'option <code>privacy.reduceTimerPrecision</code> est activée par défaut et vaut 20µs par défaut dans Firefox 59; dans la version 60 cette valeur est portée à 2ms par défaut.</p> +Pour offrir une protection contre les attaques de synchronisation et le fingerprinting, la précision des timestamps peut être arrondie en fonction des préférences du navigateur. +Dans Firefox, l'option `privacy.reduceTimerPrecision` est activée par défaut et vaut 20µs par défaut dans Firefox 59; dans la version 60 cette valeur est portée à 2ms par défaut. -<pre class="brush: js">// précision temporelle réduite (2ms) dans Firefox 60 +```js +// précision temporelle réduite (2ms) dans Firefox 60 event.timeStamp // 1519211809934 // 1519211810362 @@ -30,69 +31,47 @@ event.timeStamp; // 1519129858900 // 1519129864400 // ... -</pre> +``` -<p>Dans Firefox, vous pouvez aussi activer <code>privacy.resistFingerprinting</code>, la précision sera alors de 100ms ou la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, la valeur la plus large étant retenue.</p> +Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la précision sera alors de 100ms ou la valeur de `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, la valeur la plus large étant retenue. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>Ce <em>type</em> n'a pas de propriétés. C'est une valeur à virgule flottante double précision.</em></p> +*Ce *type* n'a pas de propriétés. C'est une valeur à virgule flottante double précision.* -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>La valeur d'un <code>DOMHighResTimeStamp</code> est un nombre flottant double précision qui décrit le nombre de millisecondes (avec une précision de 5 microsecondes si l'appareil le supporte) écoulé entre deux points dans le temps. Le temps de départ peut être soit un point spécifique dans le temps déterminé par le script d'un site web ou d'une application, ou l'<strong>origine temporelle</strong>.</p> +La valeur d'un `DOMHighResTimeStamp` est un nombre flottant double précision qui décrit le nombre de millisecondes (avec une précision de 5 microsecondes si l'appareil le supporte) écoulé entre deux points dans le temps. Le temps de départ peut être soit un point spécifique dans le temps déterminé par le script d'un site web ou d'une application, ou l'**origine temporelle**. -<h4 id="L'origine_temporelle">L'origine temporelle</h4> +#### L'origine temporelle -<p>L'<strong>origine temporelle</strong> est une heure qui est considéré comme l'heure de commencement de la vie du document. Elle est calculée comme suit :</p> +L'**origine temporelle** est une heure qui est considéré comme l'heure de commencement de la vie du document. Elle est calculée comme suit : -<ul> - <li>Si l'{{Glossary("objet global")}} du script est {{domxref("Window")}}, l'origine temporelle est déterminée comme suit : - <ul> - <li>Si le {{domxref("Document")}} courant est le premier à être chargé dans la fenêtre, l'origine temporelle est l'heure à laquelle le contexte du navigateur a été créé.</li> - <li>Si pendant le processus de déchargement du document précédemment chargé dans la fenêtre, un dialogue de confirmation a été affiché pour demander à l'utilisateur de confirmer s'il souhaite quitter la page précédente, l'origine temporelle est l'heure à laquelle l'utilisateur a confirmé que naviguer vers la nouvelle page était acceptable.</li> - <li>Si aucun des points ci-dessus ne détermine l'origine temporelle, celle-ci est l'heure à laquelle la navigation responsable de la création du <code>Document</code> courant de la fenêtre a eu lieu.</li> - </ul> - </li> - <li>Si l'objet global du script est un {{domxref("WorkerGlobalScope")}} (si le script tourne comme un <em>web worker</em>), l'origine temporelle est le moment auquel le worker a été créé.</li> - <li>Dans tous les autres cas, l'origine temporelle est <code>undefined</code>.</li> -</ul> +- Si l'{{Glossary("objet global")}} du script est {{domxref("Window")}}, l'origine temporelle est déterminée comme suit : -<h2 id="Méthodes">Méthodes</h2> + - Si le {{domxref("Document")}} courant est le premier à être chargé dans la fenêtre, l'origine temporelle est l'heure à laquelle le contexte du navigateur a été créé. + - Si pendant le processus de déchargement du document précédemment chargé dans la fenêtre, un dialogue de confirmation a été affiché pour demander à l'utilisateur de confirmer s'il souhaite quitter la page précédente, l'origine temporelle est l'heure à laquelle l'utilisateur a confirmé que naviguer vers la nouvelle page était acceptable. + - Si aucun des points ci-dessus ne détermine l'origine temporelle, celle-ci est l'heure à laquelle la navigation responsable de la création du `Document` courant de la fenêtre a eu lieu. -<p><em>Ce type n'a pas de méthodes.</em></p> +- Si l'objet global du script est un {{domxref("WorkerGlobalScope")}} (si le script tourne comme un _web worker_), l'origine temporelle est le moment auquel le worker a été créé. +- Dans tous les autres cas, l'origine temporelle est `undefined`. -<h2 id="Specifications">Spécifications</h2> +## Méthodes -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Highres Time Level 2', '#dom-domhighrestimestamp', 'DOMHighResTimeStamp')}}</td> - <td>{{Spec2('Highres Time Level 2')}}</td> - <td>Définitions plus strictes des interfaces et des types.</td> - </tr> - <tr> - <td>{{SpecName('Highres Time', '#sec-DOMHighResTimeStamp', 'DOMHighResTimeStamp')}}</td> - <td>{{Spec2('Highres Time')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +_Ce type n'a pas de méthodes._ -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Spécifications -<p>{{Compat("api.DOMHighResTimestamp")}}</p> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------ | +| {{SpecName('Highres Time Level 2', '#dom-domhighrestimestamp', 'DOMHighResTimeStamp')}} | {{Spec2('Highres Time Level 2')}} | Définitions plus strictes des interfaces et des types. | +| {{SpecName('Highres Time', '#sec-DOMHighResTimeStamp', 'DOMHighResTimeStamp')}} | {{Spec2('Highres Time')}} | Définition initiale. | -<h2 id="Voir_aussi">Voir aussi</h2> +## Compatibilité des navigateurs -<ul> - <li><a href="/en-US/docs/Navigation_timing">Navigation Timing API</a></li> - <li><a href="/en-US/docs/Web/API/Performance/now">performance.now()</a></li> -</ul> +{{Compat("api.DOMHighResTimestamp")}} + +## Voir aussi + +- [Navigation Timing API](/en-US/docs/Navigation_timing) +- [performance.now()](/en-US/docs/Web/API/Performance/now) diff --git a/files/fr/web/api/domimplementation/createdocument/index.md b/files/fr/web/api/domimplementation/createdocument/index.md index 63bccf3cb1..ff61bff4b8 100644 --- a/files/fr/web/api/domimplementation/createdocument/index.md +++ b/files/fr/web/api/domimplementation/createdocument/index.md @@ -9,77 +9,53 @@ tags: - implementation translation_of: Web/API/DOMImplementation/createDocument --- -<p>{{ApiRef("DOM")}}</p> +{{ApiRef("DOM")}} -<p>La méthode <strong><code>DOMImplementation.createDocument()</code></strong> crée et retourne un {{domxref("XMLDocument")}}.</p> +La méthode **`DOMImplementation.createDocument()`** crée et retourne un {{domxref("XMLDocument")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>doc</em> = document.implementation.createDocument(<em>namespaceURI</em>, <em>qualifiedNameStr</em>, <em>documentType</em>);</pre> + doc = document.implementation.createDocument(namespaceURI, qualifiedNameStr, documentType); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><em>namespaceURI</em></dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'URI de l'espace de noms du document à créer, <code>ou null</code> si le document n'appartient à aucun espace de noms.</dd> -</dl> +- _namespaceURI_ + - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'URI de l'espace de noms du document à créer, `ou null` si le document n'appartient à aucun espace de noms. -<dl> - <dt><em>qualifiedNameStr </em></dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em>contenant le nom qualifié, c'est-à-dire optionnellement un préfixe et deux points, plus le nom local de l'élément racine, du document à créer.</dd> -</dl> +<!----> -<dl> - <dt><em>documentType </em>{{optional_inline}}</dt> - <dd>Est le <a href="/fr/docs/Web/API/DocumentType"><code>DocumentType</code></a> du document à créer. Vaut <code>null </code>par défaut.</dd> -</dl> +- _qualifiedNameStr_ + - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant le nom qualifié, c'est-à-dire optionnellement un préfixe et deux points, plus le nom local de l'élément racine, du document à créer. -<ul> -</ul> +<!----> -<h2 id="Exemple">Exemple</h2> +- _documentType_ {{optional_inline}} + - : Est le [`DocumentType`](/fr/docs/Web/API/DocumentType) du document à créer. Vaut `null `par défaut. -<pre class="brush: js">var doc = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null); +<!----> + +## Exemple + +```js +var doc = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null); var body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body'); body.setAttribute('id', 'abc'); doc.documentElement.appendChild(body); alert(doc.getElementById('abc')); // [objet HTMLBodyElement] -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-createdocument', 'DOMImplementation.createDocument')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Modification du type retourné par <code>createDocument()</code> de {{domxref("Document")}} à{{domxref("XMLDocument")}}.<br> - Le troisième argument de <code>createDocument()</code>, <em>doctype</em>, est maintenant optionnel et vaut <code>null</code> par defaut.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Pas de changement depuis {{SpecName("DOM2 Core")}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.DOMImplementation.createDocument")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface {{domxref("DOMImplementation")}} à laquelle la méthode appartient.</li> -</ul> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-domimplementation-createdocument', 'DOMImplementation.createDocument')}} | {{Spec2('DOM WHATWG')}} | Modification du type retourné par `createDocument()` de {{domxref("Document")}} à{{domxref("XMLDocument")}}. Le troisième argument de `createDocument()`, _doctype_, est maintenant optionnel et vaut `null` par defaut. | +| {{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}} | {{Spec2('DOM3 Core')}} | Pas de changement depuis {{SpecName("DOM2 Core")}}. | +| {{SpecName('DOM2 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}} | {{Spec2('DOM2 Core')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.DOMImplementation.createDocument")}} + +## Voir aussi + +- L'interface {{domxref("DOMImplementation")}} à laquelle la méthode appartient. diff --git a/files/fr/web/api/domimplementation/createdocumenttype/index.md b/files/fr/web/api/domimplementation/createdocumenttype/index.md index b626e674ac..9c5aaa7d57 100644 --- a/files/fr/web/api/domimplementation/createdocumenttype/index.md +++ b/files/fr/web/api/domimplementation/createdocumenttype/index.md @@ -9,71 +9,49 @@ tags: - Reference translation_of: Web/API/DOMImplementation/createDocumentType --- -<p>{{ ApiRef("DOM")}}</p> +{{ ApiRef("DOM")}} -<p>La méthode <strong><code>DOMImplementation.createDocumentType()</code></strong> renvoie un objet {{domxref("DocumentType")}} qui peut être utilisé avec {{domxref("DOMImplementation.createDocument")}} lors de la création du document ou peut être intégré au document existant avec des méthodes comme {{domxref("Node.insertBefore()")}} ou {{domxref("Node.replaceChild()")}}.</p> +La méthode **`DOMImplementation.createDocumentType()`** renvoie un objet {{domxref("DocumentType")}} qui peut être utilisé avec {{domxref("DOMImplementation.createDocument")}} lors de la création du document ou peut être intégré au document existant avec des méthodes comme {{domxref("Node.insertBefore()")}} ou {{domxref("Node.replaceChild()")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>doctype</em> = document.implementation.createDocumentType(<em>qualifiedNameStr</em>, <em>publicId</em>, <em>systemId</em>)</pre> + doctype = document.implementation.createDocumentType(qualifiedNameStr, publicId, systemId) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><em>qualifiedNameStr</em></dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom qualifié comme <code>svg:svg</code>.</dd> -</dl> +- _qualifiedNameStr_ + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom qualifié comme `svg:svg`. -<dl> - <dt><em>publicId</em></dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant l'identifiant <code>PUBLIC</code>.</dd> -</dl> +<!----> -<dl> - <dt><em>systemId</em></dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant les identifiants <code>SYSTEM</code>.</dd> -</dl> +- _publicId_ + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant l'identifiant `PUBLIC`. -<h2 id="Exemple">Exemple</h2> +<!----> -<pre class="brush: js">var dt = document.implementation.createDocumentType('svg:svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'); +- _systemId_ + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant les identifiants `SYSTEM`. + +## Exemple + +```js +var dt = document.implementation.createDocumentType('svg:svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'); var d = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', dt); alert(d.doctype.publicId); // -//W3C//DTD SVG 1.1//EN -</pre> - -<h2 id="Spécifications"> Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-createdocumenttype', 'DOMImplementation.createDocumentType')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Pas de modification de {{SpecName("DOM3 Core")}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Pas de modification de {{SpecName("DOM2 Core")}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html##Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.DOMImplementation.createDocumentType")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface {{domxref("DOMImplementation")}} à laquelle elle appartient.</li> -</ul> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-domimplementation-createdocumenttype', 'DOMImplementation.createDocumentType')}} | {{Spec2('DOM WHATWG')}} | Pas de modification de {{SpecName("DOM3 Core")}} | +| {{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}} | {{Spec2('DOM3 Core')}} | Pas de modification de {{SpecName("DOM2 Core")}} | +| {{SpecName('DOM2 Core', 'core.html##Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}} | {{Spec2('DOM2 Core')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.DOMImplementation.createDocumentType")}} + +## Voir aussi + +- L'interface {{domxref("DOMImplementation")}} à laquelle elle appartient. diff --git a/files/fr/web/api/domimplementation/createhtmldocument/index.md b/files/fr/web/api/domimplementation/createhtmldocument/index.md index 7bdda41853..05b850a02f 100644 --- a/files/fr/web/api/domimplementation/createhtmldocument/index.md +++ b/files/fr/web/api/domimplementation/createhtmldocument/index.md @@ -11,36 +11,36 @@ tags: - Référence(2) translation_of: Web/API/DOMImplementation/createHTMLDocument --- -<p>{{ApiRef("DOM")}}{{SeeCompatTable}}</p> +{{ApiRef("DOM")}}{{SeeCompatTable}} -<p>La méthode <strong><code>DOMImplementation.createHTMLDocument()</code></strong> crée un nouveau {{domxref("Document")}} HTML.</p> +La méthode **`DOMImplementation.createHTMLDocument()`** crée un nouveau {{domxref("Document")}} HTML. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>newDoc</em> = document.implementation.createHTMLDocument(<em>titre</em>);</pre> + newDoc = document.implementation.createHTMLDocument(titre); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><em>title</em> {{optional_inline}} (excepté dans IE)</dt> - <dd>C'est une {{domxref("DOMString")}} qui contient le titre à donner au nouveau document HTML.</dd> -</dl> +- *title* {{optional_inline}} (excepté dans IE) + - : C'est une {{domxref("DOMString")}} qui contient le titre à donner au nouveau document HTML. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Dans cet exemple, on crée un nouveau document HTML que l'on insère dans un {{HTMLElement("iframe")}} dans le document courant.</p> +Dans cet exemple, on crée un nouveau document HTML que l'on insère dans un {{HTMLElement("iframe")}} dans le document courant. -<p>Ci-dessous, le code HTML pour cet exemple:</p> +Ci-dessous, le code HTML pour cet exemple: -<pre class="brush: html"><body> - <p>Cliquez <a href="javascript:makeDocument()">ici</a> pour créer un nouveau document et l'insérer au dessous.</p> - <iframe id="laFrame" src="about:blank" /> -</body> -</pre> +```html +<body> + <p>Cliquez <a href="javascript:makeDocument()">ici</a> pour créer un nouveau document et l'insérer au dessous.</p> + <iframe id="laFrame" src="about:blank" /> +</body> +``` -<p>L'implémentation en JavaScript de la méthode <code>makeDocument()</code>:</p> +L'implémentation en JavaScript de la méthode `makeDocument()`: -<pre class="brush: js">function makeDocument() { +```js +function makeDocument() { var frame = document.getElementById("laFrame"); var doc = document.implementation.createHTMLDocument("Nouveau Document"); @@ -61,49 +61,37 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument destDocument.replaceChild(newNode, destDocument.documentElement); } -</pre> +``` -<p>Le code des lignes 4 à 12 permet la création du nouveau document HTML et l'insertion de contenu dans ce dernier. La ligne 4 utilise la méthode <code>createHTMLDocument()</code> pour construire le nouveau document HTML et définir son {{ HTMLElement("title") }} comme "Nouveau Document". Dans les lignes 5 et 6, est créé un nouvel élément paragraphe avec un simple contenu, enfin, les lignes 8 à 12 permettent l'insertion de ce nouveau paragraphe dans le nouveau document.</p> +Le code des lignes 4 à 12 permet la création du nouveau document HTML et l'insertion de contenu dans ce dernier. La ligne 4 utilise la méthode `createHTMLDocument()` pour construire le nouveau document HTML et définir son {{ HTMLElement("title") }} comme "Nouveau Document". Dans les lignes 5 et 6, est créé un nouvel élément paragraphe avec un simple contenu, enfin, les lignes 8 à 12 permettent l'insertion de ce nouveau paragraphe dans le nouveau document. -<p>La ligne 16 récupère le <code>contentDocument</code> <em>(contenu du document)</em> du cadre ; c'est le document dans lequel nous allons injecter le nouveau contenu. Les deux lignes suivantes permettent d'importer le contenu du nouveau document dans le nouveau contexte du document. Pour finir, la ligne 20 remplace le contenu du cadre par le contenu du nouveau document.</p> +La ligne 16 récupère le `contentDocument` _(contenu du document)_ du cadre ; c'est le document dans lequel nous allons injecter le nouveau contenu. Les deux lignes suivantes permettent d'importer le contenu du nouveau document dans le nouveau contexte du document. Pour finir, la ligne 20 remplace le contenu du cadre par le contenu du nouveau document. -<p><a href="/samples/domref/createHTMLDocument.html">Voir l'exemple sur une page</a></p> +[Voir l'exemple sur une page](/samples/domref/createHTMLDocument.html) -<p>Le document retourné est préconstruit avec le code HTML suivant :</p> +Le document retourné est préconstruit avec le code HTML suivant : -<pre class="brush: html"><!doctype html> -<html> -<head> -<title>titre</title> -</head> -<body> -</body> -</html> -</pre> +```html +<!doctype html> +<html> +<head> +<title>titre</title> +</head> +<body> +</body> +</html> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-createhtmldocument', 'DOMImplementation.createHTMLDocument')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Première définition.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG', '#dom-domimplementation-createhtmldocument', 'DOMImplementation.createHTMLDocument')}} | {{Spec2('DOM WHATWG')}} | Première définition. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMImplementation.createHTMLDocument")}}</p> +{{Compat("api.DOMImplementation.createHTMLDocument")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface {{domxref("DOMImplementation")}}.</li> -</ul> +- L'interface {{domxref("DOMImplementation")}}. diff --git a/files/fr/web/api/domimplementation/hasfeature/index.md b/files/fr/web/api/domimplementation/hasfeature/index.md index 45adfcedba..0d89dd38e1 100644 --- a/files/fr/web/api/domimplementation/hasfeature/index.md +++ b/files/fr/web/api/domimplementation/hasfeature/index.md @@ -7,65 +7,38 @@ tags: - Méthodes translation_of: Web/API/DOMImplementation/hasFeature --- -<p>{{ApiRef("DOM")}}</p> +{{ApiRef("DOM")}} -<p>{{deprecated_header()}}</p> +{{deprecated_header()}} -<p>La méthode <strong><code>DOMImplementation.hasFeature()</code></strong> renvoie un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si une fonctionnalité donnée est prise en charge. Cette méthode est dépréciée et les navigateurs modernes renvoient <code>true</code> (<em>vrai</em>) dans tous les cas.</p> +La méthode **`DOMImplementation.hasFeature()`** renvoie un {{domxref("Boolean")}} (_booléen_) indiquant si une fonctionnalité donnée est prise en charge. Cette méthode est dépréciée et les navigateurs modernes renvoient `true` (_vrai_) dans tous les cas. -<p>Les différentes implémentations ont été assez divergentes quant au type de caractéristiques signalées. La dernière version de la spécification a décidé de forcer cette méthode à toujours renvoyer <code>true</code>, là où la fonctionnalité était précisée et utilisée.</p> +Les différentes implémentations ont été assez divergentes quant au type de caractéristiques signalées. La dernière version de la spécification a décidé de forcer cette méthode à toujours renvoyer `true`, là où la fonctionnalité était précisée et utilisée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>flag</em> = document.implementation.hasFeature(<em>feature</em>, <em>version</em>);</pre> + flag = document.implementation.hasFeature(feature, version); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><em>feature</em></dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le nom de la fonctionnalité.</dd> - <dt><em>version</em></dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la version de la spécification définissant la fonctionnalité.</dd> -</dl> +- _feature_ + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) représentant le nom de la fonctionnalité. +- _version_ + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la version de la spécification définissant la fonctionnalité. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-hasfeature', 'DOMImplementation.hasFeature')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Modifié pour toujours renvoyer <code>true</code> sauf pour les fonctionnalités SVG.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Pas de modification de {{SpecName("DOM2 Core")}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Pas de modification de {{SpecName("DOM1")}}</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------ | +| {{SpecName('DOM WHATWG', '#dom-domimplementation-hasfeature', 'DOMImplementation.hasFeature')}} | {{Spec2('DOM WHATWG')}} | Modifié pour toujours renvoyer `true` sauf pour les fonctionnalités SVG. | +| {{SpecName('DOM3 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}} | {{Spec2('DOM3 Core')}} | Pas de modification de {{SpecName("DOM2 Core")}} | +| {{SpecName('DOM2 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}} | {{Spec2('DOM2 Core')}} | Pas de modification de {{SpecName("DOM1")}} | +| {{SpecName('DOM1', 'level-one-core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}} | {{Spec2('DOM1')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMImplementation.hasFeature")}}</p> +{{Compat("api.DOMImplementation.hasFeature")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface {{domxref("DOMImplementation")}} à laquelle elle est appartient.</li> -</ul> +- L'interface {{domxref("DOMImplementation")}} à laquelle elle est appartient. diff --git a/files/fr/web/api/domimplementation/index.md b/files/fr/web/api/domimplementation/index.md index 71e10fab87..e2e2c0f980 100644 --- a/files/fr/web/api/domimplementation/index.md +++ b/files/fr/web/api/domimplementation/index.md @@ -8,69 +8,40 @@ tags: - Reference translation_of: Web/API/DOMImplementation --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>L'interface <code><strong>DOMImplementation</strong></code> représente un objet fournissant des méthodes qui ne dépendent pas d'un document particulier. Un tel objet est renvoyé par la propriété {{domxref("Document.implementation")}}.</p> +L'interface **`DOMImplementation`** représente un objet fournissant des méthodes qui ne dépendent pas d'un document particulier. Un tel objet est renvoyé par la propriété {{domxref("Document.implementation")}}. -<h2 id="Propriété">Propriété</h2> +## Propriété -<p><em>Cette interface n'a pas de propriété spécifique et n'en hérite aucune.</em></p> +_Cette interface n'a pas de propriété spécifique et n'en hérite aucune._ -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p><em>Pas de méthode héritée.</em></p> +_Pas de méthode héritée._ -<dl> - <dt>{{domxref("DOMImplementation.createDocument()")}}</dt> - <dd>Crée et retourne un {{domxref("XMLDocument")}}.</dd> - <dt>{{domxref("DOMImplementation.createDocumentType()")}}</dt> - <dd>Crée et retourne un {{domxref("DocumentType")}}.</dd> - <dt>{{domxref("DOMImplementation.createHTMLDocument()")}}</dt> - <dd>Crée et retourne un {{domxref("Document")}} HTML.</dd> - <dt>{{domxref("DOMImplementation.hasFeature()")}}</dt> - <dd>Retourne un {{domxref("Boolean")}} indiquant si une caractéristique donnée est supportée ou non. Cette fonction n'est pas fiable et est conservée uniquement à des fins de compatibilité : à l'exception des requêtes liées au SVG, elle renvoie toujours la valeur <code>true</code> <em>(vrai).</em> Les anciens navigateurs sont très incohérents dans leur comportement.</dd> -</dl> +- {{domxref("DOMImplementation.createDocument()")}} + - : Crée et retourne un {{domxref("XMLDocument")}}. +- {{domxref("DOMImplementation.createDocumentType()")}} + - : Crée et retourne un {{domxref("DocumentType")}}. +- {{domxref("DOMImplementation.createHTMLDocument()")}} + - : Crée et retourne un {{domxref("Document")}} HTML. +- {{domxref("DOMImplementation.hasFeature()")}} + - : Retourne un {{domxref("Boolean")}} indiquant si une caractéristique donnée est supportée ou non. Cette fonction n'est pas fiable et est conservée uniquement à des fins de compatibilité : à l'exception des requêtes liées au SVG, elle renvoie toujours la valeur `true` _(vrai)._ Les anciens navigateurs sont très incohérents dans leur comportement. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#domimplementation', 'DOMImplementation')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Supprime la méthode <code>getFeature()</code>.<br> - Ajoute la méthode <code>createHTMLDocument()</code>.<br> - Modifie le type de retour de <code>createDocument()</code> de {{domxref("Document")}} à {{domxref("XMLDocument")}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-102161490', 'DOMImplementation')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Ajoute la méthode <code>getFeature()</code> (jamais implémentée par un agent utilisateur).</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-102161490', 'DOMImplementation')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Ajoute les méthodes <code>createDocument()</code> et <code>createDocumentType()</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-102161490', 'DOMImplementation')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initial.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#domimplementation', 'DOMImplementation')}} | {{Spec2('DOM WHATWG')}} | Supprime la méthode `getFeature()`. Ajoute la méthode `createHTMLDocument()`. Modifie le type de retour de `createDocument()` de {{domxref("Document")}} à {{domxref("XMLDocument")}}. | +| {{SpecName('DOM3 Core', 'core.html#ID-102161490', 'DOMImplementation')}} | {{Spec2('DOM3 Core')}} | Ajoute la méthode `getFeature()` (jamais implémentée par un agent utilisateur). | +| {{SpecName('DOM2 Core', 'core.html#ID-102161490', 'DOMImplementation')}} | {{Spec2('DOM2 Core')}} | Ajoute les méthodes `createDocument()` et `createDocumentType()`. | +| {{SpecName('DOM1', 'level-one-core.html#ID-102161490', 'DOMImplementation')}} | {{Spec2('DOM1')}} | Définition initial. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMImplementation")}}</p> +{{Compat("api.DOMImplementation")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM.</a></li> -</ul> +- [Référence du DOM.](/fr/docs/Web/API/Document_Object_Model) diff --git a/files/fr/web/api/dommatrix/index.md b/files/fr/web/api/dommatrix/index.md index b12c8ab849..58d5e2eada 100644 --- a/files/fr/web/api/dommatrix/index.md +++ b/files/fr/web/api/dommatrix/index.md @@ -8,22 +8,18 @@ translation_of: Web/API/DOMMatrix translation_of_original: Web/API/CSSMatrix original_slug: Web/API/CSSMatrix --- -<div> -<div>{{APIRef("CSSOM")}}{{Non-standard_header}}</div> +{{APIRef("CSSOM")}}{{Non-standard_header}} -<p>Une <code><strong>CSSMatrix</strong></code> représente une matrice homogène 4x4 dans laquelle il est possible d'appliquer des transformations 2D ou 3D. Cette classe faisait à un moment partie du module de transitions CSS (Level 3) mais elle n'a pas été propagée dans le brouillon de travail (<em>Working Draft</em>) actuel. Utilisez plutôt <code><a href="/en-US/docs/Web/API/DOMMatrix">DOMMatrix</a>.</code></p> +Une **`CSSMatrix`** représente une matrice homogène 4x4 dans laquelle il est possible d'appliquer des transformations 2D ou 3D. Cette classe faisait à un moment partie du module de transitions CSS (Level 3) mais elle n'a pas été propagée dans le brouillon de travail (_Working Draft_) actuel. Utilisez plutôt `DOMMatrix.` -<h2 id="Compatibilé_des_navigateurs">Compatibilé des navigateurs</h2> +## Compatibilé des navigateurs -<p>{{Compat("api.DOMMatrix")}}</p> +{{Compat("api.DOMMatrix")}} -<p>{{Compat("api.WebKitCSSMatrix")}}</p> +{{Compat("api.WebKitCSSMatrix")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx">MSDN : <code>Documentation sur MSCSSMatrix</code></a></li> - <li><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html">Safari Developer Library : Documentation sur WebKitCSSMatrix</a></li> - <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=717722">Mozilla : Bug 717722 : Exécution de <code>(WebKit)CSSMatrix()</code></a></li> -</ul> -</div> +- [MSDN : `Documentation sur MSCSSMatrix`](<https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx>) +- [Safari Developer Library : Documentation sur WebKitCSSMatrix](https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html) +- [Mozilla : Bug 717722 : Exécution de `(WebKit)CSSMatrix()`](https://bugzilla.mozilla.org/show_bug.cgi?id=717722) diff --git a/files/fr/web/api/domobject/index.md b/files/fr/web/api/domobject/index.md index e179526e13..b1952e52f3 100644 --- a/files/fr/web/api/domobject/index.md +++ b/files/fr/web/api/domobject/index.md @@ -7,25 +7,12 @@ tags: - Objets translation_of: Web/API/DOMObject --- -<div>{{APIRef("DOM")}}{{Obsolete_header}}</div> +{{APIRef("DOM")}}{{Obsolete_header}} -<p>L'interface obsolète <code><strong>DOMObject</strong></code> était utilisée dans les versions antérieures de la spécification DOM comme classe de base pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript .</p> +L'interface obsolète **`DOMObject`** était utilisée dans les versions antérieures de la spécification DOM comme classe de base pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript . -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#DOMObject", "DOMObject")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | ---------------------------- | ------------------- | +| {{SpecName("DOM3 Core", "core.html#DOMObject", "DOMObject")}} | {{Spec2("DOM3 Core")}} | Définition initiale | diff --git a/files/fr/web/api/domparser/index.md b/files/fr/web/api/domparser/index.md index 28daa45409..75c3058daf 100644 --- a/files/fr/web/api/domparser/index.md +++ b/files/fr/web/api/domparser/index.md @@ -9,47 +9,44 @@ tags: - XML translation_of: Web/API/DOMParser --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>L'interface <strong><code>DOMParser</code></strong> permet d'analyser le code source {{Glossary("XML")}} ou {{Glossary("HTML")}} d'une chaîne de caractères dans le DOM {{domxref("Document")}}.</p> +L'interface **`DOMParser`** permet d'analyser le code source {{Glossary("XML")}} ou {{Glossary("HTML")}} d'une chaîne de caractères dans le DOM {{domxref("Document")}}. -<p>Vous pouvez effectuer l'opération inverse - convertir un arbre DOM en source XML ou HTML - en utilisant l'interface {{domxref("XMLSerializer")}}.</p> +Vous pouvez effectuer l'opération inverse - convertir un arbre DOM en source XML ou HTML - en utilisant l'interface {{domxref("XMLSerializer")}}. -<p>Dans le cas d'un document HTML, vous pouvez également remplacer des parties du DOM par de nouveaux arbres DOM construits à partir de HTML en définissant la valeur des propriétés {{domxref("Element.innerHTML", "innerHTML")}} et {{domxref("Element.outerHTML", "outerHTML")}}. Ces propriétés peuvent également être lues pour récupérer les fragments HTML correspondant au sous-arbre DOM correspondant.</p> +Dans le cas d'un document HTML, vous pouvez également remplacer des parties du DOM par de nouveaux arbres DOM construits à partir de HTML en définissant la valeur des propriétés {{domxref("Element.innerHTML", "innerHTML")}} et {{domxref("Element.outerHTML", "outerHTML")}}. Ces propriétés peuvent également être lues pour récupérer les fragments HTML correspondant au sous-arbre DOM correspondant. -<p>Notez que {{domxref("XMLHttpRequest")}} peut analyser le XML et le HTML directement à partir d'une ressource adressable par URL, en renvoyant un <code>Document</code> dans sa propriété {{domxref("XMLHttpRequest.response", "response")}}.</p> +Notez que {{domxref("XMLHttpRequest")}} peut analyser le XML et le HTML directement à partir d'une ressource adressable par URL, en renvoyant un `Document` dans sa propriété {{domxref("XMLHttpRequest.response", "response")}}. -<h2 id="Constructor">Constructeur</h2> +## Constructeur -<dl> - <dt>{{domxref("DOMParser.DOMParser","DOMParser()")}}</dt> - <dd>Crée un nouvel objet <code>DOMParser</code>.</dd> -</dl> +- {{domxref("DOMParser.DOMParser","DOMParser()")}} + - : Crée un nouvel objet `DOMParser`. -<h2 id="Methods">Méthodes</h2> +## Méthodes -<dl> - <dt>{{domxref("DOMParser.parseFromString()")}}</dt> - <dd>Analyse une chaîne de caractères à l'aide de l'analyseur HTML ou de l'analyseur XML, et retourne un {{domxref("HTMLDocument")}} ou {{domxref("XMLDocument")}}.</dd> -</dl> +- {{domxref("DOMParser.parseFromString()")}} + - : Analyse une chaîne de caractères à l'aide de l'analyseur HTML ou de l'analyseur XML, et retourne un {{domxref("HTMLDocument")}} ou {{domxref("XMLDocument")}}. -<h2 id="Example">Exemple</h2> +## Exemple -<h3>Analyse syntaxique de XML, SVG et HTML</h3> +### Analyse syntaxique de XML, SVG et HTML -<p>Cet exemple montre comment analyser le XML, le SVG et le HTML. Notez qu'un type MIME de <code>text/html</code> invoquera l'analyseur HTML, et que tout autre type MIME accepté par cette méthode invoquera l'analyseur XML.</p> +Cet exemple montre comment analyser le XML, le SVG et le HTML. Notez qu'un type MIME de `text/html` invoquera l'analyseur HTML, et que tout autre type MIME accepté par cette méthode invoquera l'analyseur XML. -<pre class="brush: js">const parser = new DOMParser(); +```js +const parser = new DOMParser(); -const xmlString = "<warning>Attention au tigre</warning>"; +const xmlString = "<warning>Attention au tigre</warning>"; const doc1 = parser.parseFromString(xmlString, "application/xml"); // XMLDocument -const svgString = "<circle cx=\"50\" cy=\"50\" r=\"50\"/>"; +const svgString = "<circle cx=\"50\" cy=\"50\" r=\"50\"/>"; const doc2 = parser.parseFromString(svgString, "image/svg+xml"); // XMLDocument -const htmlString = "<strong>Attention au léopard</strong>"; +const htmlString = "<strong>Attention au léopard</strong>"; const doc3 = parser.parseFromString(htmlString, "text/html"); // HTMLDocument @@ -61,38 +58,21 @@ console.log(doc2.firstChild.tagName); console.log(doc3.body.firstChild.textContent); // "Attention au léopard" -</pre> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-parsing-and-serialization', 'DOM parsing')}} - </td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.DOMParser", 3)}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li><a href="/efr/docs/Web/Guide/Parsing_and_serializing_XML">Analyse syntaxique et sérialisation du XML</a> - </li> - <li>{{domxref("XMLHttpRequest")}}</li> - <li>{{domxref("XMLSerializer")}}</li> - <li>{{jsxref("JSON.parse()")}} - contrepartie pour les documents {{jsxref("JSON")}}.</li> -</ul> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', '#dom-parsing-and-serialization', 'DOM parsing')}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.DOMParser", 3)}} + +## Voir aussi + +- [Analyse syntaxique et sérialisation du XML](/efr/docs/Web/Guide/Parsing_and_serializing_XML) +- {{domxref("XMLHttpRequest")}} +- {{domxref("XMLSerializer")}} +- {{jsxref("JSON.parse()")}} - contrepartie pour les documents {{jsxref("JSON")}}. diff --git a/files/fr/web/api/dompoint/dompoint/index.md b/files/fr/web/api/dompoint/dompoint/index.md index 952a148a55..6a04abf8ba 100644 --- a/files/fr/web/api/dompoint/dompoint/index.md +++ b/files/fr/web/api/dompoint/dompoint/index.md @@ -9,60 +9,48 @@ tags: - Quadrilatère translation_of: Web/API/DOMPoint/DOMPoint --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable() }} -<p>Le constructeur <strong><code>DOMPoint()</code></strong> crée un nouvel objet {{domxref("DOMPoint")}}.</p> +Le constructeur **`DOMPoint()`** crée un nouvel objet {{domxref("DOMPoint")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var myDOMPoint = new DOMPoint(x, y, z, w);</pre> +```js +var myDOMPoint = new DOMPoint(x, y, z, w); +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>x</dt> - <dd>La coordonnée <code>x</code> pour le nouveau <code>DOMPoint</code>.</dd> - <dt>y</dt> - <dd>La coordonnée <code>y</code> pour le nouveau <code>DOMPoint</code>.</dd> - <dt>z</dt> - <dd>La coordonnée <code>z</code> pour le nouveau <code>DOMPoint</code>.</dd> - <dt>w</dt> - <dd>La valeur de perspective du nouveau <code>DOMPoint</code>.</dd> -</dl> +- x + - : La coordonnée `x` pour le nouveau `DOMPoint`. +- y + - : La coordonnée `y` pour le nouveau `DOMPoint`. +- z + - : La coordonnée `z` pour le nouveau `DOMPoint`. +- w + - : La valeur de perspective du nouveau `DOMPoint`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Pour créer un nouveau <code>DOMPoint</code>, vous pourriez exécuter une ligne de code comme celle-ci :</p> +Pour créer un nouveau `DOMPoint`, vous pourriez exécuter une ligne de code comme celle-ci : -<pre class="brush: js">var myDOMPoint = new DOMPoint(0.4, 0.5, -0.5, 1); +```js +var myDOMPoint = new DOMPoint(0.4, 0.5, -0.5, 1); // le lancement de 'myDOMPoint' dans la console devrait renvoyer // DOMPoint { x: 0.4, y: 0.5, z: -0.5, w: 1 } -</pre> +``` -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#dom-dompoint-dompointx-y-z-w', 'DOMPoint()')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>La dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#dom-dompoint-dompointx-y-z-w', 'DOMPoint()')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMPoint.DOMPoint")}}</p> +{{Compat("api.DOMPoint.DOMPoint")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMPoint")}}</li> - <li>{{domxref("DOMRect")}}</li> -</ul> +- {{domxref("DOMPoint")}} +- {{domxref("DOMRect")}} diff --git a/files/fr/web/api/dompoint/index.md b/files/fr/web/api/dompoint/index.md index 13f1adc696..95225b3515 100644 --- a/files/fr/web/api/dompoint/index.md +++ b/files/fr/web/api/dompoint/index.md @@ -9,50 +9,45 @@ tags: - Quadrilatère translation_of: Web/API/DOMPoint --- -<p>{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p> +{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }} -<p>Un <strong><code>DOMPoint</code></strong> représente un point 2D ou 3D dans le système de coordonnées.</p> +Un **`DOMPoint`** représente un point 2D ou 3D dans le système de coordonnées. -<p>En général, un x positif représente une position à droite de l'origine ; un y positif est une position au-dessus de l'origine ; et un z positif est une position vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur).</p> +En général, un x positif représente une position à droite de l'origine ; un y positif est une position au-dessus de l'origine ; et un z positif est une position vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur). -<p>Il hérite de son parent {{domxref("DOMPointReadOnly")}}.</p> +Il hérite de son parent {{domxref("DOMPointReadOnly")}}. -<h2 id="Constructeur">Constructeur</h2> +## Constructeur -<dl> - <dt>{{domxref("DOMPoint.DOMPoint","DOMPoint()")}}</dt> - <dd>Crée un nouvel objet <code>DOMPoint</code>.</dd> -</dl> +- {{domxref("DOMPoint.DOMPoint","DOMPoint()")}} + - : Crée un nouvel objet `DOMPoint`. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p><em><code>DOMPoint</code> hérite des méthodes de son parent {{domxref("DOMPointReadOnly")}}.</em></p> +_`DOMPoint` hérite des méthodes de son parent {{domxref("DOMPointReadOnly")}}._ -<dl> - <dt>{{domxref("DOMPointReadOnly.fromPoint")}}</dt> - <dd>Traduit la position/perspective d'un <code>DOMPoint</code> à une nouvelle position (ne semble pas encore être pris en charge).</dd> -</dl> +- {{domxref("DOMPointReadOnly.fromPoint")}} + - : Traduit la position/perspective d'un `DOMPoint` à une nouvelle position (ne semble pas encore être pris en charge). -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em><code>DOMPoint</code> hérite des propriétés de son parent {{domxref("DOMPointReadOnly")}}.</em></p> +_`DOMPoint` hérite des propriétés de son parent {{domxref("DOMPointReadOnly")}}._ -<dl> - <dt>{{domxref("DOMPointReadOnly.x")}}</dt> - <dd>La coordonnée x du <code>DOMPoint</code>.</dd> - <dt>{{domxref("DOMPointReadOnly.y")}}</dt> - <dd>La coordonnée y du <code>DOMPoint</code>.</dd> - <dt>{{domxref("DOMPointReadOnly.z")}}</dt> - <dd>La coordonnée z du <code>DOMPoint</code>.</dd> - <dt>{{domxref("DOMPointReadOnly.w")}}</dt> - <dd>La valeur de perspective du <code>DOMPoint</code>.</dd> -</dl> +- {{domxref("DOMPointReadOnly.x")}} + - : La coordonnée x du `DOMPoint`. +- {{domxref("DOMPointReadOnly.y")}} + - : La coordonnée y du `DOMPoint`. +- {{domxref("DOMPointReadOnly.z")}} + - : La coordonnée z du `DOMPoint`. +- {{domxref("DOMPointReadOnly.w")}} + - : La valeur de perspective du `DOMPoint`. -<h2 id="Specification">Exemples</h2> +## Exemples -<p>Dans l' <a href="/fr/docs/Web/API/WebVR_API">API WebVR</a> (<em>VR = réalité virtuelle</em>), les valeurs <code>DOMPoint</code> sont utilisées pour représenter les points dans l'espace de coordonnées dans lequel l'affichage monté sur la tête de l'utilisateur existe. Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un <code>DOMPoint</code>. Notez ci-dessous l'utilisation de <code>position.x</code>, <code>position.y</code> et <code>position.z</code>.</p> +Dans l' [API WebVR](/fr/docs/Web/API/WebVR_API) (_VR = réalité virtuelle_), les valeurs `DOMPoint` sont utilisées pour représenter les points dans l'espace de coordonnées dans lequel l'affichage monté sur la tête de l'utilisateur existe. Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un `DOMPoint`. Notez ci-dessous l'utilisation de `position.x`, `position.y` et `position.z`. -<pre class="brush: js">function setView() { +```js +function setView() { var posState = gPositionSensor.getState(); if(posState.hasPosition) { posPara.textContent = 'Position: x' + roundToTwo(posState.position.x) + " y" @@ -60,7 +55,7 @@ translation_of: Web/API/DOMPoint + roundToTwo(posState.position.z); xPos = -posState.position.x * WIDTH * 2; yPos = posState.position.y * HEIGHT * 2; - if(-posState.position.z > 0.01) { + if(-posState.position.z > 0.01) { zPos = -posState.position.z; } else { zPos = 0.01; @@ -69,35 +64,21 @@ translation_of: Web/API/DOMPoint ... -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Voir notre <a href="https://github.com/mdn/webvr-tests/blob/gh-pages/positionsensorvrdevice/index.html">positionsensorvrdevice demo</a> pour le code complet.</p> -</div> +> **Note :** Voir notre [positionsensorvrdevice demo](https://github.com/mdn/webvr-tests/blob/gh-pages/positionsensorvrdevice/index.html) pour le code complet. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>Dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------------------- | ----------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}} | {{Spec2('Geometry Interfaces')}} | Dernière version de la spécification est un ED. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMPoint")}}</p> +{{Compat("api.DOMPoint")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMRect")}}</li> -</ul> +- {{domxref("DOMRect")}} diff --git a/files/fr/web/api/dompointreadonly/index.md b/files/fr/web/api/dompointreadonly/index.md index f200ed1509..8685e88378 100644 --- a/files/fr/web/api/dompointreadonly/index.md +++ b/files/fr/web/api/dompointreadonly/index.md @@ -9,66 +9,47 @@ tags: - Quadrilatère translation_of: Web/API/DOMPointReadOnly --- -<p>{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p> +{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }} -<p>L'interface <strong><code>DOMPointReadOnly</code></strong> spécifie les propriétés standard utilisées par {{domxref("DOMPoint")}} pour définir un point 2D ou 3D dans un système de coordonnées.</p> +L'interface **`DOMPointReadOnly`** spécifie les propriétés standard utilisées par {{domxref("DOMPoint")}} pour définir un point 2D ou 3D dans un système de coordonnées. -<h2 id="Constructeur">Constructeur</h2> +## Constructeur -<dl> - <dt>{{domxref("DOMPointReadOnly.DOMPointReadOnly","DOMPointReadOnly()")}}</dt> - <dd>Défini pour créer un nouvel objet <code>DOMPointReadOnly</code>, mais notez que ce constructeur ne peut pas être appelé par un JavaScript tiers : ce faisant, il retourne un typeError "constructeur illégal" .</dd> -</dl> +- {{domxref("DOMPointReadOnly.DOMPointReadOnly","DOMPointReadOnly()")}} + - : Défini pour créer un nouvel objet `DOMPointReadOnly`, mais notez que ce constructeur ne peut pas être appelé par un JavaScript tiers : ce faisant, il retourne un typeError "constructeur illégal" . -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<dl> - <dt>{{domxref("DOMPointReadOnly.fromPoint")}}</dt> - <dd>Traduit la position / perspective d'un <code>DOMPoint</code> à une nouvelle position (ne semble pas encore être pris en charge).</dd> - <dt>{{domxref("DOMPointReadOnly.matrixTransform")}}</dt> - <dd>Applique une transformation matricielle à un objet <code>DOMPointReadOnly</code> (ne semble pas encore être pris en charge).</dd> - <dt>{{domxref("DOMPointReadOnly.toJSON()")}}</dt> - <dd>Renvoie une représentation JSON de l'objet <code>DOMPointReadOnly</code>.</dd> -</dl> +- {{domxref("DOMPointReadOnly.fromPoint")}} + - : Traduit la position / perspective d'un `DOMPoint` à une nouvelle position (ne semble pas encore être pris en charge). +- {{domxref("DOMPointReadOnly.matrixTransform")}} + - : Applique une transformation matricielle à un objet `DOMPointReadOnly` (ne semble pas encore être pris en charge). +- {{domxref("DOMPointReadOnly.toJSON()")}} + - : Renvoie une représentation JSON de l'objet `DOMPointReadOnly`. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt>{{domxref("DOMPointReadOnly.x")}} {{readonlyInline}}</dt> - <dd>La coordonnée x du <code>DOMPoint</code>.</dd> - <dt>{{domxref("DOMPointReadOnly.y")}} {{readonlyInline}}</dt> - <dd>La coordonnée y du <code>DOMPoint</code>.</dd> - <dt>{{domxref("DOMPointReadOnly.z")}} {{readonlyInline}}</dt> - <dd>La coordonnée z du <code>DOMPoint</code>.</dd> - <dt>{{domxref("DOMPointReadOnly.w")}} {{readonlyInline}}</dt> - <dd>La valeur de perspective du <code>DOMPoint</code>.</dd> -</dl> +- {{domxref("DOMPointReadOnly.x")}} {{readonlyInline}} + - : La coordonnée x du `DOMPoint`. +- {{domxref("DOMPointReadOnly.y")}} {{readonlyInline}} + - : La coordonnée y du `DOMPoint`. +- {{domxref("DOMPointReadOnly.z")}} {{readonlyInline}} + - : La coordonnée z du `DOMPoint`. +- {{domxref("DOMPointReadOnly.w")}} {{readonlyInline}} + - : La valeur de perspective du `DOMPoint`. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>La dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMPointReadOnly")}}</p> +{{Compat("api.DOMPointReadOnly")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMPoint")}}</li> - <li>{{domxref("DOMRect")}}</li> - <li>{{domxref("DOMMatrix")}}</li> -</ul> +- {{domxref("DOMPoint")}} +- {{domxref("DOMRect")}} +- {{domxref("DOMMatrix")}} diff --git a/files/fr/web/api/dompointreadonly/w/index.md b/files/fr/web/api/dompointreadonly/w/index.md index 6eab04af2c..e9ca6e45b0 100644 --- a/files/fr/web/api/dompointreadonly/w/index.md +++ b/files/fr/web/api/dompointreadonly/w/index.md @@ -11,41 +11,30 @@ tags: - W translation_of: Web/API/DOMPointReadOnly/w --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable() }} -<p>La propriété en lecture seule <code><strong>w</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la perspective d'un point.</p> +La propriété en lecture seule **`w`** de l'interface **`DOMPointReadOnly`** représente la perspective d'un point. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var perspective = DOMPoint.w;</pre> +```js +var perspective = DOMPoint.w; +``` -<h3 id="Specification">Valeur</h3> +### Valeur -<p>Un double.</p> +Un double. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-w', 'w')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>La dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#dom-dompointreadonly-w', 'w')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMPointReadOnly.w")}}</p> +{{Compat("api.DOMPointReadOnly.w")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMPoint")}}</li> -</ul> +- {{domxref("DOMPoint")}} diff --git a/files/fr/web/api/dompointreadonly/x/index.md b/files/fr/web/api/dompointreadonly/x/index.md index 77c78c54d4..b7f01029d6 100644 --- a/files/fr/web/api/dompointreadonly/x/index.md +++ b/files/fr/web/api/dompointreadonly/x/index.md @@ -11,43 +11,32 @@ tags: - x translation_of: Web/API/DOMPointReadOnly/x --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable() }} -<p>La propriété en lecture seule <code><strong>x</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la coordonnée x d'un point.</p> +La propriété en lecture seule **`x`** de l'interface **`DOMPointReadOnly`** représente la coordonnée x d'un point. -<p>En général, x positif signifie à droite et négatif à gauche (par rapport à l'origine).</p> +En général, x positif signifie à droite et négatif à gauche (par rapport à l'origine). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var xPos = DOMPoint.x;</pre> +```js +var xPos = DOMPoint.x; +``` -<h3 id="Specification">Valeur</h3> +### Valeur -<p>Un double.</p> +Un double. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-x', 'x')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>La dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#dom-dompointreadonly-x', 'x')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMPointReadOnly.x")}}</p> +{{Compat("api.DOMPointReadOnly.x")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMPoint")}}</li> -</ul> +- {{domxref("DOMPoint")}} diff --git a/files/fr/web/api/dompointreadonly/y/index.md b/files/fr/web/api/dompointreadonly/y/index.md index 74e42ccf0f..60559d3d04 100644 --- a/files/fr/web/api/dompointreadonly/y/index.md +++ b/files/fr/web/api/dompointreadonly/y/index.md @@ -11,43 +11,32 @@ tags: - 'y' translation_of: Web/API/DOMPointReadOnly/y --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable() }} -<p>La propriété en lecture seule <code><strong>y</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la coordonnée y d'un point.</p> +La propriété en lecture seule **`y`** de l'interface **`DOMPointReadOnly`** représente la coordonnée y d'un point. -<p>En général, y positif signifie en haut et négatif en bas (par rapport à l'origine).</p> +En général, y positif signifie en haut et négatif en bas (par rapport à l'origine). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var yPos = DOMPoint.y;</pre> +```js +var yPos = DOMPoint.y; +``` -<h3 id="Specification">Valeur</h3> +### Valeur -<p>Un double.</p> +Un double. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-y', 'y')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>La dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#dom-dompointreadonly-y', 'y')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMPointReadOnly.y")}}</p> +{{Compat("api.DOMPointReadOnly.y")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMPoint")}}</li> -</ul> +- {{domxref("DOMPoint")}} diff --git a/files/fr/web/api/dompointreadonly/z/index.md b/files/fr/web/api/dompointreadonly/z/index.md index 3befe72ac8..eeeee1c153 100644 --- a/files/fr/web/api/dompointreadonly/z/index.md +++ b/files/fr/web/api/dompointreadonly/z/index.md @@ -12,43 +12,32 @@ tags: - z translation_of: Web/API/DOMPointReadOnly/z --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable() }} -<p>La propriété en lecture seule <code><strong>z</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la coordonnée z d'un point.</p> +La propriété en lecture seule **`z`** de l'interface **`DOMPointReadOnly`** représente la coordonnée z d'un point. -<p>En général, z positif signifie vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur) et négatif vers l'intérieur de l'écran (dans la même direction que l'utilisateur).</p> +En général, z positif signifie vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur) et négatif vers l'intérieur de l'écran (dans la même direction que l'utilisateur). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var zPos = DOMPoint.z;</pre> +```js +var zPos = DOMPoint.z; +``` -<h3 id="Specification">Valeur</h3> +### Valeur -<p>Un double.</p> +Un double. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-z', 'z')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>La dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#dom-dompointreadonly-z', 'z')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMPointReadOnly.z")}}</p> +{{Compat("api.DOMPointReadOnly.z")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMPoint")}}</li> -</ul> +- {{domxref("DOMPoint")}} diff --git a/files/fr/web/api/domquad/index.md b/files/fr/web/api/domquad/index.md index 2838177964..d891ef9db7 100644 --- a/files/fr/web/api/domquad/index.md +++ b/files/fr/web/api/domquad/index.md @@ -11,54 +11,37 @@ tags: - dimensions translation_of: Web/API/DOMQuad --- -<p>{{SeeCompatTable}}{{APIRef("Geometry Interfaces")}}</p> +{{SeeCompatTable}}{{APIRef("Geometry Interfaces")}} -<p>Un <code>DOMQuad</code> est une collection de 4 <code>DOMPoint</code> définissant les coins d'un quadrilatère arbitraire. Renvoyer des <code>DOMQuad</code> permet à <code>getBoxQuads()</code> de retourner des informations précises, même lorsque des transformations 2D ou 3D arbitraires sont présentes. Il possède un attribut <code>bounds</code> pratique qui retourne un <code>DOMRectReadOnly</code> pour les cas où vous voulez juste un rectangle de délimitation aligné sur l'axe.</p> +Un `DOMQuad` est une collection de 4 `DOMPoint` définissant les coins d'un quadrilatère arbitraire. Renvoyer des `DOMQuad` permet à `getBoxQuads()` de retourner des informations précises, même lorsque des transformations 2D ou 3D arbitraires sont présentes. Il possède un attribut `bounds` pratique qui retourne un `DOMRectReadOnly` pour les cas où vous voulez juste un rectangle de délimitation aligné sur l'axe. -<h2 id="Constructeur">Constructeur</h2> +## Constructeur -<dl> - <dt>{{domxref("DOMQuad.DOMQuad()")}}</dt> - <dd>Crée un nouvel objet <code>DOMQuad</code>.</dd> -</dl> +- {{domxref("DOMQuad.DOMQuad()")}} + - : Crée un nouvel objet `DOMQuad`. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt>p1,p2,p3,p4 {{readonlyinline}}</dt> - <dd>sont des objets {{domxref("DOMPoint")}} pour chacun des 4 coins de l'objet<code> DOMQuad</code>.</dd> -</dl> +- p1,p2,p3,p4 {{readonlyinline}} + - : sont des objets {{domxref("DOMPoint")}} pour chacun des 4 coins de l'objet` DOMQuad`. -<h2 id="Méthode">Méthode</h2> +## Méthode -<dl> - <dt>{{domxref("DOMQuad.fromRect()")}}</dt> - <dd>Renvoie un nouvel objet <code>DOMQuad</code> basé sur l'ensemble de coordonnées fournit.</dd> - <dt>{{domxref("DOMQuad.fromQuad()")}}</dt> - <dd>Renvoie un nouvel objet <code>DOMQuad</code> basé sur l'ensemble de coordonnées fournit.</dd> - <dt>{{domxref("DOMQuad.getBounds()")}}</dt> - <dd>Renvoie un objet {{domxref("DOMRect")}} avec les coordonnées et les dimensions de l'objet <code>DOMQuad</code>.</dd> - <dt>{{domxref("DOMQuad.toJSON()")}}</dt> - <dd>Renvoie une représentation JSON de l'objet <code>DOMQuad</code>.</dd> -</dl> +- {{domxref("DOMQuad.fromRect()")}} + - : Renvoie un nouvel objet `DOMQuad` basé sur l'ensemble de coordonnées fournit. +- {{domxref("DOMQuad.fromQuad()")}} + - : Renvoie un nouvel objet `DOMQuad` basé sur l'ensemble de coordonnées fournit. +- {{domxref("DOMQuad.getBounds()")}} + - : Renvoie un objet {{domxref("DOMRect")}} avec les coordonnées et les dimensions de l'objet `DOMQuad`. +- {{domxref("DOMQuad.toJSON()")}} + - : Renvoie une représentation JSON de l'objet `DOMQuad`. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces','#DOMQuad','DOMQuad')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('Geometry Interfaces','#DOMQuad','DOMQuad')}} | {{Spec2('Geometry Interfaces')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMQuad")}}</p> +{{Compat("api.DOMQuad")}} diff --git a/files/fr/web/api/domrect/domrect/index.md b/files/fr/web/api/domrect/domrect/index.md index a138a60cd0..97b1733b6b 100644 --- a/files/fr/web/api/domrect/domrect/index.md +++ b/files/fr/web/api/domrect/domrect/index.md @@ -9,60 +9,48 @@ tags: - Rectangle translation_of: Web/API/DOMRect/DOMRect --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable() }} -<p>Le constructeur <strong><code>DOMRect()</code></strong> crée un nouvel objet {{domxref("DOMRect")}}.</p> +Le constructeur **`DOMRect()`** crée un nouvel objet {{domxref("DOMRect")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var myDOMRect = new DOMRect(x, y, width, height);</pre> +```js +var myDOMRect = new DOMRect(x, y, width, height); +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>x</dt> - <dd>La coordonnée <code>x</code> de l'orginie du <code>DOMRect</code>.</dd> - <dt>y</dt> - <dd>La coordonnée <code>y</code> de l'origine du <code>DOMRect</code>.</dd> - <dt>width</dt> - <dd>La largeur du <code>DOMRect</code>.</dd> - <dt>height</dt> - <dd>La hauteur du <code>DOMRect</code>.</dd> -</dl> +- x + - : La coordonnée `x` de l'orginie du `DOMRect`. +- y + - : La coordonnée `y` de l'origine du `DOMRect`. +- width + - : La largeur du `DOMRect`. +- height + - : La hauteur du `DOMRect`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Pour créer un nouveau <code>DOMPoint</code>, vous pouvez exécuter une ligne de code telle que celle-ci :</p> +Pour créer un nouveau `DOMPoint`, vous pouvez exécuter une ligne de code telle que celle-ci : -<pre class="brush: js">myDOMRect = new DOMRect(0,0,100,100); +```js +myDOMRect = new DOMRect(0,0,100,100); // l'exécution de 'myDOMRect' dans la console devrait alors renvoyer // DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 } -</pre> +``` -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-domrectreadonlyx-y-width-height', 'DOMRect()')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-domrectreadonlyx-y-width-height', 'DOMRect()')}} | {{Spec2('Geometry Interfaces')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMRect.DOMRect")}}</p> +{{Compat("api.DOMRect.DOMRect")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMPoint")}}</li> - <li>{{domxref("DOMRect")}}</li> -</ul> +- {{domxref("DOMPoint")}} +- {{domxref("DOMRect")}} diff --git a/files/fr/web/api/domrect/index.md b/files/fr/web/api/domrect/index.md index a97d1c8d4e..103be19e93 100644 --- a/files/fr/web/api/domrect/index.md +++ b/files/fr/web/api/domrect/index.md @@ -9,81 +9,59 @@ tags: - Rectangle translation_of: Web/API/DOMRect --- -<p>{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p> +{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }} -<p>Un <strong><code>DOMRect</code></strong> représente un rectangle.</p> +Un **`DOMRect`** représente un rectangle. -<p>Le type de boîte représenté par le <code>DOMRect</code> est spécifié par la méthode ou la propriété qui l'a retourné. Par exemple, {{domxref("VREyeParameters.renderRect")}} de l'API WebVR spécifie la fenêtre d'un élément <a href="/fr/docs/Web/API/HTMLCanvasElement">canvas</a> dans laquelle le visuel pour un oeil doit être rendu.</p> +Le type de boîte représenté par le `DOMRect` est spécifié par la méthode ou la propriété qui l'a retourné. Par exemple, {{domxref("VREyeParameters.renderRect")}} de l'API WebVR spécifie la fenêtre d'un élément [canvas](/fr/docs/Web/API/HTMLCanvasElement) dans laquelle le visuel pour un oeil doit être rendu. -<p>Il hérite de son parent {{domxref("DOMRectReadOnly")}}.</p> +Il hérite de son parent {{domxref("DOMRectReadOnly")}}. -<p>{{InheritanceDiagram}}</p> +{{InheritanceDiagram}} -<h2 id="Constructeur">Constructeur</h2> +## Constructeur -<dl> - <dt>{{domxref("DOMRect.DOMRect","DOMRect()")}}</dt> - <dd>Crée un nouvel objet <code>DOMRect</code>.</dd> -</dl> +- {{domxref("DOMRect.DOMRect","DOMRect()")}} + - : Crée un nouvel objet `DOMRect`. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> -</dl> +_`DOMRect` hérite des propriétés de son parent {{domxref("DOMRectReadOnly")}}. À une différence près, elles ne sont plus en lecture seule._ -<p><em><code>DOMRect</code> hérite des propriétés de son parent {{domxref("DOMRectReadOnly")}}. À une différence près, elles ne sont plus en lecture seule.</em></p> +- {{domxref("DOMRectReadOnly.x")}} + - : La coordonnée x de l'origine du `DOMRect`. +- {{domxref("DOMRectReadOnly.y")}} + - : La coordonnée y de l'origine du `DOMRect`. +- {{domxref("DOMRectReadOnly.width")}} + - : La largeur du `DOMRect`. +- {{domxref("DOMRectReadOnly.height")}} + - : La hauteur du `DOMRect`. +- {{domxref("DOMRectReadOnly.top")}} + - : Renvoie la valeur de la coordonnée supérieure de `DOMRect` (a la même valeur que `y`, ou `y + height` _(y + hauteur)_ si `height` est négative). +- {{domxref("DOMRectReadOnly.right")}} + - : Renvoie la valeur de la coordonnée droite du `DOMRect` (a la même valeur que `x + width` _(x + largeur)_, ou `x` si `width` est négative). +- {{domxref("DOMRectReadOnly.bottom")}} + - : Renvoie la valeur de la coordonnée du bas du `DOMRect` (a la même valeur que `y + height` _(y + hauteur)_, ou `y` si `height` est négative). +- {{domxref("DOMRectReadOnly.left")}} + - : Renvoie la valeur de la coordonnée de gauche du `DOMRect` (a la même valeur que `x`, ou `x + width` _(x + largeur)_ si `width` est négative). -<dl> - <dt>{{domxref("DOMRectReadOnly.x")}}</dt> - <dd>La coordonnée x de l'origine du <code>DOMRect</code>.</dd> - <dt>{{domxref("DOMRectReadOnly.y")}}</dt> - <dd>La coordonnée y de l'origine du <code>DOMRect</code>.</dd> - <dt>{{domxref("DOMRectReadOnly.width")}}</dt> - <dd>La largeur du <code>DOMRect</code>.</dd> - <dt>{{domxref("DOMRectReadOnly.height")}}</dt> - <dd>La hauteur du <code>DOMRect</code>.</dd> - <dt>{{domxref("DOMRectReadOnly.top")}}</dt> - <dd>Renvoie la valeur de la coordonnée supérieure de <code>DOMRect</code> (a la même valeur que <code>y</code>, ou <code>y + height</code> <em>(y + hauteur)</em> si <code>height</code> est négative).</dd> - <dt>{{domxref("DOMRectReadOnly.right")}}</dt> - <dd>Renvoie la valeur de la coordonnée droite du <code>DOMRect</code> (a la même valeur que <code>x + width</code> <em>(x + largeur)</em>, ou <code>x</code> si <code>width</code> est négative).</dd> - <dt>{{domxref("DOMRectReadOnly.bottom")}}</dt> - <dd>Renvoie la valeur de la coordonnée du bas du <code>DOMRect</code> (a la même valeur que <code>y + height</code> <em>(y + hauteur)</em>, ou <code>y</code> si <code>height</code> est négative).</dd> - <dt>{{domxref("DOMRectReadOnly.left")}}</dt> - <dd>Renvoie la valeur de la coordonnée de gauche du <code>DOMRect</code> (a la même valeur que <code>x</code>, ou <code>x + width</code> <em>(x + largeur)</em> si <code>width</code> est négative).</dd> -</dl> +## Méthodes -<h2 id="Méthodes">Méthodes</h2> +_`DOMRect` hérite des méthodes de son parent {{domxref("DOMRectReadOnly")}}._ -<p><em><code>DOMRect</code> hérite des méthodes de son parent {{domxref("DOMRectReadOnly")}}.</em></p> +- {{domxref("DOMRectReadOnly.fromRect()")}} + - : Crée un nouvel objet `DOMRect` avec l'emplacement et les dimensions données. -<dl> - <dt>{{domxref("DOMRectReadOnly.fromRect()")}}</dt> - <dd>Crée un nouvel objet <code>DOMRect</code> avec l'emplacement et les dimensions données.</dd> -</dl> +## Spécifications -<h2 id="Specification">Spécifications</h2> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect')}} | {{Spec2('Geometry Interfaces')}} | Définition initiale. | -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +## Compatibilité des navigateurs -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +{{Compat("api.DOMRect")}} -<p>{{Compat("api.DOMRect")}}</p> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("DOMPoint")}}</li> -</ul> +- {{domxref("DOMPoint")}} diff --git a/files/fr/web/api/domrectreadonly/bottom/index.md b/files/fr/web/api/domrectreadonly/bottom/index.md index 16fb24cd52..5552416e2d 100644 --- a/files/fr/web/api/domrectreadonly/bottom/index.md +++ b/files/fr/web/api/domrectreadonly/bottom/index.md @@ -10,41 +10,30 @@ tags: - Rectangle translation_of: Web/API/DOMRectReadOnly/bottom --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable() }} -<p>La propriété en lecture seule <code><strong>bottom</strong></code> d'une interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur des coordonnées du pied du <code>DOMRect</code> (a la même valeur que <code>y + height</code> <em>(y + hauteur)</em>, ou <code>y</code> si <code>height</code> est négative).</p> +La propriété en lecture seule **`bottom`** d'une interface **`DOMRectReadOnly`** renvoie la valeur des coordonnées du pied du `DOMRect` (a la même valeur que `y + height` _(y + hauteur)_, ou `y` si `height` est négative). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var recBottom = DOMRect.bottom;</pre> +```js +var recBottom = DOMRect.bottom; +``` -<h3 id="Specification">Valeur</h3> +### Valeur -<p>Un double.</p> +Un double. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-bottom', 'bottom')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>La dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-bottom', 'bottom')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMRectReadOnly.bottom")}}</p> +{{Compat("api.DOMRectReadOnly.bottom")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMRect")}}</li> -</ul> +- {{domxref("DOMRect")}} diff --git a/files/fr/web/api/domrectreadonly/domrectreadonly/index.md b/files/fr/web/api/domrectreadonly/domrectreadonly/index.md index bb7039230b..eaeb627af0 100644 --- a/files/fr/web/api/domrectreadonly/domrectreadonly/index.md +++ b/files/fr/web/api/domrectreadonly/domrectreadonly/index.md @@ -9,60 +9,46 @@ tags: - Rectangle translation_of: Web/API/DOMRectReadOnly/DOMRectReadOnly --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable }} -<p>Le constructeur <strong><code>DOMRectReadOnly()</code></strong> crée un nouvel objet {{domxref("DOMRectReadOnly")}}.</p> +Le constructeur **`DOMRectReadOnly()`** crée un nouvel objet {{domxref("DOMRectReadOnly")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var myDOMRectReadOnly = new DOMRectReadOnly(x, y, width, height);</pre> + var myDOMRectReadOnly = new DOMRectReadOnly(x, y, width, height); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>x</dt> - <dd>La coordonnée <code>x</code> de l'origine d'un <code>DOMRectReadOnly</code>.</dd> - <dt>y</dt> - <dd>La coordonnée <code>y</code> de l'origine d'un <code>DOMRectReadOnly</code>.</dd> - <dt>width</dt> - <dd>La largeur d'un <code>DOMRectReadOnly</code>.</dd> - <dt>height</dt> - <dd>La hauteur d'un <code>DOMRectReadOnly</code>.</dd> -</dl> +- x + - : La coordonnée `x` de l'origine d'un `DOMRectReadOnly`. +- y + - : La coordonnée `y` de l'origine d'un `DOMRectReadOnly`. +- width + - : La largeur d'un `DOMRectReadOnly`. +- height + - : La hauteur d'un `DOMRectReadOnly`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Pour créer un nouveau <code>DOMPoint</code>, vous pouvez exécuter une ligne de code comme celle-ci :</p> +Pour créer un nouveau `DOMPoint`, vous pouvez exécuter une ligne de code comme celle-ci : -<pre class="brush: js">myDOMRect = new DOMRectReadOnly(0,0,100,100); +```js +myDOMRect = new DOMRectReadOnly(0,0,100,100); // l'exécution de 'myDOMRect' dans la console devrait alors renvoyer // DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 } -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect()')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect()')}} | {{Spec2('Geometry Interfaces')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMRectReadOnly.DOMRectReadOnly")}}</p> +{{Compat("api.DOMRectReadOnly.DOMRectReadOnly")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMPoint")}}</li> - <li>{{domxref("DOMRect")}}</li> -</ul> +- {{domxref("DOMPoint")}} +- {{domxref("DOMRect")}} diff --git a/files/fr/web/api/domrectreadonly/height/index.md b/files/fr/web/api/domrectreadonly/height/index.md index e617faaa94..68896eb357 100644 --- a/files/fr/web/api/domrectreadonly/height/index.md +++ b/files/fr/web/api/domrectreadonly/height/index.md @@ -10,41 +10,30 @@ tags: - Rectangle translation_of: Web/API/DOMRectReadOnly/height --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable() }} -<p>La propriété en lecture seule <strong><code>height</code></strong> de l'interface of the <strong><code>DOMRectReadOnly</code></strong> représente la hauteur du <code>DOMRect</code>.</p> +La propriété en lecture seule **`height`** de l'interface of the **`DOMRectReadOnly`** représente la hauteur du `DOMRect`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var recHeight = DOMRect.height;</pre> +```js +var recHeight = DOMRect.height; +``` -<h3 id="Specification">Valeur</h3> +### Valeur -<p>Un double.</p> +Un double. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-height', 'height')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>La dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-height', 'height')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMRectReadOnly.height")}}</p> +{{Compat("api.DOMRectReadOnly.height")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMRect")}}</li> -</ul> +- {{domxref("DOMRect")}} diff --git a/files/fr/web/api/domrectreadonly/index.md b/files/fr/web/api/domrectreadonly/index.md index 6a80fa9ce0..ee82ba51bc 100644 --- a/files/fr/web/api/domrectreadonly/index.md +++ b/files/fr/web/api/domrectreadonly/index.md @@ -12,71 +12,51 @@ tags: - TopicStub translation_of: Web/API/DOMRectReadOnly --- -<p>{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p> +{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }} -<p>L'interface <strong><code>DOMRectReadOnly</code></strong> spécifie les propriétés standard utilisées par {{domxref("DOMRect")}} pour définir un rectangle.</p> +L'interface **`DOMRectReadOnly`** spécifie les propriétés standard utilisées par {{domxref("DOMRect")}} pour définir un rectangle. -<h2 id="Constructeur">Constructeur</h2> +## Constructeur -<dl> - <dt>{{domxref("DOMRectReadOnly.DOMRectReadOnly","DOMRectReadOnly()")}}</dt> - <dd>Défini pour créer un nouvel objet <code>DOMRectReadOnly</code>, mais notez que ce constructeur ne peut pas être appelé par JavaScript tiers: cela renvoie une erreur de type "Constructeur illégal".</dd> -</dl> +- {{domxref("DOMRectReadOnly.DOMRectReadOnly","DOMRectReadOnly()")}} + - : Défini pour créer un nouvel objet `DOMRectReadOnly`, mais notez que ce constructeur ne peut pas être appelé par JavaScript tiers: cela renvoie une erreur de type "Constructeur illégal". -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> -</dl> +<!----> -<dl> - <dt>{{domxref("DOMRectReadOnly.x")}} {{readonlyInline}}</dt> - <dd>La coordonnée x de l'origine du <code>DOMRect</code>.</dd> - <dt>{{domxref("DOMRectReadOnly.y")}} {{readonlyInline}}</dt> - <dd>La coordonnée y de l'origine du <code>DOMRect</code>.</dd> - <dt>{{domxref("DOMRectReadOnly.width")}} {{readonlyInline}}</dt> - <dd>La largeur du <code>DOMRect</code>.</dd> - <dt>{{domxref("DOMRectReadOnly.height")}} {{readonlyInline}}</dt> - <dd>La hauteur du <code>DOMRect</code>.</dd> - <dt>{{domxref("DOMRectReadOnly.top")}} {{readonlyInline}}</dt> - <dd>Renvoie la valeur de coordonnée supérieur du <code>DOMRect</code> (généralement la même que <code>y</code>).</dd> - <dt>{{domxref("DOMRectReadOnly.right")}} {{readonlyInline}}</dt> - <dd>Renvoie la valeur de coordonnée droite du <code>DOMRect</code> (généralement identique à <code>x + largeur</code>).</dd> - <dt>{{domxref("DOMRectReadOnly.bottom")}} {{readonlyInline}}</dt> - <dd>Renvoie la valeur de coordonnée inférieur du <code>DOMRect</code> (généralement la même que <code>y + hauteur</code>).</dd> - <dt>{{domxref("DOMRectReadOnly.left")}} {{readonlyInline}}</dt> - <dd>Renvoie la valeur de coordonnée gauche du <code>DOMRect</code> (généralement la même que <code>x</code>).</dd> -</dl> +- {{domxref("DOMRectReadOnly.x")}} {{readonlyInline}} + - : La coordonnée x de l'origine du `DOMRect`. +- {{domxref("DOMRectReadOnly.y")}} {{readonlyInline}} + - : La coordonnée y de l'origine du `DOMRect`. +- {{domxref("DOMRectReadOnly.width")}} {{readonlyInline}} + - : La largeur du `DOMRect`. +- {{domxref("DOMRectReadOnly.height")}} {{readonlyInline}} + - : La hauteur du `DOMRect`. +- {{domxref("DOMRectReadOnly.top")}} {{readonlyInline}} + - : Renvoie la valeur de coordonnée supérieur du `DOMRect` (généralement la même que `y`). +- {{domxref("DOMRectReadOnly.right")}} {{readonlyInline}} + - : Renvoie la valeur de coordonnée droite du `DOMRect` (généralement identique à `x + largeur`). +- {{domxref("DOMRectReadOnly.bottom")}} {{readonlyInline}} + - : Renvoie la valeur de coordonnée inférieur du `DOMRect` (généralement la même que `y + hauteur`). +- {{domxref("DOMRectReadOnly.left")}} {{readonlyInline}} + - : Renvoie la valeur de coordonnée gauche du `DOMRect` (généralement la même que `x`). -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<dl> - <dt>{{domxref("DOMRectReadOnly.fromRect()")}}</dt> - <dd>Crée un nouvel objet <code>DOMRect</code> avec un emplacement et des dimensions donnés.</dd> -</dl> +- {{domxref("DOMRectReadOnly.fromRect()")}} + - : Crée un nouvel objet `DOMRect` avec un emplacement et des dimensions donnés. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRectReadOnly')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRectReadOnly')}} | {{Spec2('Geometry Interfaces')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMRectReadOnly")}}</p> +{{Compat("api.DOMRectReadOnly")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMPoint")}}</li> -</ul> +- {{domxref("DOMPoint")}} diff --git a/files/fr/web/api/domrectreadonly/left/index.md b/files/fr/web/api/domrectreadonly/left/index.md index 63ef22ecf6..a81ce823ec 100644 --- a/files/fr/web/api/domrectreadonly/left/index.md +++ b/files/fr/web/api/domrectreadonly/left/index.md @@ -10,41 +10,30 @@ tags: - Rectangle translation_of: Web/API/DOMRectReadOnly/left --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable() }} -<p>La propriété en lecture seule <code><strong>left</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur de la coordonnée gauche du <code>DOMRect</code> (a la même valeur que <code>x</code>, ou <code>x + width</code><em> (x + largeur)</em> si <code>width</code> est négative).</p> +La propriété en lecture seule **`left`** de l'interface **`DOMRectReadOnly`** renvoie la valeur de la coordonnée gauche du `DOMRect` (a la même valeur que `x`, ou `x + width` _(x + largeur)_ si `width` est négative). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var recLeft = DOMRect.left;</pre> +```js +var recLeft = DOMRect.left; +``` -<h3 id="Specification">Valeur</h3> +### Valeur -<p>Un double.</p> +Un double. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-left', 'left')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>La dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-left', 'left')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMRectReadOnly.left")}}</p> +{{Compat("api.DOMRectReadOnly.left")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMRect")}}</li> -</ul> +- {{domxref("DOMRect")}} diff --git a/files/fr/web/api/domrectreadonly/right/index.md b/files/fr/web/api/domrectreadonly/right/index.md index 011e820cf3..eedc3305c4 100644 --- a/files/fr/web/api/domrectreadonly/right/index.md +++ b/files/fr/web/api/domrectreadonly/right/index.md @@ -10,41 +10,30 @@ tags: - Rectangle translation_of: Web/API/DOMRectReadOnly/right --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable() }} -<p>La propriété en lecture seule <code><strong>right</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur de la coordonnée droite du <code>DOMRect.</code> (a la même valeur que <code>x + width</code> <em>(x + largeur)</em>, ou <code>x</code> si <code>width</code> est négative).</p> +La propriété en lecture seule **`right`** de l'interface **`DOMRectReadOnly`** renvoie la valeur de la coordonnée droite du `DOMRect.` (a la même valeur que `x + width` _(x + largeur)_, ou `x` si `width` est négative). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var recRight = DOMRect.right;</pre> +```js +var recRight = DOMRect.right; +``` -<h3 id="Specification">Valeur</h3> +### Valeur -<p>Un double.</p> +Un double. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-right', 'right')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>La dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-right', 'right')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMRectReadOnly.right")}}</p> +{{Compat("api.DOMRectReadOnly.right")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMRect")}}</li> -</ul> +- {{domxref("DOMRect")}} diff --git a/files/fr/web/api/domrectreadonly/top/index.md b/files/fr/web/api/domrectreadonly/top/index.md index fa6b1644ef..92d220130d 100644 --- a/files/fr/web/api/domrectreadonly/top/index.md +++ b/files/fr/web/api/domrectreadonly/top/index.md @@ -10,41 +10,30 @@ tags: - Rectangle translation_of: Web/API/DOMRectReadOnly/top --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable() }} -<p>La propriété en lecture seule <code><strong>top</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur de la coordonnée haute du <code>DOMRect.</code> (A la même valeur que <code>y</code>, ou <code>y + height</code> <em>(y + hauteur)</em> si <code>height</code> est négative.)</p> +La propriété en lecture seule **`top`** de l'interface **`DOMRectReadOnly`** renvoie la valeur de la coordonnée haute du `DOMRect.` (A la même valeur que `y`, ou `y + height` _(y + hauteur)_ si `height` est négative.) -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var recTop = DOMRect.top;</pre> +```js +var recTop = DOMRect.top; +``` -<h3 id="Specification">Valeur</h3> +### Valeur -<p>Un double.</p> +Un double. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-top', 'top')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>La dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-top', 'top')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMRectReadOnly.top")}}</p> +{{Compat("api.DOMRectReadOnly.top")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMRect")}}</li> -</ul> +- {{domxref("DOMRect")}} diff --git a/files/fr/web/api/domrectreadonly/width/index.md b/files/fr/web/api/domrectreadonly/width/index.md index 60b7427e0f..e79389e3bb 100644 --- a/files/fr/web/api/domrectreadonly/width/index.md +++ b/files/fr/web/api/domrectreadonly/width/index.md @@ -10,41 +10,30 @@ tags: - Rectangle translation_of: Web/API/DOMRectReadOnly/width --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable() }} -<p>La propriété en lecture seule <code><strong>width</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> représente la largeur du <code>DOMRect</code>.</p> +La propriété en lecture seule **`width`** de l'interface **`DOMRectReadOnly`** représente la largeur du `DOMRect`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var recWidth = DOMRect.width;</pre> +```js +var recWidth = DOMRect.width; +``` -<h3 id="Specification">Valeur</h3> +### Valeur -<p>Un double.</p> +Un double. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-width', 'width')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>La dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-width', 'width')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMRectReadOnly.width")}}</p> +{{Compat("api.DOMRectReadOnly.width")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMRect")}}</li> -</ul> +- {{domxref("DOMRect")}} diff --git a/files/fr/web/api/domrectreadonly/x/index.md b/files/fr/web/api/domrectreadonly/x/index.md index 89aee41f8b..98fab76738 100644 --- a/files/fr/web/api/domrectreadonly/x/index.md +++ b/files/fr/web/api/domrectreadonly/x/index.md @@ -11,41 +11,30 @@ tags: - x translation_of: Web/API/DOMRectReadOnly/x --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable() }} -<p>La propriété en lecture seule <code><strong>x</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> représente la coordonnée x d' l'origine du <code>DOMRect</code>.</p> +La propriété en lecture seule **`x`** de l'interface **`DOMRectReadOnly`** représente la coordonnée x d' l'origine du `DOMRect`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var recX = DOMRect.x;</pre> +```js +var recX = DOMRect.x; +``` -<h3 id="Specification">Valeur</h3> +### Valeur -<p>Un double.</p> +Un double. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-x', 'x')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>La dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-x', 'x')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMRectReadOnly.x")}}</p> +{{Compat("api.DOMRectReadOnly.x")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMRect")}}</li> -</ul> +- {{domxref("DOMRect")}} diff --git a/files/fr/web/api/domrectreadonly/y/index.md b/files/fr/web/api/domrectreadonly/y/index.md index 4daf265c51..2ff37bc054 100644 --- a/files/fr/web/api/domrectreadonly/y/index.md +++ b/files/fr/web/api/domrectreadonly/y/index.md @@ -11,41 +11,30 @@ tags: - 'y' translation_of: Web/API/DOMRectReadOnly/y --- -<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p> +{{APIRef("DOM")}}{{ SeeCompatTable() }} -<p>La propriété en lecture seule <code><strong>y</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> représente la coordonnée y de l'origine du <code>DOMRect</code>.</p> +La propriété en lecture seule **`y`** de l'interface **`DOMRectReadOnly`** représente la coordonnée y de l'origine du `DOMRect`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var recY = DOMRect.y;</pre> +```js +var recY = DOMRect.y; +``` -<h3 id="Specification">Valeur</h3> +### Valeur -<p>Un double.</p> +Un double. -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-y', 'y')}}</td> - <td>{{Spec2('Geometry Interfaces')}}</td> - <td>La dernière version de la spécification est un ED.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | +| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-y', 'y')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.DOMRectReadOnly.y")}}</p> +{{Compat("api.DOMRectReadOnly.y")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMRect")}}</li> -</ul> +- {{domxref("DOMRect")}} diff --git a/files/fr/web/api/domstring/binary/index.md b/files/fr/web/api/domstring/binary/index.md index c58db9b8c9..f6e9825bdf 100644 --- a/files/fr/web/api/domstring/binary/index.md +++ b/files/fr/web/api/domstring/binary/index.md @@ -8,20 +8,18 @@ tags: - données translation_of: Web/API/DOMString/Binary --- -<p>En termes simples, une chaîne de caractères binaire est une séquence de 1 et de 0. JavaScript est chargé de riches fonctionnalités pour manipuler des données binaires brutes au niveau inférieur.</p> +En termes simples, une chaîne de caractères binaire est une séquence de 1 et de 0. JavaScript est chargé de riches fonctionnalités pour manipuler des données binaires brutes au niveau inférieur. -<p>Au fur et à mesure que les applications Web deviennent de plus en plus puissantes, ajoutant des fonctionnalités telles que la manipulation d'audio et de vidéo, l'accès aux données brutes à l'aide de WebSockets, etc., il apparaît clairement parfois que le code JavaScript peut être utile pour manipuler rapidement et facilement des données binaires brutes. Dans le passé, cela devait être simulé en traitant les données brutes <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">string</a> (<em>chaîne de caractères</em>) et en utilisant la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt"><code>charCodeAt()</code></a> pour lire les octets à partir des tampons de données.</p> +Au fur et à mesure que les applications Web deviennent de plus en plus puissantes, ajoutant des fonctionnalités telles que la manipulation d'audio et de vidéo, l'accès aux données brutes à l'aide de WebSockets, etc., il apparaît clairement parfois que le code JavaScript peut être utile pour manipuler rapidement et facilement des données binaires brutes. Dans le passé, cela devait être simulé en traitant les données brutes [string](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) (_chaîne de caractères_) et en utilisant la méthode [`charCodeAt()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt) pour lire les octets à partir des tampons de données. -<p>Cependant, ceci est lent et sujet aux erreurs, en raison du besoin de conversions multiples (en particulier si les données binaires ne sont pas réellement des données au format octet, mais, par exemple, des entiers ou des flottants de 32 bits).</p> +Cependant, ceci est lent et sujet aux erreurs, en raison du besoin de conversions multiples (en particulier si les données binaires ne sont pas réellement des données au format octet, mais, par exemple, des entiers ou des flottants de 32 bits). -<p><a href="/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s">Un tableau typé en JavaScript</a> fournit un mécanisme pour accèder aux données brutes binaires beaucoup plus efficacement. Le constructeur <a href="/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s"><code>StringView</code></a> Non native est un niveau au-dessus des tableaux typés et fournit une interface de type <a href="https://fr.wikipedia.org/wiki/C_(langage)">C</a> pour les chaînes de caractères.</p> +[Un tableau typé en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s) fournit un mécanisme pour accèder aux données brutes binaires beaucoup plus efficacement. Le constructeur [`StringView`](/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s) Non native est un niveau au-dessus des tableaux typés et fournit une interface de type [C](<https://fr.wikipedia.org/wiki/C_(langage)>) pour les chaînes de caractères. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s">Les tableaux typés en JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires">Opérateurs binaires </a></li> - <li><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">String</a></li> - <li><a href="/fr/docs/Archive/Add-ons/Code_snippets/StringView"><code>StringView</code></a></li> -</ul> +- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s) +- [Opérateurs binaires](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires) +- [`DOMString`](/fr/docs/Web/API/DOMString) +- [String](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) +- [`StringView`](/fr/docs/Archive/Add-ons/Code_snippets/StringView) diff --git a/files/fr/web/api/domstring/index.md b/files/fr/web/api/domstring/index.md index 7357eaec7a..6ebd847530 100644 --- a/files/fr/web/api/domstring/index.md +++ b/files/fr/web/api/domstring/index.md @@ -8,46 +8,21 @@ tags: - Reference translation_of: Web/API/DOMString --- -<p>Une chaîne de caractères UTF-16. Comme JavaScript utilise déjà ce type de chaîne de caractères, <code>DOMString</code> est directement associé à <code><a href="/en/JavaScript/Reference/Global_Objects/String">String</a></code>.</p> +Une chaîne de caractères UTF-16. Comme JavaScript utilise déjà ce type de chaîne de caractères, `DOMString` est directement associé à [`String`](/en/JavaScript/Reference/Global_Objects/String). -<h2 id="Specification">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}</td> - <td>{{Spec2('WebIDL')}}</td> - <td>Reformulation de la définition pour éviter quelques cas particuliers bizarres.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Aucun changement par rapport à {{SpecName('DOM2 Core')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Aucun changement par rapport à {{SpecName('DOM1')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Première définition</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------ | +| {{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}} | {{Spec2('WebIDL')}} | Reformulation de la définition pour éviter quelques cas particuliers bizarres. | +| {{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}} | {{Spec2('DOM3 Core')}} | Aucun changement par rapport à {{SpecName('DOM2 Core')}} | +| {{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}} | {{Spec2('DOM2 Core')}} | Aucun changement par rapport à {{SpecName('DOM1')}} | +| {{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}} | {{Spec2('DOM1')}} | Première définition | -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">String</a></li> - <li>{{domxref("USVString")}}</li> - <li>{{domxref("CSSOMString")}}</li> - <li><a href="/fr/Add-ons/Code_snippets/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> - <li><a href="/fr/docs/Web/API/DOMString/Binary">Binary strings</a></li> -</ul> +- [String](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) +- {{domxref("USVString")}} +- {{domxref("CSSOMString")}} +- [`StringView` – a C-like representation of strings based on typed arrays](/fr/Add-ons/Code_snippets/StringView) +- [Binary strings](/fr/docs/Web/API/DOMString/Binary) diff --git a/files/fr/web/api/domstringlist/index.md b/files/fr/web/api/domstringlist/index.md index dd5850119c..2ea3072d6e 100644 --- a/files/fr/web/api/domstringlist/index.md +++ b/files/fr/web/api/domstringlist/index.md @@ -8,41 +8,24 @@ tags: - Types translation_of: Web/API/DOMStringList --- -<p>{{ APIRef("DOM") }}</p> +{{ APIRef("DOM") }} -<p>Un type renvoyé par certaines API contenant une liste de <a href="/fr/docs/Web/API/DOMString">DOMString</a> (<em>chaînes de caractères</em>).</p> +Un type renvoyé par certaines API contenant une liste de [DOMString](/fr/docs/Web/API/DOMString) (_chaînes de caractères_). -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt>{{domxref("DOMStringList.length")}} {{ReadOnlyInline}}</dt> - <dd>Renvoie la longueur de la liste.</dd> -</dl> +- {{domxref("DOMStringList.length")}} {{ReadOnlyInline}} + - : Renvoie la longueur de la liste. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<dl> - <dt>{{domxref("DOMStringList.item()")}}</dt> - <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd> - <dt>{{domxref("DOMStringList.contains()")}}</dt> - <dd>Renvoie un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si la chaîne de caractères donnée est dans la liste.</dd> -</dl> +- {{domxref("DOMStringList.item()")}} + - : Renvoie une {{domxref("DOMString")}} (_chaîne de caractères_). +- {{domxref("DOMStringList.contains()")}} + - : Renvoie un {{jsxref("Boolean")}} (_booléen_) indiquant si la chaîne de caractères donnée est dans la liste. -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------- | +| {{SpecName("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. | diff --git a/files/fr/web/api/domtimestamp/index.md b/files/fr/web/api/domtimestamp/index.md index 6f9e563048..d058045d5a 100644 --- a/files/fr/web/api/domtimestamp/index.md +++ b/files/fr/web/api/domtimestamp/index.md @@ -7,25 +7,12 @@ tags: - Référence DOM translation_of: Web/API/DOMTimeStamp --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>Le type <code>DOMTimeStamp</code> représente une quantité de millisecondes, exprimées de manière absolue ou relative, en fonction de la spécification dans laquelle il apparaît.</p> +Le type `DOMTimeStamp` représente une quantité de millisecondes, exprimées de manière absolue ou relative, en fonction de la spécification dans laquelle il apparaît. -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("WebIDL", "#common-DOMTimeStamp", "DOMTimeStamp")}}</td> - <td>{{Spec2("WebIDL")}}</td> - <td>Initial specification</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ------------------------ | --------------------- | +| {{SpecName("WebIDL", "#common-DOMTimeStamp", "DOMTimeStamp")}} | {{Spec2("WebIDL")}} | Initial specification | diff --git a/files/fr/web/api/domtokenlist/add/index.md b/files/fr/web/api/domtokenlist/add/index.md index b274f15ac0..9052727e6e 100644 --- a/files/fr/web/api/domtokenlist/add/index.md +++ b/files/fr/web/api/domtokenlist/add/index.md @@ -10,66 +10,58 @@ tags: - Méthodes translation_of: Web/API/DOMTokenList/add --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode <code><strong>add()</strong></code> de l'interface {{domxref("DOMTokenList")}} ajoute le <em>token</em> (<em>marque</em>) à la liste.</p> +La méthode **`add()`** de l'interface {{domxref("DOMTokenList")}} ajoute le _token_ (_marque_) à la liste. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">tokenList.add(token1[, token2[, ...]]);</pre> + tokenList.add(token1[, token2[, ...]]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>token</dt> - <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque (<em>token</em>) que vous souhaitez ajouter à la liste.</dd> -</dl> +- token + - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la marque (_token_) que vous souhaitez ajouter à la liste. -<h3 id="Valeur_renvoyée">Valeur renvoyée</h3> +### Valeur renvoyée -<p>Vide.</p> +Vide. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code>, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la liste et écrivons la liste dans un {{domxref("Node.textContent")}} du <code><span></code>.</p> +Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList`, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la liste et écrivons la liste dans un {{domxref("Node.textContent")}} du `<span>`. -<p>Tout d'abord, le code HTML :</p> +Tout d'abord, le code HTML : -<pre class="brush: html"><span class="a b c"></span></pre> +```html +<span class="a b c"></span> +``` -<p>Maintenant, le JavaScript :</p> +Maintenant, le JavaScript : -<pre class="brush: js">var span = document.querySelector("span"); +```js +var span = document.querySelector("span"); var classes = span.classList; classes.add("d"); span.textContent = classes; -</pre> +``` -<p>La sortie ressemble à ceci :</p> +La sortie ressemble à ceci : -<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> +{{ EmbedLiveSample('Examples', '100%', 60) }} -<p>Vous pouvez ajouter plusieurs <em>token</em> :</p> +Vous pouvez ajouter plusieurs _token_ : -<pre class="brush: js">span.classList.add("d", "e", "f");</pre> +```js +span.classList.add("d", "e", "f"); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.DOMTokenList.add")}}</div>
\ No newline at end of file +{{Compat("api.DOMTokenList.add")}} diff --git a/files/fr/web/api/domtokenlist/contains/index.md b/files/fr/web/api/domtokenlist/contains/index.md index 9954b4108f..ca3978e077 100644 --- a/files/fr/web/api/domtokenlist/contains/index.md +++ b/files/fr/web/api/domtokenlist/contains/index.md @@ -10,65 +10,56 @@ tags: - Recherche contenu translation_of: Web/API/DOMTokenList/contains --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode <code><strong>contains()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un {{domxref("Boolean")}} (<em>booléen</em>) — <code>true</code> (<em>vrai</em>) si la liste sous-jacente contient le symbole donné, sinon <code>false</code> (<em>faux</em>).</p> +La méthode **`contains()`** de l'interface {{domxref("DOMTokenList")}} renvoie un {{domxref("Boolean")}} (_booléen_) — `true` (_vrai_) si la liste sous-jacente contient le symbole donné, sinon `false` (_faux_). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">tokenList.contains(token);</pre> + tokenList.contains(token); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>token</dt> - <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la "token" (<em>marque</em>) dont vous voulez vérifier l'existence dans la liste.</dd> -</dl> +- token + - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la "token" (_marque_) dont vous voulez vérifier l'existence dans la liste. -<h3 id="Valeur_renvoyée">Valeur renvoyée</h3> +### Valeur renvoyée -<p>Un {{domxref("Boolean")}} (<em>booléen</em>)— <code>true</code> (<em>vrai</em>) si la liste sous-jacente contient la marque donnée, sinon <code>false</code> (<em>faux</em>).</p> +Un {{domxref("Boolean")}} (_booléen_)— `true` (_vrai_) si la liste sous-jacente contient la marque donnée, sinon `false` (_faux_). -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous testons ensuite l'existence de "c" dans la liste, et écrivons le résultat dans le {{domxref("Node.textContent")}} du <code><span></code>.</p> +Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous testons ensuite l'existence de "c" dans la liste, et écrivons le résultat dans le {{domxref("Node.textContent")}} du `<span>`. -<p>Tout d'abord, le code HTML :</p> +Tout d'abord, le code HTML : -<pre class="brush: html"><span class="a b c"></span></pre> +```html +<span class="a b c"></span> +``` -<p>Maintenant, le JavaScript :</p> +Maintenant, le JavaScript : -<pre class="brush: js">var span = document.querySelector("span"); +```js +var span = document.querySelector("span"); var classes = span.classList; var result = classes.contains("c"); if(result) { span.textContent = "The classList contains 'c'"; } else { span.textContent = "The classList does not contain 'c'"; -}</pre> +} +``` -<p>La sortie ressemble à ceci :</p> +La sortie ressemble à ceci : -<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> +{{ EmbedLiveSample('Examples', '100%', 60) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-contains','contains()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG','#dom-domtokenlist-contains','contains()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.DOMTokenList.contains")}}</div>
\ No newline at end of file +{{Compat("api.DOMTokenList.contains")}} diff --git a/files/fr/web/api/domtokenlist/entries/index.md b/files/fr/web/api/domtokenlist/entries/index.md index 8642f149aa..113f23c1b0 100644 --- a/files/fr/web/api/domtokenlist/entries/index.md +++ b/files/fr/web/api/domtokenlist/entries/index.md @@ -10,63 +10,54 @@ tags: - Méthodes translation_of: Web/API/DOMTokenList/entries --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>La méthode <code><strong>DOMTokenList.entries()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. Les valeurs sont des objets {{domxref("DOMString")}} (<em>chaînes de caractères</em>), chacun représentant une seule marque.</p> +La méthode **`DOMTokenList.entries()`** renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. Les valeurs sont des objets {{domxref("DOMString")}} (_chaînes de caractères_), chacun représentant une seule marque. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">tokenList.entries();</pre> + tokenList.entries(); -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p> +Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant <code>entries()</code>, puis parcourons chacune d'entre elles en utilisant une boucle <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for ... of</a> , et les écrivons dans un {{domxref("Node.textContent")}} du <code><span></code>.</p> +Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant `entries()`, puis parcourons chacune d'entre elles en utilisant une boucle [for ... of](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) , et les écrivons dans un {{domxref("Node.textContent")}} du `<span>`. -<p>D'abord le HTML :</p> +D'abord le HTML : -<pre class="brush: html"><span class="a b c"></span></pre> +```html +<span class="a b c"></span> +``` -<p>Maintenant le JavaScript :</p> +Maintenant le JavaScript : -<pre class="brush: js">var span = document.querySelector("span"); +```js +var span = document.querySelector("span"); var classes = span.classList; var iterator = classes.entries(); for(var value of iterator) { span.textContent += value + ' ++ '; -}</pre> +} +``` -<p>La sortie ressemble à ceci :</p> +La sortie ressemble à ceci : -<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> +{{ EmbedLiveSample('Examples', '100%', 60) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#interface-domtokenlist','entries() (as iterable<Node>)')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG','#interface-domtokenlist','entries() (as iterable<Node>)')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.DOMTokenList.entries")}}</div> +{{Compat("api.DOMTokenList.entries")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMSettableTokenList")}} (objet qui étend DOMTokenList avec la propriété définissable<em> .value</em>)</li> -</ul> +- {{domxref("DOMSettableTokenList")}} (objet qui étend DOMTokenList avec la propriété définissable _.value_) diff --git a/files/fr/web/api/domtokenlist/foreach/index.md b/files/fr/web/api/domtokenlist/foreach/index.md index 738ad80d7c..917b80e9c2 100644 --- a/files/fr/web/api/domtokenlist/foreach/index.md +++ b/files/fr/web/api/domtokenlist/foreach/index.md @@ -11,49 +11,49 @@ tags: - Pour chaque translation_of: Web/API/DOMTokenList/forEach --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode <strong><code>forEach()</code></strong> de l'interface {{domxref("DOMTokenList")}} appelle le retour donné en paramètre, un pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.</p> +La méthode **`forEach()`** de l'interface {{domxref("DOMTokenList")}} appelle le retour donné en paramètre, un pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>tokenList</var><em>.</em>forEach(<var>callback</var>); -<em>tokenList.</em>forEach<em>(callback, argument);</em> -</pre> + tokenList.forEach(callback); + tokenList.forEach(callback, argument); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>callback</code></dt> - <dd>Fonction à exécuter pour chaque élément, prenant éventuellement 3 arguments : - <dl> - <dt><em><code>currentValue</code></em></dt> - <dd>L'élément en cours de traitement dans le tableau.</dd> - <dt><code><em>currentIndex</em></code></dt> - <dd>L'index de l'élément en cours de traitement dans le tableau.</dd> - <dt><em><code>listObj</code></em></dt> - <dd>Le tableau que <code>forEach()</code> est en train d'appliquer.</dd> - </dl> - </dd> - <dt><em><code>argument</code></em><code> {{Optional_inline}}</code></dt> - <dd>Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du <code>callback</code> (<em>rappel</em>).</dd> -</dl> +- `callback` -<h3 id="Valeur_renvoyée">Valeur renvoyée</h3> + - : Fonction à exécuter pour chaque élément, prenant éventuellement 3 arguments : -<p>{{jsxref('undefined')}} (<em>indéfinie</em>).</p> + - _`currentValue`_ + - : L'élément en cours de traitement dans le tableau. + - `currentIndex` + - : L'index de l'élément en cours de traitement dans le tableau. + - _`listObj`_ + - : Le tableau que `forEach()` est en train d'appliquer. -<h2 id="Exemple">Exemple</h2> +- _`argument`_` {{Optional_inline}}` + - : Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du `callback` (_rappel_). -<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec <code>forEach()</code> et écrivons chacune d'elles dans le {{domxref("Node.textContent")}} du <code><span></code> pendant l'exécution de la fonction interne <code>forEach()</code>.</p> +### Valeur renvoyée -<h3 id="HTML">HTML</h3> +{{jsxref('undefined')}} (_indéfinie_). -<pre class="brush: html"><span class="a b c"></span></pre> +## Exemple -<h3 id="JavaScript">JavaScript</h3> +Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec `forEach()` et écrivons chacune d'elles dans le {{domxref("Node.textContent")}} du `<span>` pendant l'exécution de la fonction interne `forEach()`. -<pre class="brush: js">var span = document.querySelector("span"); +### HTML + +```html +<span class="a b c"></span> +``` + +### JavaScript + +```js +var span = document.querySelector("span"); var classes = span.classList; var iterator = classes.values(); @@ -62,35 +62,23 @@ classes.forEach( span.textContent += value + ' ' + key + "/" + this + ' ++ '; }, "arg" -);</pre> +); +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{ EmbedLiveSample('Example', '100%', 60) }}</p> +{{ EmbedLiveSample('Example', '100%', 60) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#interface-domtokenlist','forEach() (as iterable<Node>)')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG','#interface-domtokenlist','forEach() (as iterable<Node>)')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.DOMTokenList.forEach")}}</div> +{{Compat("api.DOMTokenList.forEach")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMSettableTokenList")}} (objet qui étend DOMTokenList avec la propriété définissable <em>.value</em>)</li> -</ul> +- {{domxref("DOMSettableTokenList")}} (objet qui étend DOMTokenList avec la propriété définissable _.value_) diff --git a/files/fr/web/api/domtokenlist/index.md b/files/fr/web/api/domtokenlist/index.md index 8f454506dd..8cbf548fc2 100644 --- a/files/fr/web/api/domtokenlist/index.md +++ b/files/fr/web/api/domtokenlist/index.md @@ -10,105 +10,94 @@ tags: - Marques translation_of: Web/API/DOMTokenList --- -<div>{{APIRef("DOM")}}</div> - -<p>L'interface <code><strong>DOMTokenList</strong></code> représente un ensemble de "token" (<em>marques</em>) séparées par un espace. On obtient un tel ensemble grâce aux propriétés {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}} ou {{domxref("HTMLAreaElement.relList")}}. Les positions de cette liste sont numérotées à partir de 0.<code> DOMTokenList</code> est toujours sensible à la casse.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}</dt> - <dd>Un entier qui représente le nombre d'objets qui sont stockés dans l'objet.</dd> - <dt>{{domxref("DOMTokenList.value")}} {{ReadOnlyInline}}</dt> - <dd>retourne la valeur de la liste comme une {{domxref("DOMString")}} <em>(chaîne de caractères).</em></dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{domxref("DOMTokenList.item()")}}</dt> - <dd>renvoie un élément de la liste à partir de son index (ou {{jsxref("undefined")}} lorsque le nombre passé est supérieur ou égal à la longueur de la liste).</dd> - <dt>{{domxref("DOMTokenList.contains()")}}</dt> - <dd>renvoie <code>true</code> <em>(vrai)</em> si la chaîne de caractères contient la marque <em>(token)</em> passée en argument, <code>false</code> <em>(faux)</em> sinon.</dd> - <dt>{{domxref("DOMTokenList.add()")}}</dt> - <dd>ajoute une marque à la chaîne sous-jacente.</dd> - <dt>{{domxref("DOMTokenList.remove()")}}</dt> - <dd>retire une marque de la chaîne sous-jacente.</dd> - <dt>{{domxref("DOMTokenList.replace()")}}</dt> - <dd>remplace une marque existant par une nouvelle.</dd> - <dt>{{domxref("DOMTokenList.supports()")}}</dt> - <dd>renvoie <code>true</code> <em>(vrai)</em> si une marque passée en argument appartient bien aux marques prises en charge pour l'attribut correspondant.</dd> - <dt>{{domxref("DOMTokenList.toggle()")}}</dt> - <dd>retire une marque de la chaîne de caractères sous-jacente et renvoie <code>false</code>. Si la marque n'existe pas, elle est ajoutée et la méthode renvoie <code>true</code>.</dd> - <dt>{{domxref("DOMTokenList.entries()")}}</dt> - <dd>renvoie un {{jsxref("Iteration_protocols","itérateur","",1)}} qui permet de parcourir l'ensemble des clés/valeurs contenues dans cet objet.</dd> - <dt>{{domxref("DOMTokenList.forEach()")}}</dt> - <dd>exécute une fonction pour chaque élément de la <code>DOMTokenList</code>.</dd> - <dt>{{domxref("DOMTokenList.keys()")}}</dt> - <dd>renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des clés contenues dans cet objet.</dd> - <dt>{{domxref("DOMTokenList.values()")}}</dt> - <dd>renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des valeurs contenues dans cet objet.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<p>Dans l'exemple suivant, nous récupérons la liste d'un ensemble de classes définies sur un élément {{htmlelement("p")}} en tant que <code>DOMTokenList</code> en<code> </code>utilisant {{domxref("Element.classList")}}, ajoutons une classe en utilisant {{domxref("DOMTokenList.add()")}}, puis mettons à jour le {{domxref("Node.textContent")}} du <code><p></code> pour qu'il soit égal à la <code>DOMTokenList</code>.</p> - -<p>D'abord HTML :</p> - -<pre class="brush: html"><p class="a b c"></p></pre> - -<p>Puis Javascript :</p> - -<pre class="brush: js">var para = document.querySelector("p"); +{{APIRef("DOM")}} + +L'interface **`DOMTokenList`** représente un ensemble de "token" (_marques_) séparées par un espace. On obtient un tel ensemble grâce aux propriétés {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}} ou {{domxref("HTMLAreaElement.relList")}}. Les positions de cette liste sont numérotées à partir de 0.` DOMTokenList` est toujours sensible à la casse. + +## Propriétés + +- {{domxref("DOMTokenList.length")}} {{ReadOnlyInline}} + - : Un entier qui représente le nombre d'objets qui sont stockés dans l'objet. +- {{domxref("DOMTokenList.value")}} {{ReadOnlyInline}} + - : retourne la valeur de la liste comme une {{domxref("DOMString")}} _(chaîne de caractères)._ + +## Méthodes + +- {{domxref("DOMTokenList.item()")}} + - : renvoie un élément de la liste à partir de son index (ou {{jsxref("undefined")}} lorsque le nombre passé est supérieur ou égal à la longueur de la liste). +- {{domxref("DOMTokenList.contains()")}} + - : renvoie `true` _(vrai)_ si la chaîne de caractères contient la marque _(token)_ passée en argument, `false` _(faux)_ sinon. +- {{domxref("DOMTokenList.add()")}} + - : ajoute une marque à la chaîne sous-jacente. +- {{domxref("DOMTokenList.remove()")}} + - : retire une marque de la chaîne sous-jacente. +- {{domxref("DOMTokenList.replace()")}} + - : remplace une marque existant par une nouvelle. +- {{domxref("DOMTokenList.supports()")}} + - : renvoie `true` _(vrai)_ si une marque passée en argument appartient bien aux marques prises en charge pour l'attribut correspondant. +- {{domxref("DOMTokenList.toggle()")}} + - : retire une marque de la chaîne de caractères sous-jacente et renvoie `false`. Si la marque n'existe pas, elle est ajoutée et la méthode renvoie `true`. +- {{domxref("DOMTokenList.entries()")}} + - : renvoie un {{jsxref("Iteration_protocols","itérateur","",1)}} qui permet de parcourir l'ensemble des clés/valeurs contenues dans cet objet. +- {{domxref("DOMTokenList.forEach()")}} + - : exécute une fonction pour chaque élément de la `DOMTokenList`. +- {{domxref("DOMTokenList.keys()")}} + - : renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des clés contenues dans cet objet. +- {{domxref("DOMTokenList.values()")}} + - : renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des valeurs contenues dans cet objet. + +## Exemples + +Dans l'exemple suivant, nous récupérons la liste d'un ensemble de classes définies sur un élément {{htmlelement("p")}} en tant que `DOMTokenList` en` `utilisant {{domxref("Element.classList")}}, ajoutons une classe en utilisant {{domxref("DOMTokenList.add()")}}, puis mettons à jour le {{domxref("Node.textContent")}} du `<p>` pour qu'il soit égal à la `DOMTokenList`. + +D'abord HTML : + +```html +<p class="a b c"></p> +``` + +Puis Javascript : + +```js +var para = document.querySelector("p"); var classes = para.classList; para.classList.add("d"); -para.textContent = 'paragraph classList is "' + classes + '"';</pre> +para.textContent = 'paragraph classList is "' + classes + '"'; +``` -<p>La sortie ressemble à ceci :</p> +La sortie ressemble à ceci : -<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> +{{ EmbedLiveSample('Examples', '100%', 60) }} -<h2 id="Découpage_des_espaces_et_suppression_des_doublons">Découpage des espaces et suppression des doublons</h2> +## Découpage des espaces et suppression des doublons -<p>Les méthodes qui modifient la <code>DOMTokenList</code> (comme {{domxref("DOMTokenList.add()")}}) suppriment automatiquement les espaces en excès et les valeurs en double de la liste. Par exemple :</p> +Les méthodes qui modifient la `DOMTokenList` (comme {{domxref("DOMTokenList.add()")}}) suppriment automatiquement les espaces en excès et les valeurs en double de la liste. Par exemple : -<pre class="brush: html"><span class=" d d e f"></span></pre> +```html +<span class=" d d e f"></span> +``` -<pre class="brush: js">var span = document.querySelector("span"); +```js +var span = document.querySelector("span"); var classes = span.classList; span.classList.add("x"); -span.textContent = 'span classList is "' + classes + '"';</pre> +span.textContent = 'span classList is "' + classes + '"'; +``` -<p>La sortie ressemble à ceci :</p> +La sortie ressemble à ceci : -<p>{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}</p> +{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}} | {{Spec2("DOM WHATWG")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.DOMTokenList")}}</div> +{{Compat("api.DOMTokenList")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("DOMSettableTokenList")}} : un objet qui étend <code>DOMTokenList</code> avec une propriété <em>.value</em> modifiable</li> -</ul> +- {{domxref("DOMSettableTokenList")}} : un objet qui étend `DOMTokenList` avec une propriété _.value_ modifiable diff --git a/files/fr/web/api/domtokenlist/item/index.md b/files/fr/web/api/domtokenlist/item/index.md index c3f6c7dc17..c1d22f88c5 100644 --- a/files/fr/web/api/domtokenlist/item/index.md +++ b/files/fr/web/api/domtokenlist/item/index.md @@ -9,61 +9,52 @@ tags: - Méthodes translation_of: Web/API/DOMTokenList/item --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode <code><strong>item()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un élément de la liste par son index.</p> +La méthode **`item()`** de l'interface {{domxref("DOMTokenList")}} renvoie un élément de la liste par son index. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">tokenList.item(index);</pre> + tokenList.item(index); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>index</dt> - <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant l'index de l'élément dont on veut le retour.</dd> -</dl> +- index + - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant l'index de l'élément dont on veut le retour. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant l'élément renvoyé. Le retour est <code>undefined</code> (<em>indéfini</em>) si le nombre est plus grand que ou égal à la longueur de la liste.</p> +Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant l'élément renvoyé. Le retour est `undefined` (_indéfini_) si le nombre est plus grand que ou égal à la longueur de la liste. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons le dernier élément dans la liste en utilisant <em>item(length-1)</em> et l'écrivons dans le {{domxref("Node.textContent")}} du <code><span></code>.</p> +Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons le dernier élément dans la liste en utilisant _item(length-1)_ et l'écrivons dans le {{domxref("Node.textContent")}} du `<span>`. -<p>D'abord le code HTML :</p> +D'abord le code HTML : -<pre class="brush: html"><span class="a b c"></span></pre> +```html +<span class="a b c"></span> +``` -<p>Maintenant le JavaScript :</p> +Maintenant le JavaScript : -<pre class="brush: js">var span = document.querySelector("span"); +```js +var span = document.querySelector("span"); var classes = span.classList; var item = classes.item(classes.length-1); -span.textContent = item;</pre> +span.textContent = item; +``` -<p>La sortie ressemble à ceci :</p> +La sortie ressemble à ceci : -<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> +{{ EmbedLiveSample('Examples', '100%', 60) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-item','item()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG','#dom-domtokenlist-item','item()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.DOMTokenList.item")}}</div>
\ No newline at end of file +{{Compat("api.DOMTokenList.item")}} diff --git a/files/fr/web/api/domtokenlist/keys/index.md b/files/fr/web/api/domtokenlist/keys/index.md index b707fae355..f5408bd2c6 100644 --- a/files/fr/web/api/domtokenlist/keys/index.md +++ b/files/fr/web/api/domtokenlist/keys/index.md @@ -12,61 +12,54 @@ tags: - for of translation_of: Web/API/DOMTokenList/keys --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode <code><strong>keys()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont de type <code>unsigned integer</code> <em>(entier non signé)</em>.</p> +La méthode **`keys()`** de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont de type `unsigned integer` _(entier non signé)_. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">tokenList.keys();</pre> + tokenList.keys(); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<p>Aucun.</p> +Aucun. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p> +Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Ensuite nous récupérons un itérateur contenant les clés en utilisant <code>values()</code>, alors, nous itérons ces clés avec une boucle <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for ... of</a> et écrivons chacune dans le {{domxref("Node.textContent")}} du <code><span></code>.</p> +Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Ensuite nous récupérons un itérateur contenant les clés en utilisant `values()`, alors, nous itérons ces clés avec une boucle [for ... of](/en-US/docs/Web/JavaScript/Reference/Statements/for...of) et écrivons chacune dans le {{domxref("Node.textContent")}} du `<span>`. -<p>D'abord, le HTML :</p> +D'abord, le HTML : -<pre class="brush: html"><span class="a b c"></span></pre> +```html +<span class="a b c"></span> +``` -<p>Maintenant le JavaScript:</p> +Maintenant le JavaScript: -<pre class="brush: js">var span = document.querySelector("span"); +```js +var span = document.querySelector("span"); var classes = span.classList; var iterator = classes.keys(); for(var value of iterator) { span.textContent += value + ' ++ '; -}</pre> +} +``` -<p>La sortie ressemble à ceci :</p> +La sortie ressemble à ceci : -<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> +{{ EmbedLiveSample('Examples', '100%', 60) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#interface-domtokenList','keys() (as iterable<Node>)')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG','#interface-domtokenList','keys() (as iterable<Node>)')}} | {{Spec2('DOM WHATWG')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.DOMTokenList.keys")}}</div>
\ No newline at end of file +{{Compat("api.DOMTokenList.keys")}} diff --git a/files/fr/web/api/domtokenlist/length/index.md b/files/fr/web/api/domtokenlist/length/index.md index 1e21b1727f..877b240632 100644 --- a/files/fr/web/api/domtokenlist/length/index.md +++ b/files/fr/web/api/domtokenlist/length/index.md @@ -9,56 +9,48 @@ tags: - Propriétés translation_of: Web/API/DOMTokenList/length --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La propriété en lecture seule <code><strong>length</strong></code> (<em>longueur</em>) de l'interface {{domxref("DOMTokenList")}} est un <code>integer</code> (<em>entier</em>) représentant le nombre d'objets stockés dans la liste.</p> +La propriété en lecture seule **`length`** (_longueur_) de l'interface {{domxref("DOMTokenList")}} est un `integer` (_entier_) représentant le nombre d'objets stockés dans la liste. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">tokenList.length;</pre> + tokenList.length; -<h3 id="Value">Value</h3> +### Value -<p>Un <code>integer</code> (<em>entier</em>).</p> +Un `integer` (_entier_). -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}, puis écrivons la longueur (<em>length</em>) de la liste dans le {{domxref("Node.textContent")}} du <code><span></code>.</p> +Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}, puis écrivons la longueur (_length_) de la liste dans le {{domxref("Node.textContent")}} du `<span>`. -<p>D'abord le HTML:</p> +D'abord le HTML: -<pre class="brush: html"><span class="a b c"></span></pre> +```html +<span class="a b c"></span> +``` -<p>Maintenant le JavaScript:</p> +Maintenant le JavaScript: -<pre class="brush: js">var span = document.querySelector("span"); +```js +var span = document.querySelector("span"); var classes = span.classList; var length = classes.length; span.textContent = 'classList length = ' + length; -</pre> +``` -<p>La sortie ressemble à ceci :</p> +La sortie ressemble à ceci : -<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> +{{ EmbedLiveSample('Examples', '100%', 60) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-length','length')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG','#dom-domtokenlist-length','length')}} | {{Spec2('DOM WHATWG')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.DOMTokenList.length")}}</div>
\ No newline at end of file +{{Compat("api.DOMTokenList.length")}} diff --git a/files/fr/web/api/domtokenlist/remove/index.md b/files/fr/web/api/domtokenlist/remove/index.md index b68c42de55..98f8ccbe34 100644 --- a/files/fr/web/api/domtokenlist/remove/index.md +++ b/files/fr/web/api/domtokenlist/remove/index.md @@ -9,71 +9,62 @@ tags: - Suppression translation_of: Web/API/DOMTokenList/remove --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode <code><strong>remove()</strong></code> de l'interface {{domxref("DOMTokenList")}} supprime sur la liste la marque (<em>token)</em> spécifiée.</p> +La méthode **`remove()`** de l'interface {{domxref("DOMTokenList")}} supprime sur la liste la marque (_token)_ spécifiée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">tokenList.remove(token1[, token2[, ...]]);</pre> + tokenList.remove(token1[, token2[, ...]]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>tokenN...</dt> - <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que vous voulez supprimer sur la liste. Si la chaîne de caractères n'existe pas sur la liste, aucune erreur n'est levée et rien ne se passe.</dd> -</dl> +- tokenN... + - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la marque que vous voulez supprimer sur la liste. Si la chaîne de caractères n'existe pas sur la liste, aucune erreur n'est levée et rien ne se passe. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Vide.</p> +Vide. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans l'élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous retirons ensuite une marque sur la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code><span></code>.</p> +Dans l'exemple suivant, nous récupérons la liste des classes définies dans l'élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous retirons ensuite une marque sur la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du `<span>`. -<p>D'abord, le HTML :</p> +D'abord, le HTML : -<pre class="brush: html"><span class="a b c"></span></pre> +```html +<span class="a b c"></span> +``` -<p>Maintenant le JavaScript :</p> +Maintenant le JavaScript : -<pre class="brush: js">var span = document.querySelector("span"); +```js +var span = document.querySelector("span"); var classes = span.classList; classes.remove("c"); span.textContent = classes; -</pre> +``` -<p>La sortie ressemble à ceci :</p> +La sortie ressemble à ceci : -<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> +{{ EmbedLiveSample('Examples', '100%', 60) }} -<p>Pour supprimer plusieurs classes à la fois, vous pouvez utiliser un tableau (<em>array</em>) avec la <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">syntaxe de décomposition</a>. L'ordre des classes n'a pas d'importance :</p> +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 : -<pre class="brush: js">let span = document.getElementsByTagName("span")[0], +```js +let span = document.getElementsByTagName("span")[0], classes = span.classList; classes.remove(...['c', 'b']); span.textContent = classes; -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-remove','remove()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div>{{Compat("api.DOMTokenList.remove")}}</div>
\ No newline at end of file +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG','#dom-domtokenlist-remove','remove()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.DOMTokenList.remove")}} diff --git a/files/fr/web/api/domtokenlist/replace/index.md b/files/fr/web/api/domtokenlist/replace/index.md index e3c1d8d799..a352208494 100644 --- a/files/fr/web/api/domtokenlist/replace/index.md +++ b/files/fr/web/api/domtokenlist/replace/index.md @@ -9,38 +9,39 @@ tags: - Remplacement translation_of: Web/API/DOMTokenList/replace --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode <code><strong>replace()</strong></code> de l'interface {{domxref("DOMTokenList")}} remplace une marque <em>(token)</em> existante par une nouvelle marque.</p> +La méthode **`replace()`** de l'interface {{domxref("DOMTokenList")}} remplace une marque _(token)_ existante par une nouvelle marque. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">tokenList.replace(oldToken,newToken);</pre> + tokenList.replace(oldToken,newToken); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>oldToken</dt> - <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que vous voulez remplacer.</dd> - <dt>newToken</dt> - <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque avec laquelle vous voulez remplacer l'ancienne.</dd> -</dl> +- oldToken + - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la marque que vous voulez remplacer. +- newToken + - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la marque avec laquelle vous voulez remplacer l'ancienne. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Vide.</p> +Vide. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors la marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code><span></code>.</p> +Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors la marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du `<span>`. -<p>D'abord, le HTML :</p> +D'abord, le HTML : -<pre class="brush: html"><span class="a b c"></span></pre> +```html +<span class="a b c"></span> +``` -<p>Maintenant le JavaScript :</p> +Maintenant le JavaScript : -<pre class="brush: js">var span = document.querySelector("span"); +```js +var span = document.querySelector("span"); var classes = span.classList; try { classes.replace("c", "z"); @@ -48,29 +49,18 @@ try { } catch(e) { span.textContent = e; } -</pre> +``` -<p>La sortie ressemble à ceci :</p> +La sortie ressemble à ceci : -<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> +{{ EmbedLiveSample('Examples', '100%', 60) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-replace','replace()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG','#dom-domtokenlist-replace','replace()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.DOMTokenList.replace")}}</div>
\ No newline at end of file +{{Compat("api.DOMTokenList.replace")}} diff --git a/files/fr/web/api/domtokenlist/supports/index.md b/files/fr/web/api/domtokenlist/supports/index.md index b9fb5ea4cf..8fdc4d6e12 100644 --- a/files/fr/web/api/domtokenlist/supports/index.md +++ b/files/fr/web/api/domtokenlist/supports/index.md @@ -7,28 +7,27 @@ tags: - Méthodes translation_of: Web/API/DOMTokenList/supports --- -<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p> +{{APIRef("DOM")}}{{SeeCompatTable}} -<p>La méthode <strong><code>supports()</code></strong> de l'interface {{domxref("DOMTokenList")}} renvoie <code>true</code> (<em>vrai</em>) si une marque (<em>token)</em> donnée se trouve parmi les marques prises en charge dans l'attribut associé. Cette méthode est destinée à la détection des fonctionnalités.</p> +La méthode **`supports()`** de l'interface {{domxref("DOMTokenList")}} renvoie `true` (_vrai_) si une marque (_token)_ donnée se trouve parmi les marques prises en charge dans l'attribut associé. Cette méthode est destinée à la détection des fonctionnalités. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>boolean</em> = element.supports(<em>token</em>)</pre> + var boolean = element.supports(token) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><em><code>token</code></em></dt> - <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant la marque à interroger.</dd> -</dl> +- _`token`_ + - : Une {{domxref("DOMString")}} (_chaîne de caractères_) contenant la marque à interroger. -<h3 id="Renvoie">Renvoie</h3> +### Renvoie -<p>un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si la marque a été trouvée.</p> +un {{jsxref("Boolean")}} (_booléen_) indiquant si la marque a été trouvée. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js"><code>var iframe = document.getElementById('display'); +```js +var iframe = document.getElementById('display'); if (iframe.sandbox.supports('an-upcoming-feature')) { // code de support pour la future et mystérieuse fonctionnalité } else { @@ -38,25 +37,15 @@ if (iframe.sandbox.supports('an-upcoming-feature')) { if (iframe.sandbox.supports('allow-scripts')) { // instruction cadre de l'exécution de JavaScript // NOTE: ceci fonctionne bien mais est juste un exemple! -}</code></pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Credential Management')}}</td> - <td>{{Spec2('Credential Management')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div>{{Compat("api.DOMTokenList.supports")}}</div>
\ No newline at end of file +} +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------ | -------------------------------------------- | -------------------- | +| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.DOMTokenList.supports")}} diff --git a/files/fr/web/api/domtokenlist/toggle/index.md b/files/fr/web/api/domtokenlist/toggle/index.md index ef036a01e7..ffc75cd1b8 100644 --- a/files/fr/web/api/domtokenlist/toggle/index.md +++ b/files/fr/web/api/domtokenlist/toggle/index.md @@ -9,38 +9,39 @@ tags: - Méthodes translation_of: Web/API/DOMTokenList/toggle --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode <code><strong>toggle()</strong></code> (<em>bascule</em>) de l'interface {{domxref("DOMTokenList")}} supprime une marque (<em>token)</em> donnée de la liste et renvoie <code>false</code> (<em>faux</em>). Si <em>token</em> n'existe pas, il est ajouté et la fonction renvoie <code>true</code>.</p> +La méthode **`toggle()`** (_bascule_) de l'interface {{domxref("DOMTokenList")}} supprime une marque (_token)_ donnée de la liste et renvoie `false` (_faux_). Si _token_ n'existe pas, il est ajouté et la fonction renvoie `true`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">tokenList.toggle(token, force);</pre> + tokenList.toggle(token, force); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>token</dt> - <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que l'on veut activer.</dd> - <dt>force {{optional_inline}}</dt> - <dd>Un {{domxref("Boolean")}} (<em>booléen</em>) qui, si inclus, transforme la bascule (toggle) en opération unique. Si elle est définie <code>false</code> (<em>faux</em>), la marque sera seulement supprimée et aucun ajout ne suivra. Si elle est définie <code>true</code> (<em>vrai</em>), la marque sera seulement ajoutée et pas supprimée après.</dd> -</dl> +- token + - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la marque que l'on veut activer. +- force {{optional_inline}} + - : Un {{domxref("Boolean")}} (_booléen_) qui, si inclus, transforme la bascule (toggle) en opération unique. Si elle est définie `false` (_faux_), la marque sera seulement supprimée et aucun ajout ne suivra. Si elle est définie `true` (_vrai_), la marque sera seulement ajoutée et pas supprimée après. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Un {{domxref("Boolean")}} (<em>booléen</em>) — <code>false</code> (<em>faux</em>) si la marque n'est pas dans la liste après l'appel ou <code>true</code> (<em>vrai</em>) si elle y est.</p> +Un {{domxref("Boolean")}} (_booléen_) — `false` (_faux_) si la marque n'est pas dans la liste après l'appel ou `true` (_vrai_) si elle y est. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors une marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code><span></code>.</p> +Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors une marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du `<span>`. -<p>D'abord, le HTML :</p> +D'abord, le HTML : -<pre class="brush: html"><span class="a b">classList is 'a b'</span></pre> +```html +<span class="a b">classList is 'a b'</span> +``` -<p>Maintenant le JavaScript :</p> +Maintenant le JavaScript : -<pre class="brush: js">var span = document.querySelector("span"); +```js +var span = document.querySelector("span"); var classes = span.classList; span.onclick = function() { var result = classes.toggle("c"); @@ -50,29 +51,18 @@ span.onclick = function() { span.textContent = "'c' removed; classList is now '" + classes + "'."; } } -</pre> +``` -<p>La sortie ressemble à ceci :</p> +La sortie ressemble à ceci : -<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> +{{ EmbedLiveSample('Examples', '100%', 60) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-toggle','toggle()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG','#dom-domtokenlist-toggle','toggle()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.DOMTokenList.toggle")}}</div>
\ No newline at end of file +{{Compat("api.DOMTokenList.toggle")}} diff --git a/files/fr/web/api/domtokenlist/value/index.md b/files/fr/web/api/domtokenlist/value/index.md index da23f74aaf..675415f3fc 100644 --- a/files/fr/web/api/domtokenlist/value/index.md +++ b/files/fr/web/api/domtokenlist/value/index.md @@ -8,54 +8,46 @@ tags: - Valeur translation_of: Web/API/DOMTokenList/value --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La propriété <code><strong>value</strong></code> (<em>valeur</em>) de l'interface {{domxref("DOMTokenList")}} renvoie la valeur de la liste en tant que {{domxref("DOMString")}} (chaîne de caractères), ou efface et définit la liste à la valeur donnée.</p> +La propriété **`value`** (_valeur_) de l'interface {{domxref("DOMTokenList")}} renvoie la valeur de la liste en tant que {{domxref("DOMString")}} (chaîne de caractères), ou efface et définit la liste à la valeur donnée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">tokenList.value;</pre> + tokenList.value; -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</p> +Une {{domxref("DOMString")}} (_chaîne de caractères_). -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}, puis écrivons alors la valeur de la liste dans le {{domxref("Node.textContent")}} du <code><span></code>.</p> +Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}, puis écrivons alors la valeur de la liste dans le {{domxref("Node.textContent")}} du `<span>`. -<p>D'abord le HTML :</p> +D'abord le HTML : -<pre class="brush: html"><span class="a b c"></span></pre> +```html +<span class="a b c"></span> +``` -<p>Maintenant le JavaScript :</p> +Maintenant le JavaScript : -<pre class="brush: js">var span = document.querySelector("span"); +```js +var span = document.querySelector("span"); var classes = span.classList; span.textContent = classes.value; -</pre> +``` -<p>La sortie ressemble à ceci :</p> +La sortie ressemble à ceci : -<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> +{{ EmbedLiveSample('Examples', '100%', 60) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-value','value')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG','#dom-domtokenlist-value','value')}} | {{Spec2('DOM WHATWG')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.DOMTokenList.value")}}</div>
\ No newline at end of file +{{Compat("api.DOMTokenList.value")}} diff --git a/files/fr/web/api/domtokenlist/values/index.md b/files/fr/web/api/domtokenlist/values/index.md index 294f75dd1c..43db920fe6 100644 --- a/files/fr/web/api/domtokenlist/values/index.md +++ b/files/fr/web/api/domtokenlist/values/index.md @@ -10,61 +10,54 @@ tags: - Valeurs translation_of: Web/API/DOMTokenList/values --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode <code><strong>values()</strong></code> (<em>valeurs</em>) de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant aux développeurs de passer en revue toutes les valeurs contenues dans la <code>DOMTokenList</code>. Individuellement, les valeurs sont des objets {{domxref("DOMString")}} (<em>chaînes de caractères</em>).</p> +La méthode **`values()`** (_valeurs_) de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant aux développeurs de passer en revue toutes les valeurs contenues dans la `DOMTokenList`. Individuellement, les valeurs sont des objets {{domxref("DOMString")}} (_chaînes de caractères_). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">tokenList.values();</pre> + tokenList.values(); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<p>Aucun.</p> +Aucun. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p> +Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Si nous récupérons un itérateur contenant les valeurs en utilisant <code>values()</code>, nous les itérons alors en utilisant une boucle <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for ... of</a> et écrivons chacune dans le {{domxref("Node.textContent")}} du <code><span></code>.</p> +Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Si nous récupérons un itérateur contenant les valeurs en utilisant `values()`, nous les itérons alors en utilisant une boucle [for ... of](/en-US/docs/Web/JavaScript/Reference/Statements/for...of) et écrivons chacune dans le {{domxref("Node.textContent")}} du `<span>`. -<p>D'abord, le HTML :</p> +D'abord, le HTML : -<pre class="brush: html"><span class="a b c"></span></pre> +```html +<span class="a b c"></span> +``` -<p>Maintenant le JavaScript :</p> +Maintenant le JavaScript : -<pre class="brush: js">var span = document.querySelector("span"); +```js +var span = document.querySelector("span"); var classes = span.classList; var iterator = classes.values(); for(var value of iterator) { span.textContent += value + ' ++ '; -}</pre> +} +``` -<p>La sortie ressemble à ceci :</p> +La sortie ressemble à ceci : -<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> +{{ EmbedLiveSample('Examples', '100%', 60) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#interface-domtokenList','values() (as iterable<Node>)')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG','#interface-domtokenList','values() (as iterable<Node>)')}} | {{Spec2('DOM WHATWG')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.DOMTokenList.values")}}</div>
\ No newline at end of file +{{Compat("api.DOMTokenList.values")}} diff --git a/files/fr/web/api/effecttiming/delay/index.md b/files/fr/web/api/effecttiming/delay/index.md index 82ec0c5c0c..c8480f04d4 100644 --- a/files/fr/web/api/effecttiming/delay/index.md +++ b/files/fr/web/api/effecttiming/delay/index.md @@ -11,32 +11,30 @@ tags: translation_of: Web/API/EffectTiming/delay original_slug: Web/API/AnimationEffectTimingProperties/delay --- -<div>{{SeeCompatTable}}{{APIRef("Web Animations")}}</div> +{{SeeCompatTable}}{{APIRef("Web Animations")}} -<p>La propriété <strong><code>delay</code></strong> est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation.</p> +La propriété **`delay`** est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation. -<div class="note"> -<p><strong>Note :</strong> {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris <code>delay</code>. La valeur de <code>delay</code> correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}.</p> -</div> +> **Note :** {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris `delay`. La valeur de `delay` correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>timingProperties</em> = { - delay: <em>delayInMilliseconds</em> -}; + var timingProperties = { + delay: delayInMilliseconds + }; -<em>timingProperties</em>.delay = <em>delayInMilliseconds</em>; -</pre> + timingProperties.delay = delayInMilliseconds; -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un nombre qui indique la durée qui doit s'écouler entre le début du cycle de l'animation et le début de l'intervalle d'activité (c'est-à-dire le moment où l'animation commence réellement). La valeur par défaut est 0.</p> +Un nombre qui indique la durée qui doit s'écouler entre le début du cycle de l'animation et le début de l'intervalle d'activité (c'est-à-dire le moment où l'animation commence réellement). La valeur par défaut est 0. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple <em><a href="https://codepen.io/rachelnabors/pen/EPJdJx?editors=0010">Pool of Tears</a></em>, chaque larme commence à un instant aléatoire grâce à l'objet de minutage :</p> +Dans l'exemple _[Pool of Tears](https://codepen.io/rachelnabors/pen/EPJdJx?editors=0010)_, chaque larme commence à un instant aléatoire grâce à l'objet de minutage : -<pre class="brush: js">// Générateur de valeurs plus +```js +// Générateur de valeurs plus // ou moins aléatoires var getRandomMsRange = function(min, max) { return Math.random() * (max - min) + min; @@ -54,34 +52,22 @@ tears.forEach(function(el) { iterations: Infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); -});</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('Web Animations', '#start-delay', 'delay')}}</td> - <td>{{Spec2('Web Animations')}}</td> - <td>Brouillon d'édiiton.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.EffectTiming.delay")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Web_Animations_API">L'API Web Animations</a></li> - <li>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} qui acceptent toutes un objet de minutage, y compris celui-ci (<code>delay</code>)</li> - <li>La valeur de cette propriété correspond à celle de {{domxref("AnimationEffectTimingReadOnly")}} (qui est l'objet de minutage {{domxref("AnimationEffectReadOnly.timing", "timing")}} pour {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}).</li> - <li>Les propriétés CSS {{cssxref("transition-delay")}} et {{cssxref("animation-delay")}}</li> -</ul> +}); +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Web Animations', '#start-delay', 'delay')}} | {{Spec2('Web Animations')}} | Brouillon d'édiiton. | + +## Compatibilité des navigateurs + +{{Compat("api.EffectTiming.delay")}} + +## Voir aussi + +- [L'API Web Animations](/fr/docs/Web/API/Web_Animations_API) +- {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} qui acceptent toutes un objet de minutage, y compris celui-ci (`delay`) +- La valeur de cette propriété correspond à celle de {{domxref("AnimationEffectTimingReadOnly")}} (qui est l'objet de minutage {{domxref("AnimationEffectReadOnly.timing", "timing")}} pour {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}). +- Les propriétés CSS {{cssxref("transition-delay")}} et {{cssxref("animation-delay")}} diff --git a/files/fr/web/api/effecttiming/index.md b/files/fr/web/api/effecttiming/index.md index 3cbcad981f..a92f204fb7 100644 --- a/files/fr/web/api/effecttiming/index.md +++ b/files/fr/web/api/effecttiming/index.md @@ -12,60 +12,45 @@ tags: translation_of: Web/API/EffectTiming original_slug: Web/API/AnimationEffectTimingProperties --- -<div>{{SeeCompatTable}}{{APIRef("Web Animations")}}</div> +{{SeeCompatTable}}{{APIRef("Web Animations")}} -<p>Le dictionnaire <strong><code>AnimationEffectTimingProperties</code></strong> est utilisé par les méthodes {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} afin de décrire les propriétés temporelles pour les effets d'animation. L'ensemble de ces propriétés sont optionnelles mais si <code>duration</code> n'est pas paramétrée, l'animation ne sera pas lancée.</p> +Le dictionnaire **`AnimationEffectTimingProperties`** est utilisé par les méthodes {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} afin de décrire les propriétés temporelles pour les effets d'animation. L'ensemble de ces propriétés sont optionnelles mais si `duration` n'est pas paramétrée, l'animation ne sera pas lancée. -<p>Ces propriétés décrivent la façon dont l'agent utilisateur applique l'animation entre chaque étape (<em>keyframe</em>) et comment elle se comporte au début et à la fin.</p> +Ces propriétés décrivent la façon dont l'agent utilisateur applique l'animation entre chaque étape (_keyframe_) et comment elle se comporte au début et à la fin. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt>{{domxref("AnimationEffectTimingProperties.delay", "delay")}} {{optional_inline}}</dt> - <dd>Le nombre de millisecondes à attendre avant de démarrer l'animation. La valeur par défaut est 0.</dd> - <dt>{{domxref("AnimationEffectTimingProperties.direction", "direction")}} {{optional_inline}}</dt> - <dd>Indique si l'animation se déroule dans le sens the animation runs forwards (<code>normal</code>), backwards (<code>reverse</code>), switches direction after each iteration (<code>alternate</code>), or runs backwards and switches direction after each iteration (<code>alternate-reverse</code>). Defaults to <code>"normal"</code>.</dd> - <dt>{{domxref("AnimationEffectTimingProperties.duration", "duration")}} {{optional_inline}}</dt> - <dd>La durée d'une itération, exprimée en millisecondes. La valeur par défaut est 0. Bien que cette propriété soit optionnelle, il faut garder à l'esprit que l'animation ne sera pas lancée si la valeur est 0.</dd> - <dt>{{domxref("AnimationEffectTimingProperties.easing", "easing")}} {{optional_inline}}</dt> - <dd>La courbe de progression de l'animation au cours du temps. Cette propriété accepte des valeurs pré-paramétrées comme <code>"linear"</code>, <code>"ease"</code>, <code>"ease-in"</code>, <code>"ease-out"</code> et <code>"ease-in-out"</code> ou une fonction <code>"cubic-bezier"</code> de la forme <code>"cubic-bezier(0.42, 0, 0.58, 1)"</code>. La valeur par défaut est <code>"linear"</code>.</dd> - <dt>{{domxref("AnimationEffectTimingProperties.endDelay", "endDelay")}} {{optional_inline}}</dt> - <dd>Le nombre de millisecondes à attendre après la fin de l'animation. Cette propriété est principalement utilisée lorsqu'on enchaîne une animation à la suite d'une autre. La valeur par défaut est 0.</dd> - <dt>{{domxref("AnimationEffectTimingProperties.fill", "fill")}} {{optional_inline}}</dt> - <dd>Indique si les effets de l'animation doivent s'appliqués sur l'élément avant d'être lancée (<code>"backwards"</code>), être conservés après la fin de l'animation (<code>"forwards"</code>) ou les deux <code>both</code>. La valeur par défaut est <code>"none"</code>.</dd> - <dt>{{domxref("AnimationEffectTimingProperties.iterationStart", "iterationStart")}} {{optional_inline}}</dt> - <dd>Décrit le point de départ de l'animation par rapport à une itération. Une valeur de 0.5 indique que l'animation démarre au milieu de la première animation (dans ce cas, après deux itérations, l'animation sera arrivée à la moitié de la troisième itération). La valeur par défaut est 0.0.</dd> - <dt>{{domxref("AnimationEffectTimingProperties.iterations", "iterations")}} {{optional_inline}}</dt> - <dd>Le nombre de fois que l'animation doit être répétée. La valeur par défaut est 1. Il est possible d'utiliser la valeur {{jsxref("Infinity")}} pour répéter l'animation aussi longtemps que l'élément existe.</dd> -</dl> +- {{domxref("AnimationEffectTimingProperties.delay", "delay")}} {{optional_inline}} + - : Le nombre de millisecondes à attendre avant de démarrer l'animation. La valeur par défaut est 0. +- {{domxref("AnimationEffectTimingProperties.direction", "direction")}} {{optional_inline}} + - : Indique si l'animation se déroule dans le sens the animation runs forwards (`normal`), backwards (`reverse`), switches direction after each iteration (`alternate`), or runs backwards and switches direction after each iteration (`alternate-reverse`). Defaults to `"normal"`. +- {{domxref("AnimationEffectTimingProperties.duration", "duration")}} {{optional_inline}} + - : La durée d'une itération, exprimée en millisecondes. La valeur par défaut est 0. Bien que cette propriété soit optionnelle, il faut garder à l'esprit que l'animation ne sera pas lancée si la valeur est 0. +- {{domxref("AnimationEffectTimingProperties.easing", "easing")}} {{optional_inline}} + - : La courbe de progression de l'animation au cours du temps. Cette propriété accepte des valeurs pré-paramétrées comme `"linear"`, `"ease"`, `"ease-in"`, `"ease-out"` et `"ease-in-out"` ou une fonction `"cubic-bezier"` de la forme `"cubic-bezier(0.42, 0, 0.58, 1)"`. La valeur par défaut est `"linear"`. +- {{domxref("AnimationEffectTimingProperties.endDelay", "endDelay")}} {{optional_inline}} + - : Le nombre de millisecondes à attendre après la fin de l'animation. Cette propriété est principalement utilisée lorsqu'on enchaîne une animation à la suite d'une autre. La valeur par défaut est 0. +- {{domxref("AnimationEffectTimingProperties.fill", "fill")}} {{optional_inline}} + - : Indique si les effets de l'animation doivent s'appliqués sur l'élément avant d'être lancée (`"backwards"`), être conservés après la fin de l'animation (`"forwards"`) ou les deux `both`. La valeur par défaut est `"none"`. +- {{domxref("AnimationEffectTimingProperties.iterationStart", "iterationStart")}} {{optional_inline}} + - : Décrit le point de départ de l'animation par rapport à une itération. Une valeur de 0.5 indique que l'animation démarre au milieu de la première animation (dans ce cas, après deux itérations, l'animation sera arrivée à la moitié de la troisième itération). La valeur par défaut est 0.0. +- {{domxref("AnimationEffectTimingProperties.iterations", "iterations")}} {{optional_inline}} + - : Le nombre de fois que l'animation doit être répétée. La valeur par défaut est 1. Il est possible d'utiliser la valeur {{jsxref("Infinity")}} pour répéter l'animation aussi longtemps que l'élément existe. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('Web Animations', '#the-animationeffecttimingproperties-dictionary', 'AnimationEffectTimingProperties' )}}</td> - <td>{{Spec2('Web Animations')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Web Animations', '#the-animationeffecttimingproperties-dictionary', 'AnimationEffectTimingProperties' )}} | {{Spec2('Web Animations')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.EffectTiming")}}</p> +{{Compat("api.EffectTiming")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Web_Animations_API">L'API Web Animations</a></li> - <li><a href="/fr/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Utiliser l'API Web Animations</a></li> - <li>{{domxref("Element.animate()")}}</li> - <li>{{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}</li> - <li>{{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}</li> -</ul> +- [L'API Web Animations](/fr/docs/Web/API/Web_Animations_API) +- [Utiliser l'API Web Animations](/fr/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) +- {{domxref("Element.animate()")}} +- {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} +- {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} diff --git a/files/fr/web/api/element/animate/index.md b/files/fr/web/api/element/animate/index.md index acdf64b4b6..3dd6bd44b9 100644 --- a/files/fr/web/api/element/animate/index.md +++ b/files/fr/web/api/element/animate/index.md @@ -5,67 +5,62 @@ tags: - API translation_of: Web/API/Element/animate --- -<p>{{APIRef('Web Animations')}} {{SeeCompatTable}}</p> +{{APIRef('Web Animations')}} {{SeeCompatTable}} -<p>La méthode <strong><code>Element.animate()</code></strong> est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée.</p> +La méthode **`Element.animate()`** est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée. -<div class="note"> -<p><strong>Note :</strong> Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}.</p> -</div> +> **Note :** Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>); </pre> +```js +element.animate(keyframes, options); +``` -<h3 id="Paramèters">Paramèters</h3> +### Paramèters -<dl> - <dt><code>keyframes</code></dt> - <dd><p>Un <a href="/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">objet formatté représentant un ensemble de keyframes</a>.</p></dd> - <dt><code>options</code></dt> - <dd><p>Un nombre entier (<em>Integer</em>) <strong>représentant la durée de l'animation</strong> (en millisecondes), ou un objet (<em>Object</em>) <strong>contenant une ou plusieurs propriétés de timing</strong>:</p> - <dl> - <dt><code>id {{optional_inline}}</code></dt> - <dd>Une propriété unique pour <code>animate()</code>: une <a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> qui permet de référencer l'animation.</dd> - </dl> - </dd> -</dl> +- `keyframes` + - : Un [objet formatté représentant un ensemble de keyframes](/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats). +- `options` -<div>{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</div> + - : Un nombre entier (_Integer_) **représentant la durée de l'animation** (en millisecondes), ou un objet (_Object_) **contenant une ou plusieurs propriétés de timing**: -<h4 id="Options_à_venir">Options à venir</h4> + - `id {{optional_inline}}` + - : Une propriété unique pour `animate()`: une [`DOMString`](/en-US/docs/Web/API/DOMString) qui permet de référencer l'animation. -<p>Les options suivantes n'ont pas encore été implémentées, mais seront ajoutées dans un futur proche.</p> +{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}} -<dl> - <dt><code>composite {{optional_inline}}</code></dt> - <dd>Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est <code>replace</code>. - <ul> - <li><code>add</code> induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour <code>transform</code>, une valeur <code>translateX(-200px)</code> n'annulerait pas une précédente valeur <code>rotate(20deg)</code> mais s'y ajouterait, pour donner <code>translateX(-200px) rotate(20deg)</code>.</li> - <li><code>accumulate</code> est similaire mais un peu plus intéressant: <code>blur(2)</code> et <code>blur(5)</code> deviennent <code>blur(7) et non</code> <code>blur(2) blur(5)</code>.</li> - <li><code>replace</code>, quand à elle, remplace la précédente valeur par la nouvelle. </li> - </ul> - </dd> - <dt><code>iterationComposite {{optional_inline}}</code></dt> - <dd>Détermine comment les valeurs se construisent, d'itération en itération, <strong>dans une même animation</strong>. Peut être définie par <code>accumulate</code> ou <code>replace</code> (voir ci-dessus). La valeur par défaut est <code>replace</code>.</dd> - <dt><code>spacing {{optional_inline}}</code></dt> - <dd><p>Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est <code>distribute</code>.</p> - <ul> - <li><code>distribute</code> positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation.</li> - <li><code>paced</code> positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres.</li> - </ul> - </dd> -</dl> +#### Options à venir -<h3 id="Valeur_de_retour">Valeur de retour</h3> +Les options suivantes n'ont pas encore été implémentées, mais seront ajoutées dans un futur proche. -<p>Retourne un objet de type {{domxref("Animation")}}.</p> +- `composite {{optional_inline}}` -<h2 id="Exemple">Exemple</h2> + - : Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est `replace`. -<p>Dans la démo <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a>, la méthode <code>animate()</code> est utilisée pour immédiatement créer et jouer une animation sur l'élément <code>#tunnel,</code> pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation.</p> + - `add` induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour `transform`, une valeur `translateX(-200px)` n'annulerait pas une précédente valeur `rotate(20deg)` mais s'y ajouterait, pour donner `translateX(-200px) rotate(20deg)`. + - `accumulate` est similaire mais un peu plus intéressant: `blur(2)` et `blur(5)` deviennent `blur(7) et non` `blur(2) blur(5)`. + - `replace`, quand à elle, remplace la précédente valeur par la nouvelle. -<pre class="brush: js">document.getElementById("tunnel").animate([ +- `iterationComposite {{optional_inline}}` + - : Détermine comment les valeurs se construisent, d'itération en itération, **dans une même animation**. Peut être définie par `accumulate` ou `replace` (voir ci-dessus). La valeur par défaut est `replace`. +- `spacing {{optional_inline}}` + + - : Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est `distribute`. + + - `distribute` positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation. + - `paced` positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres. + +### Valeur de retour + +Retourne un objet de type {{domxref("Animation")}}. + +## Exemple + +Dans la démo [Down the Rabbit Hole (with the Web Animation API)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010), la méthode `animate()` est utilisée pour immédiatement créer et jouer une animation sur l'élément `#tunnel,` pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation. + +```js +document.getElementById("tunnel").animate([ // keyframes { transform: 'translateY(0px)' }, { transform: 'translateY(-300px)' } @@ -74,33 +69,20 @@ translation_of: Web/API/Element/animate duration: 1000, iterations: Infinity }); -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}</td> - <td>{{Spec2('Web Animations')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.animate")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li> - <li>{{domxref("Element.getAnimations()")}}</li> - <li>{{domxref("Animation")}}</li> -</ul> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------ | +| {{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}} | {{Spec2('Web Animations')}} | Initial definition | + +## Compatibilité des navigateurs + +{{Compat("api.Element.animate")}} + +## Voir aussi + +- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API) +- {{domxref("Element.getAnimations()")}} +- {{domxref("Animation")}} diff --git a/files/fr/web/api/element/attachshadow/index.md b/files/fr/web/api/element/attachshadow/index.md index cde6764b54..8d99934703 100644 --- a/files/fr/web/api/element/attachshadow/index.md +++ b/files/fr/web/api/element/attachshadow/index.md @@ -3,52 +3,35 @@ title: Element.attachShadow() slug: Web/API/Element/attachShadow translation_of: Web/API/Element/attachShadow --- -<p>{{APIRef('Shadow DOM')}} {{SeeCompatTable}}</p> - -<p>La méthode <strong><code>Element.attachShadow()</code></strong> attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son <a href="/en-US/docs/Web/API/ShadowRoot"><code>ShadowRoot</code></a>.</p> - -<h2 id="Syntax">Syntaxe</h2> - -<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.attachShadow(<em>shadowRootInit</em>); -</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>shadowRootInit</code></dt> - <dd>Un dictionnaire <code>ShadowRootInit</code>, avec les propriétés suivantes : - <ul> - <li><code>mode </code>: une chaîne de caractères spécifiant le <em>mode d'encapsulation</em> de l'arbre du Shadow DOM, parmi les options suivantes : - <ul> - <li><code>open : </code>spécifie une encapsulation ouverte.</li> - <li><code>closed</code> : spécifie une encapsulation fermée.</li> - </ul> - </li> - </ul> - </dd> -</dl> - -<h3 id="Retour">Retour</h3> - -<p>Retourne un {{domxref("ShadowRoot")}}.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Shadow DOM', '#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict', 'attachShadow()')}}</td> - <td>{{Spec2('Shadow DOM')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("api.Element.attachShadow")}}</p> +{{APIRef('Shadow DOM')}} {{SeeCompatTable}} + +La méthode **`Element.attachShadow()`** attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot). + +## Syntaxe + + var shadowroot = element.attachShadow(shadowRootInit); + +### Paramètres + +- `shadowRootInit` + + - : Un dictionnaire `ShadowRootInit`, avec les propriétés suivantes : + + - `mode `: une chaîne de caractères spécifiant le *mode d'encapsulation* de l'arbre du Shadow DOM, parmi les options suivantes : + + - `open : `spécifie une encapsulation ouverte. + - `closed` : spécifie une encapsulation fermée. + +### Retour + +Retourne un {{domxref("ShadowRoot")}}. + +## Spécifications + +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('Shadow DOM', '#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict', 'attachShadow()')}} | {{Spec2('Shadow DOM')}} | Définition initiale. | + +## Browser compatibility + +{{Compat("api.Element.attachShadow")}} diff --git a/files/fr/web/api/element/attributes/index.md b/files/fr/web/api/element/attributes/index.md index 14c104bcfa..bca756ce34 100644 --- a/files/fr/web/api/element/attributes/index.md +++ b/files/fr/web/api/element/attributes/index.md @@ -9,108 +9,83 @@ tags: - Reference translation_of: Web/API/Element/attributes --- -<p>{{ APIRef("DOM") }}</p> +{{ APIRef("DOM") }} -<p>La propriété <strong><code>Element.attributes</code></strong> renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (<em>Array</em>), aussi il n'a pas de méthodes {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les <code>attributs</code> sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut.</p> +La propriété **`Element.attributes`** renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (_Array_), aussi il n'a pas de méthodes {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les `attributs` sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut. -<h2 id="Syntaxe_et_valeurs">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes; -</pre> + var attr = element.attributes; -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="Exemples_basiques">Exemples basiques</h3> +### Exemples basiques -<pre>// récupère le premier élément <p> du document -var para = document.getElementsByTagName("p")[0]; -var attr = para.attributes; -</pre> + // récupère le premier élément <p> du document + var para = document.getElementsByTagName("p")[0]; + var attr = para.attributes; -<h3 id="Énumération_des_attributs_d'éléments">Énumération des attributs d'éléments</h3> +### Énumération des attributs d'éléments -<p>L'indexation numérique est utile pour parcourir tous les attributs d'un élément.<br> - L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut.</p> +L'indexation numérique est utile pour parcourir tous les attributs d'un élément. +L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut. -<pre class="brush: html"><!DOCTYPE html> +```html +<!DOCTYPE html> -<html> +<html> - <head> - <title>Exemple d'attributs</title> - <script type="text/javascript"> + <head> + <title>Exemple d'attributs</title> + <script type="text/javascript"> function listAttributes() { var paragraph = document.getElementById("paragraph"); var result = document.getElementById("result"); - // D'abord, vérifier que le "paragraph" a quelques attributs + // D'abord, vérifier que le "paragraph" a quelques attributs if (paragraph.hasAttributes()) { var attrs = paragraph.attributes; var output = ""; - for(var i = attrs.length - 1; i >= 0; i--) { - output += attrs[i].name + "->" + attrs[i].value; + for(var i = attrs.length - 1; i >= 0; i--) { + output += attrs[i].name + "->" + attrs[i].value; } result.value = output; } else { result.value = "No attributes to show"; } } - </script> - </head> - -<body> - <p id="paragraph" >Sample Paragraph</p> - <form action=""> - <p> - <input type="button" value="Show first attribute name and value" - onclick="listAttributes();"> - <input id="result" type="text" value=""> - </p> - </form> -</body> -</html></pre> - -<p> </p> - -<h2 id="Sp.C3.A9cification">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>De {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Pas de changement de {{SpecName('DOM2 Core')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Pas de changement de {{SpecName('DOM1')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.attributes")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("NamedNodeMap")}}, l'interface de l'objet retourné</li> - <li>Considérations de compatibilité entre navigateurs : sur <a href="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a> (en)</li> -</ul> + </script> + </head> + +<body> + <p id="paragraph" >Sample Paragraph</p> + <form action=""> + <p> + <input type="button" value="Show first attribute name and value" + onclick="listAttributes();"> + <input id="result" type="text" value=""> + </p> + </form> +</body> +</html> +``` + + + +## Spécifications + +| Spécification | Status | Comment | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}} | {{Spec2('DOM WHATWG')}} | De {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}} | +| {{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}} | {{Spec2('DOM3 Core')}} | Pas de changement de {{SpecName('DOM2 Core')}} | +| {{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}} | {{Spec2('DOM2 Core')}} | Pas de changement de {{SpecName('DOM1')}} | +| {{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}} | {{Spec2('DOM1')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Element.attributes")}} + +## Voir aussi + +- {{domxref("NamedNodeMap")}}, l'interface de l'objet retourné +- Considérations de compatibilité entre navigateurs : sur [quirksmode](http://www.quirksmode.org/dom/w3c_core.html#attributes) (en) diff --git a/files/fr/web/api/element/childelementcount/index.md b/files/fr/web/api/element/childelementcount/index.md index a23de9fbaa..93395d4adc 100644 --- a/files/fr/web/api/element/childelementcount/index.md +++ b/files/fr/web/api/element/childelementcount/index.md @@ -11,43 +11,39 @@ tags: translation_of: Web/API/ParentNode/childElementCount original_slug: Web/API/ParentNode/childElementCount --- -<div> -<p>{{APIRef("DOM") }}</p> -</div> +{{APIRef("DOM") }} -<p>La propriété <code><strong>ParentNode.childElementCount</strong></code> en lecture seule renvoie un <code>unsigned long</code> (<em>long non signé</em>) représentant le nombre d'élèments fils de l'élément donné.</p> +La propriété **`ParentNode.childElementCount`** en lecture seule renvoie un `unsigned long` (_long non signé_) représentant le nombre d'élèments fils de l'élément donné. -<div class="note"> -<p><strong>Note :</strong> Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.<br> - Comme cette interface contenait deux différents jeux de propriétés, l'un visant les {{domxref("Node")}} (<em>noeuds</em>) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, <code>childElementCount</code> a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.</p> -</div> +> **Note :** Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}. +> Comme cette interface contenait deux différents jeux de propriétés, l'un visant les {{domxref("Node")}} (_noeuds_) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, `childElementCount` a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <var>count</var> = <em>node</em>.childElementCount; -</pre> + var count = node.childElementCount; -<dl> - <dt>count</dt> - <dd>détient la valeur de retour, un type <code>unsigned long</code> (<em>long non signé</em>) (simplement un nombre entier)</dd> - <dt>node</dt> - <dd>est un objet représentant un <code>Document</code>, un <code>DocumentFragment</code> ou un <code>Element</code>.</dd> -</dl> +- count + - : détient la valeur de retour, un type `unsigned long` (_long non signé_) (simplement un nombre entier) +- node + - : est un objet représentant un `Document`, un `DocumentFragment` ou un `Element`. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush:js">var foo = document.getElementById("foo"); -if (foo.childElementCount > 0) { +```js +var foo = document.getElementById("foo"); +if (foo.childElementCount > 0) { // faire quelque chose -}</pre> +} +``` -<h2 id="Polyfill_pour_IE8_IE9_Safari">Polyfill pour IE8 & IE9 & Safari</h2> +## Polyfill pour IE8 & IE9 & Safari -<p>Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas.</p> +Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas. -<pre class="brush:js">;(function(constructor) { - if (constructor && - constructor.prototype && +```js +;(function(constructor) { + if (constructor && + constructor.prototype && constructor.prototype.childElementCount == null) { Object.defineProperty(constructor.prototype, 'childElementCount', { get: function() { @@ -59,39 +55,21 @@ if (foo.childElementCount > 0) { } }); } -})(window.Node || window.Element);</pre> - -<h2 id="Spécification">Spécification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Divise l'interface <code>ElementTraversal</code> en {{domxref("ChildNode")}} et <code>ParentNode</code>. La propriété est maintenant définie sur cette dernière.<br> - Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Ajout de sa définition initiale à la pure interface <code>ElementTraversal</code> et de son utilisation sur {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - -<p>{{Compat("api.ParentNode.childElementCount")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}.</li> - <li>Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</li> -</ul> +})(window.Node || window.Element); +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}} | {{Spec2('DOM WHATWG')}} | Divise l'interface `ElementTraversal` en {{domxref("ChildNode")}} et `ParentNode`. La propriété est maintenant définie sur cette dernière. Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface. | +| {{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}} | {{Spec2('Element Traversal')}} | Ajout de sa définition initiale à la pure interface `ElementTraversal` et de son utilisation sur {{domxref("Element")}}. | + +## Compatibilité des navigateurs + +{{Compat("api.ParentNode.childElementCount")}} + +## Voir aussi + +- Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. +- Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}. diff --git a/files/fr/web/api/element/classlist/index.md b/files/fr/web/api/element/classlist/index.md index 62a8048b85..0ee519f720 100644 --- a/files/fr/web/api/element/classlist/index.md +++ b/files/fr/web/api/element/classlist/index.md @@ -10,58 +10,56 @@ tags: - Propriétés translation_of: Web/API/Element/classList --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>La propriété en lecture seule<strong> </strong> <code><strong>Element.classList</strong></code> retourne une collection directe {{domxref("DOMTokenList")}} des attributs de classe de l'élément.</p> +La propriété en lecture seule** \*\***`Element.classList`\*\* retourne une collection directe {{domxref("DOMTokenList")}} des attributs de classe de l'élément. -<p>L'utilisation de <code>classList</code> est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces.</p> +L'utilisation de `classList` est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList; -</pre> + const elementClasses = elementNodeReference.classList; -<p><em>elementClasses</em> est une <a href="/en-US/docs/DOM/DOMTokenList">DOMTokenList</a> représentant l'attribut class de <em>elementNodeReference</em>. Si l'attribut class n'a pas été défini ou est vide <em>elementClasses.length</em> retourne 0. <code>element.classList</code> est en lecture seule. Pour la modifier il convient d'utiliser les méthodes <code>add()</code> et <code>remove()</code>.</p> +_elementClasses_ est une [DOMTokenList](/en-US/docs/DOM/DOMTokenList) représentant l'attribut class de _elementNodeReference_. Si l'attribut class n'a pas été défini ou est vide _elementClasses.length_ retourne 0. `element.classList` est en lecture seule. Pour la modifier il convient d'utiliser les méthodes `add()` et `remove()`. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<dl> - <dt>add( String [, String] )</dt> - <dd>Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée.</dd> - <dt>remove( String [, String] )</dt> - <dd>Supprime les classes spécifiées.<br> - <strong>Note:</strong> Supprimer une classe qui n'existe pas NE génère PAS d'erreurs.</dd> - <dt><strong>item</strong>( Number )</dt> - <dd>Renvoie la position d'une classe dans une collection.</dd> - <dt><strong>toggle</strong>( String [, force] )</dt> - <dd>Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie <code>false</code>, dans le cas inverse, ajoute cette classe et retourne <code>true</code>.<br> - Si le second argument est présent : Si l'argument <code>force</code> est à <code>true</code>, ajoute cette classe, si l'argument est à <code>false</code>, la supprime.</dd> - <dt>contains( String )</dt> - <dd>Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément.</dd> - <dt>replace( oldClass, newClass )</dt> - <dd>Remplace une classe par une autre.</dd> -</dl> +- add( String \[, String] ) + - : Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée. +- remove( String \[, String] ) + - : Supprime les classes spécifiées. + **Note:** Supprimer une classe qui n'existe pas NE génère PAS d'erreurs. +- **item**( Number ) + - : Renvoie la position d'une classe dans une collection. +- **toggle**( String \[, force] ) + - : Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie `false`, dans le cas inverse, ajoute cette classe et retourne `true`. + Si le second argument est présent : Si l'argument `force` est à `true`, ajoute cette classe, si l'argument est à `false`, la supprime. +- contains( String ) + - : Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément. +- replace( oldClass, newClass ) + - : Remplace une classe par une autre. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">const div = document.createElement('div'); +```js +const div = document.createElement('div'); div.className = 'foo'; -// notre point de départ: <div class="foo"></div> +// notre point de départ: <div class="foo"></div> console.log(div.outerHTML); // utiliser l'API classList pour supprimer et ajouter des classes div.classList.remove("foo"); div.classList.add("anotherclass"); -// <div class="anotherclass"></div> +// <div class="anotherclass"></div> console.log(div.outerHTML); // si "visible" est défini, le supprimer, sinon, l'ajouter div.classList.toggle("visible"); // ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10 -div.classList.toggle("visible", i < 10 ); +div.classList.toggle("visible", i < 10 ); console.log(div.classList.contains("foo")); @@ -75,19 +73,19 @@ div.classList.add(...cls); div.classList.remove(...cls); // remplacer la classe "foo" par la classe "bar" -div.classList.replace("foo", "bar");</pre> +div.classList.replace("foo", "bar"); +``` -<div class="note"> -<p><strong>Note :</strong> Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p> -</div> +> **Note :** Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir <https://bugzilla.mozilla.org/show_bug.cgi?id=814014> -<h2 id="Prothèse_démulation">Prothèse d'émulation</h2> +## Prothèse d'émulation -<p>L'ancien événement <code><a href="https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)">onpropertychange</a></code> peut être utilisé pour créer une maquette <code>classList</code> vivante grâce à une propriété <code>Element.prototype.className</code> qui déclenche l'événement spécifié une fois qu'il est modifié.</p> +L'ancien événement [`onpropertychange`](<https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)>) peut être utilisé pour créer une maquette `classList` vivante grâce à une propriété `Element.prototype.className` qui déclenche l'événement spécifié une fois qu'il est modifié. -<p>La polyfill suivante pour <code>classList</code> et <code>DOMTokenList</code> garantit une conformité <strong>totale</strong> (couverture) pour toutes les méthodes et propriétés standard de <code>Element.prototype.classList</code> pour les navigateurs <strong>IE10-IE11</strong> ainsi qu'un comportement quasi conforme pour <strong>IE 6-9</strong>. Consultez ce qui suit :</p> +La polyfill suivante pour `classList` et `DOMTokenList` garantit une conformité **totale** (couverture) pour toutes les méthodes et propriétés standard de `Element.prototype.classList` pour les navigateurs **IE10-IE11** ainsi qu'un comportement quasi conforme pour **IE 6-9**. Consultez ce qui suit : -<pre class="brush: js">// 1. String.prototype.trim polyfill +```js +// 1. String.prototype.trim polyfill if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; (function(window){"use strict"; // prevent global namespace pollution if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error; @@ -127,7 +125,7 @@ if (typeof DOMTokenList !== "function") (function(window){ window.DOMTokenList = DOMTokenList; function whenPropChanges(){ var evt = window.event, prop = evt.propertyName; - if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) { + if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) { var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop]; var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"]; var oldLen = protoObjProto.length; @@ -135,7 +133,7 @@ if (typeof DOMTokenList !== "function") (function(window){ for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;} resTokenList[cI-sub] = tokens[cI]; } - for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs + for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs if(prop !== "classList") return; skipPropChange = 1, target.classList = resTokenList, target.className = strval; skipPropChange = 0, resTokenList.length = tokens.length - sub; @@ -153,7 +151,7 @@ if (typeof DOMTokenList !== "function") (function(window){ this[cI-sub] = toks[cI]; } protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele; - if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM + if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM enumerable: 1, get: function(){return resTokenList}, configurable: 0, set: function(newVal){ skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0; @@ -162,7 +160,7 @@ if (typeof DOMTokenList !== "function") (function(window){ for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;} resTokenList[cI-sub] = toks[cI]; } - for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs + for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs } }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype @@ -171,7 +169,7 @@ if (typeof DOMTokenList !== "function") (function(window){ }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; } ele.attachEvent( "onpropertychange", whenPropChanges ); } - try { // Much faster & cleaner version for IE8 & IE9: + try { // Much faster & cleaner version for IE8 & IE9: // Should work in IE8 because Element.prototype instanceof Node is true according to the specs window.Object.defineProperty(window.Element.prototype, "classList", { enumerable: 1, get: function(val){ @@ -184,8 +182,8 @@ if (typeof DOMTokenList !== "function") (function(window){ window[" uCL"] = polyfillClassList; // the below code ensures polyfillClassList is applied to all current and future elements in the doc. document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=( - '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + // IE6 - '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8 + '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + // IE6 + '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8 ); } })(window); @@ -195,15 +193,15 @@ if (typeof DOMTokenList !== "function") (function(window){ function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]); }; if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){ - if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]); + if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]); var oldValue = this.value; - return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/); + return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/); }; if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean") DOMTokenListProto.replace = function(oldToken, newToken){ checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken); var oldValue = this.value; - return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true)); + return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true)); }; if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){ for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true; @@ -216,69 +214,46 @@ if (typeof DOMTokenList !== "function") (function(window){ if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){ var nextIndex = 0, that = this; return {next: function() { - return nextIndex<that.length ? {value: [nextIndex, that[nextIndex++]], done: false} : {done: true}; + return nextIndex<that.length ? {value: [nextIndex, that[nextIndex++]], done: false} : {done: true}; }}; }; if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){ var nextIndex = 0, that = this; return {next: function() { - return nextIndex<that.length ? {value: that[nextIndex++], done: false} : {done: true}; + return nextIndex<that.length ? {value: that[nextIndex++], done: false} : {done: true}; }}; }; if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){ var nextIndex = 0, that = this; return {next: function() { - return nextIndex<that.length ? {value: nextIndex++, done: false} : {done: true}; + return nextIndex<that.length ? {value: nextIndex++, done: false} : {done: true}; }}; }; })(window.DOMTokenList.prototype, window.document.createElement("div").classList); })(window); -</pre> - -<h3 id="Mise_en_garde">Mise en garde</h3> - -<p>La prothèse d'émulation est limitée dans sa fonctionnalité. Elle est actuellement incapable de traiter les éléments hors document (par exemple, les éléments créés par <code>document.createElement</code> avant d'être ajoutés à un nœud parent) dans IE6-7.</p> - -<p>Cependant, elle devrait très bien fonctionner dans IE9. Une différence majeure entre la version prothésée de <code>classList</code> et les spécifications du W3 est que pour IE6-8, il n'y a pas moyen de créer un objet immuable (un objet dont les propriétés ne peuvent pas être directement modifiées). Dans IE9, en revanche, c'est possible en étendant le prototype, en gelant l'objet visible et en écrasant les méthodes de propriétés natives. Cependant, de telles actions ne fonctionneraient pas dans IE6-IE8 et, dans IE9, elles ralentiraient la performance de la page web entière au point de la faire ramper, rendant ces modifications complètement impraticables pour cette prothèse d'émulation.</p> - -<p>Une note mineure est que dans IE6-7, cette prothèse utilise la propriété <code>window[" uCL"]</code> de l'objet window pour communiquer avec les expressions CSS, la propriété css <code>x-uCLp</code> sur tous les éléments, et la propriété <code>element[" uCL"]</code> sur tous les éléments pour permettre la collecte des déchets et augmenter les performances. Dans tous les navigateurs prothésés (IE6-9), une propriété <code>element[" uCLp"]</code> supplémentaire est ajoutée à l'élément pour garantir un prototypage conforme aux normes, et une propriété <code>DOMTokenList[" uCL"]</code> est ajoutée à chaque objet <code>element["classList"]</code> pour garantir que la <code>DOMTokenList</code> est liée à son propre élément.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Note dans la spécification HTML relative à l'attribut {{htmlattrxref("class")}}.</td> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.classList")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("element.className")}}</li> - <li>{{domxref("DOMTokenList")}}</li> -</ul> +``` + +### Mise en garde + +La prothèse d'émulation est limitée dans sa fonctionnalité. Elle est actuellement incapable de traiter les éléments hors document (par exemple, les éléments créés par `document.createElement` avant d'être ajoutés à un nœud parent) dans IE6-7. + +Cependant, elle devrait très bien fonctionner dans IE9. Une différence majeure entre la version prothésée de `classList` et les spécifications du W3 est que pour IE6-8, il n'y a pas moyen de créer un objet immuable (un objet dont les propriétés ne peuvent pas être directement modifiées). Dans IE9, en revanche, c'est possible en étendant le prototype, en gelant l'objet visible et en écrasant les méthodes de propriétés natives. Cependant, de telles actions ne fonctionneraient pas dans IE6-IE8 et, dans IE9, elles ralentiraient la performance de la page web entière au point de la faire ramper, rendant ces modifications complètement impraticables pour cette prothèse d'émulation. + +Une note mineure est que dans IE6-7, cette prothèse utilise la propriété `window[" uCL"]` de l'objet window pour communiquer avec les expressions CSS, la propriété css `x-uCLp` sur tous les éléments, et la propriété `element[" uCL"]` sur tous les éléments pour permettre la collecte des déchets et augmenter les performances. Dans tous les navigateurs prothésés (IE6-9), une propriété `element[" uCLp"]` supplémentaire est ajoutée à l'élément pour garantir un prototypage conforme aux normes, et une propriété `DOMTokenList[" uCL"]` est ajoutée à chaque objet `element["classList"]` pour garantir que la `DOMTokenList` est liée à son propre élément. + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------- | +| {{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}} | {{Spec2("HTML WHATWG")}} | Note dans la spécification HTML relative à l'attribut {{htmlattrxref("class")}}. | +| {{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}} | {{Spec2("DOM WHATWG")}} | Définition initiale. | +| {{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}} | {{Spec2("DOM4")}} | | + +## Compatibilité des navigateurs + +{{Compat("api.Element.classList")}} + +## Voir aussi + +- {{domxref("element.className")}} +- {{domxref("DOMTokenList")}} diff --git a/files/fr/web/api/element/classname/index.md b/files/fr/web/api/element/classname/index.md index 125374a9db..c2c36c38ea 100644 --- a/files/fr/web/api/element/classname/index.md +++ b/files/fr/web/api/element/classname/index.md @@ -9,71 +9,51 @@ tags: - Propriétés translation_of: Web/API/Element/className --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La propriété <strong>className</strong> de l'interface {{domxref("Element")}} récupère et définit la valeur de l'<a href="/fr/docs/Web/HTML/Attributs_universels/class">attribut <code>class</code></a> de l'élément spécifié.</p> +La propriété **className** de l'interface {{domxref("Element")}} récupère et définit la valeur de l'[attribut `class`](/fr/docs/Web/HTML/Attributs_universels/class) de l'élément spécifié. -<h2 id="Syntaxe_et_valeurs">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className; -<var>elementNodeReference</var>.className = <var>cName</var>;</pre> + var cName = elementNodeReference.className; + elementNodeReference.className = cName; -<ul> - <li><em><var>cName</var> est une String (chaîne de caractères) représentant la classe (ou les classes séparées par des espaces) de l'élément courant.</em></li> -</ul> +- \*_cName_ est une String (chaîne de caractères) représentant la classe (ou les classes séparées par des espaces) de l'élément courant.\* -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">let elm = document.getElementById('item'); +```js +let elm = document.getElementById('item'); if(elm.className === 'active'){ elm.className = 'inactive'; } else { elm.className = 'active'; -}</pre> - -<h2 id="Notes">Notes</h2> - -<p>Le nom <code>className</code> est utilisé pour cette propriété au lieu de <code>class</code> à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM.</p> - -<p><code>className</code> peut être une instance de {{domxref("SVGAnimatedString")}} si l'<code>element</code> est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de <code>className</code> ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. </p> - -<pre class="brush: js"><code>elm.setAttribute('class', elm.getAttribute('class'))</code> -</pre> - -<h2 id="Sp.C3.A9cification">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td> - <td>{{Spec2("DOM2 HTML")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.className")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("element.classList")}}</li> -</ul> +} +``` + +## Notes + +Le nom `className` est utilisé pour cette propriété au lieu de `class` à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM. + +`className` peut être une instance de {{domxref("SVGAnimatedString")}} si l'`element` est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de `className` ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. + +```js +elm.setAttribute('class', elm.getAttribute('class')) +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-element-classname", "element.className")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}} | {{Spec2("DOM2 HTML")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Element.className")}} + +## Voir aussi + +- {{domxref("element.classList")}} diff --git a/files/fr/web/api/element/click_event/index.md b/files/fr/web/api/element/click_event/index.md index 8e18c242d9..3e56af91cd 100644 --- a/files/fr/web/api/element/click_event/index.md +++ b/files/fr/web/api/element/click_event/index.md @@ -9,145 +9,125 @@ tags: - click translation_of: Web/API/Element/click_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'évènement <code><strong>click</strong></code> est déclenché à partir d'un élément lorsqu'un bouton d'un dispositif de pointage (comme celui d'une souris par exemple) est pressé puis relaché lorsque le pointeur est sur l'élément.</p> +L'évènement **`click`** est déclenché à partir d'un élément lorsqu'un bouton d'un dispositif de pointage (comme celui d'une souris par exemple) est pressé puis relaché lorsque le pointeur est sur l'élément. <table class="properties"> - <tbody> - <tr> - <th>Se propage/remonte dans le DOM</th> - <td>Oui</td> - </tr> - <tr> - <th>Annulable</th> - <td>Oui</td> - </tr> - <tr> - <th>Interface</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th>Propriété pour la gestion d'évènement</th> - <td>{{domxref("GlobalEventHandlers.onclick", "onclick")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th>Se propage/remonte dans le DOM</th> + <td>Oui</td> + </tr> + <tr> + <th>Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th>Interface</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th>Propriété pour la gestion d'évènement</th> + <td> + {{domxref("GlobalEventHandlers.onclick", "onclick")}} + </td> + </tr> + </tbody> </table> -<p>Si le bouton est pressé sur un élément et que le pointeur est déplacé sur un autre élément, l'évènement sera déclenché sur l'ancêtre le plus près qui contient les deux éléments.</p> +Si le bouton est pressé sur un élément et que le pointeur est déplacé sur un autre élément, l'évènement sera déclenché sur l'ancêtre le plus près qui contient les deux éléments. -<p><code>click</code> est déclenché après que les évènements {{event("mousedown")}} et {{event("mouseup")}} aient été déclenchés.</p> +`click` est déclenché après que les évènements {{event("mousedown")}} et {{event("mouseup")}} aient été déclenchés. -<h2 id="Notes_dutilisation">Notes d'utilisation</h2> +## Notes d'utilisation -<p>L'objet {{domxref("MouseEvent")}}, passé au gestionnaire d'évènement (lorsque l'évènement est <code>click</code>) possède une propriété {{domxref("Event.detail", "detail")}} qui indique le nombre de fois où la cible ({{domxref("Event.target", "target")}}) a été cliquée. Autrement dit, <code>detail</code> vaudra 2 pour un double-clic, 3 pour un triple-clic et ainsi de suite. Le compteur est remis à zéro après un court intervalle (dont la durée spécifique peut varier entre les navigateurs, les plateformes et les préférences de l'utilisateur dont notamment les options d'accessibilité).</p> +L'objet {{domxref("MouseEvent")}}, passé au gestionnaire d'évènement (lorsque l'évènement est `click`) possède une propriété {{domxref("Event.detail", "detail")}} qui indique le nombre de fois où la cible ({{domxref("Event.target", "target")}}) a été cliquée. Autrement dit, `detail` vaudra 2 pour un double-clic, 3 pour un triple-clic et ainsi de suite. Le compteur est remis à zéro après un court intervalle (dont la durée spécifique peut varier entre les navigateurs, les plateformes et les préférences de l'utilisateur dont notamment les options d'accessibilité). -<h3 id="Internet_Explorer">Internet Explorer</h3> +### Internet Explorer -<p>Internet Explorer 8 & 9 souffrent d'un bug où les élméents avec une {{cssxref("background-color")}} calculée qui vaut <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> qui recouvrent d'autres éléments ne recevront pas d'évènements <code>click</code>. Les évènements <code>click</code> toucheront les éléments en dessous à la place.</p> +Internet Explorer 8 & 9 souffrent d'un bug où les élméents avec une {{cssxref("background-color")}} calculée qui vaut [`transparent`](/fr/docs/Web/CSS/color_value#transparent_keyword) qui recouvrent d'autres éléments ne recevront pas d'évènements `click`. Les évènements `click` toucheront les éléments en dessous à la place. -<p>Quelques méthodes de contournement pour ce bug :</p> +Quelques méthodes de contournement pour ce bug : -<ul> - <li>Pour IE9 : - <ul> - <li>Utiliser {{cssxref("background-color")}}<code>: <a href="/en-US/docs/Web/CSS/color_value#rgba()">rgba</a>(0,0,0,0)</code></li> - <li>Appliquer {{cssxref("opacity")}}<code>: 0</code> et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li> - </ul> - </li> - <li>Pour IE8 et IE9 : appliquer <code><a href="http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx">filter</a>: alpha(opacity=0);</code> et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li> -</ul> +- Pour IE9 : -<h3 id="Safari_Mobile">Safari Mobile</h3> + - Utiliser {{cssxref("background-color")}}`: rgba(0,0,0,0)` + - Appliquer {{cssxref("opacity")}}`: 0` et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas [`transparent`](/fr/docs/Web/CSS/color_value#transparent_keyword) -<p>Safari Mobile 7.0+ (et antérieures) <a href="https://bugs.webkit.org/show_bug.cgi?id=153887">souffre d'un bug</a> indiquant que les évènements <code>click</code> ne sont pas déclenchés sur les éléments qui ne sont généralement pas interactifs (ex. {{HTMLElement("div")}}) et qui n'ont pas de gestionnaire d'évènement directement attaché (on utilise la délégation d'évènement). Voir <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6">la documentation de Safari sur le fait de rendre les éléments cliquables</a> et <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7">la définition d'un élément cliquable</a>.</p> +- Pour IE8 et IE9 : appliquer `filter: alpha(opacity=0);` et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas [`transparent`](/fr/docs/Web/CSS/color_value#transparent_keyword) -<p>Méthodes de contournement connues :</p> +### Safari Mobile -<ul> - <li>Ajouter {{cssxref("cursor")}}<code>: pointer;</code> sur l'élément ou l'un des ancêtres.</li> - <li>Ajouter un attribut <code>onclick="void(0)"</code> à l'élément ou à l'un des ancêtres (tant que ce n'est pas {{HTMLElement("body")}}).</li> - <li>Utiliser un élément interactif (ex. {{HTMLElement("a")}}) plutôt qu'un élément généralement non-interactif (ex. {{HTMLElement("div")}}).</li> - <li>Ne pas utiliser la délégation d'évènement pour <code>click</code>.</li> -</ul> +Safari Mobile 7.0+ (et antérieures) [souffre d'un bug](https://bugs.webkit.org/show_bug.cgi?id=153887) indiquant que les évènements `click` ne sont pas déclenchés sur les éléments qui ne sont généralement pas interactifs (ex. {{HTMLElement("div")}}) et qui n'ont pas de gestionnaire d'évènement directement attaché (on utilise la délégation d'évènement). Voir [la documentation de Safari sur le fait de rendre les éléments cliquables](https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6) et [la définition d'un élément cliquable](https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7). -<p>Safari Mobile considère que les éléments suivants sont interactifs (et ne souffrent donc pas de ce bug) :</p> +Méthodes de contournement connues : -<ul> - <li>{{HTMLElement("a")}} (tant qu'il a un attribut <code>href</code>)</li> - <li>{{HTMLElement("area")}} (tant qu'il a un attribut <code>href</code>)</li> - <li>{{HTMLElement("button")}}</li> - <li>{{HTMLElement("img")}}</li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("label")}} (tant qu'il est associé à un formulaire)</li> - <li>{{HTMLElement("textarea")}}</li> - <li><em>Liste à compléter.</em></li> -</ul> +- Ajouter {{cssxref("cursor")}}`: pointer;` sur l'élément ou l'un des ancêtres. +- Ajouter un attribut `onclick="void(0)"` à l'élément ou à l'un des ancêtres (tant que ce n'est pas {{HTMLElement("body")}}). +- Utiliser un élément interactif (ex. {{HTMLElement("a")}}) plutôt qu'un élément généralement non-interactif (ex. {{HTMLElement("div")}}). +- Ne pas utiliser la délégation d'évènement pour `click`. -<h2 id="Exemples">Exemples</h2> +Safari Mobile considère que les éléments suivants sont interactifs (et ne souffrent donc pas de ce bug) : -<p>Dans cet exemple, on affiche le nombre de clics consécutifs sur un bouton HTML ({{HTMLElement("button")}}).</p> +- {{HTMLElement("a")}} (tant qu'il a un attribut `href`) +- {{HTMLElement("area")}} (tant qu'il a un attribut `href`) +- {{HTMLElement("button")}} +- {{HTMLElement("img")}} +- {{HTMLElement("input")}} +- {{HTMLElement("label")}} (tant qu'il est associé à un formulaire) +- {{HTMLElement("textarea")}} +- _Liste à compléter._ -<h3 id="HTML">HTML</h3> +## Exemples -<pre class="brush: html"><button>Cliquer ici</button></pre> +Dans cet exemple, on affiche le nombre de clics consécutifs sur un bouton HTML ({{HTMLElement("button")}}). -<h3 id="JavaScript">JavaScript</h3> +### HTML -<pre class="brush: js">const button = document.querySelector('button'); +```html +<button>Cliquer ici</button> +``` -button.addEventListener('click', event => { +### JavaScript + +```js +const button = document.querySelector('button'); + +button.addEventListener('click', event => { button.innerHTML = `Nombre de clics : ${event.detail}`; -});</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>Essayez de cliquer rapidement sur le bouton pour augmenter le nombre de clic. Après une pause, le compteur sera remis à zéro.</p> - -<p>{{EmbedLiveSample("Exemples")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - </tr> - <tr> - <td>{{SpecName('UI Events', '#event-type-click')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-click', 'click')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}</td> - <td>{{Spec2('DOM2 Events')}}</td> - </tr> - </tbody> -</table> +}); +``` + +### Résultat + +Essayez de cliquer rapidement sur le bouton pour augmenter le nombre de clic. Après une pause, le compteur sera remis à zéro. + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('UI Events', '#event-type-click')}} | {{Spec2('UI Events')}} | +| {{SpecName('DOM3 Events', '#event-type-click', 'click')}} | {{Spec2('DOM3 Events')}} | +| {{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}} | {{Spec2('DOM2 Events')}} | + +## Compatibilité des navigateurs + +{{Compat("api.Element.click_event")}} + +## Voir aussi + +- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements) +- D'autres évènements connexes -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.click_event")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li> - <li>D'autres évènements connexes - <ul> - <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li> - <li><code><a href="/fr/docs/Web/API/Element/mousedown_event">mousedown</a></code></li> - <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li> - <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li> - <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li> - </ul> - </li> -</ul> + - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) + - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) + - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) + - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event) + - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) + - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event) + - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) + - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) + - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) diff --git a/files/fr/web/api/element/clientheight/index.md b/files/fr/web/api/element/clientheight/index.md index 3e88e1a801..ff97dd6ae1 100644 --- a/files/fr/web/api/element/clientheight/index.md +++ b/files/fr/web/api/element/clientheight/index.md @@ -4,46 +4,42 @@ slug: Web/API/Element/clientHeight translation_of: Web/API/Element/clientHeight browser-compat: api.Element.clientHeight --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>La propriété en lecture seule <strong><code>Element.clientHeight</code></strong> vaut zéro pour les éléments sans CSS ou sans boîte de disposition en ligne/incise ; sinon elle vaut la hauteur interne d'un élément, exprimée en pixels. Cette hauteur inclut le remplissage (<i lang="en">padding</i>) mais exclut les bordures, les marges et les éventuelles barres de défilement horizontales.</p> +La propriété en lecture seule **`Element.clientHeight`** vaut zéro pour les éléments sans CSS ou sans boîte de disposition en ligne/incise ; sinon elle vaut la hauteur interne d'un élément, exprimée en pixels. Cette hauteur inclut le remplissage (<i lang="en">padding</i>) mais exclut les bordures, les marges et les éventuelles barres de défilement horizontales. -<p><code>clientHeight</code> peut être calculée comme : <em>hauteur CSS</em> + <em>remplissage CSS</em> - <em>hauteur des barres de défilement horizontales</em> s'il y en a.</p> +`clientHeight` peut être calculée comme : _hauteur CSS_ + _remplissage CSS_ - _hauteur des barres de défilement horizontales_ s'il y en a. -<p>Lorsque <code>clientHeight</code> est utilisée sur l'élément racine (l'élément <code><html></code>), (ou sur <code><body></code> si le document est en mode de compatibilité (<i lang="en">quirks mode</i>)), c'est la hauteur de la zone d'affichage (<i lang="en">viewport</i>) (sans tenir compte des barres de défilement) qui est renvoyée. <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight">Il s'agit ici d'un cas aux limites pour <code>clientHeight</code></a>.</p> +Lorsque `clientHeight` est utilisée sur l'élément racine (l'élément `<html>`), (ou sur `<body>` si le document est en mode de compatibilité (<i lang="en">quirks mode</i>)), c'est la hauteur de la zone d'affichage (<i lang="en">viewport</i>) (sans tenir compte des barres de défilement) qui est renvoyée. [Il s'agit ici d'un cas aux limites pour `clientHeight`](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight). -<div class="note"> - <p><strong>Note :</strong> Cette propriété sera arrondie en un entier. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser <a href="/fr/docs/Web/API/Element/getBoundingClientRect"><code>element.getBoundingClientRect()</code></a>.</p> -</div> +> **Note :** Cette propriété sera arrondie en un entier. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser [`element.getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect). -<h2 id="syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"> +```js var intElemClientHeight = element.clientHeight; -</pre> +``` -<p><code>intElemClientHeight</code> est un entier correspondant à la valeur de <code>clientHeight</code> pour l'élément représenté par <code>element</code>, exprimée en pixels. La propriété <code>clientHeight</code> est uniquement accessible en lecture-seule.</p> +`intElemClientHeight` est un entier correspondant à la valeur de `clientHeight` pour l'élément représenté par `element`, exprimée en pixels. La propriété `clientHeight` est uniquement accessible en lecture-seule. -<h2 id="example">Exemples</h2> +## Exemples -<p><img src="dimensions-client.png"></p> + -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h3 id="Notes">Notes</h3> +### Notes -<p><code>clientHeight</code> est une propriété introduite par le modèle objet d'Internet Explorer.</p> +`clientHeight` est une propriété introduite par le modèle objet d'Internet Explorer. -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/HTMLElement/offsetHeight"><code>HTMLElement.offsetHeight</code></a></li> - <li><a href="/fr/docs/Web/API/Element/scrollHeight"><code>Element.scrollHeight</code></a></li> - <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Déterminer les dimensions des éléments</a></li> -</ul> +- [`HTMLElement.offsetHeight`](/fr/docs/Web/API/HTMLElement/offsetHeight) +- [`Element.scrollHeight`](/fr/docs/Web/API/Element/scrollHeight) +- [Déterminer les dimensions des éléments](/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements) diff --git a/files/fr/web/api/element/clientleft/index.md b/files/fr/web/api/element/clientleft/index.md index 72f3d71689..2183d340f9 100644 --- a/files/fr/web/api/element/clientleft/index.md +++ b/files/fr/web/api/element/clientleft/index.md @@ -4,45 +4,41 @@ slug: Web/API/Element/clientLeft translation_of: Web/API/Element/clientLeft browser-compat: api.Element.clientLeft --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>La propriété en lecture seule <strong><code>Element.clientLeft</code></strong> représente la largeur de la bordure gauche d'un élément, exprimée en pixels. Cette largeur inclut l'éventuelle largeur de la barre de défilement verticale si le texte se lit de droite à gauche et s'il y a un dépassement entraînant l'apparition d'une barre de défilement à gauche. <code>clientLeft</code> n'inclut pas la marge gauche ou le remplissage (<i lang="en">padding</i>) à gauche.</p> +La propriété en lecture seule **`Element.clientLeft`** représente la largeur de la bordure gauche d'un élément, exprimée en pixels. Cette largeur inclut l'éventuelle largeur de la barre de défilement verticale si le texte se lit de droite à gauche et s'il y a un dépassement entraînant l'apparition d'une barre de défilement à gauche. `clientLeft` n'inclut pas la marge gauche ou le remplissage (<i lang="en">padding</i>) à gauche. -<p>Lorsque la préférence <a href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code></a> est paramétrée à 1 ou à 3 et que la direction du texte est de droite à gauche, <strong>alors la barre de défilement verticale est placée à gauche</strong> et ce placement aura donc un impact sur la valeur de <code>clientLeft</code>.</p> +Lorsque la préférence [`layout.scrollbar.side`](http://kb.mozillazine.org/Layout.scrollbar.side) est paramétrée à 1 ou à 3 et que la direction du texte est de droite à gauche, **alors la barre de défilement verticale est placée à gauche** et ce placement aura donc un impact sur la valeur de `clientLeft`. -<div class="note"> - <p><strong>Note :</strong> Cette propriété sera arrondie en une valeur entière. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser <a href="/fr/docs/Web/API/Element/getBoundingClientRect"><code>element.getBoundingClientRect()</code></a>. </p> -</div> +> **Note :** Cette propriété sera arrondie en une valeur entière. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser [`element.getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect). -<div class="note"> - <p><strong>Note :</strong> Lorsqu'un élément se voit appliquer <code>display: inline</code>, <code>clientLeft</code> renvoie <code>0</code>, quelle que soit la bordure de l'élément.</p> -</div> +> **Note :** Lorsqu'un élément se voit appliquer `display: inline`, `clientLeft` renvoie `0`, quelle que soit la bordure de l'élément. -<h2 id="syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"> +```js var left = element.clientLeft; -</pre> +``` -<h2 id="exemple">Exemple</h2> +## Exemple -<p>Dans l'exemple qui suit, la zone du client possède un arrière-plan blanc avec une bordure <code>border-left</code> noire de 24px. La valeur de <code>clientLeft</code> correspond à la distance entre la fin de la zone de la marge et le début des zones de contenu et de remplissage : 24px.</p> +Dans l'exemple qui suit, la zone du client possède un arrière-plan blanc avec une bordure `border-left` noire de 24px. La valeur de `clientLeft` correspond à la distance entre la fin de la zone de la marge et le début des zones de contenu et de remplissage : 24px. -<h3>HTML</h3> +### HTML -<pre class="brush: html"> -<div id="container"> - <div id="contained"> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor +```html +<div id="container"> + <div id="contained"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis - nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> - </div> -</div> -</pre> + nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + </div> +</div> +``` -<h3>CSS</h3> +### CSS -<pre class="brush: css"> +```css #container { margin: 3rem; @@ -57,24 +53,24 @@ var left = element.clientLeft; overflow: auto; background-color: white; } -</pre> +``` -<h3>Résultat</h3> +### Résultat {{EmbedLiveSample("Exemple", 400, 350)}} -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} -<h2 id="Notes">Notes</h2> +## Notes -<p><code>clientLeft</code> fut introduit avec le modèle d'objet DHTML d'Internet Explorer.</p> +`clientLeft` fut introduit avec le modèle d'objet DHTML d'Internet Explorer. -<p>La position de la barre de défilement verticale pour les textes écrits de droite à gauche dépend de la préférence <a href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code></a>.</p> +La position de la barre de défilement verticale pour les textes écrits de droite à gauche dépend de la préférence [`layout.scrollbar.side`](http://kb.mozillazine.org/Layout.scrollbar.side). -<p>Les applications utilisant le moteur Gecko prennent en charge <code>clientLeft</code> depuis Gecko 1.9 (Firefox 3 l'implémente avec <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=111207">le bug 111207</a>). Cette propriété n'est pas prise en charge pour Firefox 2 et les versions antérieures.</p> +Les applications utilisant le moteur Gecko prennent en charge `clientLeft` depuis Gecko 1.9 (Firefox 3 l'implémente avec [le bug 111207](https://bugzilla.mozilla.org/show_bug.cgi?id=111207)). Cette propriété n'est pas prise en charge pour Firefox 2 et les versions antérieures. diff --git a/files/fr/web/api/element/clientwidth/index.md b/files/fr/web/api/element/clientwidth/index.md index 9a3bd1012c..229934df6d 100644 --- a/files/fr/web/api/element/clientwidth/index.md +++ b/files/fr/web/api/element/clientwidth/index.md @@ -8,59 +8,40 @@ tags: - Reference translation_of: Web/API/Element/clientWidth --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>La propriété <code><strong>Element.clientWidth</strong></code> vaut zéro pour les éléments en ligne (<em>inline</em>) et pour les éléments sans CSS. Dans les autres cas, sa valeur correspond à la largeur intérieure d'un élément, exprimée en pixel. Cette largeur inclue le rembourrage (<em>padding</em>) mais exclut les bordures, les marges et les éventuelles barres de défilement verticales.</p> +La propriété **`Element.clientWidth`** vaut zéro pour les éléments en ligne (_inline_) et pour les éléments sans CSS. Dans les autres cas, sa valeur correspond à la largeur intérieure d'un élément, exprimée en pixel. Cette largeur inclue le rembourrage (_padding_) mais exclut les bordures, les marges et les éventuelles barres de défilement verticales. -<p>Lorsque <code>clientWidth</code> est utilisée sur l'élément racine (l'élément <code><html></code> par défaut ou <code><body></code> si le document utilise le mode <em>quirks</em>), c'est la largeur de la zone d'affichage (<em>viewport</em>) à l'exception des barres de défilement qui est renvoyée. <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth">Il s'agit d'un cas au limite pour <code>clientWidth</code></a>.</p> +Lorsque `clientWidth` est utilisée sur l'élément racine (l'élément `<html>` par défaut ou `<body>` si le document utilise le mode _quirks_), c'est la largeur de la zone d'affichage (_viewport_) à l'exception des barres de défilement qui est renvoyée. [Il s'agit d'un cas au limite pour `clientWidth`](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth). -<div class="note"> -<p><strong>Note :</strong> La valeur de cette propriété sera arondie en un entier. Si vous devez utiliser une valeur décimale, privilégiez {{domxref("element.getBoundingClientRect()")}}.</p> -</div> +> **Note :** La valeur de cette propriété sera arondie en un entier. Si vous devez utiliser une valeur décimale, privilégiez {{domxref("element.getBoundingClientRect()")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre> + var intElemClientWidth = element.clientWidth; -<p><code><var>intElemClientWidth</var></code> est un entier correspondant à la largeur d'<code><var>element</var></code>, en pixels. La propriété <code>clientWidth</code> est uniquement accessible en lecture-seule.</p> +`intElemClientWidth` est un entier correspondant à la largeur d'`element`, en pixels. La propriété `clientWidth` est uniquement accessible en lecture-seule. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p><img src="dimensions-client.png"></p> + -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}} | {{Spec2("CSSOM View")}} | | -<h3 id="Notes">Notes</h3> +### Notes -<p><code>clientWidth</code> fut d'abord introduit avec le modèle objet DHTML de Microsoft Internet Explorer.</p> +`clientWidth` fut d'abord introduit avec le modèle objet DHTML de Microsoft Internet Explorer. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.Element.clientWidth")}} +## Voir aussi -<p>{{Compat("api.Element.clientWidth")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("HTMLElement.offsetWidth")}}</li> - <li>{{domxref("Element.scrollWidth")}}</li> - <li><a href="/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Déterminer les dimensions des éléments</a></li> -</ul> +- {{domxref("HTMLElement.offsetWidth")}} +- {{domxref("Element.scrollWidth")}} +- [Déterminer les dimensions des éléments](/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements) diff --git a/files/fr/web/api/element/closest/index.md b/files/fr/web/api/element/closest/index.md index 61a0e9f93f..a805089953 100644 --- a/files/fr/web/api/element/closest/index.md +++ b/files/fr/web/api/element/closest/index.md @@ -8,47 +8,45 @@ tags: - Méthodes translation_of: Web/API/Element/closest --- -<p>{{APIRef('Shadow DOM')}}</p> +{{APIRef('Shadow DOM')}} -<p>La méthode <code><strong>Element.closest()</strong></code> renvoie l'ancêtre le plus proche de l'élément courant (ou l'élément courant) qui correspond aux sélecteurs passés comme paramètres. S'il n'existe pas de tel ancêtre, la méthode renvoie <code>null</code>.</p> +La méthode **`Element.closest()`** renvoie l'ancêtre le plus proche de l'élément courant (ou l'élément courant) qui correspond aux sélecteurs passés comme paramètres. S'il n'existe pas de tel ancêtre, la méthode renvoie `null`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>elt =</em><em> element</em>.closest(<em>selecteurs</em>); -</pre> + var elt = element.closest(selecteurs); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>selecteurs</code></dt> - <dd>Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que <code>"p:hover, .toto + q"</code></dd> -</dl> +- `selecteurs` + - : Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que `"p:hover, .toto + q"` -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>L'élément ({{domxref("Element")}}) qui est le plus proche ancêtre de l'élément courant et qui correspond aux sélecteurs décrits dans le paramètres ou {{jsxref("null")}} s'il n'y en a aucun.</p> +L'élément ({{domxref("Element")}}) qui est le plus proche ancêtre de l'élément courant et qui correspond aux sélecteurs décrits dans le paramètres ou {{jsxref("null")}} s'il n'y en a aucun. -<h3 id="Exceptions">Exceptions</h3> +### Exceptions -<ul> - <li>{{exception("SyntaxError")}} sera levée si <code>selecteurs</code> n'est pas une liste de sélecteurs valide.</li> -</ul> +- {{exception("SyntaxError")}} sera levée si `selecteurs` n'est pas une liste de sélecteurs valide. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><article> - <div id="div-01">Here is div-01 - <div id="div-02">Here is div-02 - <div id="div-03">Here is div-03</div> - </div> - </div> -</article></pre> +```html +<article> + <div id="div-01">Here is div-01 + <div id="div-02">Here is div-02 + <div id="div-03">Here is div-03</div> + </div> + </div> +</article> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">var el = document.getElementById('div-03'); +```js +var el = document.getElementById('div-03'); var r1 = el.closest("#div-02"); // Renvoie l'élément avec l'identifiant id=div-02 @@ -57,20 +55,22 @@ var r2 = el.closest("div div"); // Renvoie le plus proche ancêtre qui est un div // dans un div. Ici, c'est div-03 lui-même. -var r3 = el.closest("article > div"); +var r3 = el.closest("article > div"); // Renvoie le plus proche ancêtre qui est un div // et dont l'élément parent est article. Ici c'est // div-01. var r4 = el.closest(":not(div)"); // Renvoie le plus proche ancêtre qui n'est pas un -// div. Dans ce cas, c'est l'élément article.</pre> +// div. Dans ce cas, c'est l'élément article. +``` -<h2 id="Polyfill">Polyfill</h2> +## Polyfill -<p>Pour les navigateurs qui ne prennent pas en charge <code>Element.closest()</code> mais qui permettent d'utiliser <code>element.matches()</code> (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant :</p> +Pour les navigateurs qui ne prennent pas en charge `Element.closest()` mais qui permettent d'utiliser `element.matches()` (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant : -<pre class="brush: js">if (!Element.prototype.matches) +```js +if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; @@ -81,13 +81,15 @@ if (!Element.prototype.closest) do { if (el.matches(s)) return el; el = el.parentElement || el.parentNode; - } while (el !== null && el.nodeType == 1); + } while (el !== null && el.nodeType == 1); return null; - };</pre> + }; +``` -<p>Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web :</p> +Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web : -<pre class="brush: js">if (window.Element && !Element.prototype.closest) { +```js +if (window.Element && !Element.prototype.closest) { Element.prototype.closest = function(s) { var matches = (this.document || this.ownerDocument).querySelectorAll(s), @@ -95,44 +97,29 @@ if (!Element.prototype.closest) el = this; do { i = matches.length; - while (--i >= 0 && matches.item(i) !== el) {}; - } while ((i < 0) && (el = el.parentElement)); + while (--i >= 0 && matches.item(i) !== el) {}; + } while ((i < 0) && (el = el.parentElement)); return el; }; } -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.closest")}}</p> - -<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3> - -<ul> - <li>Dans Edge <code>document.createElement(tagName).closest(tagName)</code> retournera <code>null</code> si l'élément n'est pas attaché au DOM au préalable.</li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface {{domxref("Element")}}</li> - <li><a href="/fr/Apprendre/CSS/Les_bases/Les_sélecteurs">La syntaxe pour les sélecteurs</a></li> - <li>Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}.</li> -</ul> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Element.closest")}} + +### Notes de compatibilité + +- Dans Edge `document.createElement(tagName).closest(tagName)` retournera `null` si l'élément n'est pas attaché au DOM au préalable. + +## Voir aussi + +- L'interface {{domxref("Element")}} +- [La syntaxe pour les sélecteurs](/fr/Apprendre/CSS/Les_bases/Les_sélecteurs) +- Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}. diff --git a/files/fr/web/api/element/compositionend_event/index.md b/files/fr/web/api/element/compositionend_event/index.md index 546f6b3c5f..3032e6c928 100644 --- a/files/fr/web/api/element/compositionend_event/index.md +++ b/files/fr/web/api/element/compositionend_event/index.md @@ -4,47 +4,50 @@ slug: Web/API/Element/compositionend_event translation_of: Web/API/Element/compositionend_event original_slug: Web/Events/compositionend --- -<p>L'événement <strong><code>compositionend</code></strong> est déclenché lorsque la composition d'un texte via {{glossary("input method editor", "méthode de saisie")}} est terminée ou annulée (démarre avec des caractères spéciaux qui requièrent une séquence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mot sur mobile).</p> +L'événement **`compositionend`** est déclenché lorsque la composition d'un texte via {{glossary("input method editor", "méthode de saisie")}} est terminée ou annulée (démarre avec des caractères spéciaux qui requièrent une séquence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mot sur mobile). -<p>Par exemple, cette événement pourrait être déclanché quand un utilisateur saisie un caractère chinois en utilisant la méthode de saisie <a href="https://en.wikipedia.org/wiki/Pinyin">Pinyin</a>.</p> +Par exemple, cette événement pourrait être déclanché quand un utilisateur saisie un caractère chinois en utilisant la méthode de saisie [Pinyin](https://en.wikipedia.org/wiki/Pinyin). <table class="properties"> - <tbody> - <tr> - <th scope="row">Se propage/remonte dans le DOM</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("CompositionEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété pour la gestion d'évènement</th> - <td>Aucune</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Se propage/remonte dans le DOM</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("CompositionEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété pour la gestion d'évènement</th> + <td>Aucune</td> + </tr> + </tbody> </table> -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="Html">Html</h3> +### Html -<pre class="brush: html"><div class="control"> - <label for="name">Sur macOS, cliquez sur la boîte de texte,<br> puis appuyez sur <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd>:</label> - <input type="text" id="example" name="example"> -</div> +```html +<div class="control"> + <label for="name">Sur macOS, cliquez sur la boîte de texte,<br> puis appuyez sur <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd>:</label> + <input type="text" id="example" name="example"> +</div> -<div class="event-log"> - <label>Log d'événement:</label> - <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> - <button class="clear-log">Effacer</button> -</div></pre> +<div class="event-log"> + <label>Log d'événement:</label> + <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> + <button class="clear-log">Effacer</button> +</div> +``` -<pre class="brush: css hidden">body { +```css hidden +body { padding: .2rem; display: grid; grid-template-areas: "control log"; @@ -75,15 +78,16 @@ kbd { padding: 1px 2px 0; border: 1px solid black; } -</pre> +``` -<h3 id="JS">JS</h3> +### JS -<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); +```js +const inputElement = document.querySelector('input[type="text"]'); const log = document.querySelector('.event-log-contents'); const clearLog = document.querySelector('.clear-log'); -clearLog.addEventListener('click', () => { +clearLog.addEventListener('click', () => { log.textContent = ''; }); @@ -93,36 +97,24 @@ function handleEvent(event) { inputElement.addEventListener('compositionstart', handleEvent); inputElement.addEventListener('compositionupdate', handleEvent); -inputElement.addEventListener('compositionend', handleEvent);</pre> - -<h3 id="Resultat">Resultat</h3> - -<p>{{ EmbedLiveSample('Exemple', '100%', '180px') }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('UI Events', '#event-type-compositionend')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - </tbody> -</table> +inputElement.addEventListener('compositionend', handleEvent); +``` + +### Resultat + +{{ EmbedLiveSample('Exemple', '100%', '180px') }} + +## Spécifications + +| Spécification | Status | +| ------------------------------------------------------------------------ | ---------------------------- | +| {{SpecName('UI Events', '#event-type-compositionend')}} | {{Spec2('UI Events')}} | -<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2> +## Compatibilités navigateurs -<p>{{Compat("api.Element.compositionend_event")}}</p> +{{Compat("api.Element.compositionend_event")}} -<h2 id="Evénements_liés">Evénements liés</h2> +## Evénements liés -<ul> - <li>{{Event("compositionstart")}}</li> - <li>{{Event("compositionupdate")}}</li> -</ul> +- {{Event("compositionstart")}} +- {{Event("compositionupdate")}} diff --git a/files/fr/web/api/element/compositionstart_event/index.md b/files/fr/web/api/element/compositionstart_event/index.md index 4de27018bc..b1370d4893 100644 --- a/files/fr/web/api/element/compositionstart_event/index.md +++ b/files/fr/web/api/element/compositionstart_event/index.md @@ -10,11 +10,11 @@ tags: translation_of: Web/API/Element/compositionstart_event original_slug: Web/Events/compositionstart --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'événement <strong><code>compositionstart</code></strong> est déclenché lorsqu'un système de composition de texte tel qu'une {{glossary("input method editor","méthode de saisie")}} démarre une nouvelle session de composition.</p> +L'événement **`compositionstart`** est déclenché lorsqu'un système de composition de texte tel qu'une {{glossary("input method editor","méthode de saisie")}} démarre une nouvelle session de composition. -<p>Par exemple, cet événement pourrait être déclenché après qu'un utilisateur a commencé à saisir un caractère chinois en utilisant un <a href="https://en.wikipedia.org/wiki/Pinyin">Pinyin</a> IME.</p> +Par exemple, cet événement pourrait être déclenché après qu'un utilisateur a commencé à saisir un caractère chinois en utilisant un [Pinyin](https://en.wikipedia.org/wiki/Pinyin) IME. <table class="properties"> <tbody> @@ -37,30 +37,35 @@ original_slug: Web/Events/compositionstart </tbody> </table> -<h2 id="Examples">Exemples</h2> +## Exemples -<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); +```js +const inputElement = document.querySelector('input[type="text"]'); -inputElement.addEventListener('compositionstart', (event) => { +inputElement.addEventListener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); -});</pre> +}); +``` -<h3 id="Live_example">Exemple concret</h3> +### Exemple concret -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><div class="control"> - <label for="name">Sur macOS, cliquez dans la zone de texte ci-dessous,<br> puis tapez <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd> :</label> - <input type="text" id="example" name="example"> -</div> +```html +<div class="control"> + <label for="name">Sur macOS, cliquez dans la zone de texte ci-dessous,<br> puis tapez <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd> :</label> + <input type="text" id="example" name="example"> +</div> -<div class="event-log"> - <label>Event log:</label> - <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> - <button class="clear-log">Clear</button> -</div></pre> +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> + <button class="clear-log">Clear</button> +</div> +``` -<pre class="brush: css hidden">body { +```css hidden +body { padding: .2rem; display: grid; grid-template-areas: "control log"; @@ -91,15 +96,16 @@ kbd { padding: 1px 2px 0; border: 1px solid black; } -</pre> +``` -<h4 id="JS">JS</h4> +#### JS -<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); +```js +const inputElement = document.querySelector('input[type="text"]'); const log = document.querySelector('.event-log-contents'); const clearLog = document.querySelector('.clear-log'); -clearLog.addEventListener('click', () => { +clearLog.addEventListener('click', () => { log.textContent = ''; }); @@ -110,35 +116,22 @@ function handleEvent(event) { inputElement.addEventListener('compositionstart', handleEvent); inputElement.addEventListener('compositionupdate', handleEvent); inputElement.addEventListener('compositionend', handleEvent); -</pre> +``` -<h4 id="Result">Résultat</h4> +#### Résultat -<p>{{ EmbedLiveSample('Live_example', '100%', '180px') }}</p> +{{ EmbedLiveSample('Live_example', '100%', '180px') }} -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('UI Events', '#event-type-compositionstart')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | +| ---------------------------------------------------------------------------- | ---------------------------- | +| {{SpecName('UI Events', '#event-type-compositionstart')}} | {{Spec2('UI Events')}} | -<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> +## Compatibilités navigateur -<p>{{Compat("api.Element.compositionstart_event")}}</p> +{{Compat("api.Element.compositionstart_event")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>Événements liés : {{domxref("Element/compositionend_event", "compositionend")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}.</li> -</ul> +- Événements liés : {{domxref("Element/compositionend_event", "compositionend")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}. diff --git a/files/fr/web/api/element/compositionupdate_event/index.md b/files/fr/web/api/element/compositionupdate_event/index.md index f0ae9bc134..06c5973e57 100644 --- a/files/fr/web/api/element/compositionupdate_event/index.md +++ b/files/fr/web/api/element/compositionupdate_event/index.md @@ -4,83 +4,38 @@ slug: Web/API/Element/compositionupdate_event translation_of: Web/API/Element/compositionupdate_event original_slug: Web/Events/compositionupdate --- -<p>L'événement <strong>compositionupdate</strong> est déclenché lorsqu'un caractère est ajouté à un passage de texte en train d'être composé (<code>démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile).</code></p> +L'événement **compositionupdate** est déclenché lorsqu'un caractère est ajouté à un passage de texte en train d'être composé (`démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile).` -<h2 id="Informations_générales">Informations générales</h2> +## Informations générales -<dl> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd> -</dl> +- Interface + - : {{domxref("TouchEvent")}} +- Propagation + - : Oui +- Annulable + - : Non +- Cible + - : {{domxref("Element")}} -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{ReadOnlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>Elément ayant le focus qui traite la composition. Nul si non-accessible.</td> - </tr> - <tr> - <td><code>type</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Le type de l'événement.</td> - </tr> - <tr> - <td><code>bubbles</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>Est-ce qu'il se propage?</td> - </tr> - <tr> - <td><code>cancelable</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>Peut-il être annulé?</td> - </tr> - <tr> - <td><code>view</code> {{ReadOnlyInline}}</td> - <td>{{domxref("WindowProxy")}}</td> - <td>{{domxref("Document.defaultView")}} (fenêtre du document).</td> - </tr> - <tr> - <td><code>detail</code> {{ReadOnlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - <tr> - <td><code>data </code>{{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}} (string)</td> - <td>La chaîne de caractères originale éditée ou une chaîne vide.</td> - </tr> - <tr> - <td><code>locale </code>{{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}} (string)</td> - <td>Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide.</td> - </tr> - </tbody> -</table> +| Property | Type | Description | +| ------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------ | +| `target` {{ReadOnlyInline}} | {{domxref("EventTarget")}} | Elément ayant le focus qui traite la composition. Nul si non-accessible. | +| `type` {{ReadOnlyInline}} | {{domxref("DOMString")}} | Le type de l'événement. | +| `bubbles` {{ReadOnlyInline}} | `boolean` | Est-ce qu'il se propage? | +| `cancelable` {{ReadOnlyInline}} | `boolean` | Peut-il être annulé? | +| `view` {{ReadOnlyInline}} | {{domxref("WindowProxy")}} | {{domxref("Document.defaultView")}} (fenêtre du document). | +| `detail` {{ReadOnlyInline}} | `long` (`float`) | 0. | +| `data `{{ReadOnlyInline}} | {{domxref("DOMString")}} (string) | La chaîne de caractères originale éditée ou une chaîne vide. | +| `locale `{{ReadOnlyInline}} | {{domxref("DOMString")}} (string) | Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide. | -<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> +## Compatibilités navigateur -<p>{{Compat("api.Element.compositionupdate_event")}}</p> +{{Compat("api.Element.compositionupdate_event")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{Event("compositionstart")}}</li> - <li>{{Event("compositionupdate")}}</li> - <li>{{Event("compositionend")}}</li> -</ul> +- {{Event("compositionstart")}} +- {{Event("compositionupdate")}} +- {{Event("compositionend")}} diff --git a/files/fr/web/api/element/contextmenu_event/index.md b/files/fr/web/api/element/contextmenu_event/index.md index 28b416e62e..96d593fcfb 100644 --- a/files/fr/web/api/element/contextmenu_event/index.md +++ b/files/fr/web/api/element/contextmenu_event/index.md @@ -10,95 +10,83 @@ tags: - contextemenu translation_of: Web/API/Element/contextmenu_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'évènement <strong><code>contextmenu</code></strong> est déclenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel.</p> +L'évènement **`contextmenu`** est déclenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel. -<p>Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante.</p> +Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante. -<p>Tout évènement de clic-droit qui n'est pas désactivé (via {{domxref("Event.preventDefault", "preventDefault()")}}) entraînera le déclenchement d'un évènement <code>contextmenu</code> sur l'élément cible.</p> +Tout évènement de clic-droit qui n'est pas désactivé (via {{domxref("Event.preventDefault", "preventDefault()")}}) entraînera le déclenchement d'un évènement `contextmenu` sur l'élément cible. <table class="properties"> - <tbody> - <tr> - <th>Se propage/remonte dans le DOM</th> - <td>Oui</td> - </tr> - <tr> - <th>Annulable</th> - <td>Oui</td> - </tr> - <tr> - <th>Interface</th> - <td>{{DOMxRef("MouseEvent")}}</td> - </tr> - <tr> - <th>Propriété pour la gestion d'évènement</th> - <td>{{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th>Se propage/remonte dans le DOM</th> + <td>Oui</td> + </tr> + <tr> + <th>Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th>Interface</th> + <td>{{DOMxRef("MouseEvent")}}</td> + </tr> + <tr> + <th>Propriété pour la gestion d'évènement</th> + <td> + {{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}} + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans cet exemple, on annule l'action par défaut de l'évènement <code>contextmenu</code> avec <code>preventDefault()</code> lorsque l'évènement est déclenché depuis le premier paragraphe. Ainsi, rien ne se produira lorsqu'on utilisera un clic-droit sur le premier paragraphe tandis que le menu contextuel habituel s'affichera bien pour le second paragraphe.</p> +Dans cet exemple, on annule l'action par défaut de l'évènement `contextmenu` avec `preventDefault()` lorsque l'évènement est déclenché depuis le premier paragraphe. Ainsi, rien ne se produira lorsqu'on utilisera un clic-droit sur le premier paragraphe tandis que le menu contextuel habituel s'affichera bien pour le second paragraphe. -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p id="noContextMenu">Le menu contextuel a été désactivé sur ce paragraphe.</p> -<p>Mais pas sur celui-ci.</p></pre> +```html +<p id="noContextMenu">Le menu contextuel a été désactivé sur ce paragraphe.</p> +<p>Mais pas sur celui-ci.</p> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">noContext = document.getElementById('noContextMenu'); +```js +noContext = document.getElementById('noContextMenu'); -noContext.addEventListener('contextmenu', e => { +noContext.addEventListener('contextmenu', e => { e.preventDefault(); }); -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('HTML WHATWG', 'indices.html#event-contextmenu', 'contextmenu')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{ SpecName('HTML WHATWG', 'indices.html#event-contextmenu', 'contextmenu')}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.Element.contextmenu_event")}} + +## Voir aussi + +- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements) +- D'autres évènements connexes -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.contextmenu_event")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li> - <li>D'autres évènements connexes - <ul> - <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li> - <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li> - <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li> - </ul> - </li> -</ul> + - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) + - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) + - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) + - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event) + - [`click`](/fr/docs/Web/API/Element/click_event) + - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event) + - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) + - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) + - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) diff --git a/files/fr/web/api/element/copy_event/index.md b/files/fr/web/api/element/copy_event/index.md index d4b370823a..042a046235 100644 --- a/files/fr/web/api/element/copy_event/index.md +++ b/files/fr/web/api/element/copy_event/index.md @@ -4,104 +4,63 @@ slug: Web/API/Element/copy_event translation_of: Web/API/Element/copy_event original_slug: Web/Events/copy --- -<p>L'événement <strong>copy</strong> est déclenché lorsque l'utilisateur initie une copie par le biais de l'interface du navigateur (par exemple, Ctrl/Cmd+C ou "copier" du menu contextuel) et en réponse d'un appel de {{domxref("Document.execCommand", "document.execCommand('copy')")}} autorisé.</p> +L'événement **copy** est déclenché lorsque l'utilisateur initie une copie par le biais de l'interface du navigateur (par exemple, Ctrl/Cmd+C ou "copier" du menu contextuel) et en réponse d'un appel de {{domxref("Document.execCommand", "document.execCommand('copy')")}} autorisé. -<h2 id="Informations_générales">Informations générales</h2> +## Informations générales -<dl> - <dt>Spécification</dt> - <dd><a href="https://www.w3.org/TR/clipboard-apis/#the-copy-action">Clipboard</a></dd> - <dt>Interface</dt> - <dd>{{domxref("ClipboardEvent")}}</dd> - <dt>Propagation</dt> - <dd>Oui</dd> - <dt>Annulable</dt> - <dd>Oui</dd> - <dt>Cible</dt> - <dd>{{domxref("Element")}}: L'élément ayant le focus (pour les éléments {{domxref("HTMLElement.contentEditable", "contentEditable")}} - l'élément contenant le début de la sélection), ou l'élément {{HTMLElement("body")}}</dd> - <dt>Action par défaut</dt> - <dd>Voir ce-dessous</dd> -</dl> +- Spécification + - : [Clipboard](https://www.w3.org/TR/clipboard-apis/#the-copy-action) +- Interface + - : {{domxref("ClipboardEvent")}} +- Propagation + - : Oui +- Annulable + - : Oui +- Cible + - : {{domxref("Element")}}: L'élément ayant le focus (pour les éléments {{domxref("HTMLElement.contentEditable", "contentEditable")}} - l'élément contenant le début de la sélection), ou l'élément {{HTMLElement("body")}} +- Action par défaut + - : Voir ce-dessous -<p>Un gestionnaire de cet événement peut modifier l'objet {{domxref("ClipboardEvent.clipboardData")}} en appellant {{domxref("DataTransfer.setData", "setData(format, data)")}}:</p> +Un gestionnaire de cet événement peut modifier l'objet {{domxref("ClipboardEvent.clipboardData")}} en appellant {{domxref("DataTransfer.setData", "setData(format, data)")}}: -<pre class="brush: js">document.addEventListener('copy', function(e){ +```js +document.addEventListener('copy', function(e){ e.clipboardData.setData('text/plain', 'Hello, world!'); - e.clipboardData.setData('text/html', '<b>Hello, world!</b>'); + e.clipboardData.setData('text/html', '<b>Hello, world!</b>'); e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard -});</pre> +}); +``` -<p>Un gestionnaire de cet événement ne peut pas lire les données du presse-papiers en utilisant {{domxref("DataTransfer.getData", "clipboardData.getData()")}}.</p> +Un gestionnaire de cet événement ne peut pas lire les données du presse-papiers en utilisant {{domxref("DataTransfer.getData", "clipboardData.getData()")}}. -<p>L'action par défaut de l'événement dépend de la source de celui-ci et du comportement du gestionnaire:</p> +L'action par défaut de l'événement dépend de la source de celui-ci et du comportement du gestionnaire: -<ul> - <li>Un événement de copie <a href="/fr/docs/Web/Guide/Events/Creating_and_triggering_events">synthétique</a> n'a pas d'action par défaut;</li> - <li>Si l'événement n'a pas été annulé: Copie de la sélection (s'il y a) dans le presse-papiers;</li> - <li>Si le gestionnaire a annulé l'événement et appelé setData(): Copie le contenu de <em>clipboardData</em> de {{domxref("ClipboardEvent")}};</li> - <li>Si le gestionnaire a annulé l'événement sans appelé setData(): Aucune action.</li> -</ul> +- Un événement de copie [synthétique](/fr/docs/Web/Guide/Events/Creating_and_triggering_events) n'a pas d'action par défaut; +- Si l'événement n'a pas été annulé: Copie de la sélection (s'il y a) dans le presse-papiers; +- Si le gestionnaire a annulé l'événement et appelé setData(): Copie le contenu de _clipboardData_ de {{domxref("ClipboardEvent")}}; +- Si le gestionnaire a annulé l'événement sans appelé setData(): Aucune action. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> +| Property | Type | Description | +| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Clipboard API', '#clipboard-event-copy')}}</td> - <td>{{Spec2('Clipboard API')}}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | +| ------------------------------------------------------------------------ | ------------------------------------ | +| {{SpecName('Clipboard API', '#clipboard-event-copy')}} | {{Spec2('Clipboard API')}} | -<h2 id="Browser_compatibility">Compatibilités navigateur</h2> +## Compatibilités navigateur -<p>{{Compat("api.Element.copy_event")}}</p> +{{Compat("api.Element.copy_event")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>Événements relatifs : {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/paste_event", "paste")}}</li> - <li>Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/copy_event", "copy")}}</li> - <li>Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/copy_event", "copy")}}</li> -</ul> -
\ No newline at end of file +- Événements relatifs : {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/paste_event", "paste")}} +- Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/copy_event", "copy")}} +- Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/copy_event", "copy")}} diff --git a/files/fr/web/api/element/dblclick_event/index.md b/files/fr/web/api/element/dblclick_event/index.md index 9f82b49bd9..7c17db5238 100644 --- a/files/fr/web/api/element/dblclick_event/index.md +++ b/files/fr/web/api/element/dblclick_event/index.md @@ -10,55 +10,62 @@ tags: - dblclick translation_of: Web/API/Element/dblclick_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'évènement <strong><code>dblclick</code></strong> se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court).</p> +L'évènement **`dblclick`** se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court). -<p><code>dblclick</code> se déclenche après deux évènements {{domxref("Element/click_event", "click")}} (et, par extension, après deux paires d'évènements {{domxref("Element.mousedown_event", "mousedown")}} et {{domxref("Element.mouseup_event", "mouseup")}}).</p> +`dblclick` se déclenche après deux évènements {{domxref("Element/click_event", "click")}} (et, par extension, après deux paires d'évènements {{domxref("Element.mousedown_event", "mousedown")}} et {{domxref("Element.mouseup_event", "mouseup")}}). <table class="properties"> - <tbody> - <tr> - <th scope="row">Se propage/remonte dans le DOM</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété pour la gestion d'évènements</th> - <td>{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Se propage/remonte dans le DOM</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété pour la gestion d'évènements</th> + <td> + {{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}} + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans cet exemple, on modifie la taille d'une tuile lorsqu'on double-clique dessus.</p> +Dans cet exemple, on modifie la taille d'une tuile lorsqu'on double-clique dessus. -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">const card = document.querySelector('aside'); +```js +const card = document.querySelector('aside'); card.addEventListener('dblclick', function (e) { card.classList.toggle('large'); -});</pre> +}); +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><aside> - <h3>Une tuile</h3> - <p>Double-cliquer pour redimensionner cet objet.</p> -</aside></pre> +```html +<aside> + <h3>Une tuile</h3> + <p>Double-cliquer pour redimensionner cet objet.</p> +</aside> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">aside { +```css +aside { background: #fe9; border-radius: 1em; display: inline-block; @@ -70,50 +77,35 @@ card.addEventListener('dblclick', function (e) { .large { transform: scale(1.3); -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples", 700, 200)}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - </tr> - <tr> - <td>{{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </tbody> -</table> +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples", 700, 200)}} + +## Spécifications + +| Spécification | État | +| ------------------------------------------------------------------------------------ | -------------------------------- | +| {{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}} | {{Spec2('UI Events')}} | +| {{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}} | {{Spec2('DOM3 Events')}} | + +## Compatibilité des navigateurs + +{{Compat("api.Element.dblclick_event")}} + +## Voir aussi + +- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements) +- D'autres évènements connexes -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.dblclick_event")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li> - <li>D'autres évènements connexes - <ul> - <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></li> - <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li> - <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li> - </ul> - </li> -</ul> + - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) + - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) + - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) + - [mouseover](/fr/docs/Web/API/Element/mouseover_event) + - [`click`](/fr/docs/Web/API/Element/click_event) + - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) + - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) + - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) + - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) diff --git a/files/fr/web/api/element/error_event/index.md b/files/fr/web/api/element/error_event/index.md index 8c17b86401..1f0a577102 100644 --- a/files/fr/web/api/element/error_event/index.md +++ b/files/fr/web/api/element/error_event/index.md @@ -10,82 +10,45 @@ tags: translation_of: Web/API/Element/error_event original_slug: Web/Events/error --- -<p>L'événement <strong>error</strong> <em>(erreur)</em> est déclenché lorsqu'une ressource n'a pas pu être chargée ; les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API.</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt>Spécification</dt> - <dd><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></dd> - <dt>Interface</dt> - <dd>{{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> et sinon {{domxref("Event")}}.</dd> - <dt>Propagation</dt> - <dd>Non</dd> - <dt>Annulable</dt> - <dd>Non</dd> - <dt>Cible</dt> - <dd>{{domxref("Element")}}</dd> - <dt>Action par défaut</dt> - <dd>Aucune</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - </tbody> -</table> - -<h3 id="Pour_des_évènements_MediaStream_Recording">Pour des évènements MediaStream Recording</h3> - -<p>Ces évènements sont d'un type {{domxref("MediaRecorderErrorEvent")}}.</p> - -<p>{{page("/en-US/docs/Web/API/MediaRecorderErrorEvent", "Properties")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> - <dd>Évènements envoyés à {{domxref("Window.onerror")}} et à {{domxref("Element.onerror")}}</dd> - <dt>{{domxref("HTMLMediaElement.onerror")}}</dt> - <dd>Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}} et {{HTMLElement("video")}} .</dd> - <dt>{{domxref("MediaRecorder.onerror")}}</dt> - <dd>Évènements envoyés à {{domxref("MediaRecorder.onerror")}} , d'un type {{domxref("MediaRecorderErrorEvent")}}</dd> -</dl> +L'événement **error** _(erreur)_ est déclenché lorsqu'une ressource n'a pas pu être chargée ; les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API. + +## Informations générales + +- Spécification + - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error) +- Interface + - : {{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API) et sinon {{domxref("Event")}}. +- Propagation + - : Non +- Annulable + - : Non +- Cible + - : {{domxref("Element")}} +- Action par défaut + - : Aucune + +## Propriétés + +| Property | Type | Description | +| ------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------- | +| `target` {{readonlyInline}} | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The event target (the topmost target in the DOM tree). | +| `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | The type of event. | +| `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event is cancellable or not. | +| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document) | +| `detail` {{readonlyInline}} | `long` (`float`) | 0. | + +### Pour des évènements MediaStream Recording + +Ces évènements sont d'un type {{domxref("MediaRecorderErrorEvent")}}. + +{{page("/en-US/docs/Web/API/MediaRecorderErrorEvent", "Properties")}} + +## Voir aussi + +- {{domxref("GlobalEventHandlers.onerror")}} + - : Évènements envoyés à {{domxref("Window.onerror")}} et à {{domxref("Element.onerror")}} +- {{domxref("HTMLMediaElement.onerror")}} + - : Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}} et {{HTMLElement("video")}} . +- {{domxref("MediaRecorder.onerror")}} + - : Évènements envoyés à {{domxref("MediaRecorder.onerror")}} , d'un type {{domxref("MediaRecorderErrorEvent")}} diff --git a/files/fr/web/api/element/focusin_event/index.md b/files/fr/web/api/element/focusin_event/index.md index 4930d87a2e..6a6a6f66de 100644 --- a/files/fr/web/api/element/focusin_event/index.md +++ b/files/fr/web/api/element/focusin_event/index.md @@ -4,73 +4,40 @@ slug: Web/API/Element/focusin_event translation_of: Web/API/Element/focusin_event original_slug: Web/Events/focusin --- -<p>L'événement <strong>focusin</strong> est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec <a href="/fr/docs/Mozilla_event_reference/focus_%28event%29"><code>focus</code></a> est que <strong>focusin</strong> se propage.</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>Event target losing focus.</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>relatedTarget</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}} (DOM element)</td> - <td>Event target receiving focus.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2> - -<p>{{Compat("api.Element.focusin_event")}}</p> - -<h2 id="Evénements_liés">Evénements liés</h2> - -<ul> - <li>{{event("focus")}}</li> - <li>{{event("blur")}}</li> - <li>{{event("focusin")}}</li> - <li>{{event("focusout")}}</li> -</ul> +L'événement **focusin** est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec [`focus`](/fr/docs/Mozilla_event_reference/focus_%28event%29) est que **focusin** se propage. + +## Informations générales + +- Spécification + - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn) +- Interface + - : {{domxref("FocusEvent")}} +- Propagation + - : Oui +- Annulable + - : Non +- Cible + - : {{domxref("Element")}} +- Action par défaut + - : Aucune + +## Propriétés + +| Property | Type | Description | +| ---------------------------------------- | -------------------------------------------------- | ------------------------------------------ | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | Event target losing focus. | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | +| `relatedTarget` {{readonlyInline}} | {{domxref("EventTarget")}} (DOM element) | Event target receiving focus. | + +## Compatibilité navigateur + +{{Compat("api.Element.focusin_event")}} + +## Evénements liés + +- {{event("focus")}} +- {{event("blur")}} +- {{event("focusin")}} +- {{event("focusout")}} diff --git a/files/fr/web/api/element/focusout_event/index.md b/files/fr/web/api/element/focusout_event/index.md index 382060c404..366b9dbfbf 100644 --- a/files/fr/web/api/element/focusout_event/index.md +++ b/files/fr/web/api/element/focusout_event/index.md @@ -4,73 +4,40 @@ slug: Web/API/Element/focusout_event translation_of: Web/API/Element/focusout_event original_slug: Web/Events/focusout --- -<p>L'évènement <code><strong>focusout</strong> </code>est déclenché lorsqu'un élément du DOM est sur le point de perdre le focus. La différence principale entre cet événement et <a href="/en-US/docs/Mozilla_event_reference/blur_(event)">blur</a> est que ce dernier ne se propage pas.</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>Event target losing focus.</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>relatedTarget</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}} (DOM element)</td> - <td>Event target receiving focus.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.focusout_event")}}</p> - -<h2 id="Evénements_liés">Evénements liés</h2> - -<ul> - <li>{{event("focus")}}</li> - <li>{{event("blur")}}</li> - <li>{{event("focusin")}}</li> - <li>{{event("focusout")}}</li> -</ul> +L'évènement `focusout `est déclenché lorsqu'un élément du DOM est sur le point de perdre le focus. La différence principale entre cet événement et [blur](</en-US/docs/Mozilla_event_reference/blur_(event)>) est que ce dernier ne se propage pas. + +## Informations générales + +- Spécification + - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout) +- Interface + - : {{domxref("FocusEvent")}} +- Propagation + - : Oui +- Annulable + - : Non +- Cible + - : {{domxref("Element")}} +- Action par défaut + - : Aucune + +## Propriétés + +| Property | Type | Description | +| ---------------------------------------- | -------------------------------------------------- | ------------------------------------------ | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | Event target losing focus. | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | +| `relatedTarget` {{readonlyInline}} | {{domxref("EventTarget")}} (DOM element) | Event target receiving focus. | + +## Compatibilité des navigateurs + +{{Compat("api.Element.focusout_event")}} + +## Evénements liés + +- {{event("focus")}} +- {{event("blur")}} +- {{event("focusin")}} +- {{event("focusout")}} diff --git a/files/fr/web/api/element/getattribute/index.md b/files/fr/web/api/element/getattribute/index.md index e0aa50f459..410b54fe7a 100644 --- a/files/fr/web/api/element/getattribute/index.md +++ b/files/fr/web/api/element/getattribute/index.md @@ -10,76 +10,78 @@ tags: - Reference translation_of: Web/API/Element/getAttribute --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p><code>getAttribute</code> renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit <code>null</code> soit <code>""</code> (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails.</p> +`getAttribute` renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit `null` soit `""` (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>let attribut</em> = element.getAttribute(<em>nom_attribut</em>) -</pre> + let attribut = element.getAttribute(nom_attribut) -<p>où</p> +où -<ul> - <li><code><em>attribut</em></code> est une chaine contenant la valeur de l'attribut <code><em>nom_attribut</em></code>.</li> - <li><code><em>nom_attribut</em></code> est le nom de l'attribut dont on désire connaitre la valeur.</li> -</ul> +- `attribut` est une chaine contenant la valeur de l'attribut `nom_attribut`. +- `nom_attribut` est le nom de l'attribut dont on désire connaitre la valeur. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Soit l'HTML :</p> +Soit l'HTML : -<pre class="notranslate">const div1 = document.getElementById("div1");</pre> + const div1 = document.getElementById("div1"); -<p>Exemple de JavaScript :</p> +Exemple de JavaScript : -<pre class="eval">const div1 = document.getElementById("div1"); -//=> <div id="div1">Hi Champ!</div> + const div1 = document.getElementById("div1"); + //=> <div id="div1">Hi Champ!</div> -const attributID = div1.getAttribute("id"); -//=> "div1" + const attributID = div1.getAttribute("id"); + //=> "div1" -cont alignement = div1.getAttribute("align"); -//=> null -</pre> + cont alignement = div1.getAttribute("align"); + //=> null -<h2 id="Notes">Description</h2> +## Description -<h3 id="Sensibilité_à_la_casse">Sensibilité à la casse</h3> +### Sensibilité à la casse -<p>Le paramètre <code>nom_attribut</code> est généralement sensible à la casse, mais ne l'est pas lorsqu'il est utilisé sur des éléments HTML.</p> +Le paramètre `nom_attribut` est généralement sensible à la casse, mais ne l'est pas lorsqu'il est utilisé sur des éléments HTML. -<h3 id="Attributs_inexistants">Attributs inexistants</h3> +### Attributs inexistants -<p>À peu près tous les navigateurs (Firefox, Internet Explorer, Opera, Safari, Konqueror et iCab, sans que cette liste soit exhaustive) renvoient <code>null</code> lorsque l'attribut demandé n'existe pas sur l'élément spécifié. La spécification DOM indique cependant que la valeur de retour correcte dans ce cas est en fait la chaine vide <code>""</code>, et certaines implémentation DOM auront ce comportement. Par conséquent, vous devriez utiliser {{domxref("element.hasAttribute()")}} pour vérifier l'existence d'un attribut avant d'appeler <code>getAttribute()</code> s'il est possible que l'attribut n'existe pas sur l'élément spécifié.</p> +À peu près tous les navigateurs (Firefox, Internet Explorer, Opera, Safari, Konqueror et iCab, sans que cette liste soit exhaustive) renvoient `null` lorsque l'attribut demandé n'existe pas sur l'élément spécifié. La spécification DOM indique cependant que la valeur de retour correcte dans ce cas est en fait la chaine vide `""`, et certaines implémentation DOM auront ce comportement. Par conséquent, vous devriez utiliser {{domxref("element.hasAttribute()")}} pour vérifier l'existence d'un attribut avant d'appeler `getAttribute()` s'il est possible que l'attribut n'existe pas sur l'élément spécifié. -<h3 id="Récupération_de_nonces">Récupération de nonces</h3> +### Récupération de nonces -<p>Pour des raisons de sécurité, les <em>nonces</em> <a href="/fr/docs/Web/HTTP/CSP">CSP</a> des sources autres que des scripts, telles que les feuilles de style CSS, et les appels <code>.getAttribute("nonce")</code> sont interdits.</p> +Pour des raisons de sécurité, les _nonces_ [CSP](/fr/docs/Web/HTTP/CSP) des sources autres que des scripts, telles que les feuilles de style CSS, et les appels `.getAttribute("nonce")` sont interdits. -<pre class="brush: js example-bad">let nonce = script.getAttribute("nonce"); -// renvoie une chaine vide</pre> +```js example-bad +let nonce = script.getAttribute("nonce"); +// renvoie une chaine vide +``` -<p>Plutôt que de tenter de lire le <em>nonce</em> via l’attribut, utilisez la propriété {{domxref("HTMLOrForeignElement/nonce", "nonce")}} :</p> +Plutôt que de tenter de lire le _nonce_ via l’attribut, utilisez la propriété {{domxref("HTMLOrForeignElement/nonce", "nonce")}} : -<pre class="brush: js">let nonce = script.nonce;</pre> +```js +let nonce = script.nonce; +``` -<h2 id="Sp.C3.A9cification">Spécifications</h2> +## Spécifications <table class="standard-table"> - <tbody> - <tr> - <td><strong>Spécification</strong></td> - <td><strong>État</strong></td> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-element-getattribute','getAttribute()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>Spécification</strong></td> + <td><strong>État</strong></td> + </tr> + <tr> + <td> + {{SpecName('DOM WHATWG','#dom-element-getattribute','getAttribute()')}} + </td> + <td>{{Spec2('DOM WHATWG')}}</td> + </tr> + </tbody> </table> -<h2 id="Sp.C3.A9cification">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.Element.getAttribute")}}</div> +{{Compat("api.Element.getAttribute")}} diff --git a/files/fr/web/api/element/getattributenames/index.md b/files/fr/web/api/element/getattributenames/index.md index d99f4465fe..87f96635a6 100644 --- a/files/fr/web/api/element/getattributenames/index.md +++ b/files/fr/web/api/element/getattributenames/index.md @@ -9,58 +9,49 @@ tags: - Méthodes translation_of: Web/API/Element/getAttributeNames --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p><code>Element.getAttributeNames()</code> renvoie les noms des attributs de l'élément sous la forme d'un {{jsxref("Array")}} (<em>tableau</em>) de chaînes de caractères. Si l'élément n'a pas d'attributs, il retourne un tableau vide.</p> +`Element.getAttributeNames()` renvoie les noms des attributs de l'élément sous la forme d'un {{jsxref("Array")}} (_tableau_) de chaînes de caractères. Si l'élément n'a pas d'attributs, il retourne un tableau vide. -<p>L'utilisation de <code>getAttributeNames()</code> complété par {{domxref("Element.getAttribute","getAttribute()")}}, est une alternative efficiente et performante pour l'accès à {{domxref("Element.attributes")}}.</p> +L'utilisation de `getAttributeNames()` complété par {{domxref("Element.getAttribute","getAttribute()")}}, est une alternative efficiente et performante pour l'accès à {{domxref("Element.attributes")}}. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>let attributeNames</em> = element.getAttributeNames(); -</pre> + let attributeNames = element.getAttributeNames(); -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush:js">// Itérer sur les attributs de l'élément +```js +// Itérer sur les attributs de l'élément for(let name of element.getAttributeNames()) { let value = element.getAttribute(name); console.log(name, value); } -</pre> +``` -<h2 id="Polyfill">Polyfill</h2> +## Polyfill -<pre class="brush: html">if (Element.prototype.getAttributeNames == undefined) { +```html +if (Element.prototype.getAttributeNames == undefined) { Element.prototype.getAttributeNames = function () { var attributes = this.attributes; var length = attributes.length; var result = new Array(length); - for (var i = 0; i < length; i++) { + for (var i = 0; i < length; i++) { result[i] = attributes[i].name; } return result; }; -}</pre> +} +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}} | {{Spec2("DOM WHATWG")}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Element.getAttributeNames")}}</p> +{{Compat("api.Element.getAttributeNames")}} diff --git a/files/fr/web/api/element/getattributenode/index.md b/files/fr/web/api/element/getattributenode/index.md index 3fd3fd508d..f805ace861 100644 --- a/files/fr/web/api/element/getattributenode/index.md +++ b/files/fr/web/api/element/getattributenode/index.md @@ -10,42 +10,39 @@ tags: - Noeud translation_of: Web/API/Element/getAttributeNode --- -<p>{{ APIRef("DOM") }}</p> +{{ APIRef("DOM") }} -<h2 id="R.C3.A9sum.C3.A9">Résumé</h2> +## Résumé -<p>Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud <code>Attr</code>.</p> +Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud `Attr`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">var attrNode = element.getAttributeNode(attrName);</pre> +```js +var attrNode = element.getAttributeNode(attrName); +``` -<ul> - <li><code>attrNode</code> est un nœud <code>Attr</code> pour l'attribut demandé.</li> - <li><code>attrName</code> est une chaîne de caractères qui contient le nom de l'attribut.</li> -</ul> +- `attrNode` est un nœud `Attr` pour l'attribut demandé. +- `attrName` est une chaîne de caractères qui contient le nom de l'attribut. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre>// html: <div id="top" /> -var t = document.getElementById("top"); -var idAttr = t.getAttributeNode("id"); -alert(idAttr.value == "top") -</pre> + // html: <div id="top" /> + var t = document.getElementById("top"); + var idAttr = t.getAttributeNode("id"); + alert(idAttr.value == "top") -<h2 id="Notes">Notes</h2> +## Notes -<p>Lorsqu'elle est appelée sur un élément HTML dans un DOM marqué comme un document HTML, <code>getAttributeNode</code> passe en minuscules son argument avant de continuer.</p> +Lorsqu'elle est appelée sur un élément HTML dans un DOM marqué comme un document HTML, `getAttributeNode` passe en minuscules son argument avant de continuer. -<p>Les nœuds <code>Attr</code> héritent de <code>Node</code>, mais ne sont pas considérés comme faisant partie de l'arbre du document. Les attributs habituels des nœuds comme <a href="fr/DOM/element.parentNode">parentNode</a>, <a href="fr/DOM/element.previousSibling">previousSibling</a>, et <a href="fr/DOM/element.nextSibling">nextSibling</a> sont <code>null</code> pour un nœud <code>Attr</code>. Vous pouvez cependant accéder à l'élément auquel cet attribut appartient grâce à la propriété <code>ownerElement</code>.</p> +Les nœuds `Attr` héritent de `Node`, mais ne sont pas considérés comme faisant partie de l'arbre du document. Les attributs habituels des nœuds comme [parentNode](fr/DOM/element.parentNode), [previousSibling](fr/DOM/element.previousSibling), et [nextSibling](fr/DOM/element.nextSibling) sont `null` pour un nœud `Attr`. Vous pouvez cependant accéder à l'élément auquel cet attribut appartient grâce à la propriété `ownerElement`. -<p><a href="fr/DOM/element.getAttribute">getAttribute</a> est habituellement utilisé à la place de <code>getAttributeNode</code> pour obtenir la valeur d'un attribut d'un élément.</p> +[getAttribute](fr/DOM/element.getAttribute) est habituellement utilisé à la place de `getAttributeNode` pour obtenir la valeur d'un attribut d'un élément. -<p>{{ DOMAttributeMethods() }}</p> +{{ DOMAttributeMethods() }} -<h2 id="Sp.C3.A9cification">Spécification</h2> +## Spécification -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8">DOM Level 2 Core : getAttributeNode</a> — <small><a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8">traduction en français</a> (non normative)</small></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> -</ul>
\ No newline at end of file +- [DOM Level 2 Core : getAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8) (non normative) +- [HTML 5: APIs in HTML documents](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents) diff --git a/files/fr/web/api/element/getattributenodens/index.md b/files/fr/web/api/element/getattributenodens/index.md index a9a9a56f60..0a4b46bb5b 100644 --- a/files/fr/web/api/element/getattributenodens/index.md +++ b/files/fr/web/api/element/getattributenodens/index.md @@ -3,38 +3,33 @@ title: element.getAttributeNodeNS slug: Web/API/Element/getAttributeNodeNS translation_of: Web/API/Element/getAttributeNodeNS --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> +### Résumé -<p>Renvoie le nœud <code>Attr</code> pour l'attribut avec l'espace de noms et le nom donnés.</p> +Renvoie le nœud `Attr` pour l'attribut avec l'espace de noms et le nom donnés. -<h3 id="Syntaxe">Syntaxe</h3> +### Syntaxe -<pre class="eval"><em>attributeNode</em> = element.getAttributeNodeNS(<em>namespace</em>,<em>nodeName</em>) -</pre> + attributeNode = element.getAttributeNodeNS(namespace,nodeName) -<h3 id="Param.C3.A8tres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>attributeNode</code></dt> - <dd>Le nœud pour l'attribut spécifié.</dd> - <dt><code>namespace</code></dt> - <dd>Une chaîne spécifiant l'espace de noms de l'attribut.</dd> - <dt><code>nodeName</code></dt> - <dd>Une chaîne spécifiant le nom de l'attribut.</dd> -</dl> +- `attributeNode` + - : Le nœud pour l'attribut spécifié. +- `namespace` + - : Une chaîne spécifiant l'espace de noms de l'attribut. +- `nodeName` + - : Une chaîne spécifiant le nom de l'attribut. -<p>== Example == TBD The example needs to be fixed // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<a href="http://www.mozilla.org/ns/specialspace">http://www.mozilla.org/ns/specialspace</a>", "id"); // iNode.value = "full-top"</p> +\== Example == TBD The example needs to be fixed // html: \<div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<http://www.mozilla.org/ns/specialspace>", "id"); // iNode.value = "full-top" -<h3 id="Notes">Notes</h3> +### Notes -<p><code>getAttributeNodeNS</code> est plus spécifique que {{ domxref("Element.getAttributeNode") }} en ce qu'il permet de spécifier les attributs faisant partis d'un espace de noms particulier. La méthode de réglage correspondante est {{ domxref("Element.setAttributeNodeNS") }}.</p> +`getAttributeNodeNS` est plus spécifique que {{ domxref("Element.getAttributeNode") }} en ce qu'il permet de spécifier les attributs faisant partis d'un espace de noms particulier. La méthode de réglage correspondante est {{ domxref("Element.setAttributeNodeNS") }}. -<p>{{ DOMAttributeMethods() }}</p> +{{ DOMAttributeMethods() }} -<h3 id="Sp.C3.A9cification">Spécification</h3> +### Spécification -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">DOM Level 2 Core: getAttributeNodeNS (en)</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElGetAtNodeNS">traduction en français</a> (non normative)</small></li> -</ul>
\ No newline at end of file +- [DOM Level 2 Core: getAttributeNodeNS (en)](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElGetAtNodeNS) (non normative) diff --git a/files/fr/web/api/element/getattributens/index.md b/files/fr/web/api/element/getattributens/index.md index 6a5d33ddb7..39c6079fbe 100644 --- a/files/fr/web/api/element/getattributens/index.md +++ b/files/fr/web/api/element/getattributens/index.md @@ -8,117 +8,92 @@ tags: - Reference translation_of: Web/API/Element/getAttributeNS --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p><strong><code>getAttributeNS()</code></strong> est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit <code>null</code>, soit <code>""</code> (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails.</p> +**`getAttributeNS()`** est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit `null`, soit `""` (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>attrVal</em> =<em>element</em>.getAttributeNS(<em>namespace</em>,<em>name</em>) -</pre> + attrVal =element.getAttributeNS(namespace,name) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>namespace </code></dt> - <dd>L'espace de noms dans lequel rechercher l'attribut spécifié.</dd> - <dt><code>name </code></dt> - <dd>Le nom de l'attribut à chercher.</dd> -</dl> +- `namespace` + - : L'espace de noms dans lequel rechercher l'attribut spécifié. +- `name` + - : Le nom de l'attribut à chercher. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>La valeur de chaîne de caractères de l'attribut spécifié. Si l'attribut n'existe pas, le résultat est <code>null</code>.</p> +La valeur de chaîne de caractères de l'attribut spécifié. Si l'attribut n'existe pas, le résultat est `null`. -<div class="note"> -<p><strong>Note :</strong> Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens. La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants.</p> -</div> +> **Note :** Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens. La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Le document SVG suivant utilise une valeur d'attribut <code>foo</code> d'un espace de nom spécifique :</p> +Le document SVG suivant utilise une valeur d'attribut `foo` d'un espace de nom spécifique : -<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" - xmlns:test="http://www.example.com/2014/test" width="40" height="40"> +```xml +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:test="http://www.example.com/2014/test" width="40" height="40"> - <circle id="target" cx="12" cy="12" r="10" stroke="#444" - stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/> + <circle id="target" cx="12" cy="12" r="10" stroke="#444" + stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/> - <script type="text/javascript"> + <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getElementById( 'target' ); console.log( 'attribute test:foo: "' + circle.getAttributeNS( ns, 'foo' ) + '"' ); - </script> -</svg> -</pre> + </script> +</svg> +``` -<p>Dans un document HTML5, il faut utiliser <code>test:foo</code> pour accéder à l'attribut car les espaces de noms ne sont pas pris en charge.</p> +Dans un document HTML5, il faut utiliser `test:foo` pour accéder à l'attribut car les espaces de noms ne sont pas pris en charge. -<pre class="brush: html"><!DOCTYPE html> -<html> -<body> +```html +<!DOCTYPE html> +<html> +<body> -<svg xmlns="http://www.w3.org/2000/svg" - xmlns:test="http://www.example.com/2014/test" width="40" height="40"> - <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" - fill="none" test:foo="Foo value"/> -</svg> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:test="http://www.example.com/2014/test" width="40" height="40"> + <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" + fill="none" test:foo="Foo value"/> +</svg> -<script type="text/javascript"> +<script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getElementById( 'target' ); console.log('Attribute value: ' + circle.getAttribute('test:foo')); -</script> - -</body> -</html></pre> - -<h2 id="Notes">Notes</h2> - -<p>Les espaces de noms sont uniquement pris en charge dans les documents XML, Les documents HTML5 doivent utiliser à la place <code>getAttribute()</code> .</p> - -<p>La méthode <code>getAttributeNS</code> diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla.</p> - -<p>Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants. Cependant, la plupart des navigateurs ont renvoyé null. À partir de DOM4, la spécification dit maintenant de retourner null. Cependant, certains navigateurs plus anciens renvoient une chaîne vide. Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler <code>getAttributeNS()</code> s'il est possible que l'attribut demandé n'existe pas sur l'élément spécifié.</p> - -<p>{{ DOMAttributeMethods() }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Specifie qu'une exception <code>NOT_SUPPORTED_ERR</code> est levée si l'agent utilisateur ne supporte pas la fonctionnalité <code>"XML"</code>. Spécifie également que <code>null</code> doit être passé pour n'avoir aucun espace de noms.</td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.getAttributeNS")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/Add-ons/Code_snippets/getAttributeNS">Code snippets:getAttributeNS</a></li> -</ul> +</script> + +</body> +</html> +``` + +## Notes + +Les espaces de noms sont uniquement pris en charge dans les documents XML, Les documents HTML5 doivent utiliser à la place `getAttribute()` . + +La méthode `getAttributeNS` diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla. + +Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants. Cependant, la plupart des navigateurs ont renvoyé null. À partir de DOM4, la spécification dit maintenant de retourner null. Cependant, certains navigateurs plus anciens renvoient une chaîne vide. Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler `getAttributeNS()` s'il est possible que l'attribut demandé n'existe pas sur l'élément spécifié. + +{{ DOMAttributeMethods() }} + +## Spécifications + +| Spécification | État | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}} | {{Spec2("DOM3 Core")}} | Specifie qu'une exception `NOT_SUPPORTED_ERR` est levée si l'agent utilisateur ne supporte pas la fonctionnalité `"XML"`. Spécifie également que `null` doit être passé pour n'avoir aucun espace de noms. | +| {{SpecName("DOM2 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}} | {{Spec2("DOM2 Core")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.Element.getAttributeNS")}} + +## Voir aussi + +- [Code snippets:getAttributeNS](/fr/Add-ons/Code_snippets/getAttributeNS) diff --git a/files/fr/web/api/element/getboundingclientrect/index.md b/files/fr/web/api/element/getboundingclientrect/index.md index 7fef648005..5e64f11e08 100644 --- a/files/fr/web/api/element/getboundingclientrect/index.md +++ b/files/fr/web/api/element/getboundingclientrect/index.md @@ -25,115 +25,111 @@ tags: - scrollHeight translation_of: Web/API/Element/getBoundingClientRect --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>La méthode <code><strong>Element.getBoundingClientRect()</strong></code> retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la <a href="/fr/docs/Glossary/Viewport">zone d'affichage</a>.</p> +La méthode **`Element.getBoundingClientRect()`** retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la [zone d'affichage](/fr/docs/Glossary/Viewport). -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush:js"><var>objetRect</var> = <var>object</var>.getBoundingClientRect();</pre> +```js +objetRect = object.getBoundingClientRect(); +``` -<h3 id="Return_value">Valeur de retour</h3> +### Valeur de retour -<p>La valeur de retour est un objet {{domxref("DOMRect")}} qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, et <code>height</code>, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que <code>width</code> et <code>height</code> sont relatives au coin en haut à gauche de la zone d'affichage.<img alt="Schéma d'un élément dans sa zone de remplissage, décrivant les propriétés retournées par la méthode." src="element-box-diagram.png"></p> +La valeur de retour est un objet {{domxref("DOMRect")}} qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés `left`, `top`, `right`, `bottom`, `x`, `y`, `width`, et `height`, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que `width` et `height` sont relatives au coin en haut à gauche de la zone d'affichage. -<p>Les propriétés <code>width</code> et <code>height</code> de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le <code>padding</code> et <code>border-width</code>, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété <code>width</code> ou <code>height</code> de l'élément + <code>padding</code> + <code>border-width</code>. Mais si <code><a href="/fr/docs/Web/CSS/box-sizing">box-sizing: border-box</a></code> est défini pour l'élément, cela correpondrait seulement <code>width</code> ou <code>height</code>.</p> +Les propriétés `width` et `height` de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le `padding` et `border-width`, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété `width` ou `height` de l'élément + `padding` + `border-width`. Mais si [`box-sizing: border-box`](/fr/docs/Web/CSS/box-sizing) est défini pour l'élément, cela correpondrait seulement `width` ou `height`. -<p>La valeur retournée peut être conceptualisée comme l'union des rectangles retournés par {{domxref("Element.getClientRects", "getClientRects()")}} pour l'élément, i.e. les boîtes de bordure CSS associées à l'élément.</p> +La valeur retournée peut être conceptualisée comme l'union des rectangles retournés par {{domxref("Element.getClientRects", "getClientRects()")}} pour l'élément, i.e. les boîtes de bordure CSS associées à l'élément. -<p>Les boîtes de bordure vides sont complètement ignorées. Si toutes les boîtes de bordure associées à l'élément sont vides, la méthode renvoie alors un rectangle pour lequel <code>width</code> et <code>height</code> valent 0 et où <code>top</code> et <code>left</code> correspondent au coin en haut à gauche de la première boîte de bordure (dans l'ordre du contenu) de l'élément.</p> +Les boîtes de bordure vides sont complètement ignorées. Si toutes les boîtes de bordure associées à l'élément sont vides, la méthode renvoie alors un rectangle pour lequel `width` et `height` valent 0 et où `top` et `left` correspondent au coin en haut à gauche de la première boîte de bordure (dans l'ordre du contenu) de l'élément. -<p>La distance de défilement qui a été parcourue dans la zone d'affichage (ou n'importe quel élément que l'on peut faire défiler) est prise en compte pour calculer le rectangle de délimitation. Cela signifie que les côtés du rectangle de délimitation (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>) change ses valeurs à chaque fois que la position de défilement change (parce que les valeurs sont relatives à la zone d'affichage et ne sont pas absolues).</p> +La distance de défilement qui a été parcourue dans la zone d'affichage (ou n'importe quel élément que l'on peut faire défiler) est prise en compte pour calculer le rectangle de délimitation. Cela signifie que les côtés du rectangle de délimitation (`top`, `right`, `bottom`, `left`) change ses valeurs à chaque fois que la position de défilement change (parce que les valeurs sont relatives à la zone d'affichage et ne sont pas absolues). -<p>Si vous avez besoin d'un rectangle de délimitation relatif au coin supérieur gauche du document, ajoutez simplement la position actuelle de défilement aux propriétés <code>top</code> et <code>left</code> (elles peuvent être obtenues en utilisant {{domxref("window.scrollX")}} et {{domxref("window.scrollY")}}) pour avoir un rectangle de délimitation indépendant de la position de défilement actuelle.</p> +Si vous avez besoin d'un rectangle de délimitation relatif au coin supérieur gauche du document, ajoutez simplement la position actuelle de défilement aux propriétés `top` et `left` (elles peuvent être obtenues en utilisant {{domxref("window.scrollX")}} et {{domxref("window.scrollY")}}) pour avoir un rectangle de délimitation indépendant de la position de défilement actuelle. -<h3 id="Cross-browser_fallback">Solution de prise en charge multi-navigateurs</h3> +### Solution de prise en charge multi-navigateurs -<p>Les scripts qui doivent avoir une haute compatibilité pour l'ensemble des navigateurs peuvent utiliser <code>window.pageXOffset</code> et <code>window.pageYOffset</code> plutôt que <code>window.scrollX</code> et <code>window.scrollY.</code> Les scripts qui ne peuvent pas utiliser <code>window.pageXOffset</code>, <code>window.pageYOffset</code>, <code>window.scrollX</code> ou <code>window.scrollY</code> pourront utiliser cette méthode :</p> +Les scripts qui doivent avoir une haute compatibilité pour l'ensemble des navigateurs peuvent utiliser `window.pageXOffset` et `window.pageYOffset` plutôt que `window.scrollX` et `window.scrollY.` Les scripts qui ne peuvent pas utiliser `window.pageXOffset`, `window.pageYOffset`, `window.scrollX` ou `window.scrollY` pourront utiliser cette méthode : -<pre class="brush:js">// Pour scrollX +```js +// Pour scrollX (((t = document.documentElement) || (t = document.body.parentNode)) - && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft + && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft // Pour scrollY (((t = document.documentElement) || (t = document.body.parentNode)) - && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop -</pre> + && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop +``` -<h2 id="Example">Exemple</h2> +## Exemple -<p>Ce simple exemple récupère l'objet <code>DOMRect</code> représentant le rectangle de délimitation dans le client d'un simple élément div, et affiche ses propriétés dessous.</p> +Ce simple exemple récupère l'objet `DOMRect` représentant le rectangle de délimitation dans le client d'un simple élément div, et affiche ses propriétés dessous. -<pre class="brush:html"><div></div></pre> +```html +<div></div> +``` -<pre class="brush:css">div { +```css +div { width: 400px; height: 200px; padding: 20px; margin: 50px auto; background: purple; -}</pre> +} +``` -<pre class="brush:js">let <var>elem</var> = document.querySelector('div'); -let <var>rect</var> = elem.getBoundingClientRect(); -for (let <var>key</var> in rect) { +```js +let elem = document.querySelector('div'); +let rect = elem.getBoundingClientRect(); +for (let key in rect) { if(typeof rect[key] !== 'function') { - let <var>para</var> = document.createElement('p'); + let para = document.createElement('p'); para.textContent = `${ key } : ${ rect[key] }`; document.body.appendChild(para); } -}</pre> +} +``` -<p>{{EmbedLiveSample('Example', '100%', 640)}}</p> +{{EmbedLiveSample('Example', '100%', 640)}} -<p>Remarquez comme les <code>width</code>/<code>height</code> sont égales à - <code>width</code>/<code>height</code> + <code>padding</code>.</p> +Remarquez comme les `width`/`height` sont égales à +`width`/`height` + `padding`. -<p>Remarquez aussi que les valeurs de <code>x</code>/<code>left</code>, - <code>y</code>/<code>top</code>, <code>right</code>, et <code>bottom</code> sont égales à la distance absolue depuis le bord de la zone d'affichage jusqu'au coté de l'element dans chaque cas.</p> +Remarquez aussi que les valeurs de `x`/`left`, +`y`/`top`, `right`, et `bottom` sont égales à la distance absolue depuis le bord de la zone d'affichage jusqu'au coté de l'element dans chaque cas. -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}} | {{Spec2("CSSOM View")}} | Définition initiale. | -<h3 id="Notes">Notes</h3> +### Notes -<p>L'objet <code>DOMRect</code> retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement <code>DOMRectReadOnly</code>. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">ClientRect </a>qu'ils retournent empêche d'ajouter le support de <code>x</code> et <code>y</code>.</p> +L'objet `DOMRect` retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement `DOMRectReadOnly`. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet [ClientRect ](<https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx>)qu'ils retournent empêche d'ajouter le support de `x` et `y`. -<p>En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés <code>top</code>, <code>left</code>, <code>right</code>, et <code>bottom</code>.</p> +En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés `top`, `left`, `right`, et `bottom`. -<p>Les propriétés dans l'objet <code>DOMRect</code> retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs <code>in</code> et <code>for...in</code> vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que <code>Object.assign()</code> et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées.</p> +Les propriétés dans l'objet `DOMRect` retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs `in` et `for...in` vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que `Object.assign()` et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées. -<pre class="brush:js">rect = elt.getBoundingClientRect() +```js +rect = elt.getBoundingClientRect() // The result in emptyObj is {} emptyObj = Object.assign({}, rect) emptyObj = { ...rect } -{ width, ...emptyObj } = rect</pre> +{ width, ...emptyObj } = rect +``` -<p>Les propriétés <code>top</code>, <code>left</code>, <code>right</code>, et <code>bottom</code> de <code>DOMRect</code> sont calculées en utilisant les valeurs des autres propriétés de l'objet.</p> +Les propriétés `top`, `left`, `right`, et `bottom` de `DOMRect` sont calculées en utilisant les valeurs des autres propriétés de l'objet. -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div>{{Compat("api.Element.getBoundingClientRect")}}</div> +{{Compat("api.Element.getBoundingClientRect")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li> - <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li> - <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, une version plus ancienne de <code>DOMRect</code></li> -</ul> +- {{domxref("Element.getClientRects", "getClientRects()")}} +- [MSDN: `getBoundingClientRect`](<https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx>) +- [MSDN: `ClientRect`](<https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx>), une version plus ancienne de `DOMRect` diff --git a/files/fr/web/api/element/getelementsbyclassname/index.md b/files/fr/web/api/element/getelementsbyclassname/index.md index 016d94535a..1f729a405b 100644 --- a/files/fr/web/api/element/getelementsbyclassname/index.md +++ b/files/fr/web/api/element/getelementsbyclassname/index.md @@ -10,60 +10,55 @@ tags: - getElementByClassName translation_of: Web/API/Element/getElementsByClassName --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode <strong><code>Element.getElementsByClassName()</code></strong> retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris.</p> +La méthode **`Element.getElementsByClassName()`** retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris. -<p>À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre.</p> +À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre> + var elements = element.getElementsByClassName(names); -<ul> - <li><em><var>elements</var></em> est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés.</li> - <li><em><var>names</var></em> est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace.</li> - <li><em>element</em> est n'importe quel {{domxref("Element")}} du document.</li> -</ul> +- **elements** est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés. +- **names** est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace. +- *element* est n'importe quel {{domxref("Element")}} du document. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Obtient tous les élements ayant une classe <code>test</code>:</p> +Obtient tous les élements ayant une classe `test`: -<pre class="brush: js">element.getElementsByClassName('test');</pre> +```js +element.getElementsByClassName('test'); +``` -<p>Obtient tous les élements ayant à la fois la classe <code>red</code> et la classe <code>test</code>:</p> +Obtient tous les élements ayant à la fois la classe `red` et la classe `test`: -<pre class="brush: js">element.getElementsByClassName('red test');</pre> +```js +element.getElementsByClassName('red test'); +``` -<p>Obtient tous les élements qui ont une classe <code>test</code>, à l'intérieur d'un élement qui a pour id <code>main</code>:</p> +Obtient tous les élements qui ont une classe `test`, à l'intérieur d'un élement qui a pour id `main`: -<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre> +```js +document.getElementById('main').getElementsByClassName('test'); +``` -<p>On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la <code><var>HTMLCollection</var></code> comme valeur <var>this</var> de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe <code>test</code>:</p> +On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la `HTMLCollection` comme valeur *this* de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe `test`: -<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +```js +var testElements = document.getElementsByClassName('test'); var testDivs = Array.prototype.filter.call(testElements, function(testElement){ return testElement.nodeName === 'div'; -});</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.getElementsByClassName")}}</p> +}); +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.Element.getElementsByClassName")}} diff --git a/files/fr/web/api/element/getelementsbytagname/index.md b/files/fr/web/api/element/getelementsbytagname/index.md index 8cbef3215e..19c9d3772a 100644 --- a/files/fr/web/api/element/getelementsbytagname/index.md +++ b/files/fr/web/api/element/getelementsbytagname/index.md @@ -9,68 +9,45 @@ tags: - Reference translation_of: Web/API/Element/getElementsByTagName --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode <code><strong>Element.getElementsByTagName()</strong></code> retourne une liste des éléments portant le <a href="/fr/docs/Web/API/Element/tagName">nom de balise</a> donné. La recherche porte sur le sous-arbre de l'élément spécifié, à l'exception de cet élément lui-même. La liste retournée est <em>live</em>, c'est à dire qu'elle se met à jour automatiquement à chaque changement de l'arbre DOM. Par conséquent, il n'est pas nécessaire d'appeller plusieurs fois <code>Element.getElementsByTagName()</code> avec le même élément et les mêmes arguments.</p> +La méthode **`Element.getElementsByTagName()`** retourne une liste des éléments portant le [nom de balise](/fr/docs/Web/API/Element/tagName) donné. La recherche porte sur le sous-arbre de l'élément spécifié, à l'exception de cet élément lui-même. La liste retournée est _live_, c'est à dire qu'elle se met à jour automatiquement à chaque changement de l'arbre DOM. Par conséquent, il n'est pas nécessaire d'appeller plusieurs fois `Element.getElementsByTagName()` avec le même élément et les mêmes arguments. -<p>Quand elle est appelée sur un élément HTML dans un document HTML, <code>getElementsByTagName </code>place son argument en minuscule avant de continuer. Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG " camel-cased" dans une sous-arborescence dans un document HTML. {{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas.</p> +Quand elle est appelée sur un élément HTML dans un document HTML, `getElementsByTagName `place son argument en minuscule avant de continuer. Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG " camel-cased" dans une sous-arborescence dans un document HTML. {{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas. -<p><code>Element.getElementsByTagName</code> est similaire à {{domxref("Document.getElementsByTagName()")}}, à part que sa recherche est limitée aux éléments qui sont des descendants de l'élément spécifié.</p> +`Element.getElementsByTagName` est similaire à {{domxref("Document.getElementsByTagName()")}}, à part que sa recherche est limitée aux éléments qui sont des descendants de l'élément spécifié. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre> + elements = element.getElementsByTagName(tagName) -<ul> - <li><code>elements</code> est une {{domxref("HTMLCollection")}} contenant les éléments trouvés, dans l'ordre dans lequel ils apparaissent dans le sous-arbre. Si aucun élément n'a été trouvé, la <code>HTMLCollection</code> est vide.</li> - <li><code>element</code> est l'élément depuis lequel la recherche doit commencer. Notez que seuls les descendants de cet élément feront partie des résultats, mais pas l'élément lui-même.</li> - <li><code>tagName</code> est le nom qualifié à rechercher. La chaîne spéciale <code>"*"</code> représente tous les éléments possibles. Pour la compatibilité avec XHTML, les minuscules doivent être utilisées.</li> -</ul> +- `elements` est une {{domxref("HTMLCollection")}} contenant les éléments trouvés, dans l'ordre dans lequel ils apparaissent dans le sous-arbre. Si aucun élément n'a été trouvé, la `HTMLCollection` est vide. +- `element` est l'élément depuis lequel la recherche doit commencer. Notez que seuls les descendants de cet élément feront partie des résultats, mais pas l'élément lui-même. +- `tagName` est le nom qualifié à rechercher. La chaîne spéciale `"*"` représente tous les éléments possibles. Pour la compatibilité avec XHTML, les minuscules doivent être utilisées. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">// vérifie l'alignement sur un nombre de cellules dans un tableau. +```js +// vérifie l'alignement sur un nombre de cellules dans un tableau. var table = document.getElementById("forecast-table"); var cells = table.getElementsByTagName("td"); -for (var i = 0; i < cells.length; i++) { +for (var i = 0; i < cells.length; i++) { var status = cells[i].getAttribute("data-status"); if ( status == "open" ) { - // saisit les données + // saisit les données } -}</pre> +} +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Change la valeur de retour de {{domxref("NodeList")}} à{{domxref("HTMLCollection")}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Pas de changement par rapport à {{SpecName('DOM2 Core')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Pas de changement par rapport à {{SpecName('DOM1')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}} | {{Spec2('DOM WHATWG')}} | Change la valeur de retour de {{domxref("NodeList")}} à{{domxref("HTMLCollection")}} | +| {{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}} | {{Spec2('DOM3 Core')}} | Pas de changement par rapport à {{SpecName('DOM2 Core')}} | +| {{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}} | {{Spec2('DOM2 Core')}} | Pas de changement par rapport à {{SpecName('DOM1')}} | +| {{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}} | {{Spec2('DOM1')}} | Définition initiale | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Element.getElementsByTagName")}}</p> +{{Compat("api.Element.getElementsByTagName")}} diff --git a/files/fr/web/api/element/getelementsbytagnamens/index.md b/files/fr/web/api/element/getelementsbytagnamens/index.md index 3bb1bbba96..0e7d0cb5e5 100644 --- a/files/fr/web/api/element/getelementsbytagnamens/index.md +++ b/files/fr/web/api/element/getelementsbytagnamens/index.md @@ -9,67 +9,47 @@ tags: - Reference translation_of: Web/API/Element/getElementsByTagNameNS --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode <code><strong>Element.getElementsByTagNameNS()</strong></code> renvoie un objet {{domxref("HTMLCollection")}} avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode {{Domxref("Document.getElementsByTagNameNS")}} mais cette dernière recherche sur l'ensemble du document tandis que <code>getElementsByTagNameNS()</code> recherche parmi les descendants de l'élément courant.</p> +La méthode **`Element.getElementsByTagNameNS()`** renvoie un objet {{domxref("HTMLCollection")}} avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode {{Domxref("Document.getElementsByTagNameNS")}} mais cette dernière recherche sur l'ensemble du document tandis que `getElementsByTagNameNS()` recherche parmi les descendants de l'élément courant. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>elements</em> =<em> element</em>.getElementsByTagNameNS(<em>namespaceURI</em>,<em>localName</em>);</pre> + elements = element.getElementsByTagNameNS(namespaceURI,localName); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>namespaceURI</code></dt> - <dd>L'URI de l'espace de noms des éléments à rechercher (cf. <code><a href="/fr/docs/Web/API/Element/namespaceURI">namespaceURI</a></code>). Par exemple, si vous recherchez des éléments XHTML, utilisez l'URI d'espace de noms XHTML, <code>http://www.w3.org/1999/xhtml</code>.</dd> - <dt><code>localName</code></dt> - <dd>Le nom local des éléments à rechercher ou la valeur spéciale <code>"*"</code> (correspondant à tous les éléments). Voir {{domxref("Node.localName")}}.</dd> -</dl> +- `namespaceURI` + - : L'URI de l'espace de noms des éléments à rechercher (cf. [`namespaceURI`](/fr/docs/Web/API/Element/namespaceURI)). Par exemple, si vous recherchez des éléments XHTML, utilisez l'URI d'espace de noms XHTML, `http://www.w3.org/1999/xhtml`. +- `localName` + - : Le nom local des éléments à rechercher ou la valeur spéciale `"*"` (correspondant à tous les éléments). Voir {{domxref("Node.localName")}}. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une collection {{domxref("HTMLCollection")}} des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM.</p> +Une collection {{domxref("HTMLCollection")}} des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM. -<h2 id="Exemple">Exemples</h2> +## Exemples -<pre class="brush: js">// vérifie l'alignement d'une série de cellules d'un tableau dans un document XHTML. +```js +// vérifie l'alignement d'une série de cellules d'un tableau dans un document XHTML. var table = document.getElementById("forecast-table"); var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td"); -for (var i = 0; i < cells.length; i++) { +for (var i = 0; i < cells.length; i++) { var axis = cells[i].getAttribute("axis"); if (axis == "year") { // saisit les données } } -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Modification du type de la valeur de retour : passage de {{domxref("NodeList")}} à {{domxref("HTMLCollection")}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Aucune modification depuis {{SpecName('DOM2 Core')}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}} | {{Spec2('DOM WHATWG')}} | Modification du type de la valeur de retour : passage de {{domxref("NodeList")}} à {{domxref("HTMLCollection")}}. | +| {{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}} | {{Spec2('DOM3 Core')}} | Aucune modification depuis {{SpecName('DOM2 Core')}}. | +| {{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}} | {{Spec2('DOM2 Core')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Element.getElementsByTagNameNS")}}</p> +{{Compat("api.Element.getElementsByTagNameNS")}} diff --git a/files/fr/web/api/element/hasattribute/index.md b/files/fr/web/api/element/hasattribute/index.md index 5c90c03771..6d2f356ed6 100644 --- a/files/fr/web/api/element/hasattribute/index.md +++ b/files/fr/web/api/element/hasattribute/index.md @@ -9,69 +9,51 @@ tags: - Reference translation_of: Web/API/Element/hasAttribute --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>La méthode <strong><code>Element.hasAttribute()</code></strong> renvoie une <strong>valeur booléenne</strong> indiquant si l'élément courant possède l'attribut spécifié ou non.</p> +La méthode **`Element.hasAttribute()`** renvoie une **valeur booléenne** indiquant si l'élément courant possède l'attribut spécifié ou non. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>var <em>result</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>name</var></em>); -</pre> + var result = element.hasAttribute(name); -<dl> - <dt><code>result</code></dt> - <dd>récupère la valeur de retour <code>true</code> ou <code>false</code>.</dd> - <dt><code>name</code></dt> - <dd>est une chaine de caractères représentant le nom de l'attribut.</dd> -</dl> +- `result` + - : récupère la valeur de retour `true` ou `false`. +- `name` + - : est une chaine de caractères représentant le nom de l'attribut. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush:js">var foo = document.getElementById("foo"); +```js +var foo = document.getElementById("foo"); if (foo.hasAttribute("bar")) { // faire quelque chose -}</pre> +} +``` -<h2 id="Notes">Polyfill</h2> +## Polyfill -<pre class="brush:js">;(function(prototype) { +```js +;(function(prototype) { prototype.hasAttribute = prototype.hasAttribute || function(name) { - return !!(this.attributes[name] && + return !!(this.attributes[name] && this.attributes[name].specified); } -})(Element.prototype);</pre> +})(Element.prototype); +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>{{DOMAttributeMethods}}</p> +{{DOMAttributeMethods}} -<h2 id="Sp.C3.A9cification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Dans {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Pas de changement par rapport à {{SpecName('DOM2 Core')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}} | {{Spec2('DOM WHATWG')}} | Dans {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}} | +| {{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}} | {{Spec2('DOM3 Core')}} | Pas de changement par rapport à {{SpecName('DOM2 Core')}} | +| {{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}} | {{Spec2('DOM2 Core')}} | Définition initiale. | -<h2 id="Browser_compatibility">Browser compatibility</h2> +## Browser compatibility -<p>{{Compat("api.Element.hasAttribute")}}</p> +{{Compat("api.Element.hasAttribute")}} diff --git a/files/fr/web/api/element/hasattributens/index.md b/files/fr/web/api/element/hasattributens/index.md index d30aca00e1..5f4de8ace0 100644 --- a/files/fr/web/api/element/hasattributens/index.md +++ b/files/fr/web/api/element/hasattributens/index.md @@ -9,46 +9,43 @@ tags: - Méthodes translation_of: Web/API/Element/hasAttributeNS --- -<p>{{ APIRef("DOM") }}</p> +{{ APIRef("DOM") }} -<h2 id="R.C3.A9sum.C3.A9">Résumé</h2> +## Résumé -<p><code>hasAttributeNS</code> renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié.</p> +`hasAttributeNS` renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">result = +```js +result = element.hasAttributeNS( namespace, -localName)</pre> - -<dl> - <dt><code>result</code></dt> - <dd>Une valeur booléenne <code>true</code> ou <code>false</code>.</dd> - <dt><code>namespace</code></dt> - <dd>Une chaîne spécifiant l'espace de noms de l'attribut.</dd> - <dt><code>localName</code></dt> - <dd>Le nom de l'attribut.</dd> -</dl> - -<h2 id="Exemple">Exemple</h2> - -<pre class="eval">// Vérifie que l'attribut existe -// avant de définir une valeur -var d = document.getElementById("div1"); -if (d.hasAttributeNS( - "http://www.mozilla.org/ns/specialspace/", - "special-align")) { - d.setAttribute("align", "center"); -} -</pre> - -<h2 id="Notes">Notes</h2> - -<p>{{ DOMAttributeMethods() }}</p> - -<h2 id="Sp.C3.A9cification">Spécification</h2> - -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">DOM Level 2 Core: hasAttributeNS (en)</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElHasAttrNS">traduction en français</a> (non normative)</small></li> -</ul> +localName) +``` + +- `result` + - : Une valeur booléenne `true` ou `false`. +- `namespace` + - : Une chaîne spécifiant l'espace de noms de l'attribut. +- `localName` + - : Le nom de l'attribut. + +## Exemple + + // Vérifie que l'attribut existe + // avant de définir une valeur + var d = document.getElementById("div1"); + if (d.hasAttributeNS( + "http://www.mozilla.org/ns/specialspace/", + "special-align")) { + d.setAttribute("align", "center"); + } + +## Notes + +{{ DOMAttributeMethods() }} + +## Spécification + +- [DOM Level 2 Core: hasAttributeNS (en)](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElHasAttrNS) (non normative) diff --git a/files/fr/web/api/element/hasattributes/index.md b/files/fr/web/api/element/hasattributes/index.md index ec7c62931f..abd5571777 100644 --- a/files/fr/web/api/element/hasattributes/index.md +++ b/files/fr/web/api/element/hasattributes/index.md @@ -10,70 +10,53 @@ tags: - polyfill translation_of: Web/API/Element/hasAttributes --- -<div>{{ApiRef("DOM")}}</div> +{{ApiRef("DOM")}} -<p>La méthode <strong><code>hasAttributes()</code></strong>, rattachée à l'interface {{domxref("Element")}}, renvoie une valeur booléenne indiquant si le nœud courant a au moins un attribut ou non.</p> +La méthode **`hasAttributes()`**, rattachée à l'interface {{domxref("Element")}}, renvoie une valeur booléenne indiquant si le nœud courant a au moins un attribut ou non. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush:js">var result = element.hasAttributes();</pre> +```js +var result = element.hasAttributes(); +``` -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<dl> - <dt><code>result</code></dt> - <dd>contient la valeur de retour <code>true</code> ou <code>false</code>.</dd> -</dl> +- `result` + - : contient la valeur de retour `true` ou `false`. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush:js ">var foo = document.getElementById("foo"); +```js +var foo = document.getElementById("foo"); if (foo.hasAttributes()) { // faire quelque chose avec 'foo.attributes' -}</pre> +} +``` -<h2 id="Polyfill">Polyfill</h2> +## Polyfill -<pre class="brush:js ">;(function(prototype) { +```js +;(function(prototype) { prototype.hasAttributes = prototype.hasAttributes || function() { - return (this.attributes.length > 0); + return (this.attributes.length > 0); } -})(Element.prototype);</pre> +})(Element.prototype); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Déplacé de l'interface {{domxref("Node")}} vers l'interface plus spécialisée {{domxref("Element")}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Pas de changement par rapport à {{SpecName("DOM2 Core")}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Définition initiale, sur l'interface {{domxref("Node")}}.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------- | +| {{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}} | {{Spec2('DOM WHATWG')}} | Déplacé de l'interface {{domxref("Node")}} vers l'interface plus spécialisée {{domxref("Element")}}. | +| {{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}} | {{Spec2('DOM3 Core')}} | Pas de changement par rapport à {{SpecName("DOM2 Core")}} | +| {{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}} | {{Spec2('DOM2 Core')}} | Définition initiale, sur l'interface {{domxref("Node")}}. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Element.hasAttributes")}}</p> +{{Compat("api.Element.hasAttributes")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Element.attributes")}}</li> - <li>{{domxref("Element.hasAttribute()")}}</li> -</ul> +- {{domxref("Element.attributes")}} +- {{domxref("Element.hasAttribute()")}} diff --git a/files/fr/web/api/element/id/index.md b/files/fr/web/api/element/id/index.md index 29e4752a20..9dd64d63dd 100644 --- a/files/fr/web/api/element/id/index.md +++ b/files/fr/web/api/element/id/index.md @@ -9,60 +9,33 @@ tags: - Reference translation_of: Web/API/Element/id --- -<p>{{ApiRef("DOM")}}</p> +{{ApiRef("DOM")}} -<p>La propriété <strong><code>Element.id</code></strong> représente l'identifiant de l'élément, reflétant l' <strong><a href="/fr/docs/Web/HTML/Attributs_universels/id">id</a></strong> global de l'attribut.</p> +La propriété **`Element.id`** représente l'identifiant de l'élément, reflétant l' **[id](/fr/docs/Web/HTML/Attributs_universels/id)** global de l'attribut. -<p>Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}. Les autres utilisations courantes de <code>id</code> comprennent l'utilisation de l'<a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_ID">ID de l'élément en tant que sélecteur</a> lors de la mise en forme du document avec <a href="/fr/docs/Web/CSS">CSS</a>.</p> +Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}. Les autres utilisations courantes de `id` comprennent l'utilisation de l'[ID de l'élément en tant que sélecteur](/fr/docs/Web/CSS/S%C3%A9lecteurs_d_ID) lors de la mise en forme du document avec [CSS](/fr/docs/Web/CSS). -<div class="note"> -<p><strong>Note :</strong> Les identifiants sont sensibles à la casse, mais vous devez éviter de créer des ID qui ne diffèrent que par la casse (voir <a href="/fr/docs/Archive/Case_Sensitivity_in_class_and_id_Names">Sensibilité à la casse dans les noms de classe et d'identifiant</a>).</p> -</div> +> **Note :** Les identifiants sont sensibles à la casse, mais vous devez éviter de créer des ID qui ne diffèrent que par la casse (voir [Sensibilité à la casse dans les noms de classe et d'identifiant](/fr/docs/Archive/Case_Sensitivity_in_class_and_id_Names)). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>idStr</em> = <em>elt</em>.id; // Obtenez l'identifiant -<em>elt</em>.id = <em>idStr; // Définir l'identifiant</em></pre> + var idStr = elt.id; // Obtenez l'identifiant + elt.id = idStr; // Définir l'identifiant -<ul> - <li><code>idStr</code> est l'identifiant de l'élément.</li> -</ul> +- `idStr` est l'identifiant de l'élément. -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Pas de changement par rapport à {{SpecName('DOM2 HTML')}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td>Pas de changement par rapport à {{SpecName('DOM1')}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-id', 'id')}} | {{Spec2('DOM WHATWG')}} | Pas de changement par rapport à {{SpecName('DOM2 HTML')}}. | +| {{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}} | {{Spec2('DOM2 HTML')}} | Pas de changement par rapport à {{SpecName('DOM1')}}. | +| {{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}} | {{Spec2('DOM1')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Element.id")}}</p> +{{Compat("api.Element.id")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'attribut global <a href="/fr/docs/Web/HTML/Attributs_universels/id"><strong>id</strong></a> de DOM.</li> -</ul> +- L'attribut global [**id**](/fr/docs/Web/HTML/Attributs_universels/id) de DOM. diff --git a/files/fr/web/api/element/index.md b/files/fr/web/api/element/index.md index ac94a2ffc9..1ca458b754 100644 --- a/files/fr/web/api/element/index.md +++ b/files/fr/web/api/element/index.md @@ -4,422 +4,416 @@ slug: Web/API/Element translation_of: Web/API/Element browser-compat: api.Element --- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>Element</code></strong> est la classe de base la plus générique dont héritent tous les objets qui représentent des éléments d'un <a href="/fr/docs/Web/API/Document"><code>Document</code></a>. Elle contient uniquement des méthodes et propriétés communes à l'ensemble des éléments. Des classes plus spécifiques héritent d'<code>Element</code>. Ainsi, l'interface <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> correspond à l'interface de base pour les éléments HTML tandis que l'interface <a href="/fr/docs/Web/API/SVGElement"><code>SVGElement</code></a> représente la base pour les éléments SVG. La plupart des fonctionnalités sont définies dans les classes situées plus loin dans la hiérarchie.</p> - -<h2 id="properties">Propriétés</h2> - -<p><em><code>Element</code> hérite des propriétés de son interface parente : <a href="/fr/docs/Web/API/Node"><code>Node</code></a> (et donc indirectement des propriétés du parent de celle-ci : <a href="/fr/docs/Web/API/EventTarget"><code>EventTarget</code></a>).</em></p> - -<dl> - <dt><a href="/fr/docs/Web/API/Element/assignedSlot"><code>Element.assignedSlot</code></a>{{readonlyInline}}</dt> - <dd>Renvoie un objet <a href="/fr/docs/Web/API/HTMLSlotElement"><code>HTMLSlotElement</code></a> représentant l'emplacement (<a href="/fr/docs/Web/HTML/Element/slot"><code><slot></code></a>) dans lequel le nœud est inséré.</dd> - <dt><a href="/fr/docs/Web/API/Element/attributes"><code>Element.attributes</code></a> {{readOnlyInline}}</dt> - <dd>Renvoie un objet <a href="/fr/docs/Web/API/NamedNodeMap"><code>NamedNodeMap</code></a> contenant les attributs affectés de l'élément HTML correspondant.</dd> - <dt><a href="/fr/docs/Web/API/Element/childElementCount"><code>Element.childElementCount</code></a> {{readonlyInline}}</dt> - <dd>Renvoie le nombre d'éléments enfants de cet élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/children"><code>Element.children</code></a> {{readonlyInline}}</dt> - <dd>Renvoie les éléments enfants de cet élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/classList"><code>Element.classList</code></a> {{readOnlyInline}}</dt> - <dd>Renvoie un objet <a href="/fr/docs/Web/API/DOMTokenList"><code>DOMTokenList</code></a> contenant la liste des attributs de classe.</dd> - <dt><a href="/fr/docs/Web/API/Element/className"><code>Element.className</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente la classe de l'élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/clientHeight"><code>Element.clientHeight</code></a> {{readOnlyInline}}</dt> - <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant la hauteur intérieure de l'élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/clientLeft"><code>Element.clientLeft</code></a> {{readOnlyInline}}</dt> - <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant la largeur de la bordure gauche de l'élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/clientTop"><code>Element.clientTop</code></a> {{readOnlyInline}}</dt> - <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant la largeur de la bordure haute de l'élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/clientWidth"><code>Element.clientWidth</code></a> {{readOnlyInline}}</dt> - <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant la largeur intérieure de l'élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/firstElementChild"><code>Element.firstElementChild</code></a> {{readonlyInline}}</dt> - <dd>Renvoie le premier élément enfant de cet élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/id"><code>Element.id</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente l'identifiant de l'élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/innerHTML"><code>Element.innerHTML</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente le balisage du contenu de l'élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/lastElementChild"><code>Element.lastElementChild</code></a> {{readonlyInline}}</dt> - <dd>Renvoie le dernier élément enfant de cet élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/localName"><code>Element.localName</code></a> {{readOnlyInline}}</dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente la partie locale pour le nom qualifié de l'élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/namespaceURI"><code>Element.namespaceURI</code></a> {{readonlyInline}}</dt> - <dd>L'URI pour l'espace de noms de l'élément ou <code>null</code> s'il n'y en a pas. - <div class="note"> - <p><strong>Note :</strong> Pour Firefox 3.5 et les versions antérieures, les éléments HTML ne sont pas situés dans un espace de noms. Dans les versions ultérieures, les éléments HTML s'inscrivent dans l'espace de noms <code><a href="https://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> tant pour les arbres HTML que XML.</p> - </div> - </dd> - <dt><a href="/fr/docs/Web/API/Element/nextElementSibling"><code>Element.nextElementSibling</code></a> {{readOnlyInline}}</dt> - <dd>Un objet <code>Element</code> qui représente l'élément qui suit immédiatement l'élément courant dans l'arbre ou <code>null</code> si l'élément courant n'a pas de voisin.</dd> - <dt><a href="/fr/docs/Web/API/Element/outerHTML"><code>Element.outerHTML</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente le balisage de l'élément (incluant son contenu). Lorsque cette propriété est utilisée en modification, cela remplace l'élément avec les noeuds construits à partir de l'analyse de la chaîne de caractères fournie.</dd> - <dt><a href="/fr/docs/Web/API/Element/part"><code>Element.part</code></a></dt> - <dd>Représente les identifiants des parties de l'élément (c'est-à-dire ceux définis avec l'attribut <code>part</code>) sous la forme d'un objet <a href="/fr/docs/Web/API/DOMTokenList"><code>DOMTokenList</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/prefix"><code>Element.prefix</code></a> {{readOnlyInline}}</dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente le préfixe de l'espace de nom pour l'élément ou <code>null</code> si aucun préfixe n'est défini.</dd> - <dt><a href="/fr/docs/Web/API/Element/previousElementSibling"><code>Element.previousElementSibling</code></a> {{readOnlyInline}}</dt> - <dd>Un objet <code>Element</code> qui représente l'élément qui précède immédiatement l'élément courant dans l'arbre ou <code>null</code> si l'élément courant n'a pas de voisin.</dd> - <dt><a href="/fr/docs/Web/API/Element/scrollHeight"><code>Element.scrollHeight</code></a> {{readOnlyInline}}</dt> - <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant la hauteur de la vue de défilement pour l'élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/scrollLeft"><code>Element.scrollLeft</code></a></dt> - <dd>Un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) qui représente le décalage à gauche de l'élément lié au défilement.</dd> - <dt><a href="/fr/docs/Web/API/Element/scrollLeftMax"><code>Element.scrollLeftMax</code></a> {{Non-standard_Inline}} {{readOnlyInline}}</dt> - <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant le décalage à gauche maximal pour l'élément lors du défilement.</dd> - <dt><a href="/fr/docs/Web/API/Element/scrollTop"><code>Element.scrollTop</code></a></dt> - <dd>Un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) qui représente le nombre de pixels dont on a fait défiler verticalement le haut de l'élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/scrollTopMax"><code>Element.scrollTopMax</code></a> {{Non-standard_Inline}} {{readOnlyInline}}</dt> - <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant le décalage maximal depuis le haut de l'élément lors du défilement.</dd> - <dt><a href="/fr/docs/Web/API/Element/scrollWidth"><code>Element.scrollWidth</code></a> {{readOnlyInline}}</dt> - <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant la largeur de la vue de défilement pour l'élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/shadowRoot"><code>Element.shadowRoot</code></a>{{readOnlyInline}}</dt> - <dd>Renvoie la racine sombre ouverte (<i lang="en">open shadow root</i>) hébergée par l'élément ou <code>null</code> si aucune racine sombre ouverte n'est présente.</dd> - <dt><a href="/fr/docs/Web/API/Element/openOrClosedShadowRoot"><code>Element.openOrClosedShadowRoot</code></a> {{Non-standard_Inline}}{{readOnlyInline}}</dt> - <dd>Renvoie la racine sombre hébergée par l'élément (qu'elle soit ouverte ou fermée). <strong>Uniquement disponible pour <a href="/fr/docs/Mozilla/Add-ons/WebExtensions">les WebExtensions</a>.</strong></dd> - <dt><a href="/fr/docs/Web/API/Element/slot"><code>Element.slot</code></a> {{Experimental_Inline}}</dt> - <dd>Renvoie le nom de l'emplacement du DOM sombre dans lequel l'élément est inséré.</dd> - <dt><a href="/fr/docs/Web/API/Element/tagName"><code>Element.tagName</code></a> {{readOnlyInline}}</dt> - <dd>Renvoie une chaîne de caractères (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a>) qui est le nom de la balise pour l'élément courant.</dd> -</dl> - -<h3 id="properties_included_from_aria">Propriétés provenant d'ARIA</h3> - -<p><em>L'interface <code>Element</code> inclut les propriétés suivantes, définies sur le <i lang="en">mixin</i> <code>ARIAMixin</code>.</em></p> - -<dl> - <dt><a href="/fr/docs/Web/API/Element/ariaAtomic"><code>Element.ariaAtomic</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-atomic</code> qui indique si des technologies d'assistance présenteront tout ou partie de la région modifiée selon les notifications définies par l'attribut <code>aria-relevant</code>.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaAutoComplete"><code>Element.ariaAutoComplete</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-autocomplete</code> qui indique si la saisie de texte peut déclencher l'affichage d'une ou plusieurs prédictions pour la valeur saisie par l'utilisateur à destination d'une liste de choix, d'une boîte de recherche ou d'une zone de texte. Elle indique également la façon dont les éventuelles prédictions seraient présentées.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaBusy"><code>Element.ariaBusy</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-busy</code> qui indique d'un élément est en train d'être modifié. Les technologies d'assistance peuvent alors faire le choix d'attendre la fin de la modification avant d'exposer le contenu à l'utilisateur.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaChecked"><code>Element.ariaChecked</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-checked</code> indiquant l'état coché (ou non) des cases à cocher, des boutons radio ou des autres éléments d'interface graphique qui peuvent être cochés.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaColCount"><code>Element.ariaColCount</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-colcount</code> indiquant le nombre de colonnes d'un tableau, d'une grille ou d'une grille arborescente.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaColIndex"><code>Element.ariaColIndex</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-colindex</code> qui définit l'indice de la colonne d'un élément ou sa position par rapport au nombre total de colonnes d'un tableau, d'une grille ou d'une grille arborescente.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaColIndexText"><code>Element.ariaColIndexText</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-colindextext</code> qui définit texte alternatif à <code>aria-colindex</code> qui soit compréhensible par un humain.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaColSpan"><code>Element.ariaColSpan</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-colspan</code> qui définit le nombre de colonnes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaCurrent"><code>Element.ariaCurrent</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-current</code> qui indique l'élément représente l'objet courant dans un conteneur ou un ensemble d'éléments.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaDescription"><code>Element.ariaDescription</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-description</code> qui définit la chaîne de caractères pour décrire ou annoter l'élément courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaDisabled"><code>Element.ariaDisabled</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-disabled</code> qui indique que l'élément est perceptible mais désactivé et qu'il ne peut être édité ou manipulé.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaExpanded"><code>Element.ariaExpanded</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-expanded</code> qui indique si un élément de groupement contrôlé par l'élément courant est développé ou replié.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaHasPopup"><code>Element.ariaHasPopup</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-haspopup</code> qui indique la disponibilité et le type d'élément interactif visuel comme un menu ou une boîte de dialogue pouvant être généré par l'élément courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaHidden"><code>Element.ariaHidden</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-hidden</code> qui indique si l'élément est exposé à une API d'accessibilité.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaKeyShortcuts"><code>Element.ariaKeyShortcuts</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-keyshortcuts</code> qui indique les raccourcis clavier implémentés spécifiquement pour activer ou fournir le focus à un élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaLabel"><code>Element.ariaLabel</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-label</code> qui définit une chaîne de caractères étant un libellé pour l'élément courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaLevel"><code>Element.ariaLevel</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-level</code> qui définit le niveau hiérarchique de l'élément au sein d'une structure.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaLive"><code>Element.ariaLive</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-live</code> qui indique que l'élément sera mis à jour et qui décrit les types de mises à jour qui peuvent être attendues par les agents utilisateur, les outils d'assistance et l'utilisateur.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaModal"><code>Element.ariaModal</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-modal</code> qui indique si un élément est modal lorsqu'il est affiché.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaMultiline"><code>Element.ariaMultiline</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-multiline</code> qui indique si une zone de texte accepte une saisie sur plusieurs lignes ou sur une seule ligne.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaMultiSelectable"><code>Element.ariaMultiSelectable</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-multiselectable</code> qui indique que la personne peut choisir plus d'un élément parmi les éléments descendants qui peuvent être sélectionnés.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaOrientation"><code>Element.ariaOrientation</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-orientation</code> qui indique si l'orientation de l'élément est horizontale, verticale ou inconnue voire ambigüe.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaPlaceholder"><code>Element.ariaPlaceholder</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-placeholder</code> qui définit une indication courte destinée à aider l'utilisateur à saisir une valeur lorsque le contrôle ne possède pas de valeur.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaPosInSet"><code>Element.ariaPosInSet</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-posinset</code> qui définit l'index ou la position de l'élément courant dans l'ensemble ou l'arbre d'éléments.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaPressed"><code>Element.ariaPressed</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-pressed</code> qui indique l'état actif/pressé des boutons.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaReadOnly"><code>Element.ariaReadOnly</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-readonly</code> qui indique que l'élément ne peut pas être édité mais qu'il peut être utilisé sinon.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaRelevant"><code>Element.ariaRelevant</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-relevant</code> qui indique les notifications qui seront déclenchées par l'agent utilisateur lorsque l'arbre d'accessibilité d'une région interactive sera modifié. Cette propriété est utilisée afin de décrire quels changements d'une région <code>aria-live</code> sont pertinents et devraient être annoncés.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaRequired"><code>Element.ariaRequired</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-required</code> qui indique que la saisie d'une utilisatrice ou d'un utilisateur est requise sur l'élément avant qu'un formulaire puisse être envoyé.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaRoleDescription"><code>Element.ariaRoleDescription</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-roledescription</code> qui définit une description compréhensible par un humain, adaptée par l'autrice ou l'auteur du document pour le rôle de l'élément courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaRowCount"><code>Element.ariaRowCount</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-rowcount</code> qui définit le nombre total de lignes dans un tableau, une grille ou une grille arborescente.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaRowIndex"><code>Element.ariaRowIndex</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-rowindex</code> qui définit l'index ou la position de la ligne de l'élément par rapport au nombre total de lignes dans le tableau, la grille ou la grille arborescente.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaRowIndexText"><code>Element.ariaRowIndexText</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-rowindextext</code> qui définit un libellé alternatif à <code>aria-rowindex</code>, compréhensible par un humain.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaRowSpan"><code>Element.ariaRowSpan</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-rowspan</code> qui définit le nombre de lignes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaSelected"><code>Element.ariaSelected</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-selected</code> qui indique l'état de sélection pour les éléments qui peuvent être sélectionnés.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaSetSize"><code>Element.ariaSetSize</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-setsize</code> qui définit le nombre d'objets dans l'ensemble d'éléments d'une liste ou d'un arbre.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaSort"><code>Element.ariaSort</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-sort</code> qui indique si les objets d'un tableau ou d'une grille sont triés par ordre croissant ou décroissant.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaValueMax"><code>Element.ariaValueMax</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-valueMax</code> qui définit la valeur maximale autorisée pour un élément d'interface utilisateur décrivant un intervalle.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaValueMin"><code>Element.ariaValueMin</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-valueMin</code> qui définit la valeur minimale autorisée pour un élément d'interface utilisateur décrivant un intervalle.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaValueNow"><code>Element.ariaValueNow</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-valueNow</code> qui définit la valeur courante d'un élément d'interface utilisateur décrivant un intervalle.</dd> - <dt><a href="/fr/docs/Web/API/Element/ariaValueText"><code>Element.ariaValueText</code></a></dt> - <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-valuetext</code> qui définit une alternative textuelle à <code>aria-valuenow</code> compréhensible par un humain.</dd> -</dl> - -<h3 id="handlers">Gestionnaires d'évènements</h3> - -<dl> - <dt><a href="/fr/docs/Web/API/Element/onfullscreenchange"><code>Element.onfullscreenchange</code></a></dt> - <dd>Un gestionnaire d'évènement pour l'évènement <a href="/fr/docs/Web/API/Document/fullscreenchange_event"><code>fullscreenchange</code></a> qui est envoyé lorsque l'élément passe en mode plein écran ou sort de celui-ci. Cet évènement peut être utilisé pour surveiller les transitions entre les deux modes mais aussi pour surveiller les modifications inattendues comme lorsque l'application s'exécute en arrière-plan.</dd> - <dt><a href="/fr/docs/Web/API/Element/onfullscreenerror"><code>Element.onfullscreenerror</code></a></dt> - <dd>Un gestionnaire d'évènement pour <a href="/fr/docs/Web/API/Document/fullscreenerror_event"><code>fullscreenerror</code></a> qui est envoyé lorsqu'une erreur se produit lors du passage au mode plein écran.</dd> -</dl> - -<h2 id="methods">Méthodes</h2> - -<p><em><code>Element</code> hérite des méthodes fournit par la classe parente <a href="/fr/docs/Web/API/Node"><code>Node</code></a> et de sa classe parente avant elle : <a href="/fr/docs/Web/API/EventTarget"><code>EventTarget</code></a>.</em></p> - -<dl> - <dt><a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>EventTarget.addEventListener()</code></a></dt> - <dd>Enregistre un gestionnaire d'évènement sur l'élément pour un type d'évènement donné.</dd> - <dt><a href="/fr/docs/Web/API/Element/after"><code>Element.after()</code></a></dt> - <dd>Insère un ensemble d'objets <a href="/fr/docs/Web/API/Node"><code>Node</code></a> ou <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> dans la liste des enfants du parent de l'élément courant, juste après ce dernier.</dd> - <dt><a href="/fr/docs/Web/API/Element/attachShadow"><code>Element.attachShadow()</code></a></dt> - <dd>Attache un arbre du DOM sombre à l'élément indiqué puis renvoie une référence à sa racine <a href="/fr/docs/Web/API/ShadowRoot"><code>ShadowRoot</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/animate"><code>Element.animate()</code></a> {{Experimental_Inline}}</dt> - <dd>Une méthode synthétique pour créer et exécuter une animation sur un élément. Renvoie l'instance de l'objet <code>Animation</code> créé.</dd> - <dt><a href="/fr/docs/Web/API/Element/append"><code>Element.append()</code></a></dt> - <dd>Insère un ensemble d'objet <a href="/fr/docs/Web/API/Node"><code>Node</code></a> ou <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> après le dernier enfant de l'élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/before"><code>Element.before()</code></a></dt> - <dd>Insère un ensemble d'objet <a href="/fr/docs/Web/API/Node"><code>Node</code></a> ou <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> dans la liste des enfants du parent de l'élément courant, juste avant ce dernier.</dd> - <dt><a href="/fr/docs/Web/API/Element/closest"><code>Element.closest()</code></a></dt> - <dd>Renvoie l'élément (<code>Element</code>) qui est le plus proche ancêtre de l'élément courant (ou l'élément courant lui-même) qui correspond au sélecteur passé en paramètre.</dd> - <dt><a href="/fr/docs/Web/API/Element/createShadowRoot"><code>Element.createShadowRoot()</code></a> {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> - <dd>Crée un <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">DOM sombre</a> sur l'élément, le transformant ainsi en hôte sombre. Renvoie un objet <a href="/fr/docs/Web/API/ShadowRoot"><code>ShadowRoot</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/computedStyleMap"><code>Element.computedStyleMap()</code></a> {{Experimental_Inline}}</dt> - <dd>Renvoie une interface <a href="/fr/docs/Web/API/StylePropertyMapReadOnly"><code>StylePropertyMapReadOnly</code></a> qui fournit une représentation en lecture seule d'un bloc de déclaration CSS alternatif à <a href="/fr/docs/Web/API/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/EventTarget/dispatchEvent"><code>EventTarget.dispatchEvent()</code></a></dt> - <dd>Diffuse un évènement sur ce nœud dans le DOM et renvoie un booléen qui indique si aucun gestionnaire n'a annulé l'évènement.</dd> - <dt><a href="/fr/docs/Web/API/Element/getAnimations"><code>Element.getAnimations()</code></a> {{Experimental_Inline}}</dt> - <dd>Renvoie un tableau des objets <code>Animation</code> actuellement actifs sur l'élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/getAttribute"><code>Element.getAttribute()</code></a></dt> - <dd>Récupère la valeur de l'attribut nommé pour le nœud courant et le renvoie comme un <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object">objet</a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/getAttributeNames"><code>Element.getAttributeNames()</code></a></dt> - <dd>Renvoie un tableau de noms d'attribut pour l'élément courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/getAttributeNode"><code>Element.getAttributeNode()</code></a></dt> - <dd>Récupère la représentation du nœud pour l'attrtibut nommé du nœud courant et le renvoie comme un objet <a href="/fr/docs/Web/API/Attr"><code>Attr</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/getAttributeNodeNS"><code>Element.getAttributeNodeNS()</code></a></dt> - <dd>Depuis le nœud courant, récupère la représentation du nœud pour l'attribut avec le nom et l'espace de noms indiqués et renvoie la valeur obtenue sous la forme d'un objet <a href="/fr/docs/Web/API/Attr"><code>Attr</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/getAttributeNS"><code>Element.getAttributeNS()</code></a></dt> - <dd>Depuis le nœud courant, récupère la valeur de l'attribut avec le nom et l'espace de noms indiqués et la renvoie sous la forme d'un <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object">objet</a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/getBoundingClientRect"><code>Element.getBoundingClientRect()</code></a></dt> - <dd>Renvoie la taille d'un élément et sa position relative dans la zone d'affichage (<i lang="en">viewport</i>).</dd> - <dt><a href="/fr/docs/Web/API/Element/getBoxQuads"><code>Element.getBoxQuads()</code></a> {{experimental_inline}}</dt> - <dd>Renvoie une liste d'objets <a href="/fr/docs/Web/API/DOMQuad"><code>DOMQuad</code></a> qui représentent les fragments CSS pour le nœud.</dd> - <dt><a href="/fr/docs/Web/API/Element/getClientRects"><code>Element.getClientRects()</code></a></dt> - <dd>Renvoie une collection de rectangles qui indique les rectangles englobants pour chaque ligne de texte d'un client.</dd> - <dt><a href="/fr/docs/Web/API/Element/getElementsByClassName"><code>Element.getElementsByClassName()</code></a></dt> - <dd>Renvoie une collection dynamique <a href="/fr/docs/Web/API/HTMLCollection"><code>HTMLCollection</code></a> qui contient tous les descendants de l'élément courant et qui possèdent la liste de classes fournie en paramètre.</dd> - <dt><a href="/fr/docs/Web/API/Element/getElementsByTagName"><code>Element.getElementsByTagName()</code></a></dt> - <dd>Renvoie une collection dynamique <a href="/fr/docs/Web/API/HTMLCollection"><code>HTMLCollection</code></a> qui contient tous les descendants de l'élément courant avec un nom de balise donné.</dd> - <dt><a href="/fr/docs/Web/API/Element/getElementsByTagNameNS"><code>Element.getElementsByTagNameNS()</code></a></dt> - <dd>Renvoie une collection dynamique <a href="/fr/docs/Web/API/HTMLCollection"><code>HTMLCollection</code></a> qui contient tous les descendants de l'élément courant qui ont un nom de balise et un espace de noms donnés.</dd> - <dt><a href="/fr/docs/Web/API/Element/hasAttribute"><code>Element.hasAttribute()</code></a></dt> - <dd>Renvoie un booléen indiquant si l'élément courant possède l'attribut donné.</dd> - <dt><a href="/fr/docs/Web/API/Element/hasAttributeNS"><code>Element.hasAttributeNS()</code></a></dt> - <dd>Renvoie un booléen indiquant si l'élément courant possède l'attribut donné pour l'espace de noms donné.</dd> - <dt><a href="/fr/docs/Web/API/Element/hasAttributes"><code>Element.hasAttributes()</code></a></dt> - <dd>Renvoie un booléen qui indique si l'élément courant a un ou plusieurs attributs HTML.</dd> - <dt><a href="/fr/docs/Web/API/Element/hasPointerCapture"><code>Element.hasPointerCapture()</code></a></dt> - <dd>Indique si l'élément a la capture du pointeur pour le pointeur identifié par l'identifiant passé en argument.</dd> - <dt><a href="/fr/docs/Web/API/Element/insertAdjacentElement"><code>Element.insertAdjacentElement()</code></a></dt> - <dd>Insère un nœud d'élément à la position relative indiquée par rapport à l'élément courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/insertAdjacentHTML"><code>Element.insertAdjacentHTML()</code></a></dt> - <dd>Analyse le texte comme HTML ou XML puis insère les nœuds résultatns dans l'arbre à la position indiquée.</dd> - <dt><a href="/fr/docs/Web/API/Element/insertAdjacentText"><code>Element.insertAdjacentText()</code></a></dt> - <dd>Insère un nœud textuel à la position relative indiquée, par rapport à l'élément courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/matches"><code>Element.matches()</code></a></dt> - <dd>Renvoie un booléen qui indique si l'élément serait ciblé par la chaîne de caractères passée en argument qui décrit un sélecteur.</dd> - <dt><a href="/fr/docs/Web/API/Element/prepend"><code>Element.prepend()</code></a></dt> - <dd>Insère un ensemble d'objets <a href="/fr/docs/Web/API/Node"><code>Node</code></a> ou <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> avant le premier enfant de l'élément courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/querySelector"><code>Element.querySelector()</code></a></dt> - <dd>Renvoie le premier objet <a href="/fr/docs/Web/API/Node"><code>Node</code></a> qui correspond au sélecteur donné, relatif à l'élément courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/querySelectorAll"><code>Element.querySelectorAll()</code></a></dt> - <dd>Renvoie un objet <a href="/fr/docs/Web/API/NodeList"><code>NodeList</code></a> contenant les nœuds pour lesquels le sélecteur, passé en argument, relatif à l'élément courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/releasePointerCapture"><code>Element.releasePointerCapture()</code></a></dt> - <dd>Libère (arrête) la capture du pointeur précédemment activée pour un évènement de pointeur spécifique.</dd> - <dt><a href="/fr/docs/Web/API/Element/remove"><code>Element.remove()</code></a></dt> - <dd>Retire l'élément de la liste des éléments enfants de son parent.</dd> - <dt><a href="/fr/docs/Web/API/Element/removeAttribute"><code>Element.removeAttribute()</code></a></dt> - <dd>Retire l'attribut nommé du nœud courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/removeAttributeNode"><code>Element.removeAttributeNode()</code></a></dt> - <dd>Retire la représentation nodale de l'attribut nommé pour le nœud courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/removeAttributeNS"><code>Element.removeAttributeNS()</code></a></dt> - <dd>Sur le nœud courant, retire l'attribut avec le nom et l'espace de noms indiqués.</dd> - <dt><a href="/fr/docs/Web/API/EventTarget/removeEventListener"><code>EventTarget.removeEventListener()</code></a></dt> - <dd>Retire un gestionnaire d'évènement de l'élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/replaceChildren"><code>Element.replaceChildren()</code></a></dt> - <dd>Remplace l'enfant existant d'un nœud avec un nouvel ensemble d'enfants.</dd> - <dt><a href="/fr/docs/Web/API/Element/replaceWith"><code>Element.replaceWith()</code></a></dt> - <dd>Remplace l'élément dans la liste des enfants de son parent par un ensemble d'objets <a href="/fr/docs/Web/API/Node"><code>Node</code></a> ou <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/requestFullScreen"><code>Element.requestFullscreen()</code></a> {{Experimental_Inline}}</dt> - <dd>Demande au navigateur, de façon asynchrone, d'afficher l'élément en plein écran.</dd> - <dt><a href="/fr/docs/Web/API/Element/requestPointerLock"><code>Element.requestPointerLock()</code></a> {{Experimental_Inline}}</dt> - <dd>Demande au navigateur, de façon asynchrone, de bloquer le pointeur sur l'élément indiqué.</dd> - <dt><a href="/fr/docs/Web/API/Element/scroll"><code>Element.scroll()</code></a></dt> - <dd>Défile jusqu'à un ensemble de coordonnées données à l'intérieur de l'élément courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/scrollBy"><code>Element.scrollBy()</code></a></dt> - <dd>Défile un élément de la quantité indiquée.</dd> - <dt><a href="/fr/docs/Web/API/Element/scrollIntoView"><code>Element.scrollIntoView()</code></a> {{Experimental_Inline}}</dt> - <dd>Défile la page jusqu'à ce que l'élément apparaisse dans la vue.</dd> - <dt><a href="/fr/docs/Web/API/Element/scrollTo"><code>Element.scrollTo()</code></a></dt> - <dd>Défile jusqu'à un ensemble de coordonnées particulier à l'intérieur de l'élément donné.</dd> - <dt><a href="/fr/docs/Web/API/Element/setAttribute"><code>Element.setAttribute()</code></a></dt> - <dd>Définit la valeur d'un attribut nommé pour le nœud courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/setAttributeNode"><code>Element.setAttributeNode()</code></a></dt> - <dd>Définit la représentation nodale d'un attribut nommé pour le nœud courant.</dd> - <dt><a href="/fr/docs/Web/API/Element/setAttributeNodeNS"><code>Element.setAttributeNodeNS()</code></a></dt> - <dd>Pour le nœud courant, définit la représentation nodale d'un attribut avec le nom et l'espace de noms indiqués.</dd> - <dt><a href="/fr/docs/Web/API/Element/setAttributeNS"><code>Element.setAttributeNS()</code></a></dt> - <dd>Pour le nœud courant, définit la valeur de l'attribut avec le nom et l'espace de noms indiqués.</dd> - <dt><a href="/fr/docs/Web/API/Element/setCapture"><code>Element.setCapture()</code></a> {{Non-standard_Inline}}{{Deprecated_Inline}}</dt> - <dd>Initialise la capture des évènements liés à la souris, redirigeant ainsi tous les évènements de la souris sur cet élément.</dd> - <dt><a href="/fr/docs/Web/API/Element/setPointerCapture"><code>Element.setPointerCapture()</code></a></dt> - <dd>Désigne un élément spécifique comme future cible pour la capture des <a href="/fr/docs/Web/API/Pointer_events">évènements de pointeur</a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/toggleAttribute"><code>Element.toggleAttribute()</code></a></dt> - <dd>Active/désactive un attribut booléen sur l'élément courant : s'il est présent, cela le retire et s'il est absent, cela l'ajoute.</dd> -</dl> - -<h2 id="events">Évènements</h2> - -<p>On peut écouter ces évènements en utilisant la méthode <code>addEventListener()</code> ou en affectant un gestionnaire d'évènement à la propriété <code>on<em>nomevenement</em></code> de cette interface.</p> - -<dl> - <dt><a href="/fr/docs/Web/API/HTMLDialogElement/cancel_event"><code>cancel</code></a></dt> - <dd>Déclenché sur un élément <a href="/fr/docs/Web/HTML/Element/dialog"><code><dialog></code></a> lorsque la personne indique au navigateur le souhait de fermer la boîte de dialogue courante. Un navigateur pourra par exemple déclencher cet évènement lors d'un appui sur la touche <kbd>Echap</kbd> ou lors d'un clic sur le bouton « Fermer cette boîte de dialogue » fourni par le navigateur. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/oncancel"><code>oncancel</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/error_event"><code>error</code></a></dt> - <dd>Déclenché lors de l'échec du chargement d'une ressource ou lorsque celle-ci ne peut être utilisée. Cet évènement sera par exemple déclenché lors d'une erreur d'exécution d'un script ou lorsqu'une image ne peut être trouvée ou est invalide. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onerror"><code>onerror</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/scroll_event"><code>scroll</code></a></dt> - <dd>Déclenché lors du défilement de la vue du document ou d'un élément. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onscroll"><code>onscroll</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/select_event"><code>select</code></a></dt> - <dd>Déclenché lors de la sélection de texte. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onselect"><code>onselect</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/show_event"><code>show</code></a></dt> - <dd>Déclenché lorsqu'un évènement <a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a> a été déclenché ou a bouillonné sur un élément qui dispose de l'attribut <code><a href="/fr/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code> attribute. {{deprecated_inline}} Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onshow"><code>onshow</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/wheel_event"><code>wheel</code></a></dt> - <dd>Déclenché lorsque l'utilisateur fait tourner la molette d'un appareil de pointage (généralement une souris). Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onwheel"><code>onwheel</code></a>.</dd> -</dl> - -<h3 id="clipboard_events">Évènements du presse-papiers</h3> - -<dl> - <dt><a href="/fr/docs/Web/API/Element/copy_event"><code>copy</code></a></dt> - <dd>Déclenché lorsque l'utilisateur initie une action de copie via l'interface du navigateur. Également disponible via la propriété <a href="/fr/docs/Web/API/HTMLElement/oncopy"><code>oncopy</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/cut_event"><code>cut</code></a></dt> - <dd>Déclenché lorsque l'utilisateur initie une action de coupe via l'interface du navigateur. Également disponible via la propriété <a href="/fr/docs/Web/API/HTMLElement/oncut"><code>oncut</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/paste_event"><code>paste</code></a></dt> - <dd>Déclenché lorsque l'utilisateur initie une action pour coller via l'interface du navigateur. Également disponible via la propriété <a href="/fr/docs/Web/API/HTMLElement/onpaste"><code>onpaste</code></a>.</dd> -</dl> - -<h3 id="composition_events">Évènements de composition</h3> - -<dl> - <dt><a href="/fr/docs/Web/API/Element/compositionend_event"><code>compositionend</code></a></dt> - <dd>Déclenché lorsqu'un système de composition textuel tel qu'un <a href="/fr/docs/Glossary/Input_method_editor">éditeur de méthode de saisie</a> termine ou annule la session de composition courante.</dd> - <dt><a href="/fr/docs/Web/API/Element/compositionstart_event"><code>compositionstart</code></a></dt> - <dd>Déclenché lorsqu'un système de composition textuel tel qu'un <a href="/fr/docs/Glossary/Input_method_editor">éditeur de méthode de saisie</a> démarre une nouvelle session de composition.</dd> - <dt><a href="/fr/docs/Web/API/Element/compositionupdate_event"><code>compositionupdate</code></a></dt> - <dd>Déclenché lorsqu'un nouveau caractère est reçu dans le contexte d'une session de composition textuelle.</dd> -</dl> - -<h3 id="focus_events">Évènements pour le focus</h3> - -<dl> - <dt><a href="/fr/docs/Web/API/Element/blur_event"><code>blur</code></a></dt> - <dd>Déclenché lorsqu'un élément a perdu le focus. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onblur"><code>onblur</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/focus_event"><code>focus</code></a></dt> - <dd>Déclenché lorsqu'un élément reçoit le focus. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onfocus"><code>onfocus</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/focusin_event"><code>focusin</code></a></dt> - <dd>Déclenché lorsqu'un élément s'apprête à recevoir le focus.</dd> - <dt><a href="/fr/docs/Web/API/Element/focusout_event"><code>focusout</code></a></dt> - <dd>Déclenché lorsqu'un élément s'apprête à perdre le focus.</dd> -</dl> - -<h3 id="fullscreen_events">Évènements relatifs au plein écran</h3> - -<dl> - <dt><a href="/fr/docs/Web/API/Element/fullscreenchange_event"><code>fullscreenchange</code></a></dt> - <dd>Envoyé à un élément (<code>Element</code>) lorsque celui-ci effectue une transition (entrée ou sortie) pour le mode <a href="/fr/docs/Web/API/Fullscreen_API/Guide">plein écran</a>. Également disponible via la propriété <a href="/fr/docs/Web/API/Element/onfullscreenchange"><code>onfullscreenchange</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/fullscreenerror_event"><code>fullscreenerror</code></a></dt> - <dd>Envoyé à un élément <code>Element</code> si une erreur se produit lors d'une transition (entrée ou sortie) pour le mode <a href="/fr/docs/Web/API/Fullscreen_API/Guide">plein écran</a>. Également disponible via la propriété <a href="/fr/docs/Web/API/Element/onfullscreenerror"><code>onfullscreenerror</code></a>.</dd> -</dl> - -<h3 id="keyboard_events">Évènements relatifs au clavier</h3> - -<dl> - <dt><a href="/fr/docs/Web/API/Element/keydown_event"><code>keydown</code></a></dt> - <dd>Déclenché lors de l'appui sur une touche du clavier. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeydown"><code>onkeydown</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/keypress_event"><code>keypress</code></a></dt> - <dd>Déclenché lorsqu'une touche produit un caractère lorsqu'elle est pressée. {{deprecated_inline}} Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeypress"><code>onkeypress</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/keyup_event"><code>keyup</code></a></dt> - <dd>Déclenché lorsqu'une touche est relâchée. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeyup"><code>onkeyup</code></a>.</dd> -</dl> - -<h3 id="mouse_events">Évènements relatifs à la souris</h3> - -<dl> - <dt><a href="/fr/docs/Web/API/Element/auxclick_event"><code>auxclick</code></a></dt> - <dd>Déclenché lorsqu'un bouton non primaire d'un appareil de pointage (c'est-à-dire tout bouton de la souris en dehors du bouton gauche) a été pressé puis relâché sur un élément. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onauxclick"><code>onauxclick</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></dt> - <dd>Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été pressé puis relâche sur un élément. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onclick"><code>onclick</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></dt> - <dd>Déclenché lorsqu'un utilisateur tente d'ouvrir un menu contextuel. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/oncontextmenu"><code>oncontextmenu</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></dt> - <dd>Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été utilisé pour un double-clic sur un élément. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ondblclick"><code>ondblclick</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/DOMActivate_event"><code>DOMActivate</code></a> {{Deprecated_Inline}}</dt> - <dd>Se produit lorsqu'un élément est activé, par exemple avec un clic de souris ou l'appui d'une touche.</dd> - <dt><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></dt> - <dd>Déclenché lorsqu'un bouton d'un appareil de pointage est pressé sur un élément. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmousedown"><code>onmousedown</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></dt> - <dd>Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé pour arriver sur l'élément disposant du gestionnaire d'évènement. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseenter"><code>onmouseenter</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></dt> - <dd>Déclenché lorsque le pointeur d'un appareil de pointage (généralement une souris) est déplacée en dehors de l'élément qui dispose du gestionnaire d'évènement. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseleave"><code>onmouseleave</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></dt> - <dd>Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé sur un élément. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmousemove"><code>onmousemove</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></dt> - <dd>Déclenché lorsqu'un appareil de pointage (généralement une souris) se déplace pour quitter l'élément qui dispose du gestionnaire d'évènement (ou lorsque le pointeur quitte l'un des enfants de cet élément). Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseout"><code>onmouseout</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></dt> - <dd>Déclenché lorsqu'un appareil de pointage arrive sur l'élément (ou l'un de ses enfants) qui dispose du gestionnaire d'évènement. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseover"><code>onmouseover</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></dt> - <dd>Déclenché lorsque le bouton d'un appareil de pointage est relâché pour un élément. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseup"><code>onmouseup</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/webkitmouseforcechanged_event"><code>webkitmouseforcechanged</code></a></dt> - <dd>Déclenché à chaque fois que la quantite dé pression change sur le pavé ou l'écran tactile.</dd> - <dt><a href="/fr/docs/Web/API/Element/webkitmouseforcedown_event"><code>webkitmouseforcedown</code></a></dt> - <dd>Déclenché après l'évènement <code>mousedown</code> dès que suffisamment de pression a été appliquée pour qualifier ce clic de clic forcé.</dd> - <dt><a href="/fr/docs/Web/API/Element/webkitmouseforcewillbegin_event"><code>webkitmouseforcewillbegin</code></a></dt> - <dd>Déclenché avant l'évènement <a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/webkitmouseforceup_event"><code>webkitmouseforceup</code></a></dt> - <dd>Déclenché après l'évènement <a href="/fr/docs/Web/API/Element/webkitmouseforcedown_event"><code>webkitmouseforcedown</code></a> dès que suffisamment de pression a été relâchée pour terminer le clic forcé.</dd> -</dl> - -<h3 id="touch_events">Évènements tactiles</h3> - -<dl> - <dt><a href="/fr/docs/Web/API/Element/touchcancel_event"><code>touchcancel</code></a></dt> - <dd>Déclenché lorsqu'un ou plusieurs points de toucher ont été perturbés de façon spécifique à l'implémentation (par exemple lorsque trop de points de toucher ont été créés). Également disponible avec la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchcancel"><code>ontouchcancel</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/touchend_event"><code>touchend</code></a></dt> - <dd>Déclenché lorsqu'un ou plusieurs points de toucher sont retirés de la surface tactile. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchend"><code>ontouchend</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/touchmove_event"><code>touchmove</code></a></dt> - <dd>Déclenché lorsqu'un ou plusieurs points de toucher se déplacent sur la surface tactile. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchmove"><code>ontouchmove</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Element/touchstart_event"><code>touchstart</code></a></dt> - <dd>Déclenché lorsqu'un ou plusieurs points de toucher sont placés sur la surface tactile. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchstart"><code>ontouchstart</code></a>.</dd> -</dl> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> +{{APIRef("DOM")}} + +**`Element`** est la classe de base la plus générique dont héritent tous les objets qui représentent des éléments d'un [`Document`](/fr/docs/Web/API/Document). Elle contient uniquement des méthodes et propriétés communes à l'ensemble des éléments. Des classes plus spécifiques héritent d'`Element`. Ainsi, l'interface [`HTMLElement`](/fr/docs/Web/API/HTMLElement) correspond à l'interface de base pour les éléments HTML tandis que l'interface [`SVGElement`](/fr/docs/Web/API/SVGElement) représente la base pour les éléments SVG. La plupart des fonctionnalités sont définies dans les classes situées plus loin dans la hiérarchie. + +## Propriétés + +_`Element` hérite des propriétés de son interface parente : [`Node`](/fr/docs/Web/API/Node) (et donc indirectement des propriétés du parent de celle-ci : [`EventTarget`](/fr/docs/Web/API/EventTarget))._ + +- [`Element.assignedSlot`](/fr/docs/Web/API/Element/assignedSlot){{readonlyInline}} + - : Renvoie un objet [`HTMLSlotElement`](/fr/docs/Web/API/HTMLSlotElement) représentant l'emplacement ([`<slot>`](/fr/docs/Web/HTML/Element/slot)) dans lequel le nœud est inséré. +- [`Element.attributes`](/fr/docs/Web/API/Element/attributes) {{readOnlyInline}} + - : Renvoie un objet [`NamedNodeMap`](/fr/docs/Web/API/NamedNodeMap) contenant les attributs affectés de l'élément HTML correspondant. +- [`Element.childElementCount`](/fr/docs/Web/API/Element/childElementCount) {{readonlyInline}} + - : Renvoie le nombre d'éléments enfants de cet élément. +- [`Element.children`](/fr/docs/Web/API/Element/children) {{readonlyInline}} + - : Renvoie les éléments enfants de cet élément. +- [`Element.classList`](/fr/docs/Web/API/Element/classList) {{readOnlyInline}} + - : Renvoie un objet [`DOMTokenList`](/fr/docs/Web/API/DOMTokenList) contenant la liste des attributs de classe. +- [`Element.className`](/fr/docs/Web/API/Element/className) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente la classe de l'élément. +- [`Element.clientHeight`](/fr/docs/Web/API/Element/clientHeight) {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la hauteur intérieure de l'élément. +- [`Element.clientLeft`](/fr/docs/Web/API/Element/clientLeft) {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la largeur de la bordure gauche de l'élément. +- [`Element.clientTop`](/fr/docs/Web/API/Element/clientTop) {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la largeur de la bordure haute de l'élément. +- [`Element.clientWidth`](/fr/docs/Web/API/Element/clientWidth) {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la largeur intérieure de l'élément. +- [`Element.firstElementChild`](/fr/docs/Web/API/Element/firstElementChild) {{readonlyInline}} + - : Renvoie le premier élément enfant de cet élément. +- [`Element.id`](/fr/docs/Web/API/Element/id) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente l'identifiant de l'élément. +- [`Element.innerHTML`](/fr/docs/Web/API/Element/innerHTML) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente le balisage du contenu de l'élément. +- [`Element.lastElementChild`](/fr/docs/Web/API/Element/lastElementChild) {{readonlyInline}} + - : Renvoie le dernier élément enfant de cet élément. +- [`Element.localName`](/fr/docs/Web/API/Element/localName) {{readOnlyInline}} + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente la partie locale pour le nom qualifié de l'élément. +- [`Element.namespaceURI`](/fr/docs/Web/API/Element/namespaceURI) {{readonlyInline}} + + - : L'URI pour l'espace de noms de l'élément ou `null` s'il n'y en a pas. + + > **Note :** Pour Firefox 3.5 et les versions antérieures, les éléments HTML ne sont pas situés dans un espace de noms. Dans les versions ultérieures, les éléments HTML s'inscrivent dans l'espace de noms [`http://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) tant pour les arbres HTML que XML. + +- [`Element.nextElementSibling`](/fr/docs/Web/API/Element/nextElementSibling) {{readOnlyInline}} + - : Un objet `Element` qui représente l'élément qui suit immédiatement l'élément courant dans l'arbre ou `null` si l'élément courant n'a pas de voisin. +- [`Element.outerHTML`](/fr/docs/Web/API/Element/outerHTML) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente le balisage de l'élément (incluant son contenu). Lorsque cette propriété est utilisée en modification, cela remplace l'élément avec les noeuds construits à partir de l'analyse de la chaîne de caractères fournie. +- [`Element.part`](/fr/docs/Web/API/Element/part) + - : Représente les identifiants des parties de l'élément (c'est-à-dire ceux définis avec l'attribut `part`) sous la forme d'un objet [`DOMTokenList`](/fr/docs/Web/API/DOMTokenList). +- [`Element.prefix`](/fr/docs/Web/API/Element/prefix) {{readOnlyInline}} + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente le préfixe de l'espace de nom pour l'élément ou `null` si aucun préfixe n'est défini. +- [`Element.previousElementSibling`](/fr/docs/Web/API/Element/previousElementSibling) {{readOnlyInline}} + - : Un objet `Element` qui représente l'élément qui précède immédiatement l'élément courant dans l'arbre ou `null` si l'élément courant n'a pas de voisin. +- [`Element.scrollHeight`](/fr/docs/Web/API/Element/scrollHeight) {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la hauteur de la vue de défilement pour l'élément. +- [`Element.scrollLeft`](/fr/docs/Web/API/Element/scrollLeft) + - : Un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) qui représente le décalage à gauche de l'élément lié au défilement. +- [`Element.scrollLeftMax`](/fr/docs/Web/API/Element/scrollLeftMax) {{Non-standard_Inline}} {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant le décalage à gauche maximal pour l'élément lors du défilement. +- [`Element.scrollTop`](/fr/docs/Web/API/Element/scrollTop) + - : Un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) qui représente le nombre de pixels dont on a fait défiler verticalement le haut de l'élément. +- [`Element.scrollTopMax`](/fr/docs/Web/API/Element/scrollTopMax) {{Non-standard_Inline}} {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant le décalage maximal depuis le haut de l'élément lors du défilement. +- [`Element.scrollWidth`](/fr/docs/Web/API/Element/scrollWidth) {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la largeur de la vue de défilement pour l'élément. +- [`Element.shadowRoot`](/fr/docs/Web/API/Element/shadowRoot){{readOnlyInline}} + + - : Renvoie la racine sombre ouverte ( + + <i lang="en">open shadow root</i> + + ) hébergée par l'élément ou `null` si aucune racine sombre ouverte n'est présente. + +- [`Element.openOrClosedShadowRoot`](/fr/docs/Web/API/Element/openOrClosedShadowRoot) {{Non-standard_Inline}}{{readOnlyInline}} + - : Renvoie la racine sombre hébergée par l'élément (qu'elle soit ouverte ou fermée). **Uniquement disponible pour [les WebExtensions](/fr/docs/Mozilla/Add-ons/WebExtensions).** +- [`Element.slot`](/fr/docs/Web/API/Element/slot) {{Experimental_Inline}} + - : Renvoie le nom de l'emplacement du DOM sombre dans lequel l'élément est inséré. +- [`Element.tagName`](/fr/docs/Web/API/Element/tagName) {{readOnlyInline}} + - : Renvoie une chaîne de caractères ([`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String)) qui est le nom de la balise pour l'élément courant. + +### Propriétés provenant d'ARIA + +_L'interface `Element` inclut les propriétés suivantes, définies sur le <i lang="en">mixin</i> `ARIAMixin`._ + +- [`Element.ariaAtomic`](/fr/docs/Web/API/Element/ariaAtomic) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-atomic` qui indique si des technologies d'assistance présenteront tout ou partie de la région modifiée selon les notifications définies par l'attribut `aria-relevant`. +- [`Element.ariaAutoComplete`](/fr/docs/Web/API/Element/ariaAutoComplete) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-autocomplete` qui indique si la saisie de texte peut déclencher l'affichage d'une ou plusieurs prédictions pour la valeur saisie par l'utilisateur à destination d'une liste de choix, d'une boîte de recherche ou d'une zone de texte. Elle indique également la façon dont les éventuelles prédictions seraient présentées. +- [`Element.ariaBusy`](/fr/docs/Web/API/Element/ariaBusy) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-busy` qui indique d'un élément est en train d'être modifié. Les technologies d'assistance peuvent alors faire le choix d'attendre la fin de la modification avant d'exposer le contenu à l'utilisateur. +- [`Element.ariaChecked`](/fr/docs/Web/API/Element/ariaChecked) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-checked` indiquant l'état coché (ou non) des cases à cocher, des boutons radio ou des autres éléments d'interface graphique qui peuvent être cochés. +- [`Element.ariaColCount`](/fr/docs/Web/API/Element/ariaColCount) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-colcount` indiquant le nombre de colonnes d'un tableau, d'une grille ou d'une grille arborescente. +- [`Element.ariaColIndex`](/fr/docs/Web/API/Element/ariaColIndex) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-colindex` qui définit l'indice de la colonne d'un élément ou sa position par rapport au nombre total de colonnes d'un tableau, d'une grille ou d'une grille arborescente. +- [`Element.ariaColIndexText`](/fr/docs/Web/API/Element/ariaColIndexText) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-colindextext` qui définit texte alternatif à `aria-colindex` qui soit compréhensible par un humain. +- [`Element.ariaColSpan`](/fr/docs/Web/API/Element/ariaColSpan) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-colspan` qui définit le nombre de colonnes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente. +- [`Element.ariaCurrent`](/fr/docs/Web/API/Element/ariaCurrent) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-current` qui indique l'élément représente l'objet courant dans un conteneur ou un ensemble d'éléments. +- [`Element.ariaDescription`](/fr/docs/Web/API/Element/ariaDescription) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-description` qui définit la chaîne de caractères pour décrire ou annoter l'élément courant. +- [`Element.ariaDisabled`](/fr/docs/Web/API/Element/ariaDisabled) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-disabled` qui indique que l'élément est perceptible mais désactivé et qu'il ne peut être édité ou manipulé. +- [`Element.ariaExpanded`](/fr/docs/Web/API/Element/ariaExpanded) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-expanded` qui indique si un élément de groupement contrôlé par l'élément courant est développé ou replié. +- [`Element.ariaHasPopup`](/fr/docs/Web/API/Element/ariaHasPopup) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-haspopup` qui indique la disponibilité et le type d'élément interactif visuel comme un menu ou une boîte de dialogue pouvant être généré par l'élément courant. +- [`Element.ariaHidden`](/fr/docs/Web/API/Element/ariaHidden) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-hidden` qui indique si l'élément est exposé à une API d'accessibilité. +- [`Element.ariaKeyShortcuts`](/fr/docs/Web/API/Element/ariaKeyShortcuts) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-keyshortcuts` qui indique les raccourcis clavier implémentés spécifiquement pour activer ou fournir le focus à un élément. +- [`Element.ariaLabel`](/fr/docs/Web/API/Element/ariaLabel) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-label` qui définit une chaîne de caractères étant un libellé pour l'élément courant. +- [`Element.ariaLevel`](/fr/docs/Web/API/Element/ariaLevel) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-level` qui définit le niveau hiérarchique de l'élément au sein d'une structure. +- [`Element.ariaLive`](/fr/docs/Web/API/Element/ariaLive) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-live` qui indique que l'élément sera mis à jour et qui décrit les types de mises à jour qui peuvent être attendues par les agents utilisateur, les outils d'assistance et l'utilisateur. +- [`Element.ariaModal`](/fr/docs/Web/API/Element/ariaModal) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-modal` qui indique si un élément est modal lorsqu'il est affiché. +- [`Element.ariaMultiline`](/fr/docs/Web/API/Element/ariaMultiline) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-multiline` qui indique si une zone de texte accepte une saisie sur plusieurs lignes ou sur une seule ligne. +- [`Element.ariaMultiSelectable`](/fr/docs/Web/API/Element/ariaMultiSelectable) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-multiselectable` qui indique que la personne peut choisir plus d'un élément parmi les éléments descendants qui peuvent être sélectionnés. +- [`Element.ariaOrientation`](/fr/docs/Web/API/Element/ariaOrientation) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-orientation` qui indique si l'orientation de l'élément est horizontale, verticale ou inconnue voire ambigüe. +- [`Element.ariaPlaceholder`](/fr/docs/Web/API/Element/ariaPlaceholder) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-placeholder` qui définit une indication courte destinée à aider l'utilisateur à saisir une valeur lorsque le contrôle ne possède pas de valeur. +- [`Element.ariaPosInSet`](/fr/docs/Web/API/Element/ariaPosInSet) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-posinset` qui définit l'index ou la position de l'élément courant dans l'ensemble ou l'arbre d'éléments. +- [`Element.ariaPressed`](/fr/docs/Web/API/Element/ariaPressed) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-pressed` qui indique l'état actif/pressé des boutons. +- [`Element.ariaReadOnly`](/fr/docs/Web/API/Element/ariaReadOnly) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-readonly` qui indique que l'élément ne peut pas être édité mais qu'il peut être utilisé sinon. +- [`Element.ariaRelevant`](/fr/docs/Web/API/Element/ariaRelevant) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-relevant` qui indique les notifications qui seront déclenchées par l'agent utilisateur lorsque l'arbre d'accessibilité d'une région interactive sera modifié. Cette propriété est utilisée afin de décrire quels changements d'une région `aria-live` sont pertinents et devraient être annoncés. +- [`Element.ariaRequired`](/fr/docs/Web/API/Element/ariaRequired) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-required` qui indique que la saisie d'une utilisatrice ou d'un utilisateur est requise sur l'élément avant qu'un formulaire puisse être envoyé. +- [`Element.ariaRoleDescription`](/fr/docs/Web/API/Element/ariaRoleDescription) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-roledescription` qui définit une description compréhensible par un humain, adaptée par l'autrice ou l'auteur du document pour le rôle de l'élément courant. +- [`Element.ariaRowCount`](/fr/docs/Web/API/Element/ariaRowCount) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-rowcount` qui définit le nombre total de lignes dans un tableau, une grille ou une grille arborescente. +- [`Element.ariaRowIndex`](/fr/docs/Web/API/Element/ariaRowIndex) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-rowindex` qui définit l'index ou la position de la ligne de l'élément par rapport au nombre total de lignes dans le tableau, la grille ou la grille arborescente. +- [`Element.ariaRowIndexText`](/fr/docs/Web/API/Element/ariaRowIndexText) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-rowindextext` qui définit un libellé alternatif à `aria-rowindex`, compréhensible par un humain. +- [`Element.ariaRowSpan`](/fr/docs/Web/API/Element/ariaRowSpan) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-rowspan` qui définit le nombre de lignes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente. +- [`Element.ariaSelected`](/fr/docs/Web/API/Element/ariaSelected) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-selected` qui indique l'état de sélection pour les éléments qui peuvent être sélectionnés. +- [`Element.ariaSetSize`](/fr/docs/Web/API/Element/ariaSetSize) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-setsize` qui définit le nombre d'objets dans l'ensemble d'éléments d'une liste ou d'un arbre. +- [`Element.ariaSort`](/fr/docs/Web/API/Element/ariaSort) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-sort` qui indique si les objets d'un tableau ou d'une grille sont triés par ordre croissant ou décroissant. +- [`Element.ariaValueMax`](/fr/docs/Web/API/Element/ariaValueMax) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-valueMax` qui définit la valeur maximale autorisée pour un élément d'interface utilisateur décrivant un intervalle. +- [`Element.ariaValueMin`](/fr/docs/Web/API/Element/ariaValueMin) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-valueMin` qui définit la valeur minimale autorisée pour un élément d'interface utilisateur décrivant un intervalle. +- [`Element.ariaValueNow`](/fr/docs/Web/API/Element/ariaValueNow) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-valueNow` qui définit la valeur courante d'un élément d'interface utilisateur décrivant un intervalle. +- [`Element.ariaValueText`](/fr/docs/Web/API/Element/ariaValueText) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-valuetext` qui définit une alternative textuelle à `aria-valuenow` compréhensible par un humain. + +### Gestionnaires d'évènements + +- [`Element.onfullscreenchange`](/fr/docs/Web/API/Element/onfullscreenchange) + - : Un gestionnaire d'évènement pour l'évènement [`fullscreenchange`](/fr/docs/Web/API/Document/fullscreenchange_event) qui est envoyé lorsque l'élément passe en mode plein écran ou sort de celui-ci. Cet évènement peut être utilisé pour surveiller les transitions entre les deux modes mais aussi pour surveiller les modifications inattendues comme lorsque l'application s'exécute en arrière-plan. +- [`Element.onfullscreenerror`](/fr/docs/Web/API/Element/onfullscreenerror) + - : Un gestionnaire d'évènement pour [`fullscreenerror`](/fr/docs/Web/API/Document/fullscreenerror_event) qui est envoyé lorsqu'une erreur se produit lors du passage au mode plein écran. + +## Méthodes + +_`Element` hérite des méthodes fournit par la classe parente [`Node`](/fr/docs/Web/API/Node) et de sa classe parente avant elle : [`EventTarget`](/fr/docs/Web/API/EventTarget)._ + +- [`EventTarget.addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) + - : Enregistre un gestionnaire d'évènement sur l'élément pour un type d'évènement donné. +- [`Element.after()`](/fr/docs/Web/API/Element/after) + - : Insère un ensemble d'objets [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString) dans la liste des enfants du parent de l'élément courant, juste après ce dernier. +- [`Element.attachShadow()`](/fr/docs/Web/API/Element/attachShadow) + - : Attache un arbre du DOM sombre à l'élément indiqué puis renvoie une référence à sa racine [`ShadowRoot`](/fr/docs/Web/API/ShadowRoot). +- [`Element.animate()`](/fr/docs/Web/API/Element/animate) {{Experimental_Inline}} + - : Une méthode synthétique pour créer et exécuter une animation sur un élément. Renvoie l'instance de l'objet `Animation` créé. +- [`Element.append()`](/fr/docs/Web/API/Element/append) + - : Insère un ensemble d'objet [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString) après le dernier enfant de l'élément. +- [`Element.before()`](/fr/docs/Web/API/Element/before) + - : Insère un ensemble d'objet [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString) dans la liste des enfants du parent de l'élément courant, juste avant ce dernier. +- [`Element.closest()`](/fr/docs/Web/API/Element/closest) + - : Renvoie l'élément (`Element`) qui est le plus proche ancêtre de l'élément courant (ou l'élément courant lui-même) qui correspond au sélecteur passé en paramètre. +- [`Element.createShadowRoot()`](/fr/docs/Web/API/Element/createShadowRoot) {{Non-standard_Inline}} {{Deprecated_Inline}} + - : Crée un [DOM sombre](/fr/docs/Web/Web_Components/Using_shadow_DOM) sur l'élément, le transformant ainsi en hôte sombre. Renvoie un objet [`ShadowRoot`](/fr/docs/Web/API/ShadowRoot). +- [`Element.computedStyleMap()`](/fr/docs/Web/API/Element/computedStyleMap) {{Experimental_Inline}} + - : Renvoie une interface [`StylePropertyMapReadOnly`](/fr/docs/Web/API/StylePropertyMapReadOnly) qui fournit une représentation en lecture seule d'un bloc de déclaration CSS alternatif à [`CSSStyleDeclaration`](/fr/docs/Web/API/CSSStyleDeclaration). +- [`EventTarget.dispatchEvent()`](/fr/docs/Web/API/EventTarget/dispatchEvent) + - : Diffuse un évènement sur ce nœud dans le DOM et renvoie un booléen qui indique si aucun gestionnaire n'a annulé l'évènement. +- [`Element.getAnimations()`](/fr/docs/Web/API/Element/getAnimations) {{Experimental_Inline}} + - : Renvoie un tableau des objets `Animation` actuellement actifs sur l'élément. +- [`Element.getAttribute()`](/fr/docs/Web/API/Element/getAttribute) + - : Récupère la valeur de l'attribut nommé pour le nœud courant et le renvoie comme un [objet](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object). +- [`Element.getAttributeNames()`](/fr/docs/Web/API/Element/getAttributeNames) + - : Renvoie un tableau de noms d'attribut pour l'élément courant. +- [`Element.getAttributeNode()`](/fr/docs/Web/API/Element/getAttributeNode) + - : Récupère la représentation du nœud pour l'attrtibut nommé du nœud courant et le renvoie comme un objet [`Attr`](/fr/docs/Web/API/Attr). +- [`Element.getAttributeNodeNS()`](/fr/docs/Web/API/Element/getAttributeNodeNS) + - : Depuis le nœud courant, récupère la représentation du nœud pour l'attribut avec le nom et l'espace de noms indiqués et renvoie la valeur obtenue sous la forme d'un objet [`Attr`](/fr/docs/Web/API/Attr). +- [`Element.getAttributeNS()`](/fr/docs/Web/API/Element/getAttributeNS) + - : Depuis le nœud courant, récupère la valeur de l'attribut avec le nom et l'espace de noms indiqués et la renvoie sous la forme d'un [objet](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object). +- [`Element.getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect) + + - : Renvoie la taille d'un élément et sa position relative dans la zone d'affichage ( + + <i lang="en">viewport</i> + + ). + +- [`Element.getBoxQuads()`](/fr/docs/Web/API/Element/getBoxQuads) {{experimental_inline}} + - : Renvoie une liste d'objets [`DOMQuad`](/fr/docs/Web/API/DOMQuad) qui représentent les fragments CSS pour le nœud. +- [`Element.getClientRects()`](/fr/docs/Web/API/Element/getClientRects) + - : Renvoie une collection de rectangles qui indique les rectangles englobants pour chaque ligne de texte d'un client. +- [`Element.getElementsByClassName()`](/fr/docs/Web/API/Element/getElementsByClassName) + - : Renvoie une collection dynamique [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) qui contient tous les descendants de l'élément courant et qui possèdent la liste de classes fournie en paramètre. +- [`Element.getElementsByTagName()`](/fr/docs/Web/API/Element/getElementsByTagName) + - : Renvoie une collection dynamique [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) qui contient tous les descendants de l'élément courant avec un nom de balise donné. +- [`Element.getElementsByTagNameNS()`](/fr/docs/Web/API/Element/getElementsByTagNameNS) + - : Renvoie une collection dynamique [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) qui contient tous les descendants de l'élément courant qui ont un nom de balise et un espace de noms donnés. +- [`Element.hasAttribute()`](/fr/docs/Web/API/Element/hasAttribute) + - : Renvoie un booléen indiquant si l'élément courant possède l'attribut donné. +- [`Element.hasAttributeNS()`](/fr/docs/Web/API/Element/hasAttributeNS) + - : Renvoie un booléen indiquant si l'élément courant possède l'attribut donné pour l'espace de noms donné. +- [`Element.hasAttributes()`](/fr/docs/Web/API/Element/hasAttributes) + - : Renvoie un booléen qui indique si l'élément courant a un ou plusieurs attributs HTML. +- [`Element.hasPointerCapture()`](/fr/docs/Web/API/Element/hasPointerCapture) + - : Indique si l'élément a la capture du pointeur pour le pointeur identifié par l'identifiant passé en argument. +- [`Element.insertAdjacentElement()`](/fr/docs/Web/API/Element/insertAdjacentElement) + - : Insère un nœud d'élément à la position relative indiquée par rapport à l'élément courant. +- [`Element.insertAdjacentHTML()`](/fr/docs/Web/API/Element/insertAdjacentHTML) + - : Analyse le texte comme HTML ou XML puis insère les nœuds résultatns dans l'arbre à la position indiquée. +- [`Element.insertAdjacentText()`](/fr/docs/Web/API/Element/insertAdjacentText) + - : Insère un nœud textuel à la position relative indiquée, par rapport à l'élément courant. +- [`Element.matches()`](/fr/docs/Web/API/Element/matches) + - : Renvoie un booléen qui indique si l'élément serait ciblé par la chaîne de caractères passée en argument qui décrit un sélecteur. +- [`Element.prepend()`](/fr/docs/Web/API/Element/prepend) + - : Insère un ensemble d'objets [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString) avant le premier enfant de l'élément courant. +- [`Element.querySelector()`](/fr/docs/Web/API/Element/querySelector) + - : Renvoie le premier objet [`Node`](/fr/docs/Web/API/Node) qui correspond au sélecteur donné, relatif à l'élément courant. +- [`Element.querySelectorAll()`](/fr/docs/Web/API/Element/querySelectorAll) + - : Renvoie un objet [`NodeList`](/fr/docs/Web/API/NodeList) contenant les nœuds pour lesquels le sélecteur, passé en argument, relatif à l'élément courant. +- [`Element.releasePointerCapture()`](/fr/docs/Web/API/Element/releasePointerCapture) + - : Libère (arrête) la capture du pointeur précédemment activée pour un évènement de pointeur spécifique. +- [`Element.remove()`](/fr/docs/Web/API/Element/remove) + - : Retire l'élément de la liste des éléments enfants de son parent. +- [`Element.removeAttribute()`](/fr/docs/Web/API/Element/removeAttribute) + - : Retire l'attribut nommé du nœud courant. +- [`Element.removeAttributeNode()`](/fr/docs/Web/API/Element/removeAttributeNode) + - : Retire la représentation nodale de l'attribut nommé pour le nœud courant. +- [`Element.removeAttributeNS()`](/fr/docs/Web/API/Element/removeAttributeNS) + - : Sur le nœud courant, retire l'attribut avec le nom et l'espace de noms indiqués. +- [`EventTarget.removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener) + - : Retire un gestionnaire d'évènement de l'élément. +- [`Element.replaceChildren()`](/fr/docs/Web/API/Element/replaceChildren) + - : Remplace l'enfant existant d'un nœud avec un nouvel ensemble d'enfants. +- [`Element.replaceWith()`](/fr/docs/Web/API/Element/replaceWith) + - : Remplace l'élément dans la liste des enfants de son parent par un ensemble d'objets [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString). +- [`Element.requestFullscreen()`](/fr/docs/Web/API/Element/requestFullScreen) {{Experimental_Inline}} + - : Demande au navigateur, de façon asynchrone, d'afficher l'élément en plein écran. +- [`Element.requestPointerLock()`](/fr/docs/Web/API/Element/requestPointerLock) {{Experimental_Inline}} + - : Demande au navigateur, de façon asynchrone, de bloquer le pointeur sur l'élément indiqué. +- [`Element.scroll()`](/fr/docs/Web/API/Element/scroll) + - : Défile jusqu'à un ensemble de coordonnées données à l'intérieur de l'élément courant. +- [`Element.scrollBy()`](/fr/docs/Web/API/Element/scrollBy) + - : Défile un élément de la quantité indiquée. +- [`Element.scrollIntoView()`](/fr/docs/Web/API/Element/scrollIntoView) {{Experimental_Inline}} + - : Défile la page jusqu'à ce que l'élément apparaisse dans la vue. +- [`Element.scrollTo()`](/fr/docs/Web/API/Element/scrollTo) + - : Défile jusqu'à un ensemble de coordonnées particulier à l'intérieur de l'élément donné. +- [`Element.setAttribute()`](/fr/docs/Web/API/Element/setAttribute) + - : Définit la valeur d'un attribut nommé pour le nœud courant. +- [`Element.setAttributeNode()`](/fr/docs/Web/API/Element/setAttributeNode) + - : Définit la représentation nodale d'un attribut nommé pour le nœud courant. +- [`Element.setAttributeNodeNS()`](/fr/docs/Web/API/Element/setAttributeNodeNS) + - : Pour le nœud courant, définit la représentation nodale d'un attribut avec le nom et l'espace de noms indiqués. +- [`Element.setAttributeNS()`](/fr/docs/Web/API/Element/setAttributeNS) + - : Pour le nœud courant, définit la valeur de l'attribut avec le nom et l'espace de noms indiqués. +- [`Element.setCapture()`](/fr/docs/Web/API/Element/setCapture) {{Non-standard_Inline}}{{Deprecated_Inline}} + - : Initialise la capture des évènements liés à la souris, redirigeant ainsi tous les évènements de la souris sur cet élément. +- [`Element.setPointerCapture()`](/fr/docs/Web/API/Element/setPointerCapture) + - : Désigne un élément spécifique comme future cible pour la capture des [évènements de pointeur](/fr/docs/Web/API/Pointer_events). +- [`Element.toggleAttribute()`](/fr/docs/Web/API/Element/toggleAttribute) + - : Active/désactive un attribut booléen sur l'élément courant : s'il est présent, cela le retire et s'il est absent, cela l'ajoute. + +## Évènements + +On peut écouter ces évènements en utilisant la méthode `addEventListener()` ou en affectant un gestionnaire d'évènement à la propriété `onnomevenement` de cette interface. + +- [`cancel`](/fr/docs/Web/API/HTMLDialogElement/cancel_event) + + - : Déclenché sur un élément [`<dialog>`](/fr/docs/Web/HTML/Element/dialog) lorsque la personne indique au navigateur le souhait de fermer la boîte de dialogue courante. Un navigateur pourra par exemple déclencher cet évènement lors d'un appui sur la touche + + <kbd>Echap</kbd> + + ou lors d'un clic sur le bouton « Fermer cette boîte de dialogue » fourni par le navigateur. Également disponible via la propriété [`oncancel`](/fr/docs/Web/API/GlobalEventHandlers/oncancel). + +- [`error`](/fr/docs/Web/API/Element/error_event) + - : Déclenché lors de l'échec du chargement d'une ressource ou lorsque celle-ci ne peut être utilisée. Cet évènement sera par exemple déclenché lors d'une erreur d'exécution d'un script ou lorsqu'une image ne peut être trouvée ou est invalide. Également disponible via la propriété [`onerror`](/fr/docs/Web/API/GlobalEventHandlers/onerror). +- [`scroll`](/fr/docs/Web/API/Element/scroll_event) + - : Déclenché lors du défilement de la vue du document ou d'un élément. Également disponible via la propriété [`onscroll`](/fr/docs/Web/API/GlobalEventHandlers/onscroll). +- [`select`](/fr/docs/Web/API/Element/select_event) + - : Déclenché lors de la sélection de texte. Également disponible via la propriété [`onselect`](/fr/docs/Web/API/GlobalEventHandlers/onselect). +- [`show`](/fr/docs/Web/API/Element/show_event) + - : Déclenché lorsqu'un évènement [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) a été déclenché ou a bouillonné sur un élément qui dispose de l'attribut [`contextmenu`](/fr/docs/Web/HTML/Global_attributes/contextmenu) attribute. {{deprecated_inline}} Également disponible via la propriété [`onshow`](/fr/docs/Web/API/GlobalEventHandlers/onshow). +- [`wheel`](/fr/docs/Web/API/Element/wheel_event) + - : Déclenché lorsque l'utilisateur fait tourner la molette d'un appareil de pointage (généralement une souris). Également disponible via la propriété [`onwheel`](/fr/docs/Web/API/GlobalEventHandlers/onwheel). + +### Évènements du presse-papiers + +- [`copy`](/fr/docs/Web/API/Element/copy_event) + - : Déclenché lorsque l'utilisateur initie une action de copie via l'interface du navigateur. Également disponible via la propriété [`oncopy`](/fr/docs/Web/API/HTMLElement/oncopy). +- [`cut`](/fr/docs/Web/API/Element/cut_event) + - : Déclenché lorsque l'utilisateur initie une action de coupe via l'interface du navigateur. Également disponible via la propriété [`oncut`](/fr/docs/Web/API/HTMLElement/oncut). +- [`paste`](/fr/docs/Web/API/Element/paste_event) + - : Déclenché lorsque l'utilisateur initie une action pour coller via l'interface du navigateur. Également disponible via la propriété [`onpaste`](/fr/docs/Web/API/HTMLElement/onpaste). + +### Évènements de composition + +- [`compositionend`](/fr/docs/Web/API/Element/compositionend_event) + - : Déclenché lorsqu'un système de composition textuel tel qu'un [éditeur de méthode de saisie](/fr/docs/Glossary/Input_method_editor) termine ou annule la session de composition courante. +- [`compositionstart`](/fr/docs/Web/API/Element/compositionstart_event) + - : Déclenché lorsqu'un système de composition textuel tel qu'un [éditeur de méthode de saisie](/fr/docs/Glossary/Input_method_editor) démarre une nouvelle session de composition. +- [`compositionupdate`](/fr/docs/Web/API/Element/compositionupdate_event) + - : Déclenché lorsqu'un nouveau caractère est reçu dans le contexte d'une session de composition textuelle. + +### Évènements pour le focus + +- [`blur`](/fr/docs/Web/API/Element/blur_event) + - : Déclenché lorsqu'un élément a perdu le focus. Également disponible via la propriété [`onblur`](/fr/docs/Web/API/GlobalEventHandlers/onblur). +- [`focus`](/fr/docs/Web/API/Element/focus_event) + - : Déclenché lorsqu'un élément reçoit le focus. Également disponible via la propriété [`onfocus`](/fr/docs/Web/API/GlobalEventHandlers/onfocus). +- [`focusin`](/fr/docs/Web/API/Element/focusin_event) + - : Déclenché lorsqu'un élément s'apprête à recevoir le focus. +- [`focusout`](/fr/docs/Web/API/Element/focusout_event) + - : Déclenché lorsqu'un élément s'apprête à perdre le focus. + +### Évènements relatifs au plein écran + +- [`fullscreenchange`](/fr/docs/Web/API/Element/fullscreenchange_event) + - : Envoyé à un élément (`Element`) lorsque celui-ci effectue une transition (entrée ou sortie) pour le mode [plein écran](/fr/docs/Web/API/Fullscreen_API/Guide). Également disponible via la propriété [`onfullscreenchange`](/fr/docs/Web/API/Element/onfullscreenchange). +- [`fullscreenerror`](/fr/docs/Web/API/Element/fullscreenerror_event) + - : Envoyé à un élément `Element` si une erreur se produit lors d'une transition (entrée ou sortie) pour le mode [plein écran](/fr/docs/Web/API/Fullscreen_API/Guide). Également disponible via la propriété [`onfullscreenerror`](/fr/docs/Web/API/Element/onfullscreenerror). + +### Évènements relatifs au clavier + +- [`keydown`](/fr/docs/Web/API/Element/keydown_event) + - : Déclenché lors de l'appui sur une touche du clavier. Également disponible via la propriété [`onkeydown`](/fr/docs/Web/API/GlobalEventHandlers/onkeydown). +- [`keypress`](/fr/docs/Web/API/Element/keypress_event) + - : Déclenché lorsqu'une touche produit un caractère lorsqu'elle est pressée. {{deprecated_inline}} Également disponible via la propriété [`onkeypress`](/fr/docs/Web/API/GlobalEventHandlers/onkeypress). +- [`keyup`](/fr/docs/Web/API/Element/keyup_event) + - : Déclenché lorsqu'une touche est relâchée. Également disponible via la propriété [`onkeyup`](/fr/docs/Web/API/GlobalEventHandlers/onkeyup). + +### Évènements relatifs à la souris + +- [`auxclick`](/fr/docs/Web/API/Element/auxclick_event) + - : Déclenché lorsqu'un bouton non primaire d'un appareil de pointage (c'est-à-dire tout bouton de la souris en dehors du bouton gauche) a été pressé puis relâché sur un élément. Également disponible via la propriété [`onauxclick`](/fr/docs/Web/API/GlobalEventHandlers/onauxclick). +- [`click`](/fr/docs/Web/API/Element/click_event) + - : Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été pressé puis relâche sur un élément. Également disponible via la propriété [`onclick`](/fr/docs/Web/API/GlobalEventHandlers/onclick). +- [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) + - : Déclenché lorsqu'un utilisateur tente d'ouvrir un menu contextuel. Également disponible via la propriété [`oncontextmenu`](/fr/docs/Web/API/GlobalEventHandlers/oncontextmenu). +- [`dblclick`](/fr/docs/Web/API/Element/dblclick_event) + - : Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été utilisé pour un double-clic sur un élément. Également disponible via la propriété [`ondblclick`](/fr/docs/Web/API/GlobalEventHandlers/ondblclick). +- [`DOMActivate`](/fr/docs/Web/API/Element/DOMActivate_event) {{Deprecated_Inline}} + - : Se produit lorsqu'un élément est activé, par exemple avec un clic de souris ou l'appui d'une touche. +- [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) + - : Déclenché lorsqu'un bouton d'un appareil de pointage est pressé sur un élément. Également disponible via la propriété [`onmousedown`](/fr/docs/Web/API/GlobalEventHandlers/onmousedown). +- [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) + - : Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé pour arriver sur l'élément disposant du gestionnaire d'évènement. Également disponible via la propriété [`onmouseenter`](/fr/docs/Web/API/GlobalEventHandlers/onmouseenter). +- [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) + - : Déclenché lorsque le pointeur d'un appareil de pointage (généralement une souris) est déplacée en dehors de l'élément qui dispose du gestionnaire d'évènement. Également disponible via la propriété [`onmouseleave`](/fr/docs/Web/API/GlobalEventHandlers/onmouseleave). +- [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) + - : Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé sur un élément. Également disponible via la propriété [`onmousemove`](/fr/docs/Web/API/GlobalEventHandlers/onmousemove). +- [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) + - : Déclenché lorsqu'un appareil de pointage (généralement une souris) se déplace pour quitter l'élément qui dispose du gestionnaire d'évènement (ou lorsque le pointeur quitte l'un des enfants de cet élément). Également disponible via la propriété [`onmouseout`](/fr/docs/Web/API/GlobalEventHandlers/onmouseout). +- [`mouseover`](/fr/docs/Web/API/Element/mouseover_event) + - : Déclenché lorsqu'un appareil de pointage arrive sur l'élément (ou l'un de ses enfants) qui dispose du gestionnaire d'évènement. Également disponible via la propriété [`onmouseover`](/fr/docs/Web/API/GlobalEventHandlers/onmouseover). +- [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) + - : Déclenché lorsque le bouton d'un appareil de pointage est relâché pour un élément. Également disponible via la propriété [`onmouseup`](/fr/docs/Web/API/GlobalEventHandlers/onmouseup). +- [`webkitmouseforcechanged`](/fr/docs/Web/API/Element/webkitmouseforcechanged_event) + - : Déclenché à chaque fois que la quantite dé pression change sur le pavé ou l'écran tactile. +- [`webkitmouseforcedown`](/fr/docs/Web/API/Element/webkitmouseforcedown_event) + - : Déclenché après l'évènement `mousedown` dès que suffisamment de pression a été appliquée pour qualifier ce clic de clic forcé. +- [`webkitmouseforcewillbegin`](/fr/docs/Web/API/Element/webkitmouseforcewillbegin_event) + - : Déclenché avant l'évènement [`mousedown`](/fr/docs/Web/API/Element/mousedown_event). +- [`webkitmouseforceup`](/fr/docs/Web/API/Element/webkitmouseforceup_event) + - : Déclenché après l'évènement [`webkitmouseforcedown`](/fr/docs/Web/API/Element/webkitmouseforcedown_event) dès que suffisamment de pression a été relâchée pour terminer le clic forcé. + +### Évènements tactiles + +- [`touchcancel`](/fr/docs/Web/API/Element/touchcancel_event) + - : Déclenché lorsqu'un ou plusieurs points de toucher ont été perturbés de façon spécifique à l'implémentation (par exemple lorsque trop de points de toucher ont été créés). Également disponible avec la propriété [`ontouchcancel`](/fr/docs/Web/API/GlobalEventHandlers/ontouchcancel). +- [`touchend`](/fr/docs/Web/API/Element/touchend_event) + - : Déclenché lorsqu'un ou plusieurs points de toucher sont retirés de la surface tactile. Également disponible via la propriété [`ontouchend`](/fr/docs/Web/API/GlobalEventHandlers/ontouchend). +- [`touchmove`](/fr/docs/Web/API/Element/touchmove_event) + - : Déclenché lorsqu'un ou plusieurs points de toucher se déplacent sur la surface tactile. Également disponible via la propriété [`ontouchmove`](/fr/docs/Web/API/GlobalEventHandlers/ontouchmove). +- [`touchstart`](/fr/docs/Web/API/Element/touchstart_event) + - : Déclenché lorsqu'un ou plusieurs points de toucher sont placés sur la surface tactile. Également disponible via la propriété [`ontouchstart`](/fr/docs/Web/API/GlobalEventHandlers/ontouchstart). + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} diff --git a/files/fr/web/api/element/innerhtml/index.md b/files/fr/web/api/element/innerhtml/index.md index 91ab29da37..8fe3f15e3b 100644 --- a/files/fr/web/api/element/innerhtml/index.md +++ b/files/fr/web/api/element/innerhtml/index.md @@ -10,154 +10,162 @@ tags: translation_of: Web/API/Element/innerHTML original_slug: Web/API/Element/innertHTML --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>La propriété <strong><code>Element.innerHTML</code></strong> de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément.</p> +La propriété **`Element.innerHTML`** de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément. -<div class="note"> - <p><strong>Note :</strong> Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères <code>(&), (<),</code> ou <code>(>)</code>, <code>innerHTML</code> renverra à la place les chaînes suivantes : <code>"&amp;"</code>, <code>"&lt;"</code> et <code>"&gt;"</code> respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.</p> -</div> +> **Note :** Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères `(&), (<),` ou `(>)`, `innerHTML` renverra à la place les chaînes suivantes : `"&"`, `"<"` et `">"` respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds. -<p>Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p> +Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">const <em>content</em> = <em>element</em>.innerHTML; + const content = element.innerHTML; -<em>element</em>.innerHTML = <em>htmlString</em>; -</pre> + element.innerHTML = htmlString; -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de <code>innerHTML</code> supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne <code>htmlString</code>.</p> +Une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. -<h3 id="Exceptions">Exceptions</h3> +### Exceptions -<dl> - <dt><code>SyntaxError</code></dt> - <dd>Une tentative a été faite de définir la valeur de <code>innerHTML</code> en utilisant une chaîne qui n'est pas correctement formée HTML.</dd> - <dt><code>NoModificationAllowedError</code></dt> - <dd>Une tentative a été faite d'insérer le code HTML dans un noeud dont le parent est un {{domxref("Document")}}.</dd> -</dl> +- `SyntaxError` + - : Une tentative a été faite de définir la valeur de `innerHTML` en utilisant une chaîne qui n'est pas correctement formée HTML. +- `NoModificationAllowedError` + - : Une tentative a été faite d'insérer le code HTML dans un noeud dont le parent est un {{domxref("Document")}}. -<h2 id="Notes_dutilisation">Notes d'utilisation</h2> +## Notes d'utilisation -<p>La propriété <code>innerHTML</code> peut être utilisée pour examiner la source HTML actuelle de la page, y compris tous les changements réalisés depuis son chargement initial.</p> +La propriété `innerHTML` peut être utilisée pour examiner la source HTML actuelle de la page, y compris tous les changements réalisés depuis son chargement initial. -<h3 id="Lecture_du_contenu_HTML_dun_élément">Lecture du contenu HTML d'un élément</h3> +### Lecture du contenu HTML d'un élément -<p>La lecture de <code>innerHTML</code> amène l'agent utilisateur à sérialiser le fragment HTML ou XML composé des descendants de l'élément. La chaîne résultante est renvoyée.</p> +La lecture de `innerHTML` amène l'agent utilisateur à sérialiser le fragment HTML ou XML composé des descendants de l'élément. La chaîne résultante est renvoyée. -<pre class="brush: js">let contents = myElement.innerHTML;</pre> +```js +let contents = myElement.innerHTML; +``` -<p>Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément.</p> +Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément. -<div class="note"> -<p><strong>Note :</strong> Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine.</p> -</div> +> **Note :** Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine. -<h3 id="Remplacement_du_contenu_dun_élément">Remplacement du contenu d'un élément</h3> +### Remplacement du contenu d'un élément -<p>Définir la valeur de <code>innerHTML</code> vous permet de remplacer aisément le contenu existant d'un élément par un nouveau contenu.</p> +Définir la valeur de `innerHTML` vous permet de remplacer aisément le contenu existant d'un élément par un nouveau contenu. -<p>Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l'attribut {{domxref("Document.body", "body")}} du document.</p> +Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l'attribut {{domxref("Document.body", "body")}} du document. -<pre class="brush: js">document.body.innerHTML = "";</pre> +```js +document.body.innerHTML = ""; +``` -<p>Cet exemple récupère le balisage HTML actuel du document et remplace les caractères <code>"<"</code> par l'entité HTML <code>"& lt;"</code>, convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément {{HTMLElement ("pre")}}. Puis, la valeur de <code>innerHTML</code> est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page.</p> +Cet exemple récupère le balisage HTML actuel du document et remplace les caractères `"<"` par l'entité HTML `"& lt;"`, convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément {{HTMLElement ("pre")}}. Puis, la valeur de `innerHTML` est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page. -<pre class="brush: js">document.documentElement.innerHTML = "<pre>" + - document.documentElement.innerHTML.replace(/</g,"&lt;") + - "</pre>";</pre> +```js +document.documentElement.innerHTML = "<pre>" + + document.documentElement.innerHTML.replace(/</g,"<") + + "</pre>"; +``` -<h4 id="Détails_opérationnels">Détails opérationnels</h4> +#### Détails opérationnels -<p>Qu'arrive-t-il exactement quand vous définissez la valeur de <code>innerHTML</code> ? Cela entraîne l'agent utilisateur à suivre ces étapes :</p> +Qu'arrive-t-il exactement quand vous définissez la valeur de `innerHTML` ? Cela entraîne l'agent utilisateur à suivre ces étapes : -<ol> - <li>La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments.</li> - <li>Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément <code><template></code> est remplacé par le nouveau <code>DocumentFragment</code> créé à l'étape 1.</li> - <li>Pour tous les autres éléments, le contenu de l'élément est remplacé par les noeuds du nouveau <code>DocumentFragment</code>.</li> -</ol> +1. La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments. +2. Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément `<template>` est remplacé par le nouveau `DocumentFragment` créé à l'étape 1. +3. Pour tous les autres éléments, le contenu de l'élément est remplacé par les noeuds du nouveau `DocumentFragment`. -<h3 id="Considérations_de_sécurité">Considérations de sécurité</h3> +### Considérations de sécurité -<p>Il n'est pas rare de voir <code>innerHTML</code> utilisé pour insérer du texte dans une page Web. Il est possible que ceci devienne un vecteur d'attaque sur un site, ce qui crée potentiellement un risque de sécurité.</p> +Il n'est pas rare de voir `innerHTML` utilisé pour insérer du texte dans une page Web. Il est possible que ceci devienne un vecteur d'attaque sur un site, ce qui crée potentiellement un risque de sécurité. -<pre class="brush: js">const name = "John"; +```js +const name = "John"; // en supposant que 'el' est un élément de document HTML el.innerHTML = name; // inoffensif dans ce cas // ... -name = "<script>alert('I am John in an annoying alert!')</script>"; -el.innerHTML = name; // inoffensif dans ce cas</pre> +name = "<script>alert('I am John in an annoying alert!')</script>"; +el.innerHTML = name; // inoffensif dans ce cas +``` -<p>Bien que cela puisse ressembler à une attaque {{interwiki ("wikipedia", "cross-site_scripting","cross-site scripting")}}, le résultat est inoffensif. HTML5 spécifie qu'une balise {{HTMLElement ("script")}} insérée avec <code>innerHTML</code> <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">ne doit pas s'exécuter</a>.</p> +Bien que cela puisse ressembler à une attaque {{interwiki ("wikipedia", "cross-site_scripting","cross-site scripting")}}, le résultat est inoffensif. HTML5 spécifie qu'une balise {{HTMLElement ("script")}} insérée avec `innerHTML` [ne doit pas s'exécuter](https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0). -<p>Cependant, il existe des moyens d'exécuter JavaScript sans utiliser les éléments {{HTMLElement ("script")}}, donc il existe toujours un risque de sécurité chaque fois que vous utilisez <code>innerHTML</code> pour définir des chaînes sur lesquelles vous n'avez aucun contrôle. Par exemple :</p> +Cependant, il existe des moyens d'exécuter JavaScript sans utiliser les éléments {{HTMLElement ("script")}}, donc il existe toujours un risque de sécurité chaque fois que vous utilisez `innerHTML` pour définir des chaînes sur lesquelles vous n'avez aucun contrôle. Par exemple : -<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>"; -el.innerHTML = name; // affiche l'alerte</pre> +```js +const name = "<img src='x' onerror='alert(1)'>"; +el.innerHTML = name; // affiche l'alerte +``` -<p>Pour cette raison, il est recommandé de ne pas utiliser <code>innerHTML</code> pour insérer du texte brut ; à la place, utilisez {{domxref("Node.textContent")}}. Cela n'analyse pas le contenu passé en HTML, mais l'insère à la place en tant que texte brut.</p> +Pour cette raison, il est recommandé de ne pas utiliser `innerHTML` pour insérer du texte brut ; à la place, utilisez {{domxref("Node.textContent")}}. Cela n'analyse pas le contenu passé en HTML, mais l'insère à la place en tant que texte brut. -<div class="warning"> -<p><strong>Attention :</strong> Si votre projet est soumis à une vérification de sécurité, l'utilisation de <code>innerHTML</code> entraînera probablement le rejet de votre code. Par exemple, si vous utilisez <code>innerHTML</code> dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.</p> -</div> +> **Attention :** Si votre projet est soumis à une vérification de sécurité, l'utilisation de `innerHTML` entraînera probablement le rejet de votre code. Par exemple, si vous utilisez `innerHTML` dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Cet exemple utilise <code>innerHTML</code> pour créer un mécanisme pour consigner des messages dans une boîte sur une page Web.</p> +Cet exemple utilise `innerHTML` pour créer un mécanisme pour consigner des messages dans une boîte sur une page Web. -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">function log(msg) { +```js +function log(msg) { var logElem = document.querySelector(".log"); var time = new Date(); var timeStr = time.toLocaleTimeString(); - logElem.innerHTML += timeStr + ": " + msg + "<br/>"; + logElem.innerHTML += timeStr + ": " + msg + "<br/>"; } -log("Logging mouse events inside this container...");</pre> +log("Logging mouse events inside this container..."); +``` -<p>La fonction <code>log()</code> crée la sortie du journal en récupérant l'heure actuelle à partir d'un objet {{jsxref ("Date")}} en utilisant {{jsxref ("Date.toLocaleTimeString", "toLocaleTimeString ()")}} et en créant une chaîne avec l'horodatage et le texte du message. Ensuite, le message est ajouté à la boîte avec la classe <code>"log"</code>.</p> +La fonction `log()` crée la sortie du journal en récupérant l'heure actuelle à partir d'un objet {{jsxref ("Date")}} en utilisant {{jsxref ("Date.toLocaleTimeString", "toLocaleTimeString ()")}} et en créant une chaîne avec l'horodatage et le texte du message. Ensuite, le message est ajouté à la boîte avec la classe `"log"`. -<p>Nous ajoutons une seconde méthode qui enregistre des informations sur les événements basés sur {{domxref ("MouseEvent")}} (tels que {{event ("mousedown")}}, {{event ("click")}} et {{event ("mouseenter") }}) :</p> +Nous ajoutons une seconde méthode qui enregistre des informations sur les événements basés sur {{domxref ("MouseEvent")}} (tels que {{event ("mousedown")}}, {{event ("click")}} et {{event ("mouseenter") }}) : -<pre class="brush: js">function logEvent(event) { - var msg = "Event <strong>" + event.type + "</strong> at <em>" + - event.clientX + ", " + event.clientY + "</em>"; +```js +function logEvent(event) { + var msg = "Event <strong>" + event.type + "</strong> at <em>" + + event.clientX + ", " + event.clientY + "</em>"; log(msg); -}</pre> +} +``` -<p>Alors, nous utilisons ceci comme un gestionnaire d'évènements pour un certain nombre d'évènements de souris sur la boîte qui contient notre journal.</p> +Alors, nous utilisons ceci comme un gestionnaire d'évènements pour un certain nombre d'évènements de souris sur la boîte qui contient notre journal. -<pre class="brush: js">var boxElem = document.querySelector(".box"); +```js +var boxElem = document.querySelector(".box"); boxElem.addEventListener("mousedown", logEvent); boxElem.addEventListener("mouseup", logEvent); boxElem.addEventListener("click", logEvent); boxElem.addEventListener("mouseenter", logEvent); -boxElem.addEventListener("mouseleave", logEvent);</pre> +boxElem.addEventListener("mouseleave", logEvent); +``` -<h3 id="HTML">HTML</h3> +### HTML -<p>Le HTML est assez simple pour notre exemple.</p> +Le HTML est assez simple pour notre exemple. -<pre class="brush: html"><div class="box"> - <div><strong>Log:</strong></div> - <div class="log"></div> -</div></pre> +```html +<div class="box"> + <div><strong>Log:</strong></div> + <div class="log"></div> +</div> +``` -<p>Le {{HTMLElement ("div")}} avec la classe <code>"box"</code> est juste un conteneur pour la mise en page, présentant le contenu avec une boîte autour de lui. Le <code><div></code> dont la classe est <code>"log"</code> est le conteneur pour le texte du journal lui-même.</p> +Le {{HTMLElement ("div")}} avec la classe `"box"` est juste un conteneur pour la mise en page, présentant le contenu avec une boîte autour de lui. Le `<div>` dont la classe est `"log"` est le conteneur pour le texte du journal lui-même. -<h3 id="Notes">CSS</h3> +### CSS -<p>Les styles CSS suivants pour notre exemple de contenu.</p> +Les styles CSS suivants pour notre exemple de contenu. -<pre class="brush: css">.box { +```css +.box { width: 600px; height: 300px; border: 1px solid black; @@ -169,38 +177,24 @@ boxElem.addEventListener("mouseleave", logEvent);</pre> .log { margin-top: 8px; font-family: monospace; -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>Le contenu résultant ressemble à ceci. Vous pouvez voir la sortie dans le journal en déplaçant la souris dans et hors de la boîte, en cliquant dedans, et ainsi de suite.</p> - -<p>{{EmbedLiveSample("Exemple", 640, 350)}}</p> - -<h2 id="Specification">Spécification</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM Parsing', '#innerhtml', 'Element.innerHTML')}}</td> - <td>{{ Spec2('DOM Parsing') }}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="References">Voir aussi</h2> - -<ul> - <li>{{domxref("Node.textContent")}} and {{domxref("Node.innerText")}}</li> - <li>{{domxref("Element.insertAdjacentHTML")}}</li> - <li>Analyse HTML dans une arborescence DOM : {{domxref("DOMParser")}}</li> - <li>Sérialisation XML ou HTML dans une arborescence DOM : {{domxref("XMLSerializer")}}</li> -</ul> +} +``` + +### Résultat + +Le contenu résultant ressemble à ceci. Vous pouvez voir la sortie dans le journal en déplaçant la souris dans et hors de la boîte, en cliquant dedans, et ainsi de suite. + +{{EmbedLiveSample("Exemple", 640, 350)}} + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('DOM Parsing', '#innerhtml', 'Element.innerHTML')}} | {{ Spec2('DOM Parsing') }} | Définition initiale. | + +## Voir aussi + +- {{domxref("Node.textContent")}} and {{domxref("Node.innerText")}} +- {{domxref("Element.insertAdjacentHTML")}} +- Analyse HTML dans une arborescence DOM : {{domxref("DOMParser")}} +- Sérialisation XML ou HTML dans une arborescence DOM : {{domxref("XMLSerializer")}} diff --git a/files/fr/web/api/element/insertadjacentelement/index.md b/files/fr/web/api/element/insertadjacentelement/index.md index 8587eb5de0..f13f332b60 100644 --- a/files/fr/web/api/element/insertadjacentelement/index.md +++ b/files/fr/web/api/element/insertadjacentelement/index.md @@ -9,72 +9,55 @@ tags: - Méthodes translation_of: Web/API/Element/insertAdjacentElement --- -<p>{{APIRef("DOM")}}</p> - -<p>La méthode <code>insertAdjacentElement()</code> insère un noeud d'élément donné à une position donnée par rapport à l'élément sur lequel il est appelé.</p> - -<h2 id="Syntax">Syntaxe</h2> - -<pre><em>targetElement</em>.insertAdjacentElement(<em>position</em>, <em>element</em>);</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt>position</dt> - <dd>Un objet {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la position par rapport à <code>targetElement</code> ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes : - <ul> - <li><code>'beforebegin'</code> : Avant <code>targetElement</code> lui-même.</li> - <li><code>'afterbegin'</code> : A l'intérieur de <code>targetElement</code>, avant son premier enfant.</li> - <li><code>'beforeend'</code> : A l'intérieur de <code>targetElement</code>, après son dernier enfant.</li> - <li><code>'afterend'</code> : Après <code>targetElement</code> lui-même.</li> - </ul> - </dd> - <dt>element</dt> - <dd>L'élément à insérer dans l'arbre.</dd> -</dl> - -<h3 id="Valeur_retournée">Valeur retournée</h3> - -<p>L'élément inséré ou <code>null</code> si l'insertion a échouée.</p> - -<h3 id="Exceptions">Exceptions</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Exception</th> - <th scope="col">Explications</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>SyntaxError</code></td> - <td>La <code>position</code> donnée n'est pas une valeur reconnue.</td> - </tr> - <tr> - <td><code>TypeError</code></td> - <td>L'<code>element</code> spécifié n'est pas un élément valide.</td> - </tr> - </tbody> -</table> - -<h3 id="Visualisation_des_positionnements">Visualisation des positionnements</h3> - -<pre><!-- beforebegin --> -<p> -<!-- afterbegin --> -foo -<!-- beforeend --> -</p> -<!-- afterend --></pre> - -<div class="note"> - <p><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent.</p> -</div> - -<h2 id="Example">Exemple</h2> - -<pre class="brush: js">beforeBtn.addEventListener('click', function() { +{{APIRef("DOM")}} + +La méthode `insertAdjacentElement()` insère un noeud d'élément donné à une position donnée par rapport à l'élément sur lequel il est appelé. + +## Syntaxe + + targetElement.insertAdjacentElement(position, element); + +### Paramètres + +- position + + - : Un objet {{domxref("DOMString")}} (_chaîne de caractères_) représentant la position par rapport à `targetElement` ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes : + + - `'beforebegin'` : Avant `targetElement` lui-même. + - `'afterbegin'` : A l'intérieur de `targetElement`, avant son premier enfant. + - `'beforeend'` : A l'intérieur de `targetElement`, après son dernier enfant. + - `'afterend'` : Après `targetElement` lui-même. + +- element + - : L'élément à insérer dans l'arbre. + +### Valeur retournée + +L'élément inséré ou `null` si l'insertion a échouée. + +### Exceptions + +| Exception | Explications | +| ------------- | --------------------------------------------------- | +| `SyntaxError` | La `position` donnée n'est pas une valeur reconnue. | +| `TypeError` | L'`element` spécifié n'est pas un élément valide. | + +### Visualisation des positionnements + + <!-- beforebegin --> + <p> + <!-- afterbegin --> + foo + <!-- beforeend --> + </p> + <!-- afterend --> + +> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent. + +## Exemple + +```js +beforeBtn.addEventListener('click', function() { var tempDiv = document.createElement('div'); tempDiv.style.backgroundColor = randomColor(); if (activeElem) { @@ -90,38 +73,24 @@ afterBtn.addEventListener('click', function() { activeElem.insertAdjacentElement('afterend',tempDiv); } setListener(tempDiv); -});</pre> - -<p>Une démo de notre <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html">insertAdjacentElement.html</a> est disponible sur Github ( avec le <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html">code source</a> ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons <em>Insert before</em> (<em>insérer avant</em>) et <em>Insert after</em> (<em>insérer après</em>) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant <code>insertAdjacentElement()</code>.</p> - -<h2 id="Specification">Spécification</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}</td> - <td>{{ Spec2('DOM WHATWG') }}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.insertAdjacentElement")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("Element.insertAdjacentHTML()")}}</li> - <li>{{domxref("Element.insertAdjacentText()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("Node.appendChild()")}} ( même effet que <code>beforeend</code> )</li> -</ul> +}); +``` + +Une démo de notre [insertAdjacentElement.html](https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html) est disponible sur Github ( avec le [code source](https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html) ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons _Insert before_ (_insérer avant_) et _Insert after_ (_insérer après_) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant `insertAdjacentElement()`. + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}} | {{ Spec2('DOM WHATWG') }} | | + +## Compatibilité des navigateurs + +{{Compat("api.Element.insertAdjacentElement")}} + +## Voir aussi + +- {{domxref("Element.insertAdjacentHTML()")}} +- {{domxref("Element.insertAdjacentText()")}} +- {{domxref("Node.insertBefore()")}} +- {{domxref("Node.appendChild()")}} ( même effet que `beforeend` ) diff --git a/files/fr/web/api/element/insertadjacenthtml/index.md b/files/fr/web/api/element/insertadjacenthtml/index.md index e1f0ffa06a..39f3fb07b7 100644 --- a/files/fr/web/api/element/insertadjacenthtml/index.md +++ b/files/fr/web/api/element/insertadjacenthtml/index.md @@ -8,92 +8,76 @@ tags: - Reference translation_of: Web/API/Element/insertAdjacentHTML --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p><code>insertAdjacentHTML()</code> analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que <strong>innerHTML</strong>.</p> +`insertAdjacentHTML()` analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que **innerHTML**. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">element.insertAdjacentHTML(position, text);</pre> +```js +element.insertAdjacentHTML(position, text); +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>position</code> </dt> - <dd>une {{domxref("DOMString")}} représentant la position relative à l'<code>element</code>, et doit être une des chaînes de caractères suivantes :</dd> -</dl> +- `position` + - : une {{domxref("DOMString")}} représentant la position relative à l'`element`, et doit être une des chaînes de caractères suivantes : -<ul> - <li><code>'beforebegin'</code> : Avant l'<code>element</code> lui-même.</li> - <li><code>'afterbegin'</code> : Juste à l'intérieur de l'<code>element</code> , avant son premier enfant.</li> - <li><code>'beforeend'</code> : Juste à l'intérieur de l'<code>element</code> , après son dernier enfant.</li> - <li><code>'afterend'</code> : Après <code>element</code> lui-même.</li> -</ul> +<!----> -<dl> - <dt><code>text</code></dt> - <dd> est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM.</dd> -</dl> +- `'beforebegin'` : Avant l'`element` lui-même. +- `'afterbegin'` : Juste à l'intérieur de l'`element` , avant son premier enfant. +- `'beforeend'` : Juste à l'intérieur de l'`element` , après son dernier enfant. +- `'afterend'` : Après `element` lui-même. -<h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3> +<!----> +- `text` + - : est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM. -<pre><!-- beforebegin --> -<p> - <!-- afterbegin --> - foo - <!-- beforeend --> -</p> -<!-- afterend --></pre> +### Visualisation des noms de position -<div class="note"> - <p><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est un arbre et a un élément parent.</p> -</div> + <!-- beforebegin --> + <p> + <!-- afterbegin --> + foo + <!-- beforeend --> + </p> + <!-- afterend --> -<h2 id="Example">Exemple</h2> +> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est un arbre et a un élément parent. -<pre class="brush: js">// <div id="one">one</div> +## Exemple + +```js +// <div id="one">one</div> var d1 = document.getElementById('one'); -d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); +d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); // Ici la nouvelle structure est : -// <div id="one">one</div><div id="two">two</div></pre> +// <div id="one">one</div><div id="two">two</div> +``` -<h2 id="Browser_Compatibility">Notes</h2> +## Notes -<h3 id="Considérations_de_sécurité">Considérations de sécurité</h3> +### Considérations de sécurité -<p>Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.</p> +Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée. -<p>Il est recommandé de ne pas utiliser <code>insertAdjacentHTML</code> lors de l'insertion de texte brut; à la place, utilisez la propriété <code>node.textContent</code> ou la méthode <code>node.insertAdjacentText()</code>. Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.</p> +Il est recommandé de ne pas utiliser `insertAdjacentHTML` lors de l'insertion de texte brut; à la place, utilisez la propriété `node.textContent` ou la méthode `node.insertAdjacentText()`. Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut. -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td> - <td>{{ Spec2('DOM Parsing') }}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}} | {{ Spec2('DOM Parsing') }} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Element.insertAdjacentHTML")}}</p> +{{Compat("api.Element.insertAdjacentHTML")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("Element.insertAdjacentText()")}}</li> - <li><a href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a> par Henri Sivonen y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.</li> -</ul> +- {{domxref("Element.insertAdjacentElement()")}} +- {{domxref("Element.insertAdjacentText()")}} +- [hacks.mozilla.org guest post](https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/) par Henri Sivonen y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas. diff --git a/files/fr/web/api/element/insertadjacenttext/index.md b/files/fr/web/api/element/insertadjacenttext/index.md index f0ab71ddad..2ecca80491 100644 --- a/files/fr/web/api/element/insertadjacenttext/index.md +++ b/files/fr/web/api/element/insertadjacenttext/index.md @@ -10,118 +10,89 @@ tags: - Texte translation_of: Web/API/Element/insertAdjacentText --- -<p>{{APIRef("DOM")}}</p> - -<p>La méthode <code>insertAdjacentText()</code> insère un noeud texte donné à une position donnée par rapport à l'élément sur lequel elle est appelé.</p> - -<h2 id="Syntax">Syntaxe</h2> - -<pre><em>element</em>.insertAdjacentText(<em>position</em>, <em>element</em>);</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt>position</dt> - <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la position par rapport à l'<code>element</code> ; elle doit être l'une des chaînes suivantes : - <ul> - <li><code>'beforebegin'</code> : avant l'<code>element</code> lui-même ;</li> - <li><code>'afterbegin'</code> : à l'intérieur de l'<code>element</code>, avant son premier enfant ;</li> - <li><code>'beforeend'</code> : à l'intérieur de l'<code>element</code>, avant son dernier enfant ;</li> - <li><code>'afterend'</code> : après l'<code>element</code> lui-même.</li> - </ul> - </dd> - <dt>element</dt> - <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le texte à insérer dans l'arbre.</dd> -</dl> - -<h3 id="Valeur_renvoyée">Valeur renvoyée</h3> - -<p>Vide.</p> - -<h3 id="Exceptions">Exceptions</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Exception</th> - <th scope="col">Explication</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>SyntaxError</code></td> - <td>La <code>position</code> indiquée n'est pas une valeur reconnue.</td> - </tr> - </tbody> -</table> - -<h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3> - -<pre><!-- beforebegin --> -<p> -<!-- afterbegin> --> -machin -<!-- beforeend --> -</p> -<!-- afterend --></pre> - -<div class="note"> - <p><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.</p> -</div> - -<h2 id="Example">Exemple</h2> - -<pre class="brush: js">beforeBtn.addEventListener('click', function() { +{{APIRef("DOM")}} + +La méthode `insertAdjacentText()` insère un noeud texte donné à une position donnée par rapport à l'élément sur lequel elle est appelé. + +## Syntaxe + + element.insertAdjacentText(position, element); + +### Paramètres + +- position + + - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la position par rapport à l'`element` ; elle doit être l'une des chaînes suivantes : + + - `'beforebegin'` : avant l'`element` lui-même ; + - `'afterbegin'` : à l'intérieur de l'`element`, avant son premier enfant ; + - `'beforeend'` : à l'intérieur de l'`element`, avant son dernier enfant ; + - `'afterend'` : après l'`element` lui-même. + +- element + - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant le texte à insérer dans l'arbre. + +### Valeur renvoyée + +Vide. + +### Exceptions + +| Exception | Explication | +| ------------- | ----------------------------------------------------- | +| `SyntaxError` | La `position` indiquée n'est pas une valeur reconnue. | + +### Visualisation des noms de position + + <!-- beforebegin --> + <p> + <!-- afterbegin> --> + machin + <!-- beforeend --> + </p> + <!-- afterend --> + +> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent. + +## Exemple + +```js +beforeBtn.addEventListener('click', function() { para.insertAdjacentText('afterbegin',textInput.value); }); afterBtn.addEventListener('click', function() { para.insertAdjacentText('beforeend',textInput.value); -});</pre> - -<p>Jetez un œil à notre démo <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html">insertAdjacentText.html</a> sur GitHub (voir le <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html">code source</a> aussi). Ici, nous avons un simple paragraphe. Vous pouvez entrer du texte dans l'élément de formulaire, puis presser les boutons <em>Insert before</em> (<em>insère avant</em>) et <em>Insert after</em> (<em>insère après</em>) pour l'insérer avant ou après le texte de paragraphe existant en utilisant <code>insertAdjacentText()</code>. Notez que le nœud texte existant n'y est pas ajouté — d'autres nœuds de texte sont créés contenant le nouvel ajout.</p> - -<h2 id="Émulation">Émulation</h2> - -<p>Vous pouvez utiliser une émulation de la méthode <code>insertAdjacentText()</code> dans Internet Explorer 5.5 (et peut-être antérieur) et supérieur avec le code suivant :</p> - -<pre>if (!Element.prototype.insertAdjacentText) - Element.prototype.insertAdjacentText = function(type, txt){ - this.insertAdjacentHTML( - type, - (txt+'') // convertir en chaîne de caractères - .replace(/&/g, '&amp;') // intégrer des symboles d'esperluette - .replace(/</g, '&lt;') // intégrer les symboles "plus petit que" - ) - } -</pre> - -<h2 id="Specification">Spécification</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}</td> - <td>{{ Spec2('DOM WHATWG') }}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.insertAdjacentText")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("Element.insertAdjacentHTML()")}}</li> -</ul> +}); +``` + +Jetez un œil à notre démo [insertAdjacentText.html](https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html) sur GitHub (voir le [code source](https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html) aussi). Ici, nous avons un simple paragraphe. Vous pouvez entrer du texte dans l'élément de formulaire, puis presser les boutons _Insert before_ (_insère avant_) et _Insert after_ (_insère après_) pour l'insérer avant ou après le texte de paragraphe existant en utilisant `insertAdjacentText()`. Notez que le nœud texte existant n'y est pas ajouté — d'autres nœuds de texte sont créés contenant le nouvel ajout. + +## Émulation + +Vous pouvez utiliser une émulation de la méthode `insertAdjacentText()` dans Internet Explorer 5.5 (et peut-être antérieur) et supérieur avec le code suivant : + + if (!Element.prototype.insertAdjacentText) + Element.prototype.insertAdjacentText = function(type, txt){ + this.insertAdjacentHTML( + type, + (txt+'') // convertir en chaîne de caractères + .replace(/&/g, '&') // intégrer des symboles d'esperluette + .replace(/</g, '<') // intégrer les symboles "plus petit que" + ) + } + +## Spécification + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}} | {{ Spec2('DOM WHATWG') }} | | + +## Compatibilité des navigateurs + +{{Compat("api.Element.insertAdjacentText")}} + +## Voir aussi + +- {{domxref("Element.insertAdjacentElement()")}} +- {{domxref("Element.insertAdjacentHTML()")}} diff --git a/files/fr/web/api/element/localname/index.md b/files/fr/web/api/element/localname/index.md index d64738b272..8123b9bf3d 100644 --- a/files/fr/web/api/element/localname/index.md +++ b/files/fr/web/api/element/localname/index.md @@ -11,96 +11,78 @@ tags: - local translation_of: Web/API/Element/localName --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>La propriété en lecture seule <code><strong>Element.localName</strong></code> renvoie la partie locale du nom qualifié d'un élément.</p> +La propriété en lecture seule **`Element.localName`** renvoie la partie locale du nom qualifié d'un élément. -<div class="note"> -<p><strong>Note :</strong> Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.</p> -</div> +> **Note :** Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName -</pre> + name = element.localName -<h3 id="Valeur_renvoyée">Valeur renvoyée</h3> +### Valeur renvoyée -<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la partie locale du nom qualifié de l'élément.</p> +Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la partie locale du nom qualifié de l'élément. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>(Doit être servi avec un type de contenu XML, tel que <code>text/xml</code> ou <code>application/xhtml+xml</code>.)</p> +(Doit être servi avec un type de contenu XML, tel que `text/xml` ou `application/xhtml+xml`.) -<pre class="brush:xml"><html xmlns="http://www.w3.org/1999/xhtml" - xmlns:svg="http://www.w3.org/2000/svg"> -<head> - <script type="application/javascript"><![CDATA[ +```xml +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <script type="application/javascript"><![CDATA[ function test() { var text = document.getElementById('text'); var circle = document.getElementById('circle'); - text.value = "<svg:circle> has:\n" + + text.value = "<svg:circle> has:\n" + "localName = '" + circle.localName + "'\n" + "namespaceURI = '" + circle.namespaceURI + "'"; } - ]]></script> -</head> -<body onload="test()"> - <svg:svg version="1.1" + ]]></script> +</head> +<body onload="test()"> + <svg:svg version="1.1" width="100px" height="100px" - viewBox="0 0 100 100"> - <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> - </svg:svg> - <textarea id="text" rows="4" cols="55"/> -</body> -</html> -</pre> - -<h2 id="Notes">Notes</h2> - -<p>Le nom local d'un noeud est la partie du nom qualifié du noeud qui arrive après le signe deux points. Les noms qualifiés sont typiquement utilisés dans XML comme partie de l'espace de noms des documents particuliers XML. Par exemple, dans le nom qualifié <code>ecomm:partners</code>, <code>partners</code> est le nom local et <code>ecomm</code> est le préfixe :</p> - -<pre class="brush:xml"><ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> - <ecomm:partners> - <ecomm:partner id="1001">Tony's Syrup Warehouse - </ecomm:partner> - </ecomm:partner> -</ecomm:business> -</pre> - -<div class="note"> -<p><strong>Note :</strong> Dans {{Gecko("1.9.2")}} et antérieurs, la propriété renvoie la version majuscule du nom local pour les éléments HTML dans les DOM HTML (par opposition aux éléments XHTML dans les DOM XML). Dans les versions plus tardives, en conformité avec HTML5, la propriété renvoie dans la cas du stockage interne du DOM, en minuscule pour les éléments HTML dans les DOM HTML et les éléments XHTML dans les DOM XML. La propriété {{domxref("element.tagName","tagName")}} continue à renvoyer la casse majuscule pour les éléments HTML dans les DOM HTML.</p> -</div> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-localname', 'Element.localName')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.localName")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("Element.namespaceURI")}}</li> - <li>{{domxref("Element.prefix")}}</li> - <li>{{domxref("Attr.localName")}}</li> - <li>{{domxref("Node.localName")}}</li> -</ul> + viewBox="0 0 100 100"> + <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> + </svg:svg> + <textarea id="text" rows="4" cols="55"/> +</body> +</html> +``` + +## Notes + +Le nom local d'un noeud est la partie du nom qualifié du noeud qui arrive après le signe deux points. Les noms qualifiés sont typiquement utilisés dans XML comme partie de l'espace de noms des documents particuliers XML. Par exemple, dans le nom qualifié `ecomm:partners`, `partners` est le nom local et `ecomm` est le préfixe : + +```xml +<ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> + <ecomm:partners> + <ecomm:partner id="1001">Tony's Syrup Warehouse + </ecomm:partner> + </ecomm:partner> +</ecomm:business> +``` + +> **Note :** Dans {{Gecko("1.9.2")}} et antérieurs, la propriété renvoie la version majuscule du nom local pour les éléments HTML dans les DOM HTML (par opposition aux éléments XHTML dans les DOM XML). Dans les versions plus tardives, en conformité avec HTML5, la propriété renvoie dans la cas du stockage interne du DOM, en minuscule pour les éléments HTML dans les DOM HTML et les éléments XHTML dans les DOM XML. La propriété {{domxref("element.tagName","tagName")}} continue à renvoyer la casse majuscule pour les éléments HTML dans les DOM HTML. + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-localname', 'Element.localName')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Element.localName")}} + +## Voir aussi + +- {{domxref("Element.namespaceURI")}} +- {{domxref("Element.prefix")}} +- {{domxref("Attr.localName")}} +- {{domxref("Node.localName")}} diff --git a/files/fr/web/api/element/matches/index.md b/files/fr/web/api/element/matches/index.md index 21e4a2ee68..40ef961ca7 100644 --- a/files/fr/web/api/element/matches/index.md +++ b/files/fr/web/api/element/matches/index.md @@ -7,102 +7,84 @@ tags: - Selector translation_of: Web/API/Element/matches --- -<p>{{ APIRef("DOM") }}</p> +{{ APIRef("DOM") }} -<p><code>La méthode<strong> </strong></code><strong><code>element.matches()</code></strong> renvoie <code>true</code> lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramêtre; sinon, elle renvoie <code>false</code>.</p> +`La méthode `**`element.matches()`** renvoie `true` lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramêtre; sinon, elle renvoie `false`. -<div class="warning"> -<p><strong>Attention :</strong> Certains navigateurs implémentent cette méthode sous le nom <code>matchesSelector()</code> non-standardisé et préfixé.</p> -</div> +> **Attention :** Certains navigateurs implémentent cette méthode sous le nom `matchesSelector()` non-standardisé et préfixé. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>var result</em> = <em>element</em>.matches(selectorString); -</pre> + var result = element.matches(selectorString); -<ul> - <li><code>result</code> contient la valeur retournée <code>true</code> ou <code>false</code>.</li> - <li><code>selectorString</code> est une chaîne définissant le sélecteur à tester sur l'élément.</li> -</ul> +- `result` contient la valeur retournée `true` ou `false`. +- `selectorString` est une chaîne définissant le sélecteur à tester sur l'élément. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush: html"><ul id="birds"> - <li>perroquet amazone</li> - <li class="endangered">aigle des Philippines</li> - <li>pélican blanc</li> -</ul> +```html +<ul id="birds"> + <li>perroquet amazone</li> + <li class="endangered">aigle des Philippines</li> + <li>pélican blanc</li> +</ul> -<script type="text/javascript"> +<script type="text/javascript"> var birds = document.getElementsByTagName('li'); - for (var i = 0; i < birds.length; i++) { + for (var i = 0; i < birds.length; i++) { if (birds[i].matches('.endangered')) { console.log('Le - ' + birds[i].textContent + '- est en voie de disparition !'); } } -</script></pre> +</script> +``` -<p>Ce code affichera l'alerte "Le - aigle des Philippines - est en voie de disparition !" sur la console, puisque l'élèment possède l'attribut<code> class </code>de valeur <code>endangered</code>.</p> +Ce code affichera l'alerte "Le - aigle des Philippines - est en voie de disparition !" sur la console, puisque l'élèment possède l'attribut` class `de valeur `endangered`. -<h2 id="Exceptions">Exceptions</h2> +## Exceptions -<dl> - <dt><code>SYNTAX_ERR</code></dt> - <dd>Lorsque la chaîne passée en paramêtre défini sélecteur invalide.</dd> -</dl> +- `SYNTAX_ERR` + - : Lorsque la chaîne passée en paramêtre défini sélecteur invalide. -<h2 id="Polyfill">Polyfill</h2> +## Polyfill -<p>Pour les navigateurs qui ne supportent pas <code>Element.matches()</code> ou <code>Element.matchesSelector()</code>, mais fournissent le support de<code> document.querySelectorAll()</code>, il existe un <em>polyfill</em> :</p> +Pour les navigateurs qui ne supportent pas `Element.matches()` ou `Element.matchesSelector()`, mais fournissent le support de` document.querySelectorAll()`, il existe un _polyfill_ : -<pre>if (!Element.prototype.matches) { - Element.prototype.matches = - Element.prototype.matchesSelector || - Element.prototype.mozMatchesSelector || - Element.prototype.msMatchesSelector || - Element.prototype.oMatchesSelector || - Element.prototype.webkitMatchesSelector || - function(s) { - var matches = (this.document || this.ownerDocument).querySelectorAll(s), - i = matches.length; - while (--i >= 0 && matches.item(i) !== this) {} - return i > -1; - }; -}</pre> + if (!Element.prototype.matches) { + Element.prototype.matches = + Element.prototype.matchesSelector || + Element.prototype.mozMatchesSelector || + Element.prototype.msMatchesSelector || + Element.prototype.oMatchesSelector || + Element.prototype.webkitMatchesSelector || + function(s) { + var matches = (this.document || this.ownerDocument).querySelectorAll(s), + i = matches.length; + while (--i >= 0 && matches.item(i) !== this) {} + return i > -1; + }; + } -<p>Cependant, étant donné la possibilité de prendre en charge les anciens navigateurs, les éléments suivants devraient suffire pour la plupart (sinon tous) des cas pratiques (c'est-à-dire le support IE9 +).</p> +Cependant, étant donné la possibilité de prendre en charge les anciens navigateurs, les éléments suivants devraient suffire pour la plupart (sinon tous) des cas pratiques (c'est-à-dire le support IE9 +). -<pre class="brush: html">if (!Element.prototype.matches) { +```html +if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.msMatchesSelector; -}</pre> +} +``` -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - </tr> - </tbody> -</table> +| Spécification | Status | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}} | {{Spec2('DOM WHATWG')}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.Element.matches")}} +## Voir aussi -<p>{{Compat("api.Element.matches")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">La syntaxe des sélecteurs</a></li> - <li>autres méthodes qui utilisent les sélecteurs : {{domxref("element.querySelector()")}} et {{domxref("element.closest()")}}.</li> -</ul> +- [La syntaxe des sélecteurs](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs) +- autres méthodes qui utilisent les sélecteurs : {{domxref("element.querySelector()")}} et {{domxref("element.closest()")}}. diff --git a/files/fr/web/api/element/mousedown_event/index.md b/files/fr/web/api/element/mousedown_event/index.md index 98ab94299d..f186be6852 100644 --- a/files/fr/web/api/element/mousedown_event/index.md +++ b/files/fr/web/api/element/mousedown_event/index.md @@ -10,79 +10,61 @@ tags: - mousedown translation_of: Web/API/Element/mousedown_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'évènement <strong><code>mousedown</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.</p> +L'évènement **`mousedown`** est déclenché à partir d'un {{domxref("Element")}} lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément. -<div class="note"> -<p><strong>Note :</strong> Cet évènement est différent de {{domxref("Element/click_event", "click")}}. <code>click</code> est déclenché après qu'un clic "entier" ait eu lieu (c'est-à-dire quand le bouton a été pressé puis relaché tandis que le pointeur était sur le même élément). <code>mousedown</code> est déclenché dès qu'on appuie sur le bouton.</p> -</div> +> **Note :** Cet évènement est différent de {{domxref("Element/click_event", "click")}}. `click` est déclenché après qu'un clic "entier" ait eu lieu (c'est-à-dire quand le bouton a été pressé puis relaché tandis que le pointeur était sur le même élément). `mousedown` est déclenché dès qu'on appuie sur le bouton. <table class="properties"> - <tbody> - <tr> - <th scope="row">Se propage/remonte dans le DOM</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété pour la gestion d'évènement</th> - <td>{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Se propage/remonte dans le DOM</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété pour la gestion d'évènement</th> + <td> + {{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}} + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}</p> +{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - </tr> - </thead> - <thead> - <tr> - <td>{{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </thead> -</table> +| Spécification | État | +| ---------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}} | {{Spec2('UI Events')}} | +| {{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}} | {{Spec2('DOM3 Events')}} | + +## Compatibilité des navigateurs -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +{{Compat("api.Element.mousedown_event")}} -<p>{{Compat("api.Element.mousedown_event")}}</p> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> +- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements) +- D'autres évènements connexes -<ul> - <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li> - <li>D'autres évènements connexes - <ul> - <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li> - <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li> - <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li> - <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li> - </ul> - </li> -</ul> + - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) + - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) + - [`click`](/fr/docs/Web/API/Element/click_event) + - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event) + - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) + - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event) + - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) + - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) + - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) diff --git a/files/fr/web/api/element/mouseenter_event/index.md b/files/fr/web/api/element/mouseenter_event/index.md index ba2623f7c6..8bd5315202 100644 --- a/files/fr/web/api/element/mouseenter_event/index.md +++ b/files/fr/web/api/element/mouseenter_event/index.md @@ -10,84 +10,92 @@ tags: - mouseenter translation_of: Web/API/Element/mouseenter_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'évènement <strong><code>mouseenter</code></strong> est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.</p> +L'évènement **`mouseenter`** est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément. <table class="properties"> - <tbody> - <tr> - <th scope="row">Se propage/remonte dans le DOM</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété pour la gestion d'évènement</th> - <td>{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Se propage/remonte dans le DOM</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété pour la gestion d'évènement</th> + <td> + {{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}} + </td> + </tr> + </tbody> </table> -<h2 id="Notes_dutilisation">Notes d'utilisation</h2> +## Notes d'utilisation -<p>Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, <code>mouseenter</code> est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément.</p> +Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, `mouseenter` est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément. + -<img src="mouseenter.png"> -<p><code>mouseenter</code> est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte.</p> +`mouseenter` est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte. -<img src="mouseover.png"> -<p>Un seul évènement <code>mouseover</code> est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.</p> + -<p>Avec des hiérarchies profondes, le nombre d'évènements <code>mouseenter</code> envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements <code>mouseover</code>.</p> +Un seul évènement `mouseover` est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine. -<p>Avec la combinaison de <code>mouseenter</code> et <code>mouseleave</code> (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}.</p> +Avec des hiérarchies profondes, le nombre d'évènements `mouseenter` envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements `mouseover`. -<h2 id="Exemples">Exemples</h2> +Avec la combinaison de `mouseenter` et `mouseleave` (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}. -<p>La documentation <a href="/fr/docs/Web/API/Element/mouseover_event#Exemples"><code>mouseover</code></a> illustre la différence entre <code>mouseover</code> et <code>mouseenter</code>.</p> +## Exemples -<p>Ici, on utilise <code>mouseenter</code> pour modifier la bordure d'un <code>div</code> lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements <code>mouseenter</code> ouor <code>mouseleave</code> event.</p> +La documentation [`mouseover`](/fr/docs/Web/API/Element/mouseover_event#Exemples) illustre la différence entre `mouseover` et `mouseenter`. -<h3 id="HTML">HTML</h3> +Ici, on utilise `mouseenter` pour modifier la bordure d'un `div` lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements `mouseenter` ouor `mouseleave` event. -<pre class="brush: html"><div id='mouseTarget'> - <ul id="unorderedList"> - <li>No events yet!</li> - </ul> -</div></pre> +### HTML -<h3 id="CSS">CSS</h3> +```html +<div id='mouseTarget'> + <ul id="unorderedList"> + <li>No events yet!</li> + </ul> +</div> +``` -<p>On met en forme le <code>div</code> pour le rendre plus visible.</p> +### CSS -<pre class="brush: css">#mouseTarget { +On met en forme le `div` pour le rendre plus visible. + +```css +#mouseTarget { box-sizing: border-box; width:15rem; border:1px solid #333; -}</pre> +} +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">var enterEventCount = 0; +```js +var enterEventCount = 0; var leaveEventCount = 0; const mouseTarget = document.getElementById('mouseTarget'); const unorderedList = document.getElementById('unorderedList'); -mouseTarget.addEventListener('mouseenter', e => { +mouseTarget.addEventListener('mouseenter', e => { mouseTarget.style.border = '5px dotted orange'; enterEventCount++; addListItem("C'est le " + enterEventCount + "ème mouseenter."); }); -mouseTarget.addEventListener('mouseleave', e => { +mouseTarget.addEventListener('mouseleave', e => { mouseTarget.style.border = '1px solid #333'; leaveEventCount++; addListItem("C'est le " + leaveEventCount + "ème mouseleave."); @@ -105,53 +113,36 @@ function addListItem(text) { // On ajoute l'élément de liste à la liste unorderedList.appendChild(newListItem); -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </tbody> -</table> +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | +| ---------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}} | {{Spec2('UI Events')}} | +| {{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}} | {{Spec2('DOM3 Events')}} | + +## Compatibilité des navigateurs + +{{Compat("api.Element.mouseenter_event")}} + +## Voir aussi + +- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements) +- D'autres évènements connexes -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.mouseenter_event")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li> - <li>D'autres évènements connexes - <ul> - <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li> - <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li> - <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li> - <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li> - <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li> - </ul> - </li> -</ul> + - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) + - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) + - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) + - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event) + - [`click`](/fr/docs/Web/API/Element/click_event) + - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event) + - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) + - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) + - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) + - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) diff --git a/files/fr/web/api/element/mouseleave_event/index.md b/files/fr/web/api/element/mouseleave_event/index.md index 2c9ee0d534..53e9bd5cb8 100644 --- a/files/fr/web/api/element/mouseleave_event/index.md +++ b/files/fr/web/api/element/mouseleave_event/index.md @@ -10,77 +10,86 @@ tags: - mouseleave translation_of: Web/API/Element/mouseleave_event --- -<p>{{APIRef}}</p> +{{APIRef}} -<p>L'évènement <strong><code>mouseleave</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.</p> +L'évènement **`mouseleave`** est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément. <table class="properties"> - <tbody> - <tr> - <th scope="row">Se propage/remonte dans le DOM</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété pour la gestion d'évènement</th> - <td>{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Se propage/remonte dans le DOM</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété pour la gestion d'évènement</th> + <td> + {{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}} + </td> + </tr> + </tbody> </table> -<p><code>mouseleave</code> et {{event('mouseout')}} se ressemblent mais <code>mouseleave</code> ne remonte pas dans le DOM tandis que <code>mouseout</code> remonte. <code>mouseleave</code> est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que <code>mouseout</code> est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent).</p> +`mouseleave` et {{event('mouseout')}} se ressemblent mais `mouseleave` ne remonte pas dans le DOM tandis que `mouseout` remonte. `mouseleave` est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que `mouseout` est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent). -<img src="mouseleave.png"> -<p>Un évènement <code>mouseleave</code> est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du <code><div></code> le plus haut dans la hiérarchie.</p> + -<img src="mouseout.png"> -<p>Un seul évènement <code>mouseout</code> est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine.</p> +Un évènement `mouseleave` est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du `<div>` le plus haut dans la hiérarchie. -<h2 id="Exemples">Exemples</h2> + -<p>Voir la documentation de <a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a> pour un exemple sur les différences entre <code>mouseout</code> et <code>mouseleave</code>.</p> +Un seul évènement `mouseout` est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine. -<p>Ici, on utilise l'évènement <code>mouseenter</code> pour modifier la bordure d'un élément <code>div</code> lorsque la souris rentre sur cet espace. Ensuite, on ajoute un élément à la liste avec le nombre d'évènements <code>mouseenter</code> et <code>mouseleave</code>.</p> +## Exemples -<h3 id="HTML">HTML</h3> +Voir la documentation de [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) pour un exemple sur les différences entre `mouseout` et `mouseleave`. -<pre class="brush: html"><div id='mouseTarget'> - <ul id="unorderedList"> - <li>Pas encore d'évènement !</li> - </ul> -</div></pre> +Ici, on utilise l'évènement `mouseenter` pour modifier la bordure d'un élément `div` lorsque la souris rentre sur cet espace. Ensuite, on ajoute un élément à la liste avec le nombre d'évènements `mouseenter` et `mouseleave`. -<h3 id="CSS">CSS</h3> +### HTML -<p>On met le <code>div</code> en forme afin de le rendre plus visible.</p> +```html +<div id='mouseTarget'> + <ul id="unorderedList"> + <li>Pas encore d'évènement !</li> + </ul> +</div> +``` -<pre class="brush: css">#mouseTarget { +### CSS + +On met le `div` en forme afin de le rendre plus visible. + +```css +#mouseTarget { box-sizing: border-box; width:15rem; border:1px solid #333; -}</pre> +} +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">var enterEventCount = 0; +```js +var enterEventCount = 0; var leaveEventCount = 0; const mouseTarget = document.getElementById('mouseTarget'); const unorderedList = document.getElementById('unorderedList'); -mouseTarget.addEventListener('mouseenter', e => { +mouseTarget.addEventListener('mouseenter', e => { mouseTarget.style.border = '5px dotted orange'; enterEventCount++; addListItem("Voici le nombre d'évènements mouseenter : " + enterEventCount + "."); }); -mouseTarget.addEventListener('mouseleave', e => { +mouseTarget.addEventListener('mouseleave', e => { mouseTarget.style.border = '1px solid #333'; leaveEventCount++; addListItem("Voici le nombre d'évènements mouseleave : " + leaveEventCount + "."); @@ -98,50 +107,35 @@ function addListItem(text) { // On ajoute le nouvel élément à la liste unorderedList.appendChild(newListItem); -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample('Exemples')}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - </tr> - <tr> - <td>{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </tbody> -</table> +} +``` + +### Résultat + +{{EmbedLiveSample('Exemples')}} + +## Spécifications + +| Spécification | État | +| ---------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}} | {{Spec2('UI Events')}} | +| {{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}} | {{Spec2('DOM3 Events')}} | + +## Compatibilité des navigateurs + +{{Compat("api.Element.mouseleave_event")}} + +## Voir aussi + +- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements) +- D'autres évènements connexes -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.mouseleave_event")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li> - <li>D'autres évènements connexes - <ul> - <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li> - <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li> - <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li> - <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li> - <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li> - </ul> - </li> -</ul> + - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) + - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) + - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) + - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event) + - [`click`](/fr/docs/Web/API/Element/click_event) + - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event) + - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) + - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) + - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) diff --git a/files/fr/web/api/element/mousemove_event/index.md b/files/fr/web/api/element/mousemove_event/index.md index d848446fb1..6f764d7592 100644 --- a/files/fr/web/api/element/mousemove_event/index.md +++ b/files/fr/web/api/element/mousemove_event/index.md @@ -11,62 +11,68 @@ tags: - mousemove translation_of: Web/API/Element/mousemove_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'évènement <code>mousemove</code> est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.</p> +L'évènement `mousemove` est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément. <table class="properties"> - <tbody> - <tr> - <th scope="row">Se propage/remonte dans le DOM</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété pour la gestion d'évènement</th> - <td>{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Se propage/remonte dans le DOM</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété pour la gestion d'évènement</th> + <td> + {{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}} + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, on utilise les évènements <code><a href="/fr/docs/Web/API/Element/mousedown_event">mousedown</a></code>, <code><a href="/fr/docs/Web/API/Element/mousemove_event">mousemove</a></code> et <code><a href="/fr/docs/Web/API/Element/mouseup_event">mouseup</a></code> pour permettre à l'utilisateur de dessiner sur un <a href="/fr/docs/Web/API/Canvas_API">canevas</a> HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire).</p> +Dans l'exemple suivant, on utilise les évènements [`mousedown`](/fr/docs/Web/API/Element/mousedown_event), [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) et [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) pour permettre à l'utilisateur de dessiner sur un [canevas](/fr/docs/Web/API/Canvas_API) HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire). -<p>Lors du chargement de la page, les constantes <code>myPics</code> et <code>context</code> sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante <code>rect</code> permet de stocker les coordonnées relatives du canevas par rapport à la page.</p> +Lors du chargement de la page, les constantes `myPics` et `context` sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante `rect` permet de stocker les coordonnées relatives du canevas par rapport à la page. -<p>Le dessin commence quand l'évènement <code>mousedown</code> est déclenché. On stocke les coordonnées du pointeur dans les variables <code>x</code> et <code>y</code> puis on passe la variable <code>isDrawing</code> à <code>true</code> pour indiquer qu'un dessin est en cours.</p> +Le dessin commence quand l'évènement `mousedown` est déclenché. On stocke les coordonnées du pointeur dans les variables `x` et `y` puis on passe la variable `isDrawing` à `true` pour indiquer qu'un dessin est en cours. -<p>Lorsque le pointeur se déplace sur la page, l'évènement <code>mousemove</code> est déclenché. Si <code>isDrawing</code> vaut <code>true</code>, le gestionnaire d'évènement appelle la fonction <code>drawLine()</code> afin de dessiner une ligne entre le point de coordonnées <code>x</code> et <code>y</code> (stockées dans ces variables) et la position actuelle (N.B. les coordonnées <code>x</code> et <code>y</code> sont "corrigées" avec la constante <code>rect</code> pour tenir compte du décalage entre le canevas et la page).</p> +Lorsque le pointeur se déplace sur la page, l'évènement `mousemove` est déclenché. Si `isDrawing` vaut `true`, le gestionnaire d'évènement appelle la fonction `drawLine()` afin de dessiner une ligne entre le point de coordonnées `x` et `y` (stockées dans ces variables) et la position actuelle (N.B. les coordonnées `x` et `y` sont "corrigées" avec la constante `rect` pour tenir compte du décalage entre le canevas et la page). -<p>Lorsque la fonction <code>drawLine()</code> a fini son exécution, on ajuste les coordonnées courante en les stockant dans <code>x</code> et <code>y</code>.</p> +Lorsque la fonction `drawLine()` a fini son exécution, on ajuste les coordonnées courante en les stockant dans `x` et `y`. -<p>Lorsque l'évènement <code>mouseup</code> est déclenché, on dessine le segment final du dessin en cours, on passe <code>x</code> et <code>y</code> à <code>0</code> puis on arrête le dessin en passant <code>isDrawing</code> à <code>false</code>.</p> +Lorsque l'évènement `mouseup` est déclenché, on dessine le segment final du dessin en cours, on passe `x` et `y` à `0` puis on arrête le dessin en passant `isDrawing` à `false`. -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><h1>Dessiner grâce aux évènements de souris</h1> -<canvas id="myPics" width="560" height="360"></canvas> -</pre> +```html +<h1>Dessiner grâce aux évènements de souris</h1> +<canvas id="myPics" width="560" height="360"></canvas> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">canvas { +```css +canvas { border: 1px solid black; width: 560px; height: 360px; -}</pre> +} +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de +```js +// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de // la souris entraîne un dessin sur le canevas let isDrawing = false; let x = 0; @@ -81,13 +87,13 @@ const rect = myPics.getBoundingClientRect(); // On ajoute les gestionnaires d'évènements pour mousedown, mousemove // et mouseup -myPics.addEventListener('mousedown', e => { +myPics.addEventListener('mousedown', e => { x = e.clientX - rect.left; y = e.clientY - rect.top; isDrawing = true; }); -myPics.addEventListener('mousemove', e => { +myPics.addEventListener('mousemove', e => { if (isDrawing === true) { drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top); x = e.clientX - rect.left; @@ -95,7 +101,7 @@ myPics.addEventListener('mousemove', e => { } }); -window.addEventListener('mouseup', e => { +window.addEventListener('mouseup', e => { if (isDrawing === true) { drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top); x = 0; @@ -112,50 +118,35 @@ function drawLine(context, x1, y1, x2, y2) { context.lineTo(x2, y2); context.stroke(); context.closePath(); -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples", 640, 450)}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - </tr> - <tr> - <td>{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </tbody> -</table> +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples", 640, 450)}} + +## Spécifications + +| Spécification | État | +| ---------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}} | {{Spec2('UI Events')}} | +| {{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}} | {{Spec2('DOM3 Events')}} | + +## Compatibilité des navigateurs + +{{Compat("api.Element.mousemove_event")}} + +## Voir aussi + +- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements) +- D'autres évènements connexes -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.mousemove_event")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li> - <li>D'autres évènements connexes - <ul> - <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li> - <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li> - <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li> - <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li> - </ul> - </li> -</ul> + - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) + - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) + - [`click`](/fr/docs/Web/API/Element/click_event) + - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event) + - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) + - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event) + - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) + - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) + - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) diff --git a/files/fr/web/api/element/mouseout_event/index.md b/files/fr/web/api/element/mouseout_event/index.md index 0e44a3ae9f..d26eb2047e 100644 --- a/files/fr/web/api/element/mouseout_event/index.md +++ b/files/fr/web/api/element/mouseout_event/index.md @@ -10,52 +10,56 @@ tags: - mouseout translation_of: Web/API/Element/mouseout_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'évènement <strong><code>mouseout</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils. <code>mouseout</code> est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément.</p> +L'évènement **`mouseout`** est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils. `mouseout` est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément. <table class="properties"> - <tbody> - <tr> - <th scope="row">Se propage/remonte dans le DOM</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété pour la gestion d'évènements</th> - <td>{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Se propage/remonte dans le DOM</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété pour la gestion d'évènements</th> + <td> + {{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}} + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, on illustre la différence entre <code>mouseout</code> et <a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a>. Ce dernier est ajouté à {{HTMLElement("ul")}} pour colorer la liste en violet lorsque la souris quitte <code><ul></code>. <code>mouseout</code> est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.</p> +Dans l'exemple suivant, on illustre la différence entre `mouseout` et [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event). Ce dernier est ajouté à {{HTMLElement("ul")}} pour colorer la liste en violet lorsque la souris quitte `<ul>`. `mouseout` est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte. -<p>En essayant cet exemple, vous pourrez voir que <code>mouseout</code> |